齿轮箱故障诊断

src/views/MalfunctionWarning/diagnose.vue

@@ -0,0 +1,211 @@
+<template>
+	<div>
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">场站：</div>
+					<div class="search-input">
+						<el-select v-model="station" placeholder="请选择" popper-class="select" @change="stationChange">
+							<el-option v-for="item in stations" :key="item.id" :value="item.id" :label="item.name">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">风机型号：</div>
+					<div class="search-input">
+						<el-select v-model="model" multiple collapse-tags clearable placeholder="请选择"
+							popper-class="select">
+							<el-option v-for="item in fjxh" :key="item.value" :value="item.value" :label="item.label">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">风机：</div>
+					<div class="search-input">
+						<el-select v-model="fj" collapse-tags placeholder="请选择" popper-class="select">
+							<el-option v-for="item in fjArr" :key="item.id" :value="item.id" :label="item.name">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-actions">
+					<button class="btn" @click="query">查询</button>
+				</div>
+			</div>
+		</div>
+		<el-row type="flex">
+			<el-col :span="12">
+				<el-row type="flex">
+					<el-col :span="12">
+						<div style="height: 60vh; overflow-y: auto; margin-top: 30px">
+						    <div class="body" v-for="(item, index) in ccS" :key="index" @click="chooses(index)" >
+						      <div class="left">
+						        <div :class="index === current ? 'round_on' : 'round'"></div>
+						        <div class="line"></div>
+						      </div>
+						      <div class="right">
+						        <div>{{ item.showTime }}</div>
+						        <div class="content">
+						          <div class="names">
+						            {{ item.showName || item.ducumentName }}
+						          </div>
+						          <button class="btn" @click="deleteDate(item.name)">
+						            删除
+						          </button>
+						        </div>
+						      </div>
+						    </div>
+						</div>
+					</el-col>
+					<el-col :span="12">
+						
+					</el-col>
+				</el-row>
+				
+				
+			</el-col>
+		</el-row>
+	</div>
+</template>
+<script>
+	export default {
+		components: {
+
+		},
+		created() {
+			this.startAjax();
+		},
+		data() {
+			return {
+				stations: [],
+				station: '',
+				model: [],
+				fjxh: [],
+				fjxhArr: [],
+				fjArr: [], //风机
+				fj: ''
+			};
+		},
+		methods: {
+			stationChange() {
+				let fjxh = [];
+				this.fjxhArr.forEach(ele => {
+					if (ele.id == this.station) {
+						ele.value.forEach(ele2 => {
+							fjxh.push({
+								label: ele2,
+								value: ele2
+							})
+						})
+						this.model = ele.value;
+					}
+				})
+				this.fjxh = fjxh;
+			},
+			async startAjax() {
+				var that = this;
+				await that.API.requestData({
+					method: "GET",
+					baseURL: "http://192.168.1.18:9002/",
+					subUrl: "basic/station/all",
+					success(res) {
+						that.stations = res.data;
+						that.station = res.data[1].id;
+						let fjxhArr = [];
+						let model = [],
+							fjxh = [];
+						res.data.forEach(ele => {
+							fjxhArr.push({
+								id: ele.id,
+								value: ele.model.split("/")
+							})
+							if (ele.id == "NSS_FDC") {
+								model = ["UP82"];
+								fjxh.push({
+									label: "UP82",
+									value: "UP82"
+								})
+							}
+						})
+						that.fjxhArr = fjxhArr;
+						that.model = model;
+						that.fjxh = fjxh;
+					},
+				});
+				// that.list()
+			},
+		},
+		watch: {
+			station(e) {
+				let that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/",
+					subUrl: "benchmarking/wtList",
+					data: {
+						wpid: e,
+					},
+					success(res) {
+						that.fjArr = res.data;
+						that.fj = res.data[0].id;
+					},
+				});
+			}
+		}
+	};
+</script>
+<style lang="less" scoped>
+.body {
+  display: flex;
+  flex-direction: row;
+  height: 75px;
+  width: 100%;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    margin-left: 30px;
+
+    .round_on {
+      width: 20px;
+      height: 27px;
+      border-radius: 50%;
+      background-color: rgb(30, 209, 45);
+    }
+    .round {
+      width: 20px;
+      height: 27px;
+      border-radius: 50%;
+      background-color: crimson;
+    }
+
+    .line {
+      width: 2px;
+      height: 100%;
+      background-color: #ffffff;
+    }
+  }
+
+  .right {
+    width: 100%;
+    margin-left: 20px;
+
+    .content {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+
+      .btn {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+</style>