废危车辆修改提交

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "preinstall": "pnpm i"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
@@ -38,6 +37,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.8.1",
+    "less-loader": "^13.0.0",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>汾西县黄河流域农业面源污染平台</title>
+    <title>武乡县黄河流域农业面源污染平台</title>
     <link rel="stylesheet" href="<%= BASE_URL %>reset.css">
 <!--    <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">-->
 <!--    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->

src/api/index.js

@@ -111,6 +111,24 @@ export function getSoilSummry(data) {
       method: 'get',
       headers: {},
     })
+  }
+     // 危废车辆分页
+   export function vehicleList(obj) {
+    return requests({
+      url: '/zh-applet-admin/appmana/bigScreen/vehicleList',
+      method: 'post',
+      headers: {},
+      data:obj
+    })
+  }
+     // 危废车辆坐标
+   export function gpsRecordPage(obj) {
+    return requests({
+      url: '/zh-applet-admin/appmana/bigScreen/gpsRecordPage',
+      method: 'post',
+      headers: {},
+      data:obj
+    })
   }
   // 查询设备下各检测项的历史数据
   export function survItemSummary(obj) {
@@ -138,3 +156,40 @@ export function getMaintainLog(params) {
     params
   })
 }
+
+
+/**
+ * //监测预警数据
+ * stationCode=S_1        站点编号
+ * &deployId=1679816437477228546  设备ID
+ * &pageNo=1                                      页号
+ * &pageSize=10                                   页宽
+ * &yearStr=2026                                  年份
+ *
+ * 回执
+ * {
+ *                                 "id": "2027671112451649538",
+ *                                 "tenantId": "租户",
+ *                                 "deployCode": "16111113",
+ *                                 "deployId": "1679816437477228546",
+ *                                 "alertTime": "告警时间",
+ *                                                "itemCode":"检测项编号"
+ *                                 "itemName": "钾离子",
+ *                                 "deviceName": "设备名称",
+ *                                                 "fullDeviceName":"带站点名称的设备名字"
+ *                                                 "readStatus":"low=偏低，high=偏高",
+ *                                                 "survUnit":"单位"
+ *                                                "survValue":"监测值"
+ *                                                "nomalValue":"正常值范围"
+ *                         }
+ * @param params
+ * @returns {*}
+ */
+export function doGetAlertRecord(params) {
+  return requests({
+    url: '/appmana/bigScreen/alertRecord',
+    method: 'get',
+    headers: {},
+    params
+  })
+}

src/api/request.js

