sis_zhfx/src/views/MalfunctionWarning/diagnose.vue

<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>