@@ -9,6 +9,7 @@ const requests = axios.create({
 // 请求拦截器
 requests.interceptors.request.use((config)=>{
     config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token
+    config.headers['X-Tenant-Id'] = '1001'
     return config
 },(error)=>{
     return Promise.reject(new Error('faile'));

src/assets/css/index.css

@@ -909,4 +909,210 @@
 }
 .amap-copyright {
 	opacity:0;
-}
+}
+
+/* 危废车辆列表 */
+/* 下拉菜单容器 */
+.vehicle-dropdown-dark {
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 24%;
+}
+
+/* 按钮样式 - 暗色科技风格 */
+.vehicle-dropdown-btn-dark {
+  background: rgba(0, 40, 80, 0.8) !important;
+  border: 1px solid #008cff !important;
+  border-radius: 4px !important;
+  padding: 12px 20px !important;
+  color: #00d4ff !important;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  letter-spacing: 1px;
+  transition: all 0.3s ease;
+}
+
+.vehicle-dropdown-btn-dark:hover {
+  background: rgba(0, 212, 255, 0.15) !important;
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
+  border-color: #00d4ff !important;
+}
+
+.vehicle-dropdown-btn-dark i {
+  margin: 0 5px;
+}
+
+/* 下拉菜单样式 */
+.vehicle-dropdown-menu-dark {
+  background: rgba(0, 20, 40, 0.95) !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  border-radius: 4px !important;
+  padding: 5px 0 !important;
+  box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important;
+}
+
+/* 下拉菜单项样式 */
+.vehicle-dropdown-item-dark {
+  color: #8bb4d0 !important;
+  padding: 0px 24px !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important;
+  transition: all 0.3s ease !important;
+  font-size: 14px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  cursor: pointer;
+}
+
+.vehicle-dropdown-item-dark:last-child {
+  border-bottom: none !important;
+}
+
+.vehicle-dropdown-item-dark:hover {
+  background: rgba(0, 212, 255, 0.1) !important;
+  color: #00d4ff !important;
+  padding-left: 30px !important;
+}
+
+/* 圆点指示器 */
+.vehicle-dot-dark {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #00d4ff;
+  border-radius: 50%;
+  margin-right: 10px;
+  flex-shrink: 0;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+.vehicle-dropdown-item-dark:hover .vehicle-dot-dark {
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
+  transform: scale(1.2);
+}
+
+/* 序号标签 */
+.vehicle-number-dark {
+  background: rgba(0, 212, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  color: rgba(0, 212, 255, 0.5);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+.vehicle-dropdown-item-dark:hover .vehicle-number-dark {
+  background: rgba(0, 212, 255, 0.2);
+  color: #00d4ff;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .vehicle-dropdown-dark {
+    top: 80px;
+    left: 15%;
+  }
+  
+  .vehicle-dropdown-btn-dark {
+    padding: 6px 15px !important;
+    font-size: 14px;
+  }
+  
+  .vehicle-dropdown-item-dark {
+    padding: 8px 16px !important;
+    font-size: 13px !important;
+  }
+}
+
+/* 动画效果 */
+@keyframes glowPulse {
+  0% {
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  }
+}
+
+.vehicle-dropdown-btn-dark {
+  animation: glowPulse 3s infinite;
+}
+
+.vehicle-dropdown-btn-dark:hover {
+  animation: none;
+}
+/* 额外炫酷效果 - 鼠标悬停时的光晕动画 */
+.vehicle-dropdown-item-dark::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 3px;
+  height: 100%;
+  background: #00d4ff;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+}
+
+.vehicle-dropdown-item-dark:hover::before {
+  transform: scaleY(1);
+}
+
+.vehicle-dropdown-item-dark {
+  position: relative;
+  overflow: hidden;
+}
+
+/* 悬停时文字发光效果 */
+.vehicle-dropdown-item-dark:hover {
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+/* 点击波纹效果 */
+.vehicle-dropdown-item-dark:active {
+  transform: scale(0.98);
+}
+/* ==================== 信息窗口样式（深色科技风） ==================== */
+:deep(.amap-info-content) {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+:deep(.amap-info-sharp) {
+  display: none !important;
+}
+
+:deep(.amap-info-close) {
+  color: #00d4ff !important;
+  background: rgba(0, 20, 40, 0.8) !important;
+  border-radius: 50% !important;
+  width: 28px !important;
+  height: 28px !important;
+  line-height: 28px !important;
+  text-align: center !important;
+  right: 8px !important;
+  top: 8px !important;
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  font-size: 16px !important;
+}
+
+:deep(.amap-info-close:hover) {
+  background: rgba(255, 69, 0, 0.2) !important;
+  color: #FF4500 !important;
+  border-color: #FF4500 !important;
+}
+
+:deep(.amap-info-content) {
+  background: transparent !important;
+  padding: 0 !important;
+}
+/* 危废车辆列表完成 */

src/components/LiulDialog.vue

@@ -0,0 +1,869 @@
+<template>
+  <!-- 长期监测弹窗 -->
+  <el-dialog
+      width="75%"
+      top="130px"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible.sync="trzddialogTableVisible"
+      @close="closeDialog"
+  >
+    <div class="xintc">
+      <div class="tz_cov_chanye" style="height: 770px"   v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
+        <img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/>
+        <div class="tz_cov_topchanye">
+          <span class="tz_cov_top_tit">{{liulDataId.name}}</span>
+        </div>
+        <el-row class="tz_cov_topyqjs">
+          <el-col :span="9">
+            <div class="grid-content bg-purple ycboxlt4">
+              <span class="tcxitit">实时监测信息</span>
+              <div class="qxsjssjcTc" >
+                <div class="qxsjssjc_left">
+                  <el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px; z-index: 99;"
+                          v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
+                    <div class="jcsjtclist" style="overflow: hidden"  @click="switchData(item)">
+                      <el-row :gutter="20">
+                        <el-col :span="7">
+                          <img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
+                        </el-col>
+                        <el-col :span="17">
+                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
+                          <button type="button" @click="startAnimate()" style="display: none"></button>
+                          <span class="jcsjicon1_num" >
+                                      <span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
+                                      <span v-else>
+                                        <animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
+                                                        :key="item.deployId" duration="3000"></animate-number>
+                                      </span>
+                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
+                                    </span>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </el-col>
+                </div>
+                <div class="qxjcimg2">
+                  <img src="@/assets/image/zhwl/tcdiliul.png" class="tctrimg" alt="">
+                  <video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
+                    <source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
+                  </video>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="15">
+            <span class="tcxitit">长期定位监测历史记录</span>
+            <div class="bianqianlist">
+              <el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
+                <el-radio-button label="dayhours">小时</el-radio-button>
+                <el-radio-button label="monthDays">日均</el-radio-button>
+                <el-radio-button label="yearMonth">月均</el-radio-button>
+              </el-radio-group>
+              <el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;"  size="small"
+                              :type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
+                              :format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
+                              :value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
+                              @change="formParamChange" placeholder="选择日期"
+                              start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+              <!--              <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
+              <div class="zsfsList">
+                <span>展示方式：</span>
+                <el-radio-group v-model="echartOrTable" size="small" fill="#1783C6"  @change="formParamChange">
+                  <el-radio-button label="1">折线</el-radio-button>
+                  <el-radio-button label="0">表格</el-radio-button>
+                </el-radio-group>
+              </div>
+            </div>
+            <div id="columnTrEchart" v-show="(echartOrTable=='1')" style="min-width: 700px;width: 100%; height: 480px;"></div>
+            <el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" :default-sort="{ prop: 'dates', order: 'descending' }"
+                      row-class-name="tableRowClassName" cell-class-name="tableRowClassName"
+                      header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
+                      height="580" border size="mini">
+              <el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
+              <el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'"  v-for="(item2, index2) in allData.realTimeData"
+                               :key="item2.name">
+              </el-table-column>
+            </el-table>
+            <div class="loader" v-show="false">
+              <div class="loader-inner ball-grid-pulse">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+              <span class="lodingspan">加载中......</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import {
+  getSoilSummry
+} from '@/api';
+import { _colors } from '@/utils/color.js'
+
+export default {
+  props: {
+    liulDataId: Object,
+  },
+  components: {},
+  data() {
+    return {
+      dTitle: '长期定位监测',
+      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
+      urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
+      deployType: 'soil',
+      allData: null,
+      tableHead: [],
+      trzddialogTableVisible: true,
+      tableListData: [],
+      unitValue: true,
+      echartOrTable: '1',
+      formParam: {
+        date: '',
+        summrayMode: 'monthDays'
+      },
+      postParam: {
+        deployIds: [this.liulDataId.ids],
+        startTime: null,
+        endTime: null,
+        summrayMode: 'monthDays',
+      },
+      myChartObj: null,
+      loading: false
+    }
+  },
+  mounted() {
+    console.log('流量监测弹窗显示拉!', this.liulDataId)
+    this.deviceSummaryApi();
+  },
+  methods: {
+    // 历史数据曲线
+    deviceSummaryApi() {
+      this.loading = true
+      let that = this
+      this.tableHead = [];
+      getSoilSummry(that.postParam).then(res => {
+        if (res.code === 200) {
+          this.allData = res.result
+          if(this.allData){
+            this.tableHead = res.result.realTimeData
+            this.tableIndex = res.result.tableIndex
+          }
+          this.loading = false
+          this.initEchartDom();
+        }
+      })
+    },
+    // 切换参数
+    switchData(e) {
+      let that = this
+      console.log('切换参数switchData', e)
+      that.formParamChange();
+      // this.$nextTick(() => {
+      //   this.$refs.myNum1?.map(res => {
+      //     res.start()
+      //   })
+      // })
+    },
+    initEchartDom() {
+      if(!(this.echartOrTable == '1')){
+        return;
+      }
+      console.log('initEchart')
+      if(!this.allData) {
+        console.error('数据未获取到')
+        return ;
+      }
+      if(this.myChartObj){
+        this.myChartObj.dispose();
+      }
+      this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
+      // 绘制图表
+      let legendData = this.allData.realTimeData.map(item =>  item.name+'('+item.unit+')');
+      let xAxisData = this.allData.tableIndex;
+      let seriesData = this.allData.realTimeData.map((item,index) => {
+        let subdata = this.allData.objResults[item.survItem]
+        return {
+          name: item.name+'('+item.unit+')',
+          data: subdata,
+          type: "line",
+          symbol: "circle", //设定为实心点
+          showAllSymbol: true,
+          symbolSize: 0,
+          smooth: true,
+          areaStyle: {
+            //新版渐变色实现
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: _colors[index],
+                },
+                {
+                  offset: 1,
+                  color: "rgba(255, 223, 4, 0.1)",
+                },
+              ],
+            },
+          },
+          lineStyle: {
+            //线的颜色
+            color: _colors[index],
+            width: 1.5,
+          },
+          itemStyle: {
+            color: _colors[index],
+          },
+        }
+
+      }) ;
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: legendData,
+          icon: "rect",
+          itemWidth: 7, // 设置宽度
+          itemHeight: 7, // 设置高度
+          itemGap: 15, // 设置间距
+          top: "0",
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            // fontSize: 14,
+          },
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          top: "14%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        xAxis: {
+          data: xAxisData,
+          lineStyle: {
+            color: "rgba(117, 168, 202, 0.9)",
+          },
+          axisLine: {
+          },
+        },
+        yAxis: [
+          {
+            name: '',
+            type: "value",
+          },
+        ],
+        series: seriesData,
+      };
+      option && this.myChartObj.setOption(option);
+    },
+    formParamChange(f) {
+      console.log(this.formParam)
+      if(f === 1){
+        this.formParam.date = null;
+      }
+      if(this.formParam.date) {
+        this.postParam.startTime = this.formParam.date
+        this.postParam.endTime = null
+      } else {
+        this.postParam.startTime = null
+        this.postParam.endTime = null
+      }
+      this.deviceSummaryApi();
+    },
+    tableClassName(){},
+    closeDialog() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+
+.xintc :deep(.el-dialog) {
+  position: relative;
+  margin: 0 auto;
+  background: none;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
+  box-sizing: border-box;
+  width: 50%;
+  /* margin-left: 22%; */
+}
+
+.xintc :deep(.el-dialog__header) {
+  display: none;
+}
+
+.tz_cov_chanye {
+  width: 100%;
+  height: 42vw;
+  background: rgba(1, 17, 26, 0.9);
+  border-radius: 10px;
+  border: 1px solid #33739d;
+  overflow: hidden;
+  box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
+  position: relative;
+}
+
+.guanbiann {
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  right: 2%;
+  top: 0.5vw;
+  z-index: 9999999999;
+  cursor: pointer;
+}
+
+.tz_cov_topchanye {
+  width: 100%;
+  height: 48px;
+  background: url(@/assets/image/tctopback.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 48px;
+  margin-bottom: 20px;
+}
+
+.tz_cov_top_tit {
+  font-size: 20px;
+  font-family: douyuFont;
+  color: #fff;
+  text-align: center;
+}
+
+.tcgldw {
+  font-size: 18px;
+  color: #fff;
+  width: 98%;
+  margin: 0 auto;
+  margin-top: 10px;
+  line-height: 38px;
+  text-align: left;
+  text-indent: 2em;
+  height: 576px;
+  overflow: auto;
+}
+
+/* 定义滚动条样式 */
+.tcgldw::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+  background-color: rgba(240, 240, 240, 0.1);
+}
+
+.tcgldw::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+  border-radius: 10px;
+  background-color: rgba(240, 240, 240, .0);
+}
+
+.tcgldw::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+  background-color: rgba(36, 132, 109, .8);
+}
+
+.ycboxlt {
+  width: 94%;
+  margin-left: 2%;
+  background: url(@/assets/image/tckuang.png) no-repeat;
+  background-size: 100% 100%;
+  padding: 10px;
+}
+
+.ycboxlt4 {
+  width: 94%;
+  margin-left: 2%;
+  background-size: 100% 100%;
+  padding: 10px;
+}
+
+.tz_cov_topyqjs {
+  width: 100%;
+  height: 600px;
+  padding: 5px;
+}
+
+.tz_cov_top {
+  width: 100%;
+  height: 600px;
+  overflow: auto;
+  animation: fadeInLeft 1s 0.02s ease backwards;
+}
+
+.in1con_lf_imglf_num_jix {
+  color: #12CCFA;
+  font-size: 24px;
+  font-family: "UnidreamLED";
+}
+
+.qxjcCon {
+  height: 506px;
+}
+
+.qxsjssjc {
+  width: 100%;
+  height: 506px;
+  overflow: hidden;
+}
+
+.qxsjssjc_left {
+  margin-top: 70px;
+  display: flex;
+  align-items: flex-start;
+  height: 400px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: space-between;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.qxsjssjc_leftTc {
+  width: 10%;
+  position: absolute;
+  left: 2%;
+  top: 40px;
+  z-index: 33;
+}
+
+.qxsjssjc_leftTc2 {
+  width: 10%;
+  position: absolute;
+  left: 30%;
+  top: 40px;
+  z-index: 33;
+}
+
+.qxjcimg2 {
+  width: 40%;
+  float: left;
+  margin-left: 40px;
+}
+
+.qxjcimg2 .qiyename {
+  width: 304px;
+  height: 40px;
+  margin-left: 40px;
+  margin-top: 20px;
+  overflow: hidden;
+}
+
+.qxjcimg2 .qiyename .qynammeLf {
+  float: left;
+  width: 34px;
+  margin-top: 3px;
+  cursor: pointer;
+}
+
+.qxjcimg2 .qiyename .qynammeCon {
+  float: left;
+  width: 234px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  background: url(@/assets/image/qiyename.png) no-repeat 100% 100%;
+  font-size: 16px;
+  color: #fff;
+}
+
+.qxjcimg2 .qiyename .qynammeRt {
+  float: right;
+  width: 34px;
+  margin-top: 3px;
+  cursor: pointer;
+}
+
+.qxsjssjc_left_list {
+  width: 175px;
+  height: 86px;
+  background: url(@/assets/image/zhwl/qxbg.png) no-repeat 100% 100%;
+  border-radius: 6px;
+  text-align: center;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+.qxsjssjc_left_list_tit {
+  width: 100%;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px 6px 0 0;
+  margin-top: 4px;
+}
+
+.qxsjssjc_left_list_show {
+  font-size: 16px;
+  color: #12CCFA;
+  display: inline-block;
+  padding-top: 18px;
+}
+
+.qxsjssjcTc {
+  width: 100%;
+  height: 580px;
+  overflow: hidden;
+}
+
+.tcyqimg {
+  width: 14%;
+  position: absolute;
+  left: 14%;
+  bottom: 80px;
+  z-index: 2;
+}
+
+.tcdzimg {
+  width: 40%;
+  margin-left: 5%;
+  position: absolute;
+  left: -4%;
+  bottom: -40px;
+  z-index: -100;
+}
+
+.tcxitit {
+  display: block;
+  text-align: left;
+  font-size: 14px;
+  color: #fff;
+  margin-left: 2%;
+}
+
+.bianqianlist {
+  width: 100%;
+  height: 40px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+.bianqianlist .xiaoshi {
+  width: 48px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  border: 1px solid #D6D6D6;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  float: left;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.bianqianlist .xiaoshiHover {
+  width: 48px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #1783C6;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  float: left;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.bianqianlist .zsfsList {
+  float: right;
+  color: #fff;
+  font-size: 14px;
+  margin-right: 20px;
+}
+
+.jcsjtclist {
+  width: 138px;
+  height: 60px;
+  background: #1D4C82;
+  border-radius: 6px;
+  margin-top: 14px;
+  cursor: pointer;
+}
+
+.jcsjtclist .jcsjicon1 {
+  width: 46px;
+  margin-top: 10px;
+}
+
+.jcsjtclist .jcsjicon1_tit {
+  font-size: 12px;
+  color: #fff;
+  display: block;
+  margin-top: 8px;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.jcsjtclist .jcsjicon1_num {
+  color: #e7f47b;
+  font-size: 24px;
+  text-align: center;
+  font-family: "UnidreamLED";
+  font-family: HYChangLiSongKeBen;
+  text-align: left;
+  display: block;
+}
+
+.jcsjtclist .jcsjicon1_dan {
+  font-size: 12px;
+  color: #fff;
+  margin-left: 6px;
+  text-align: center;
+}
+
+.qxsjssjc_right {
+  width: 12%;
+  height: 500px;
+  overflow: auto;
+  z-index: 3;
+  position: absolute;
+  left: 470px;
+  top: 20px;
+}
+
+.qxsjssjc_right::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+  background-color: rgba(240, 240, 240, 0.1);
+}
+
+.qxsjssjc_right::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+  border-radius: 10px;
+  background-color: rgba(240, 240, 240, .0);
+}
+
+.qxsjssjc_right::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+  background-color: rgba(36, 132, 109, .8);
+}
+
+.tctrimg {
+  width: 26%;
+  height: 538px;
+  position: absolute;
+  left: 7%;
+  top: 74px;
+  z-index: 1;
+}
+
+.tcscdimg {
+  width: 10%;
+  height: 500px;
+  position: absolute;
+  left: 16%;
+  top: 20px;
+  z-index: 1;
+}
+
+.tcchimg {
+  width: 115px;
+  height: 446px;
+  position: absolute;
+  left: 17.5%;
+  top: 60px;
+  z-index: 1;
+}
+
+.tcccqhimg {
+  width: 115px;
+  height: 446px;
+  position: absolute;
+  left: 17.5%;
+  top: 60px;
+  z-index: 1;
+}
+
+.tcdidizuoimg {
+  width: 40%;
+  position: absolute;
+  left: 2%;
+  bottom: -30px;
+  z-index: 0;
+}
+
+.tcdijtimg {
+  width: 34%;
+  position: absolute;
+  left: 4%;
+  top: -40px;
+  z-index: 0;
+}
+
+@keyframes continuous-rotation {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.xiaoshiHover {
+  width: 48px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #1783C6;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  float: left;
+  margin-left: 10px;
+}
+
+.timeStty {
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.timeStty .tcxitit {
+  text-align: left;
+  font-size: 14px;
+  color: #fff;
+  float: left;
+}
+
+.timeStty .timeright {
+  float: right;
+  margin-right: 3%;
+}
+
+.cqimgTcList {
+  width: 100%;
+  height: 480px;
+  overflow: auto;
+}
+
+.cqimgTcList .cqimg {
+  width: 32%;
+  float: left;
+  margin-top: 10px;
+  margin-right: 1%;
+  overflow: hidden;
+  position: relative;
+  border-radius: 10px;
+}
+
+.cqimgTcList .cqimg img {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid rgb(0, 95, 65);
+}
+
+.cqimgTcList .cqTime {
+  color: #1090D4;
+  font-size: 16px;
+  display: block;
+  margin-top: 10px;
+}
+
+.cqimgTcList::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+  background-color: rgba(240, 240, 240, 0.1);
+}
+
+.cqimgTcList::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+  border-radius: 10px;
+  background-color: rgba(240, 240, 240, .0);
+}
+
+.cqimgTcList::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+  background-color: rgba(36, 132, 109, .8);
+}
+
+.tz_cov_zaip {
+  width: 100%;
+  height: 1000px;
+  background: rgba(15, 36, 69, 0.7);
+  border-radius: 0.5vw;
+  border: 1px solid #33739d;
+  text-align: center;
+  overflow: hidden;
+  box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
+  position: relative;
+}
+
+.tz_cov_zaip :deep(.el-tabs--border-card) {
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__header) {
+  background: none;
+  border: none;
+  box-shadow: none;
+  margin-left: 15px;
+}
+
+.tz_cov_zaip :deep(.el-tabs__item) {
+  background: #0F5474;
+  border: 1px solid #0089AE !important;
+  margin-right: 1% !important;
+  color: #C9C9C9 !important;
+  font-size: 16px;
+  padding: 0px 15px !important;
+  box-sizing: border-box;
+}
+
+.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
+  background: #0089AE;
+  border: 1px solid #1A848F !important;
+  margin-right: 1% !important;
+  color: #fff !important;
+  font-size: 16px;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+
+.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__content) {
+  padding: 0;
+  margin-top: 20px;
+}
+
+.tableRowClassName {
+  background-color: rgb(34, 28, 28);
+  color: #fff;
+}
+
+.xintc :deep(.el-table .el-table__body-wrapper) {
+  background-color: rgb(34, 28, 28);
+}
+</style>

src/components/SoilDialog copy.vue

@@ -0,0 +1,912 @@
+<template>
+  <!-- 长期监测弹窗 -->
+  <el-dialog
+      width="75%"
+      top="130px"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible.sync="trzddialogTableVisible"
+      @close="closeDialog"
+  >
+    <div class="xintc">
+      <div class="tz_cov_chanye" style="height: 770px"   v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
+        <img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/>
+        <div class="tz_cov_topchanye">
+          <span class="tz_cov_top_tit">{{soilDataId.name}}</span>
+        </div>
+        <el-row class="tz_cov_topyqjs">
+          <el-col :span="9">
+            <div class="grid-content bg-purple ycboxlt4">
+              <span class="tcxitit">实时监测信息</span>
+              <div class="qxsjssjcTc" >
+                <div class="qxsjssjc_left">
+                  <el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px; z-index: 99;"
+                          v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
+                    <div class="jcsjtclist" style="overflow: hidden"  @click="switchData(item)">
+                      <el-row :gutter="20">
+                        <el-col :span="7">
+                          <img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
+                        </el-col>
+                        <el-col :span="17">
+                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
+                          <button type="button" @click="startAnimate()" style="display: none"></button>
+                          <span class="jcsjicon1_num" >
+                                      <span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
+                                      <span v-else>
+                                        <animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
+                                                        :key="item.deployId" duration="3000"></animate-number>
+                                      </span>
+                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
+                                    </span>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </el-col>
+                </div>
+                <div class="qxjcimg2">
+                  <img src="@/assets/image/zhwl/tcditr.png" class="tctrimg" alt="">
+                  <video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
+                    <source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
+                  </video>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="15">
+            <span class="tcxitit">长期定位监测历史记录</span>
+            <div class="bianqianlist">
+              <el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
+                <el-radio-button label="dayhours">小时</el-radio-button>
+                <el-radio-button label="monthDays">日均</el-radio-button>
+                <el-radio-button label="yearMonth">月均</el-radio-button>
+              </el-radio-group>
+              <el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;"  size="small"
+                              :type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
+                              :format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
+                              :value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
+                              @change="formParamChange" placeholder="选择日期"
+                              start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+              <!--              <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
+              <div class="zsfsList">
+                <span>展示方式：</span>
+                <el-radio-group v-model="echartOrTable" size="small" fill="#1783C6"  @change="formParamChange">
+                  <el-radio-button label="1">折线</el-radio-button>
+                  <el-radio-button label="0">表格</el-radio-button>
+                </el-radio-group>
+              </div>
+            </div>
+            <div id="columnTrEchart" v-show="(echartOrTable=='1')" style="min-width: 700px;width: 100%; height: 480px;"></div>
+            <el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" :default-sort="{ prop: 'dates', order: 'descending' }"
+                      row-class-name="tableRowClassName" cell-class-name="tableRowClassName"
+                      header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
+                      height="580" border size="mini">
+              <el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
+              <el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'"  v-for="(item2, index2) in allData.realTimeData"
+                               :key="item2.name">
+              </el-table-column>
+            </el-table>
+            <div class="loader" v-show="false">
+              <div class="loader-inner ball-grid-pulse">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+              <span class="lodingspan">加载中......</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import {
+  getSoilSummry
+} from '@/api';
+import { _colors } from '@/utils/color.js'
+
+export default {
+  props: {
+    soilDataId: Object,
+  },
+  components: {},
+  data() {
+    return {
+      dTitle: '长期定位监测',
+      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
+      urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
+      deployType: 'soil',
+      allData: null,
+      tableHead: [],
+      trzddialogTableVisible: true,
+      tableListData: [],
+      unitValue: true,
+      echartOrTable: '1',
+      formParam: {
+        date: '',
+        summrayMode: 'monthDays'
+      },
+      postParam: {
+        deployIds: [this.soilDataId.ids],
+        startTime: null,
+        endTime: null,
+        summrayMode: 'monthDays',
+      },
+      myChartObj: null,
+      loading: false
+    }
+  },
+  mounted() {
+    console.log('长期监测弹窗显示拉!', this.soilDataId)
+    this.deviceSummaryApi();
+  },
+  methods: {
+    // 历史数据曲线
+    deviceSummaryApi() {
+      this.loading = true
+      let that = this
+      this.tableHead = [];
+      getSoilSummry(that.postParam).then(res => {
+        if (res.code === 200) {
+          this.allData = res.result
+          if(this.allData){
+            this.tableHead = res.result.realTimeData
+            this.tableIndex = res.result.tableIndex
+          }
+          this.loading = false
+          this.initEchartDom();
+        }
+      })
+    },
+    // 切换参数
+    switchData(e) {
+      let that = this
+      console.log('切换参数switchData', e)
+      that.formParamChange();
+      // this.$nextTick(() => {
+      //   this.$refs.myNum1?.map(res => {
+      //     res.start()
+      //   })
+      // })
+    },
+    initEchartDom() {
+      if(!(this.echartOrTable == '1')){
+        return;
+      }
+      console.log('initEchart')
+      if(!this.allData) {
+        console.error('数据未获取到')
+        return ;
+      }
+      if(this.myChartObj){
+        this.myChartObj.dispose();
+      }
+      this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
+      // 绘制图表
+      let legendData = this.allData.realTimeData.map(item =>  item.name+'('+item.unit+')');
+      let xAxisData = this.allData.tableIndex;
+      let seriesData = this.allData.realTimeData.map((item,index) => {
+        let subdata = this.allData.objResults[item.survItem]
+        return {
+          name: item.name+'('+item.unit+')',
+          data: subdata,
+          type: "line",
+          symbol: "circle", //设定为实心点
+          showAllSymbol: true,
+          symbolSize: 0,
+          smooth: true,
+          areaStyle: {
+            //新版渐变色实现
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: _colors[index],
+                },
+                {
+                  offset: 1,
+                  color: "rgba(255, 223, 4, 0.1)",
+                },
+              ],
+            },
+          },
+          lineStyle: {
+            //线的颜色
+            color: _colors[index],
+            width: 1.5,
+          },
+          itemStyle: {
+            color: _colors[index],
+          },
+        }
+
+      }) ;
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: legendData,
+          icon: "rect",
+          itemWidth: 7, // 设置宽度
+          itemHeight: 7, // 设置高度
+          itemGap: 15, // 设置间距
+          top: "0",
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            // fontSize: 14,
+          },
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          top: "14%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        xAxis: {
+          data: xAxisData,
+          lineStyle: {
+            color: "rgba(117, 168, 202, 0.9)",
+          },
+          axisLine: {
+          },
+        },
+        yAxis: [
+          {
+            name: '',
+            type: "value",
+          },
+        ],
+        series: seriesData,
+      };
+      option && this.myChartObj.setOption(option);
+    },
+    formParamChange(f) {
+      console.log(this.formParam)
+      if(f === 1){
+        this.formParam.date = null;
+      }
+      if(this.formParam.date) {
+        this.postParam.startTime = this.formParam.date
+        this.postParam.endTime = null
+      } else {
+        this.postParam.startTime = null
+        this.postParam.endTime = null
+      }
+      this.deviceSummaryApi();
+    },
+    tableClassName(){},
+    closeDialog() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.xintc {
+  /* 不可删除弹出开始，以气象为主 */
+
+  :deep .el-dialog {
+    position: relative;
+    margin: 0 auto;
+    background: none;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
+    box-sizing: border-box;
+    width: 50%;
+    /* margin-left: 22%; */
+  }
+
+  :deep .el-dialog__header {
+    display: none;
+  }
+
+  .tz_cov_chanye {
+    width: 100%;
+    height: 42vw;
+    /* background: url(../../assets/images/tccovbak.png) no-repeat;
+      background-size: 100% 100%; */
+    background: rgba(1, 17, 26, 0.9);
+    border-radius: 10px;
+    border: 1px solid #33739d;
+    //text-align: center;
+    overflow: hidden;
+    box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
+    position: relative;
+  }
+
+  .guanbiann {
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    right: 2%;
+    top: 0.5vw;
+    z-index: 9999999999;
+    cursor: pointer;
+  }
+
+  .tz_cov_topchanye {
+    width: 100%;
+    height: 48px;
+    background: url(@/assets/image/tctopback.png) no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 48px;
+    margin-bottom: 20px;
+  }
+
+  .tz_cov_top_tit {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: #fff;
+    text-align: center;
+  }
+
+  .tcgldw {
+    font-size: 18px;
+    color: #fff;
+    width: 98%;
+    margin: 0 auto;
+    margin-top: 10px;
+    line-height: 38px;
+    text-align: left;
+    text-indent: 2em;
+    height: 576px;
+    overflow: auto;
+    /* text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 15; */
+  }
+
+  /* 定义滚动条样式 */
+
+  .tcgldw::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+    background-color: rgba(240, 240, 240, 0.1);
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+
+  .tcgldw::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+    border-radius: 10px;
+    background-color: rgba(240, 240, 240, .0);
+  }
+
+  /*定义滑块 内阴影+圆角*/
+
+  .tcgldw::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+    background-color: rgba(36, 132, 109, .8);
+  }
+
+  .ycboxlt {
+    width: 94%;
+    margin-left: 2%;
+    background: url(@/assets/image/tckuang.png) no-repeat;
+    background-size: 100% 100%;
+    padding: 10px;
+  }
+
+  .ycboxlt4 {
+    width: 94%;
+    margin-left: 2%;
+    background-size: 100% 100%;
+    padding: 10px;
+  }
+
+  .tz_cov_topyqjs {
+    width: 100%;
+    height: 600px;
+    padding: 5px;
+  }
+
+  .tz_cov_top {
+    width: 100%;
+    height: 600px;
+    overflow: auto;
+    animation: fadeInLeft 1s 0.02s ease backwards;
+  }
+
+  .in1con_lf_imglf_num_jix {
+    color: #12CCFA;
+    font-size: 24px;
+    font-family: "UnidreamLED";
+  }
+
+  .qxjcCon {
+    height: 506px;
+
+  }
+
+  .qxsjssjc {
+    width: 100%;
+    height: 506px;
+    overflow: hidden;
+  }
+
+  .qxsjssjc_left {
+    //width: 873px;
+    /* float: left; */
+    /* margin-left: 40px; */
+    margin-top:70px;
+    display: flex;
+    align-items: flex-start;
+    height: 400px;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: space-between;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .qxsjssjc_leftTc {
+    width: 10%;
+    position: absolute;
+    left: 2%;
+    top: 40px;
+    z-index: 33;
+  }
+
+  .qxsjssjc_leftTc2 {
+    width: 10%;
+    position: absolute;
+    left: 30%;
+    top: 40px;
+    z-index: 33;
+  }
+
+  .qxjcimg2 {
+    width: 40%;
+    float: left;
+    margin-left: 40px;
+
+    .qiyename {
+      width: 304px;
+      height: 40px;
+      margin-left: 40px;
+      margin-top: 20px;
+      overflow: hidden;
+
+      .qynammeLf {
+        float: left;
+        width: 34px;
+        margin-top: 3px;
+        cursor: pointer;
+      }
+
+      .qynammeCon {
+        float: left;
+        width: 234px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background: url(@/assets/image/qiyename.png) no-repeat 100% 100%;
+        font-size: 16px;
+        color: #fff;
+      }
+
+      .qynammeRt {
+        float: right;
+        width: 34px;
+        margin-top: 3px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .qxsjssjc_left_list {
+    width: 175px;
+    height: 86px;
+    background: url(@/assets/image/zhwl/qxbg.png) no-repeat 100% 100%;
+    border-radius: 6px;
+    text-align: center;
+    margin-top: 20px;
+    cursor: pointer;
+  }
+
+  .qxsjssjc_left_list_tit {
+    width: 100%;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 6px 6px 0 0;
+    margin-top: 4px;
+  }
+
+  .qxsjssjc_left_list_show {
+    font-size: 16px;
+    color: #12CCFA;
+    display: inline-block;
+    padding-top: 18px;
+  }
+
+  .qxsjssjcTc {
+    width: 100%;
+    height: 580px;
+    overflow: hidden;
+  }
+
+  .tcyqimg {
+    width: 14%;
+    position: absolute;
+    left: 14%;
+    bottom: 80px;
+    z-index: 2;
+  }
+
+  .tcdzimg {
+    width: 40%;
+    margin-left: 5%;
+    position: absolute;
+    left: -4%;
+    bottom: -40px;
+    z-index: -100;
+  }
+
+  .tcxitit {
+    display: block;
+    text-align: left;
+    font-size: 14px;
+    color: #fff;
+    margin-left: 2%;
+  }
+
+  .bianqianlist {
+    width: 100%;
+    height: 40px;
+    overflow: hidden;
+    margin-top: 10px;
+
+    .xiaoshi {
+      width: 48px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 4px;
+      border: 1px solid #D6D6D6;
+      border-radius: 4px;
+      color: #fff;
+      font-size: 14px;
+      float: left;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+    .xiaoshiHover {
+      width: 48px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background: #1783C6;
+      border-radius: 4px;
+      color: #fff;
+      font-size: 14px;
+      float: left;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+    .zsfsList {
+      float: right;
+      color: #fff;
+      font-size: 14px;
+      margin-right: 20px;
+    }
+  }
+  .jcsjtclist {
+    width: 138px;
+    height: 60px;
+    background: #1D4C82;
+    border-radius: 6px;
+    margin-top: 14px;
+    cursor: pointer;
+
+    .jcsjicon1 {
+      width: 46px;
+      margin-top: 10px;
+    }
+
+    .jcsjicon1_tit {
+      font-size: 12px;
+      color: #fff;
+      display: block;
+      margin-top: 8px;
+      text-align: left;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .jcsjicon1_num {
+      color: #e7f47b;
+      font-size: 24px;
+      text-align: center;
+      font-family: "UnidreamLED";
+      font-family: HYChangLiSongKeBen;
+      text-align: left;
+      display: block;
+    }
+
+    .jcsjicon1_dan {
+      font-size: 12px;
+      color: #fff;
+      margin-left: 6px;
+      text-align: center;
+    }
+  }
+
+  .qxsjssjc_right {
+    width: 12%;
+    height: 500px;
+    overflow: auto;
+    z-index: 3;
+    position: absolute;
+    left: 470px;
+    top: 20px;
+  }
+
+  /* 定义滚动条样式 */
+
+  .qxsjssjc_right::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+    background-color: rgba(240, 240, 240, 0.1);
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+
+  .qxsjssjc_right::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+    border-radius: 10px;
+    background-color: rgba(240, 240, 240, .0);
+  }
+
+  /*定义滑块 内阴影+圆角*/
+
+  .qxsjssjc_right::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+    background-color: rgba(36, 132, 109, .8);
+  }
+
+  .tctrimg {
+    width: 26%;
+    height: 538px;
+    position: absolute;
+    left: 7%;
+    top: 74px;
+    z-index: 1;
+  }
+
+  .tcscdimg {
+    width: 10%;
+    height: 500px;
+    position: absolute;
+    left: 16%;
+    top: 20px;
+    z-index: 1;
+  }
+
+  .tcchimg {
+    width: 115px;
+    height: 446px;
+    position: absolute;
+    left: 17.5%;
+    top: 60px;
+    z-index: 1;
+  }
+
+
+
+  .tcccqhimg {
+    width: 115px;
+    height: 446px;
+    position: absolute;
+    left: 17.5%;
+    top: 60px;
+    z-index: 1;
+  }
+
+  .tcdidizuoimg {
+    width: 40%;
+    position: absolute;
+    left: 2%;
+    bottom: -30px;
+    z-index: 0;
+  }
+
+  .tcdijtimg {
+    width: 34%;
+    position: absolute;
+    left: 4%;
+    top: -40px;
+    z-index: 0;
+  }
+
+  @keyframes continuous-rotation {
+    from {
+      transform: rotate(360deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+  .xiaoshiHover {
+    width: 48px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background: #1783C6;
+    border-radius: 4px;
+    color: #fff;
+    font-size: 14px;
+    float: left;
+    margin-left: 10px;
+  }
+
+  .timeStty {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    .tcxitit {
+      text-align: left;
+      font-size: 14px;
+      color: #fff;
+      float: left;
+    }
+
+    .timeright {
+      float: right;
+      margin-right: 3%;
+    }
+  }
+
+  .tcxitit {
+    display: block;
+    text-align: left;
+    font-size: 14px;
+    color: #fff;
+    margin-left: 2%;
+  }
+
+  .cqimgTcList {
+    width: 100%;
+    height: 480px;
+    overflow: auto;
+
+    .cqimg {
+      width: 32%;
+      float: left;
+      margin-top: 10px;
+      margin-right: 1%;
+      overflow: hidden;
+      position: relative;
+      border-radius: 10px;
+
+      img {
+        width: 100%;
+        border-radius: 10px;
+        border: 1px solid rgb(0, 95, 65);
+      }
+    }
+
+    .cqTime {
+      color: #1090D4;
+      font-size: 16px;
+      display: block;
+      margin-top: 10px;
+    }
+  }
+
+  /* 定义滚动条样式 */
+
+  .cqimgTcList::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+    background-color: rgba(240, 240, 240, 0.1);
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+
+  .cqimgTcList::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
+    border-radius: 10px;
+    background-color: rgba(240, 240, 240, .0);
+  }
+
+  /*定义滑块 内阴影+圆角*/
+
+  .cqimgTcList::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
+    background-color: rgba(36, 132, 109, .8);
+  }
+
+
+  .tz_cov_zaip {
+    width: 100%;
+    height: 1000px;
+    /* background: url(../../assets/images/tccovbak.png) no-repeat;
+      background-size: 100% 100%; */
+    background: rgba(15, 36, 69, 0.7);
+    border-radius: 0.5vw;
+    border: 1px solid #33739d;
+    text-align: center;
+    overflow: hidden;
+    box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
+    position: relative;
+  }
+
+  .tz_cov_zaip .el-tabs--border-card {
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .tz_cov_zaip .el-tabs--border-card > .el-tabs__header {
+    background: none;
+    border: none;
+    box-shadow: none;
+    margin-left: 15px;
+    /* padding-left: 15px; */
+  }
+
+  .tz_cov_zaip .el-tabs__item {
+    background: #0F5474;
+    border: 1px solid #0089AE !important;
+    margin-right: 1% !important;
+    color: #C9C9C9 !important;
+    font-size: 16px;
+    padding: 0px 15px !important;
+    box-sizing: border-box;
+    /* height: 40px !important; */
+  }
+
+  .tz_cov_zaip .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    background: #0089AE;
+    border: 1px solid #1A848F !important;
+    margin-right: 1% !important;
+    color: #fff !important;
+    font-size: 16px;
+    padding: 0 8px;
+    box-sizing: border-box;
+  }
+
+  .tz_cov_zaip .el-tabs--border-card > .el-tabs__content {
+    padding: 0;
+    margin-top: 20px;
+  }
+}
+.tableRowClassName{
+  background-color: rgb(34, 28, 28);
+  color: #fff;
+}
+:deep(.el-table) :deep(.el-table__body-wrapper){
+  background-color: rgb(34, 28, 28);
+}
+
+</style>

src/components/SoilDialog.vue

@@ -122,7 +122,7 @@ export default {
   data() {
     return {
       dTitle: '长期定位监测',
-      urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
+      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
       urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
       deployType: 'soil',
       allData: null,

src/components/zhnjCov.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="yqgkcCon nynj">
+    <!-- 轨迹地图弹窗 -->
+    <el-dialog
+      custom-class="table_dialog"
+      top="85px"
+      :show-close="false"
+      width="100%"
+      destroy-on-close
+      append-to-body
+      :visible.sync="mapDialogVisible"
+      v-if="mapDialogVisible"
+    >
+      <div class="inner_width" style="background: #0B2536;height:106%;">
+        <img class="inner-img-w" src="@/assets/image/big_background.png" alt="">
+        <div class="content-box" style="padding: 0;">
+          <div class="mapparent" id="trajectory"></div>
+          <div class="topdetail">
+            <div class="map_detail_tit">
+              轨迹详情
+              <div style="height: 40px;float:right;cursor: pointer;" @click.stop="closeMapDialog">
+                <div class="banrutimg">
+                  <span>关闭</span>
+                </div>
+              </div>
+            </div>
+            <div class="map-ul">
+              <div class="map-li">车辆：{{trajectoryVehicleName || '--'}}</div>
+              <div class="map-li">车牌：{{trajectoryPlate || '--'}}</div>
+              <div class="map-li">司机：{{formatName(trajectoryDriver)}}</div>
+              <div class="map-li">GPS设备：{{trajectoryGpsId || '--'}}</div>
+              <div class="map-li">轨迹点数：{{trajectoryPoints.length || 0}}</div>
+              <div class="map-li"></div>
+              <div class="map-li"></div>
+              <div class="map-li"></div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom-box">
+          <div class="play" @click="jog">
+            <img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/reduce.png" alt="">
+            <div>减速</div>
+          </div>
+          <div class="play" v-if="playsttus == 0 || playsttus == 2" @click="silderInput">
+            <img src="@/assets/image/play.png" alt="">
+            <div>播放</div>
+          </div>
+          <div class="play" v-if="playsttus == 1" @click="pauseAnimation">
+            <img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/puse.png" alt="">
+            <div>暂停</div>
+          </div>
+          <div class="play" @click="fastforward">
+            <img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/add.png" alt="">
+            <div>加速</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { gpsRecordPage } from '@/api';
+
+export default {
+  name: "zhnjCov",
+  props: {
+    // 从父组件接收车辆数据（点击地图标记时传入）
+    vehicleData: {
+      type: Object,
+      default: null
+    },
+    // 控制弹窗显示
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    vehicleData: {
+      handler(newVal) {
+        if (newVal && newVal.gpsId) {
+          // 接收到车辆数据，打开轨迹弹窗
+          this.openTrajectoryDialog(newVal);
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    visible: {
+      handler(newVal) {
+        if (!newVal) {
+          this.mapDialogVisible = false;
+          this.clearMap();
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      mapDialogVisible: false,
+
+      // 轨迹相关
+      trajectoryPoints: [],
+      trajectoryVehicleName: '',
+      trajectoryPlate: '',
+      trajectoryDriver: '',
+      trajectoryGpsId: '',
+      allTrajectoryData: [],
+      
+      // 地图相关
+      myMap: null,
+      polyline: null,
+      passedPolyline: null,
+      marker: null,
+      
+      playsttus: 0,
+      valueTime: ''
+    };
+  },
+  methods: {
+    // 打开轨迹弹窗
+    openTrajectoryDialog(vehicleInfo) {
+      if (!vehicleInfo.gpsId) {
+        this.$message.warning('该车辆没有GPS设备ID');
+        return;
+      }
+      
+      this.trajectoryVehicleName = vehicleInfo.veNotes || vehicleInfo.vehicleName || '车辆';
+      this.trajectoryPlate = vehicleInfo.vePlate || vehicleInfo.plateNumber || '--';
+      this.trajectoryDriver = vehicleInfo.veDriver || vehicleInfo.driverName || '--';
+      this.trajectoryGpsId = vehicleInfo.gpsId;
+      
+      // 打开轨迹弹窗
+      this.mapDialogVisible = true;
+      // 获取轨迹数据
+      this.fetchAllTrajectoryData();
+    },
+
+    // 关闭轨迹弹窗
+    closeMapDialog() {
+      this.mapDialogVisible = false;
+      this.clearMap();
+      this.$emit('close');
+    },
+
+    // 清除地图
+    clearMap() {
+      if (this.marker) {
+        try {
+          this.marker.stopMove();
+        } catch(e) {}
+        this.marker = null;
+      }
+      if (this.polyline) {
+        this.polyline = null;
+      }
+      if (this.passedPolyline) {
+        this.passedPolyline = null;
+      }
+      if (this.myMap) {
+        try {
+          this.myMap.destroy();
+        } catch(e) {}
+        this.myMap = null;
+      }
+      this.playsttus = 0;
+    },
+
+    // 获取全部轨迹数据（不分页）
+    fetchAllTrajectoryData() {
+      const params = {
+        pageNo: 1,
+        pageSize: 1000,
+        gpsId: this.trajectoryGpsId
+      };
+      
+      this.$message({
+        message: '正在加载轨迹数据...',
+        type: 'info',
+        duration: 1500
+      });
+      
+      gpsRecordPage(params).then(res => {
+        if (res.success && res.result) {
+          const records = res.result.records || [];
+          this.allTrajectoryData = records;
+          
+          // 提取经纬度点
+          this.trajectoryPoints = records
+            .filter(item => item.jingdu && item.weidu)
+            .map(item => [parseFloat(item.jingdu), parseFloat(item.weidu)]);
+          
+          console.log('轨迹点数量:', this.trajectoryPoints.length);
+          
+          if (this.trajectoryPoints.length > 0) {
+            this.$nextTick(() => {
+              this.initTrajectoryMap();
+            });
+          } else {
+            this.$message.warning('该车辆暂无轨迹数据');
+          }
+        } else {
+          this.$message.error('获取轨迹数据失败');
+        }
+      }).catch(err => {
+        console.error('获取轨迹数据失败:', err);
+        this.$message.error('获取轨迹数据失败');
+      });
+    },
+
+    // 初始化轨迹地图
+    initTrajectoryMap() {
+      if (this.trajectoryPoints.length === 0) return;
+      
+      this.clearMap();
+      
+      const mapContainer = document.getElementById('trajectory');
+      if (!mapContainer) {
+        console.error('地图容器不存在');
+        return;
+      }
+      
+      // 初始化地图
+      this.myMap = new AMap.Map('trajectory', {
+        resizeEnable: true,
+        viewMode: '3D',
+        zoomEnable: true,
+        dragEnable: true,
+        doubleClickZoom: true,
+        zoom: 15,
+        center: this.trajectoryPoints[0]
+      });
+      
+      // 添加地图图层
+      let googleLayer = new AMap.TileLayer({
+        tileSize: 256,
+        errorUrl: '',
+        getTileUrl: function (x, y, z) {
+          return 'https://map.snkoudai.com/maps/vt/lyrs=y&hl=zh-CN&gl=cn&scale=1&x=' + x + '&y=' + y + '&z=' + z + '';
+        },
+        zIndex: 2,
+        zooms: [16, 22],
+        opacity: 1,
+      });
+      googleLayer.setMap(this.myMap);
+      
+      // 绘制轨迹线
+      this.polyline = new AMap.Polyline({
+        map: this.myMap,
+        path: this.trajectoryPoints,
+        showDir: true,
+        strokeColor: "#28F",
+        strokeWeight: 6,
+      });
+      this.myMap.add(this.polyline);
+      
+      // 添加起点标记
+      this.marker = new AMap.Marker({
+        map: this.myMap,
+        position: this.trajectoryPoints[0],
+        icon: "https://manage.ilhzn.cn/zh-api/sys/common/static/temp/20241228154040_824e4981dff456b1bb8889.png",
+        offset: new AMap.Pixel(-23, -30)
+      });
+      
+      // 已走过的路径
+      this.passedPolyline = new AMap.Polyline({
+        strokeColor: "#AF5",
+        strokeWeight: 6,
+      });
+      this.myMap.add(this.passedPolyline);
+      
+      // 自适应视图
+      this.myMap.setFitView();
+    },
+
+    // 播放控制
+    silderInput() {
+      if (this.trajectoryPoints.length === 0) {
+        this.$message.warning('暂无轨迹数据');
+        return;
+      }
+      
+      if (this.playsttus === 1) {
+        this.pauseAnimation();
+        return;
+      } else if (this.playsttus === 2) {
+        this.resumeAnimation();
+        return;
+      }
+      
+      this.playsttus = 1;
+      const that = this;
+      
+      AMap.plugin("AMap.MoveAnimation", () => {
+        that.marker.moveAlong(that.trajectoryPoints, {
+          duration: 5000,
+          autoRotation: true,
+        });
+        that.marker.on("moving", (e) => {
+          that.passedPolyline.setPath(e.passedPath);
+          that.myMap.setCenter(e.target.getPosition(), true);
+          if (e.passedPath.length === that.trajectoryPoints.length) {
+            that.playsttus = 0;
+          }
+        });
+      });
+    },
+    
+    pauseAnimation() {
+      if (this.marker) {
+        this.marker.pauseMove();
+        this.playsttus = 2;
+      }
+    },
+    
+    resumeAnimation() {
+      if (this.marker) {
+        this.marker.resumeMove();
+        this.playsttus = 1;
+      }
+    },
+    
+    jog() {
+      this.$message.info('减速');
+    },
+    
+    fastforward() {
+      this.$message.info('加速');
+    },
+
+    formatName(name) {
+      if (!name) return '--';
+      if (name.length <= 1) return name + '*';
+      if (name.length === 2) return name.charAt(0) + '*';
+      return name.charAt(0) + '*'.repeat(name.length - 1);
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+:deep.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #409EFF !important;
+}
+</style>
+
+<style lang="less">
+.table_dialog {
+  width: 100%;
+  height: calc(100vh - 122px);
+  margin-bottom: 0;
+  background: none;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.table_dialog .inner_width {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.table_dialog .inner_width .inner-img-w {
+  width: 100%;
+  height: 100%;
+}
+.table_dialog .inner_width .content-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  padding: 15px 20px;
+  box-sizing: border-box;
+}
+.table_dialog .inner_width .bottom-box {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 98%;
+}
+.table_dialog .inner_width .bottom-box .play {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px 0;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.table_dialog .inner_width .bottom-box .play img {
+  width: 28px;
+  height: 28px;
+}
+.table_dialog .inner_width .bottom-box .play div {
+  width: 100%;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.table_dialog .inner_width .topdetail {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  left: 1%;
+  height: 140px;
+  background: rgba(0, 0, 0, 0.61);
+  padding: 14px 30px;
+  box-sizing: border-box;
+  width: 98%;
+}
+.table_dialog .inner_width .topdetail .map_detail_tit {
+  font-weight: 500;
+  font-size: 18px;
+  color: #01fffa;
+  position: relative;
+  padding-left: 20px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+.table_dialog .inner_width .topdetail .map_detail_tit:before {
+  content: ' ';
+  width: 4px;
+  height: 24px;
+  background: #01fffa;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.table_dialog .inner_width .topdetail .map-ul {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.table_dialog .inner_width .topdetail .map-ul .map-li {
+  width: 25%;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 2.5;
+  overflow: hidden;
+  display: block;
+}
+.table_dialog .el-dialog__header {
+  padding: 0;
+}
+.table_dialog .el-dialog__body {
+  height: 100%;
+  padding: 0;
+}
+.table_dialog .el-table tr {
+  background: none;
+}
+.table_dialog .el-table td.el-table__cell,
+.table_dialog .el-table th.el-table__cell.is-leaf {
+  border-color: rgba(16, 128, 255, 0.4);
+  color: #fff;
+}
+.table_dialog .el-input__inner {
+  background: none;
+  border: none;
+  color: #01fffa;
+  height: 36px;
+  line-height: 36px;
+}
+.table_dialog .el-table th.el-table__cell {
+  background: none;
+}
+.table_dialog .el-table--border::after,
+.table_dialog .el-table--group::after,
+.table_dialog .el-table::before {
+  background-color: rgba(16, 128, 255, 0.4);
+}
+.table_dialog .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background: #06111B !important;
+}
+.table_dialog .pagination {
+  margin-top: 20px;
+  color: #fff;
+  text-align: center;
+}
+.table_dialog .pagination .el-pager li {
+  background: none;
+  color: #fff;
+}
+.table_dialog .pagination .el-pagination .btn-next,
+.table_dialog .pagination .el-pagination .btn-prev {
+  background: none;
+  color: #fff;
+}
+.table_dialog .pagination .el-pagination__jump {
+  color: #fff;
+}
+.el-select-dropdown,
+.el-picker-panel {
+  background-color: #0b202f;
+  border-color: rgba(16, 128, 255, 0.4);
+}
+.el-table td {
+  padding: 4px 0px;
+}
+.el-date-table__row .available {
+  color: #fff;
+}
+.el-date-picker__header .el-picker-panel__icon-btn {
+  color: #fff;
+}
+.el-date-picker__header .el-date-picker__header-label {
+  color: #fff;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: #0b202f;
+  color: #fff;
+}
+.popper__arrow {
+  border-color: #0b202f;
+}
+.el-button--text {
+  color: #01fffa;
+}
+.mapparent {
+  width: 98%;
+  height: 800px;
+  margin: 0 auto;
+  margin-top: 1%;
+  background: #0a2a3a;
+  border-radius: 8px;
+}
+.banrutimg {
+  width: 88px;
+  height: 36px;
+  line-height: 36px;
+  background: url(@/assets/image/zhnj/backreturn.png) no-repeat;
+  background-size: 100% 100%;
+}
+.banrutimg span {
+  float: right;
+  color: #fff;
+  font-size: 16px;
+  margin-right: 20px;
+}
+.banrutimg:hover {
+  width: 88px;
+  height: 36px;
+  line-height: 36px;
+  float: right;
+  color: #fff;
+  font-size: 16px;
+  background: url(@/assets/image/zhnj/backreturnhover.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/pages/CqyzList/index.vue

@@ -9,11 +9,11 @@
   		<div class="main2">
 			<video class="fullscreenvideo"  id="bgvid"  playsinline="" autoplay="" muted="" loop="">
 <!--				<source src="@/assets/image/bg2.mp4" type="video/mp4">-->
-				<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
+				<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
 			</video>
 			<div class="nav">
 				<span class="nav_ti nav_mag">{{DetailList.stationName}}</span>
-				<span class="nav_tit">治理效果评价与预警一张图</span>
+				<span class="nav_tit">治理效果评价和监测一张图</span>
 			</div>
 			<div class="nav_btn">
 				<div class="btn_left">
@@ -172,7 +172,7 @@
 								<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
 							</div>
 <!--							<img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
-							<img src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
+							<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
 							<span class="zhpjtit" >{{DisplayListdetailList.detailValue}}</span>
 						</div>
 					</div>
@@ -359,7 +359,7 @@ export default {
   name: "CqyzList",
   data(){
     return {
-		urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
+		urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
 		player: null,
 		enableZ:false, //默认关闭电子放大
 		play: false, //默认停止播放
@@ -410,7 +410,7 @@ export default {
 		this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
 	})
 	getIndexSummry(stationCode).then(res=>{
-		if (res.code ='200'&&res.result.length>0) {
+		if (res.code == '200' && res.result.length > 0) {
 			this.NHSummry = res.result[0].NHSummry
 			this.TNSummry = res.result[0].TNSummry
 			this.TPSummry = res.result[0].TPSummry

src/pages/Login/index.vue

@@ -4,9 +4,9 @@
     <video autoplay loop muted preload
       style="width: 100%; height: 100%; object-fit: fill">
 <!--      <source src="@/assets/image/loginback.mp4">-->
-      <source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/loginback.mp4">
+      <source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">
     </video>
-    <img src="@/assets/image/logintltle.png" alt="" class="logintltle">
+    <img src="@/assets/image/logintltle3.png" alt="" class="logintltle">
     <el-form
          class="loginipt demo-ruleForm"
         :rules="rules"

src/pages/MywrList/index.vue

@@ -10,11 +10,11 @@
     <div class="main2" v-if="stationDetail">
       <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
         <!--				<source src="@/assets/image/bg2.mp4" type="video/mp4">-->
-        <source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
+        <source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
       </video>
       <div class="nav">
         <span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span>
-        <span class="nav_tit">治理效果评价与预警一张图</span>
+        <span class="nav_tit">治理效果评价和监测一张图</span>
       </div>
       <div class="nav_btn">
         <div class="btn_left">
@@ -52,19 +52,19 @@
               <img src="@/assets/image/sanguang.png" class="sanguang" alt="">
               <div>
                 <div class="in1con_lf_tit" style="position: relative;">
-                  <span class="in1con_lf_titshow">站点信息</span>
+                  <span class="in1con_lf_titshow">站点分析</span>
                   <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                   <!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
                   <span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
                 </div>
                 <div class="jczcov">
-                  <div class="switchLive">
-                    <span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
-                    <span v-show="currentPlayerLive"  @click="switchLive(false)">直播</span>
-                  </div>
                   <el-carousel width="100%" arrow="always" :interval="5000">
                     <el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
-                      <div class="jczimg" :id="value.deployCode"></div>
+                      <div class="switchLive">
+                        <span v-show="!currentPlayerLive[value.deployCode]" @click="switchLive(true, value.deployCode)">录播</span>
+                        <span v-show="currentPlayerLive[value.deployCode]"  @click="switchLive(false, value.deployCode)">直播</span>
+                      </div>
+                      <div class="jczimg" :id="'ezplayer' + value.deployCode"></div>
                     </el-carousel-item>
                   </el-carousel>
                 </div>
@@ -127,27 +127,27 @@
               <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
               <div>
                 <div class="in1con_lf_tit ">
-                  <span class="in1con_lf_titshow">重要污染实时监测</span>
+                  <span class="in1con_lf_titshow">重点指标实时数据</span>
                   <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                 </div>
                 <ul class="liMarqueeUp" style="height:206px;overflow:hidden;"  @click="showEchartDialog($event, 1)" >
-                    <vue-seamless-scroll :data="stationDetail.latestData" class="wp-1 hp-1" :class-option="classOption">
-                      <li class="jcsssj2" v-for="(item,index) in stationDetail.latestData" :key="index"
-                          :data-survItem="item.survItem" >
-                          <img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
-                          <div class="jcsssj_rt" >
-                            <!-- @click="showEchartDialog(item.survItem)" -->
-                            <div style="float: left;width: 60%;">
-                              <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
-                              <span class="jcsssj_rt_num">
+                  <vue-seamless-scroll :data="stationDetail.latestData" class="wp-1 hp-1" :class-option="classOption">
+                    <li class="jcsssj2" v-for="(item,index) in stationDetail.latestData" :key="index"
+                        :data-survItem="item.survItem" >
+                      <img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
+                      <div class="jcsssj_rt" >
+                        <!-- @click="showEchartDialog(item.survItem)" -->
+                        <div style="float: left;width: 60%;">
+                          <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
+                          <span class="jcsssj_rt_num">
                                 <span class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}
                               </span>
-                              <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
-                            </div>
-                            <span class="jcsssj_rt_time"  style="float: right;">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
-                          </div>
-                      </li>
-                    </vue-seamless-scroll>
+                          <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
+                        </div>
+                        <span class="jcsssj_rt_time"  style="float: right;">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
+                      </div>
+                    </li>
+                  </vue-seamless-scroll>
                 </ul>
               </div>
             </div>
@@ -159,7 +159,7 @@
               <img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
               <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
               <div class="zywr_lf_tit">
-                <span class="zywr_titshow">重要污染物趋势图</span>
+                <span class="zywr_titshow">重点污染指标趋势</span>
                 <el-select class="dataTypeEchart2"  v-model="dateType" placeholder="请选择" @change="changeDateType">
                   <el-option
                       v-for="item in dateTypeOptions"
@@ -192,12 +192,36 @@
                 <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
               </div>
               <!--							<img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
-              <img src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
-              <span class="zhpjtit">{{ DisplayListdetailList.detailValue }}</span>
+              <img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
+              <span class="zhpjtit">{{ DisplayListdetailList2?.detailValue }}</span>
             </div>
           </div>
           <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
-          <div>
+          <div class="xuqingchuli" v-if="stationType==='livestock'">
+            <div class="in1con_lf_tit ">
+              <span class="in1con_lf_titshow">畜禽粪污处理</span>
+              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
+            </div>
+            <div class="qxfwzcl">
+              <div class="qxfwzcl_left">
+                <div class="qxfwzcl_left_tit">
+                  {{DisplayListdetailList0?.detailCode}}
+                </div>
+                <span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList0?.detailValue}}</span>
+                <div class="qxfwzcl_left_tit">
+                  {{DisplayListdetailList1?.detailCode}}
+                </div>
+                <span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1?.detailValue}}</span>
+              </div>
+              <div class="qxfwzcl_rit">
+                <img src="@/assets/image/png01_iSpt.png" class="png01_iSpt" alt="">
+                <img src="@/assets/image/qcshuj.png" class="qcshuj" alt="">
+                <span class="qxfwzcl_rit_smt">{{DisplayListdetailList3?.detailCode}}</span>
+                <span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList3?.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
+              </div>
+            </div>
+          </div>
+          <div v-if="stationType==='watershed'">
             <div class="in1con_lf_tit ">
               <span class="in1con_lf_titshow">常规五参数实时监测</span>
               <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
@@ -208,7 +232,7 @@
                   <div class="wucanshuDiv">
                     <div class="wucanshuValueDiv">
                       <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
-                                       :to="waterData.dataWaterTemp" />
+                                      :to="waterData.dataWaterTemp" />
                       <span class="typeStyle">℃</span></div>
                   </div>
                   <div class="wucanshuNameDiv">水温</div>
@@ -217,7 +241,7 @@
                   <div class="wucanshuDiv">
                     <div class="wucanshuValueDiv">
                       <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
-                                       :to="waterData.dataWaterPh" /> <span class="typeStyle"></span></div>
+                                      :to="waterData.dataWaterPh" /> <span class="typeStyle"></span></div>
                   </div>
                   <div class="wucanshuNameDiv">PH值</div>
                 </div>
@@ -227,8 +251,8 @@
                   <div class="wucanshuDiv">
                     <div class="wucanshuValueDiv">
                       <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
-                                       :to="waterData.dataWaterDo" />
-                  <span class="typeStyle">mg/L</span></div>
+                                      :to="waterData.dataWaterDo" />
+                      <span class="typeStyle">mg/L</span></div>
                   </div>
                   <div class="wucanshuNameDiv">溶解氧</div>
                 </div>
@@ -236,8 +260,8 @@
                   <div class="wucanshuDiv">
                     <div class="wucanshuValueDiv">
                       <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
-                                       :to="waterData.dataWaterDdl" />
-                       <span class="typeStyle">μS/cm</span>
+                                      :to="waterData.dataWaterDdl" />
+                      <span class="typeStyle">μS/cm</span>
                     </div>
                   </div>
                   <div class="wucanshuNameDiv">电导率</div>
@@ -255,24 +279,126 @@
               </div>
             </div>
           </div>
-          <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
-          <div>
+          <div v-if="stationType==='orient'">
             <div class="in1con_lf_tit ">
-              <span class="in1con_lf_titshow">监测站维护日志</span>
+              <span class="in1con_lf_titshow">水质数据实时监测</span>
               <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
             </div>
-            <div style="padding-left: 30px; margin-top: 26px; ">
-              <el-timeline>
-                <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"
-                                   :placement="`top`">
-                  <div class="maintainLog">
-                    <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>
-                    <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>
-                    <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;
-                      <span class="el-icon-time"></span> {{activity.maintainTime}}</div>
+            <div v-if="stationDetail.latestData && stationDetail.latestData.length > 0">
+              <div class="changguiwucanshu">
+                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[0].survItem)"
+                     v-if="stationDetail.latestData.length > 0">
+                  <div class="wucanshuDiv">
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
+                                      :to="(stationDetail.latestData[0].value?stationDetail.latestData[0].value:0)" />
+                      <span class="typeStyle">{{ stationDetail.latestData[0].unit }}</span></div>
                   </div>
-                </el-timeline-item>
-              </el-timeline>
+                  <div class="wucanshuNameDiv">{{stationDetail.latestData[0].name}}</div>
+                </div>
+                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[1].survItem)"
+                     v-if="stationDetail.latestData.length > 1">
+                  <div class="wucanshuDiv">
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                      :to="(stationDetail.latestData[1].value?stationDetail.latestData[1].value:0)" />
+                      <span class="typeStyle">{{ stationDetail.latestData[1].unit }}</span></div>
+                  </div>
+                  <div class="wucanshuNameDiv">{{stationDetail.latestData[1].name}}</div>
+                </div>
+              </div>
+              <div class="changguiwucanshu" >
+                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[2].survItem)"
+                     v-if="stationDetail.latestData.length > 2">
+                  <div class="wucanshuDiv">
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                      :to="stationDetail.latestData[2].value?stationDetail.latestData[2].value:0" />
+                      <span class="typeStyle">{{ stationDetail.latestData[2].unit }}</span></div>
+                  </div>
+                  <div class="wucanshuNameDiv">{{stationDetail.latestData[2].name}}</div>
+                </div>
+                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[3].survItem)"
+                     v-if="stationDetail.latestData.length > 3">
+                  <div class="wucanshuDiv">
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                      :to="stationDetail.latestData[3].value?stationDetail.latestData[3].value:0" />
+                      <span class="typeStyle">{{ stationDetail.latestData[3].unit }}</span>
+                    </div>
+                  </div>
+                  <div class="wucanshuNameDiv">{{stationDetail.latestData[3].name}}</div>
+                </div>
+                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[4].survItem)"
+                     v-if="stationDetail.latestData.length > 4">
+                  <div class="wucanshuDiv">
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
+                                      :to="stationDetail.latestData[4].value?stationDetail.latestData[4].value:0" />
+                      <span class="typeStyle">{{ stationDetail.latestData[4].unit }}</span>
+                    </div>
+
+                  </div>
+                  <div class="wucanshuNameDiv">{{stationDetail.latestData[4].name}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
+          <!--          <div>-->
+          <!--            <div class="in1con_lf_tit ">-->
+          <!--              <span class="in1con_lf_titshow">监测站维护日志</span>-->
+          <!--              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">-->
+          <!--            </div>-->
+          <!--            <div style="padding-left: 30px; margin-top: 26px; ">-->
+          <!--              <el-timeline>-->
+          <!--                <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"-->
+          <!--                                   :placement="`top`">-->
+          <!--                  <div class="maintainLog">-->
+          <!--                    <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>-->
+          <!--                    <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>-->
+          <!--                    <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;-->
+          <!--                      <span class="el-icon-time"></span> {{activity.maintainTime}}</div>-->
+          <!--                  </div>-->
+          <!--                </el-timeline-item>-->
+          <!--              </el-timeline>-->
+          <!--            </div>-->
+          <!--          </div>-->
+          <div>
+            <div class="in1con_lf_tit ">
+              <span class="in1con_lf_titshow">监测与预警</span>
+              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
+            </div>
+            <div style=" margin-top: 26px; margin-bottom: 10px; ">
+              <el-collapse-transition>
+                <el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
+                  <el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
+                                    :size="'normal'" :placement="`top`" style="top: 20px;" >
+                    <div class="maintainLog">
+                      <div class="maintainLogContent">
+                        <span class="el-icon-mobile"></span>&nbsp;
+                        <span>{{activity.itemName}}</span>
+                        <span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>
+                        <span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>
+                        <!--                      <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</span>-->
+                        <span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
+                      </div>
+                      <div class="maintainLogPerson"></div>
+                      <div class="maintainLogTime">
+                        <span class="el-icon-time"></span>&nbsp;{{activity.alertTime}}
+                      </div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </el-collapse-transition>
+              <div v-if="alertList && alertList.length <= 0">
+                <div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
+              </div>
+              <div v-if="!alertList">
+                <div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
+                  <i class="el-icon-loading"></i>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -315,7 +441,15 @@
 
 <script>
 import ScaleBox from 'vue2-scale-box'
-import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
+import {
+  getStationDetail,
+  getStationDisplay,
+  getIndexSummry,
+  survItemSummary,
+  getMaintainLog,
+  stationInfo,
+  getAlertRecord, doGetAlertRecord
+} from '@/api';
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import hefentianqi from '@/pages/weather/weather.vue'
 import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
@@ -332,11 +466,12 @@ export default {
     return {
       loading: true,
       stationList:[],
-      currentPlayerLive: true,
+      currentPlayerLive: {},
       singleEchartDialogShowFlag: false,
       singleEchartData: null,
       stationCode: '',
-      urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
+      stationType:'',
+      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
       player: {},
       timer: {},
       interval: {},
@@ -346,14 +481,16 @@ export default {
       DetailListAirData: '',
       // DetailListSoilData: '',
       DisplayList: '',
-      DisplayListdetailList: '',
+      DisplayListdetailList0: '',
+      DisplayListdetailList1: '',
+      DisplayListdetailList2: '',
+      DisplayListdetailList3: '',
       inforname: '',
       dialogVisible: false,
       fullscreen: false, //全屏
       qczddialogTableVisible: false,
       waterData: {},
-      summryAllData: null,
-      echartIndex: 0,
+      summryAllDataJson: null,
       maintainLogList: [],
       dateType: 'monthDays',
       dateTypeOptions: [ {
@@ -368,22 +505,11 @@ export default {
       }],
       echartObj: null,
       animateObj: [],
+      alertList: null,
     };
   },
   destroyed() {
-    //离开页面是销毁
-    Object.values(this.timer).map(item => {
-      if(item){
-        clearTimeout(item);
-      }
-    });
-    Object.values(this.interval).map(item => {
-      if(item){
-        clearInterval(item);
-      }
-    });
-    this.interval = {};
-    this.timer = {};
+    this.doDestroyed();
   },
   created() {
     this.stationCode = this.$route.query.stationCode
@@ -403,22 +529,53 @@ export default {
     },
   },
   mounted() {
-    this.initStart();
-    this.stationInfoApi();
+    this.initStart()
   },
   methods: {
+    doDestroyed(){
+      let that = this;
+      that.alertList = null;
+      //离开页面时销毁
+      Object.values(this.timer).map(item => {
+        if(item){
+          clearTimeout(item);
+        }
+      });
+      Object.values(this.interval).map(item => {
+        if(item){
+          clearInterval(item);
+        }
+      });
+      this.interval = {};
+      this.timer = {};
+      if(that.player){
+        Object.keys(that.player).forEach(key => {
+          if(that.player[key]){
+            console.log(that.player[key])
+            if(that.player[key].stop){that.player[key].stop();}
+            if(that.player[key].destroy){that.player[key].destroy();}
+          }
+        })
+        that.player = {};
+      }
+    },
     initStart(){
       this.loading = true;
       // 实时时间
       this.infor()
       getStationDisplay(this.stationCode).then(val => {
         this.DisplayList = val.result
-        this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
+        this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
+        this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
+        this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
+        this.DisplayListdetailList3 = val.result.effect_assess[0].detailList[3]
       })
       this.initChartData();//下方echart监测图标
       this.stationDetailApi();
       this.getNowTime();
       this.initMaintainLog();
+      this.stationInfoApi();
+      this.getAlertRecord();
     },
     initMaintainLog(){//巡检日志
       getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
@@ -430,57 +587,66 @@ export default {
         }
       })
     },
+    getAlertRecord(){
+      doGetAlertRecord({stationCode: this.stationCode, pageSize: 3}).then(res => {
+        console.warn('监测预警数据',res)
+        if (res.code === 200) {
+          if(res.result.records.length === 0 && this.stationDetail.latestData !== 0){
+            //itemName survValue survUnit normalValue survUnit readStatus alertTime
+            let tempData = [];
+            this.stationDetail.latestData.map(item => {
+              tempData.push({
+                itemName: item.name,
+                survValue: item.value,
+                survUnit: item.unit,
+                normalValue: item.value,
+                readStatus: 'normal',
+                alertTime: item.dataDateTime,
+              });
+            })
+            this.alertList = tempData;
+          } else {
+            this.alertList = res.result.records;
+          }
+
+        }
+      })
+    },
     changeDateType() {
-      // this.summryAllData = null;
       this.initChartData();
     },
     initChartData() {
+      let that = this;
       this.riverList = [];
-      this.summryAllData = [];
-      getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
+      this.summryAllDataJson = {};
+      getIndexSummry({summrayMode: this.dateType, stationCode: this.stationCode}).then(res => {
         if (res.code === 200) {
-          this.summryAllData = res.result;
-          let len = this.summryAllData.length;
-          this.summryAllData.map((item1, index) => {
-            if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
-              let data1 = item1['datas'];
-              let keys = Object.keys(data1);
-              let data2 = this.summryAllData[index + 1]['datas'];
-              let data3 = {}
-              let item3 = JSON.parse(JSON.stringify(item1));
-              if (data2) {
-                keys.map(key => {
-                  if (data1[key] instanceof Array) {
-                    data3[key] = []
-                    data1[key].map((itemSub, index) => {
-                      data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
-                    })
-                  }
-                })
-                item3['datas'] = data3;
-                this.riverList.push(item3);
-              }
-            }
+          res.result.map(item => {
+            that.summryAllDataJson[item.stationCode] = item;
           });
-          this.initEchartDom(this.echartIndex)
+          this.initEchartDom()
         }
       })
     },
     // 折线图数据
-    initEchartDom(index) {
+    initEchartDom(times) {
       this.$nextTick(() => {
         let domKey = `myChartDiv0`;
         let divDom = document.getElementById(domKey);
         if (!divDom) {
-          console.log('没找到dom：', domKey, divDom)
+          console.warn('没找到dom,两秒后重试：', domKey, divDom)
+          if (times !== 2) {
+            setTimeout(() => {
+              this.initEchartDom(2)
+            }, 1500);
+          }
           return;
         }
-        if(this.echartObj){
+        if (this.echartObj) {
           this.echartObj.dispose();
         }
         this.echartObj = this.$echarts.init(divDom);
-        let data = this.summryAllData[index];
-        console.log('开始初始化echart：' )
+        let data = this.summryAllDataJson[this.stationCode];
         let dataObj = [];
         let i = 0;
         let colors = [
@@ -488,7 +654,7 @@ export default {
           '#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
           '#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
           '#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
-        ] ;
+        ];
         for (let key in data['datas']) {
           if (data['datas'][key] instanceof Array) {
             dataObj[i++] = {
@@ -571,19 +737,20 @@ export default {
           series: seriesData
         };
         this.echartObj.setOption(optionLine);
+
       })
     },
-    zdinfor(){
-      this.qczddialogTableVisible=true;
+    zdinfor() {
+      this.qczddialogTableVisible = true;
     },
     showEchartDialog(item, survItem) {
       console.log('showEchartDialog', item, survItem)
-      if(survItem === 1){
+      if (survItem === 1) {
         console.log('showEchartDialog111', item, survItem)
         const dom = item.target.closest(".jcsssj2"); // 定位元素
         if (dom) { // 是否是滚动组件的某一行/列
           survItem = dom.dataset.survitem
-          if(survItem){
+          if (survItem) {
             this.showEchartDialog(this.stationDetail, survItem)
           }
         }
@@ -616,7 +783,7 @@ export default {
     // 实时时间
     getNowTime() {
       let that = this
-      this.interval['time'] = setInterval(() =>{
+      this.interval['time'] = setInterval(() => {
         that.nowTime = that.timeNumber()
       }, 1000)
     },
@@ -639,25 +806,27 @@ export default {
     stationDetailApi() {
       let that = this;
       // this.stationDetail = null
-      if(that.stationDetail){
+      if (that.stationDetail) {
         that.stationDetail.latestData = []
       }
       getStationDetail(this.stationCode).then(res => {
         this.stationDetail = res.result
+        this.stationType = res.result.stationType
         this.DetailListAirData = res.result.latestAirData[0]
         //空气数据
-        if (this.DetailListAirData) { }
+        if (this.DetailListAirData) {
+        }
         if (this.stationDetail.latestWaterData[0]) { //水数据
           this.stationDetail.latestWaterData.map(item => {
-            if(item.survItem == 'dataWaterTemp'){
+            if (item.survItem == 'dataWaterTemp') {
               that.waterData.dataWaterTemp = item.value
-            } else if(item.survItem == 'dataWaterPh'){
+            } else if (item.survItem == 'dataWaterPh') {
               that.waterData.dataWaterPh = item.value
-            } else if(item.survItem == 'dataWaterDo'){
+            } else if (item.survItem == 'dataWaterDo') {
               that.waterData.dataWaterDo = item.value
-            } else if(item.survItem == 'dataWaterDdl'){
+            } else if (item.survItem == 'dataWaterDdl') {
               that.waterData.dataWaterDdl = item.value
-            } else if(item.survItem == 'dataWaterNtu'){
+            } else if (item.survItem == 'dataWaterNtu') {
               that.waterData.dataWaterNtu = item.value
             }
           });
@@ -666,34 +835,39 @@ export default {
         }
         // 土壤数据
         // this.DetailListSoilData = res.result.latestSoilData[0]
-        that.currentPlayerLive = false;
+        that.currentPlayerLive = {};
         // 监控画面
         setTimeout(() => {
           this.switchLive(true);
         }, 2000)
       })
     },
-    switchLive(live){
+    switchLive(live, deployCode) {
       let that = this;
       this.stationDetail.deviceList.forEach((item) => {
-        that.initPlayer(item, live);
+        if (!deployCode) {
+          that.initPlayer(item, live);
+        } else if (deployCode == item.deployCode) {
+          that.initPlayer(item, live);
+        }
+
       })
     },
-    initPlayer(itm, live){
+    initPlayer(itm, live) {
       let that = this;
-      if(this.currentPlayerLive === live){
+      if (this.currentPlayerLive[itm.deployCode] === live) {
         return;
       }
-      that.currentPlayerLive = live;
-      if(that.player[itm.deployCode]){
+      that.currentPlayerLive[itm.deployCode] = live;
+      if (that.player[itm.deployCode]) {
         that.player[itm.deployCode].stop();
         that.player[itm.deployCode].destroy();
       }
       that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
-        id: itm.deployCode,
+        id: 'ezplayer' + itm.deployCode,
         accessToken: itm.ysToken,
-        url: itm.deviceUrl,
-        template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
+        url: itm.deviceUrl || itm.deviceIotUrl,
+        template: live ? "pcLive" : "pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
         audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
         sound: 0,
         autoplay: true,
@@ -704,21 +878,25 @@ export default {
           that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]);
           if (that.player[itm.deployCode]) {
             console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
-            that.player[itm.deployCode].closeSound();
             that.timer[itm.deployCode] = setTimeout(() => {
-              that.player[itm.deployCode].closeSound();
+              if (that.player[itm.deployCode] && that.player[itm.deployCode].closeSound) {
+                that.player[itm.deployCode].closeSound();
+              }
             }, 2000)
             that.timer[itm.deployCode] = setTimeout(() => {
-              that.player[itm.deployCode].pause()
+              if (that.player[itm.deployCode] && that.player[itm.deployCode].pause) {
+                that.player[itm.deployCode].pause()
+              }
             }, 60000)
           }
         },
       })
     },
-    stationInfoApi(){
+    stationInfoApi() {
       stationInfo().then(res => {
         this.stationInfoList = res.result
         if (this.stationInfoList) {
+          this.stationList = [];
           res.result.map(item => {
             this.stationList.push({
               stationCode: item.stationCode,
@@ -728,23 +906,24 @@ export default {
         }
       })
     },
-    switchStation(e){
-      console.log(e);
+    switchStation(e) {
+      console.log('切换站点');
+      this.doDestroyed();
       // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
       this.initStart();
     },
-    addAnimateObj(dom){
+    addAnimateObj(dom) {
       this.animateObj.push(dom);
       // console.log('特效数组添加', this.animateObj.length);
     },
     hhlistxunh() {
       // console.log('数据特效 轮询展示', this.animateObj);
-      if(this.timer['water']){
+      if (this.timer['water']) {
         clearTimeout(this.timer['water'])
       }
       this.animateObj.forEach((item, index) => {
         // console.log('数据特效 轮询展示', item);
-        if(Boolean(Math.round(Math.random()))) {
+        if (Boolean(Math.round(Math.random()))) {
           item && item.start && item.start();
         }
 
@@ -1334,7 +1513,7 @@ export default {
   height: 2.4vw;
   background: #0c2139;
   float: right;
-  display:block;
+  display: block;
 }
 
 .jcsssj_rt_tit {
@@ -2341,6 +2520,7 @@ a:hover {
   display: flex;
   justify-content: center;
   cursor: pointer;
+
   .wucanshuDiv {
     width: 144px;
     height: 104px;
@@ -2349,9 +2529,10 @@ a:hover {
     background-size: cover;
     text-align: center;
     cursor: pointer;
+
     .wucanshuValueDiv {
       font-weight: 300;
-      font-family: HYChangLiSongKeBen,  sans-serif;
+      font-family: HYChangLiSongKeBen, sans-serif;
       letter-spacing: 0.1vw;
       display: block;
       font-size: 26px;
@@ -2360,20 +2541,23 @@ a:hover {
       padding-left: 27px;
       padding-top: 12px;
       cursor: pointer;
+
       .typeStyle {
         font-family: sans-serif;
         margin-left: 4px;
         font-size: 12px;
       }
     }
+
     .wucanshuValueDiv:hover {
       color: #f4d877;
       font-size: 29px;
     }
   }
+
   .wucanshuDiv:hover {
     color: #f4d877 !important;
-    font-size: 29px!important;
+    font-size: 29px !important;
   }
 
   .wucanshuNameDiv {
@@ -2384,7 +2568,8 @@ a:hover {
     font-size: 14px;
   }
 }
-.maintainLog{
+
+.maintainLog {
   position: relative;
   bottom: 28px;
   width: 344px;
@@ -2393,43 +2578,155 @@ a:hover {
   background-origin: border-box;
   background-size: contain;
   color: white;
-  .maintainLogContent{
+
+  .maintainLogContent {
     padding-left: 74px;
-    padding-top: 8px;
+    //padding-top: 8px;
     color: #81b8e9;
     width: 258px; /* 设置容器宽度 */
     overflow: hidden; /* 隐藏超出部分 */
     text-overflow: ellipsis; /* 显示省略号 */
     white-space: nowrap; /* 禁止换行 */
   }
-  .maintainLogPerson{
+
+  .maintainLogPerson {
     display: none;
   }
-  .maintainLogTime{
+
+  .maintainLogTime {
     padding-left: 74px;
     padding-top: 8px;
     color: #bcbbbb;
   }
 }
+
 .el-timeline-item__tail {
   border-left-color: rgb(71 105 172) !important;
 }
-.dataTypeEchart2{
+
+.dataTypeEchart2 {
   left: 246px;
   top: 0px;
 }
+
 .switchLive {
-  position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
+  position: absolute;
+  cursor: pointer;
+  top: 2px;
+  right: 16px;
+  color: rgb(255, 255, 255);
+  z-index: 500;
 }
+
 .switchLive:hover {
   color: rgb(236, 196, 23);
 }
+
 .switchStation {
   position: absolute;
   right: 450px;
-  cursor:pointer;
+  cursor: pointer;
   z-index: 2000;
   width: 180px
 }
+
+.xuqingchuli {
+  .in1con_lf_tit {
+    width: 100%;
+    height: 3vw;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .in1con_lf_titshow {
+    font-size: 1vw;
+    color: #fff;
+    text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
+    display: block;
+    margin-top: 0.9vw;
+    font-family: douyuFont;
+  }
+
+  .qxfwzcl {
+    width: 100%;
+    margin-top: 1vw;
+    overflow: hidden;
+  }
+
+  .qxfwzcl_left {
+    width: 40%;
+    float: left;
+  }
+
+  .qxfwzcl_rit {
+    width: 60%;
+    float: right;
+    position: relative;
+  }
+
+  .qxfwzcl_left_tit {
+    width: 90%;
+    height: 1.4vw;
+    line-height: 1.4vw;
+    background: url(../../assets/image/qctit.png) no-repeat;
+    background-size: cover;
+    margin-left: 5%;
+    color: #e5eefa;
+    padding-left: 0.6vw;
+    font-size: 0.7vw;
+  }
+
+  .qxfwzcl_left_num {
+    width: 100%;
+    display: block;
+    text-align: center;
+    font-size: 1.8vw;
+    color: #f1ff0d;
+    margin-top: 0.2vw;
+    margin-bottom: 1vw;
+  }
+
+  .in1con_lf_imglf_num_jix {
+    font-size: 1.5vw;
+    font-weight: 300;
+    font-family: HYChangLiSongKeBen;
+    letter-spacing: 0.1vw
+  }
+
+  .qxfwzcl_rit_smt {
+    font-size: 0.7vw;
+    color: #fff;
+    position: absolute;
+    top: 8.4vw;
+    left: 25%;
+    z-index: 2;
+  }
+
+  .qxfwzcl_rit_num {
+    font-size: 2vw;
+    color: #f1ff0d;
+    position: absolute;
+    top: 4.4vw;
+    left: 34%;
+    z-index: 2;
+  }
+
+  .png01_iSpt {
+    width: 150%;
+    position: absolute;
+    top: -3vw;
+    left: -34%;
+    z-index: 2;
+  }
+
+  .qcshuj {
+    width: 100%;
+    position: absolute;
+    top: -2vw;
+    left: 0;
+    z-index: 1;
+  }
+}
 </style>
 

src/pages/weather/weather.vue

@@ -6,7 +6,7 @@
 <!--            src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"-->
 <!--            style="pointer-events: none;"></iframe>-->
 <!--    <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>-->
-    <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=fenxi" frameborder="0"></iframe>
+    <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=wuxiang" frameborder="0"></iframe>
   </div>
 </template>