diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index fe24a06..9f944be 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -1110,4 +1110,9 @@
   color: #FF4500 !important;
   border-color: #FF4500 !important;
 }
+
+:deep(.amap-info-content) {
+  background: transparent !important;
+  padding: 0 !important;
+}
 /* 危废车辆列表完成 */
\ No newline at end of file
diff --git a/src/assets/image/add.png b/src/assets/image/add.png
new file mode 100644
index 0000000..f55a732
Binary files /dev/null and b/src/assets/image/add.png differ
diff --git a/src/assets/image/big_background.png b/src/assets/image/big_background.png
new file mode 100644
index 0000000..408ae31
Binary files /dev/null and b/src/assets/image/big_background.png differ
diff --git a/src/assets/image/liuliang.png b/src/assets/image/liuliang.png
new file mode 100644
index 0000000..cc18ee2
Binary files /dev/null and b/src/assets/image/liuliang.png differ
diff --git a/src/assets/image/play.png b/src/assets/image/play.png
new file mode 100644
index 0000000..a422738
Binary files /dev/null and b/src/assets/image/play.png differ
diff --git a/src/assets/image/reduce.png b/src/assets/image/reduce.png
new file mode 100644
index 0000000..9a43267
Binary files /dev/null and b/src/assets/image/reduce.png differ
diff --git a/src/assets/image/zhnj/03_01.png b/src/assets/image/zhnj/03_01.png
new file mode 100644
index 0000000..03a5a20
Binary files /dev/null and b/src/assets/image/zhnj/03_01.png differ
diff --git a/src/assets/image/zhnj/back.png b/src/assets/image/zhnj/back.png
new file mode 100644
index 0000000..b3770d4
Binary files /dev/null and b/src/assets/image/zhnj/back.png differ
diff --git a/src/assets/image/zhnj/backreturn.png b/src/assets/image/zhnj/backreturn.png
new file mode 100644
index 0000000..1011711
Binary files /dev/null and b/src/assets/image/zhnj/backreturn.png differ
diff --git a/src/assets/image/zhnj/backreturnhover.png b/src/assets/image/zhnj/backreturnhover.png
new file mode 100644
index 0000000..760a463
Binary files /dev/null and b/src/assets/image/zhnj/backreturnhover.png differ
diff --git a/src/assets/image/zhnj/biaoti.png b/src/assets/image/zhnj/biaoti.png
new file mode 100644
index 0000000..e750d8d
Binary files /dev/null and b/src/assets/image/zhnj/biaoti.png differ
diff --git a/src/assets/image/zhnj/button01.png b/src/assets/image/zhnj/button01.png
new file mode 100644
index 0000000..713daf5
Binary files /dev/null and b/src/assets/image/zhnj/button01.png differ
diff --git a/src/assets/image/zhnj/button02.png b/src/assets/image/zhnj/button02.png
new file mode 100644
index 0000000..7101caf
Binary files /dev/null and b/src/assets/image/zhnj/button02.png differ
diff --git a/src/assets/image/zhnj/bzj.png b/src/assets/image/zhnj/bzj.png
new file mode 100644
index 0000000..d81e27b
Binary files /dev/null and b/src/assets/image/zhnj/bzj.png differ
diff --git a/src/assets/image/zhnj/close.png b/src/assets/image/zhnj/close.png
new file mode 100644
index 0000000..deb1687
Binary files /dev/null and b/src/assets/image/zhnj/close.png differ
diff --git a/src/assets/image/zhnj/location.png b/src/assets/image/zhnj/location.png
new file mode 100644
index 0000000..3681a51
Binary files /dev/null and b/src/assets/image/zhnj/location.png differ
diff --git a/src/assets/image/zhnj/nongji.png b/src/assets/image/zhnj/nongji.png
new file mode 100644
index 0000000..2d54494
Binary files /dev/null and b/src/assets/image/zhnj/nongji.png differ
diff --git a/src/assets/image/zhnj/nynjicon3.png b/src/assets/image/zhnj/nynjicon3.png
new file mode 100644
index 0000000..3b52b14
Binary files /dev/null and b/src/assets/image/zhnj/nynjicon3.png differ
diff --git a/src/assets/image/zhnj/nynjicon5.png b/src/assets/image/zhnj/nynjicon5.png
new file mode 100644
index 0000000..b23ce7c
Binary files /dev/null and b/src/assets/image/zhnj/nynjicon5.png differ
diff --git a/src/assets/image/zhnj/nynjicon6.png b/src/assets/image/zhnj/nynjicon6.png
new file mode 100644
index 0000000..6810371
Binary files /dev/null and b/src/assets/image/zhnj/nynjicon6.png differ
diff --git a/src/assets/image/zhnj/other.png b/src/assets/image/zhnj/other.png
new file mode 100644
index 0000000..84428d2
Binary files /dev/null and b/src/assets/image/zhnj/other.png differ
diff --git a/src/assets/image/zhnj/owner.png b/src/assets/image/zhnj/owner.png
new file mode 100644
index 0000000..94b9fbe
Binary files /dev/null and b/src/assets/image/zhnj/owner.png differ
diff --git a/src/assets/image/zhnj/sgj.png b/src/assets/image/zhnj/sgj.png
new file mode 100644
index 0000000..ef45afb
Binary files /dev/null and b/src/assets/image/zhnj/sgj.png differ
diff --git a/src/assets/image/zhnj/state.png b/src/assets/image/zhnj/state.png
new file mode 100644
index 0000000..a957577
Binary files /dev/null and b/src/assets/image/zhnj/state.png differ
diff --git a/src/assets/image/zhnj/tlj.png b/src/assets/image/zhnj/tlj.png
new file mode 100644
index 0000000..0163cae
Binary files /dev/null and b/src/assets/image/zhnj/tlj.png differ
diff --git a/src/assets/image/zhnj/wx.png b/src/assets/image/zhnj/wx.png
new file mode 100644
index 0000000..49d363b
Binary files /dev/null and b/src/assets/image/zhnj/wx.png differ
diff --git a/src/assets/image/zhnj/zj01.png b/src/assets/image/zhnj/zj01.png
new file mode 100644
index 0000000..5fcb280
Binary files /dev/null and b/src/assets/image/zhnj/zj01.png differ
diff --git a/src/assets/image/zhnj/zj02.png b/src/assets/image/zhnj/zj02.png
new file mode 100644
index 0000000..0c0f8ea
Binary files /dev/null and b/src/assets/image/zhnj/zj02.png differ
diff --git a/src/assets/image/zhnj/zj03.png b/src/assets/image/zhnj/zj03.png
new file mode 100644
index 0000000..af485f0
Binary files /dev/null and b/src/assets/image/zhnj/zj03.png differ
diff --git a/src/assets/image/zhnj/zygj.png b/src/assets/image/zhnj/zygj.png
new file mode 100644
index 0000000..2fe5970
Binary files /dev/null and b/src/assets/image/zhnj/zygj.png differ
diff --git a/src/assets/image/zhwl/tcdiliul.png b/src/assets/image/zhwl/tcdiliul.png
new file mode 100644
index 0000000..c9d103e
Binary files /dev/null and b/src/assets/image/zhwl/tcdiliul.png differ
diff --git a/src/components/LiulDialog.vue b/src/components/LiulDialog.vue
new file mode 100644
index 0000000..52889cd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SoilDialog copy.vue b/src/components/SoilDialog copy.vue
new file mode 100644
index 0000000..c862c9a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/zhnjCov.vue b/src/components/zhnjCov.vue
new file mode 100644
index 0000000..96f4bdf
--- /dev/null
+++ b/src/components/zhnjCov.vue
@@ -0,0 +1,1494 @@
+<template>
+	<div class="yqgkcCon nynj">
+		<span class="showzhnj" @click="tableDialogVisible = true">详情>></span>
+		<img src="@/assets/images/zhnj/nynjicon3.png" alt="" class="nynjicon3">
+		<div class="gdjCov">
+			<span class="titlf">{{njnumListValue[0].name}}</span>
+			<span class="numLf">{{njnumListValue[0].value}} <span>台</span> </span>
+		</div>
+		<div class="gdjCov2">
+			<span class="titlf">{{njnumListValue[1].name}}</span>
+			<span class="numLf">{{njnumListValue[1].value}} <span>台</span> </span>
+		</div>
+		<div class="gdjCov3">
+			<span class="titlf">{{njnumListValue[2].name}}</span>
+			<span class="numLf">{{njnumListValue[2].value}} <span>台</span> </span>
+		</div>
+		<div class="gdjCov4">
+			<span class="titlf">{{njnumListValue[3].name}}</span>
+			<span class="numLf">{{njnumListValue[3].value}} <span>台</span> </span>
+		</div>
+		<div class="zycsCov">
+			<img src="@/assets/images/zhnj/nynjicon6.png" alt="" class="nynjicon6">
+			<img src="@/assets/images/zhnj/nynjicon5.png" alt="" class="nynjicon5">
+			<span class="namecs">作业次数</span>
+			<div class="jziList">
+				<div class="lixiOne">
+					<span class="number">{{zycsnumListValue[0].value}} <span> 次</span></span>
+					<span class="gdjNae">{{zycsnumListValue[0].text}}</span>
+				</div>
+				<div class="lixiOne">
+					<span class="number">{{zycsnumListValue[1].value}} <span> 次</span></span>
+					<span class="gdjNae">{{zycsnumListValue[1].text}}</span>
+				</div>
+				<div class="lixiOne">
+					<span class="number">{{zycsnumListValue[2].value}} <span> 次</span></span>
+					<span class="gdjNae">{{zycsnumListValue[2].text}}</span>
+				</div>
+				<div class="lixiOne">
+					<span class="number">{{zycsnumListValue[3].value}} <span> 次</span></span>
+					<span class="gdjNae">{{zycsnumListValue[3].text}}</span>
+				</div>
+			</div>
+		</div>
+		<div class="taishu">
+			<span class="numshu">{{njnumListValue[0].value+njnumListValue[1].value+njnumListValue[2].value+njnumListValue[3].value}}</span>
+			<span class="numtai">台</span>
+		</div>
+
+
+		<!-- 智慧农机列表 -->
+		<el-dialog custom-class="table_dialog" top="85px" :show-close="false"  width="100%"   destroy-on-close
+			append-to-body :visible.sync="tableDialogVisible">
+			<div class="inner_width" style="background: #0B2536;overflow:hidden;height:106%;">
+				<img class="inner-img-w" src="@/assets/images/big_background.png" alt="">
+				<div class="content-box"  style="margin-top:10px;">
+					<el-row :gutter="20">
+						<el-col :span="3">
+							<el-select class="selopt" v-model="value" placeholder="请选择作业类型">
+								<el-option v-for="item in workType" :key="item.val" :label="item.label"
+									:value="item.val">
+								</el-option>
+							</el-select>
+						</el-col>
+						<el-col :span="3">
+							<el-select class="selopt" v-model="value3" placeholder="请选择车辆类型">
+								<el-option v-for="item in carType" :key="item.val" :label="item.label"
+									:value="item.val">
+								</el-option>
+							</el-select>
+						</el-col>
+						<el-col :span="3">
+							<el-input class="selopt" v-model="input" placeholder="请输入机主姓名"></el-input>
+						</el-col>
+						<el-col :span="3">
+							<div class="sousuocov">
+								<img style="width: 16px;height:18px;margin-top:10px;" src="@/assets/images/zhnjshow/query.png" alt="">
+								<span>查询</span>
+							</div>
+						</el-col>
+						<el-col :offset="10" :span="2">
+							<div style="height: 36px;width:88px;display: flex;align-items: center;justify-content: center;cursor: pointer;"
+								@click="close">
+								<div class="banrutimg"> 
+									<span>返回</span>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+					<el-table :data="njListNumValue.records" style="background: none;margin-top: 30px;" :header-row-style="rowstyle" :row-class-name="tableRowClassName">
+						<!-- :row-class-name="tableRowClassName" -->
+						<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+						<el-table-column property="cooperative" label="合作社" align="center"></el-table-column>
+						<el-table-column property="ownerName" label="驾驶员" align="center"></el-table-column>
+						<el-table-column property="typeClass_dictText" label="农机类别" align="center"></el-table-column>
+						<el-table-column property="venderName" label="品牌型号" align="center"></el-table-column>
+						<el-table-column property="deviceId" label="设备编号" align="center"></el-table-column>
+						<el-table-column property="workarea" label="总作业面积(亩)" align="center"></el-table-column>
+						<el-table-column property="date" label="操作" width="120" align="center">
+							<template slot-scope="scope">
+								<el-button type="text" @click="tableDialogVisible = false;detailDialogVisible = true;njjkshow(scope.row)">
+									<img style="width: 16px;height:16px;" src="@/assets/images/zhnjshow/look.png" alt="">
+									作业历史
+								</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+					<div class="pagination">
+						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+							:current-page.sync="currentPage" :page-size="njListNumValue.size" layout="prev, pager, next, jumper"
+							:total="njListNumValue.total">
+						</el-pagination>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
+
+
+		<!-- 农机详情弹窗 -->
+		<el-dialog custom-class="table_dialog" top="85px" :show-close="false" width="100%" @close="handleModalClick"   destroy-on-close
+			append-to-body :visible.sync="detailDialogVisible">
+			<div class="inner_width" style="overflow:hidden;height:106%;">
+				<img class="inner-img-w" src="@/assets/images/big_background.png" alt="">
+				<div class="content-box">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<div class="njxqBat">
+								<span class="yxjlname">轮式拖拉机详情</span>
+							</div>
+						</el-col>
+						<el-col :offset="16" :span="2">
+							<div v-if="mapTcData=='mapTc'" style="height: 40px;display: flex;align-items: center;justify-content: center;cursor: pointer;"
+								@click="close">
+								<div class="banrutimg"> 
+									<span>返回</span>
+								</div>
+							</div>
+							<div v-else style="height: 40px;display: flex;align-items: center;justify-content: center;cursor: pointer;"
+								@click="detailDialogVisible = false;tableDialogVisible = true">
+								<div class="banrutimg"> 
+									<span>返回</span>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<div class="grid-content bg-purple">
+								<div class="njxxtab">
+									<img style="width: 22px;height:18px;display:inline-block;margin-top:6px;" src="@/assets/images/zhnjshow/tractor.png" alt="">
+									农机信息
+								</div>
+								<div class="nnjxxCov">
+									<span class="njname">农机类别： <span>{{rownjList.typeClass_dictText}}</span> </span>
+									<span class="njname">出厂编号： <span>{{rownjList.venderName}}</span> </span>
+									<span class="njname">设备编号： <span>{{rownjList.deviceId}}</span> </span>
+									<span class="njname">所属企业： <span>{{rownjList.deptPath}}</span> </span>
+									<span class="njname">农机机主： <span>{{rownjList.ownerName}}</span> </span>
+									<span class="njname">机主电话： <span>{{rownjList.ownerPhone}}</span> </span>
+								</div>
+							</div>
+						</el-col>
+						<el-col :span="3">
+							<div class="grid-content bg-purple djcknj" @click="njshow(rownjList)">
+								<img src="@/assets/images/zhnjshow/big_tractor.png" alt="" class="tranjiconctor">
+								<span class="djcknjname">点击查看农机</span>
+							</div>
+						</el-col>
+						<el-col :span="9">
+							<div class="grid-content bg-purple njvideo">
+								<img src="@/assets/images/zhnjshow/lizi.gif" alt="" class="lizidong">
+								<img src="@/assets/images/zhnjshow/zlc.png" alt="" class="zlcpng">
+								<img src="@/assets/images/zhnjshow/samll_tractor.png" alt="" class="samlltractor">
+								<div class="zonglc">
+									<span class="namezlc">总里程：</span>
+									<span class="numZlc">{{rownjList.workmileage}} <span>公里</span> </span>
+								</div>
+								<div class="zong2lc">
+									<span class="namezlc">总时长：</span>
+									<span class="numZlc">{{rownjList.worktime}}  <span>小时</span> </span>
+								</div>
+								<div class="zong3lc">
+									<span class="namezlc">总面积：</span>
+									<span class="numZlc">{{rownjList.workarea}} <span>亩</span> </span>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="19">
+							<div class="njxqBat">
+								<span class="yxjlname">运行记录</span>
+							</div>
+						</el-col>
+						<el-col :span="3">
+							<!-- <el-input class="selopt" v-model="input" placeholder="请输入机主姓名"></el-input> -->
+							<el-date-picker
+								class="selopt"
+								v-model="valueTime"
+								type="date"
+								placeholder="选择日期">
+							</el-date-picker>
+						</el-col>
+						<el-col :span="2">
+							<div class="sousuocov">
+								<img style="width: 16px;height:18px;margin-top:10px;" src="@/assets/images/zhnjshow/query.png" alt="">
+								<span>查询</span>
+							</div>
+						</el-col>
+					</el-row>
+					<el-table :data="tableData" style="background: none;margin-top: 10px;" :header-row-style="rowstyle" :row-class-name="tableRowClassName">
+						<!-- :row-class-name="tableRowClassName" -->
+						<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+						<el-table-column property="address" width="400" label="作业地址" align="center"></el-table-column>
+						<el-table-column property="workType_dictText" label="作业类型" align="center"></el-table-column>
+						<el-table-column property="workWidth" label="作业幅宽（毫米）" align="center"></el-table-column>
+						<el-table-column property="workmileage" label="作业里程" align="center"></el-table-column>
+						<el-table-column property="workArea" label="作业面积(亩)" align="center"></el-table-column>
+						<el-table-column property="starttime" label="作业开始时间" align="center"></el-table-column>
+						<el-table-column property="endtime" label=" 作业结束时间" align="center"></el-table-column>
+						<el-table-column property="date" label="操作" width="100" align="center" >
+							<template slot-scope="scope">
+								<div @click="looktrajectory(scope.row)">
+									<el-button type="text" @click="tableDialogVisible = false;detailDialogVisible = true" >
+										<img style="width: 16px;height:16px;" src="@/assets/images/zhnjshow/look.png" alt="">
+										查看轨迹
+									</el-button>
+								</div>
+							</template>
+						</el-table-column>
+					</el-table>
+					<div class="pagination">
+						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+							:current-page.sync="currentPage" :page-size="tableTotal.size" layout="prev, pager, next, jumper"
+							:total="tableTotal.total">
+						</el-pagination>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
+
+
+
+		<el-dialog custom-class="table_dialog" top="85px" :show-close="false" width="100%" destroy-on-clos 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/images/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 v-if="zydtgb==true" style="height: 40px;float:right;cursor: pointer;"
+								@click="njxqshowguabi">
+								<div class="banrutimg"> 
+									<span>关闭</span>
+								</div>
+							</div>
+							<div v-else style="height: 40px;float:right;cursor: pointer;"
+								@click="njxqshow">
+								<div class="banrutimg"> 
+									<span>返回</span>
+								</div>
+							</div>
+						</div>
+						<div class="map-ul">
+							<div class="map-li">作业类型：{{zygjshow.workType_dictText}}</div>
+							<div class="map-li">地块编号：{{zygjshow.landno}}</div>
+							<div class="map-li">作业幅宽：{{zygjshow.workWidth}}毫米</div>
+							<div class="map-li">作业里程：{{zygjshow.workmileage}}</div>
+							<div class="map-li">作业时间：{{zygjshow.worktime}} </div>
+							<div class="map-li">作业面积：{{zygjshow.workArea}}亩</div>
+							<div class="map-li">作业地址：{{zygjshow.address}}</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/images/reduce.png" alt="">
+						<div>减速</div>
+					</div>
+					
+					<div class="play" v-if="playsttus == 0 || playsttus == 2" @click="silderInput">
+						<img  src="@/assets/images/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/images/puse.png" alt="">
+						<div>暂停</div> 
+					</div>
+					 
+					<div class="play" @click="fastforward">
+						<img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/images/add.png" alt="">
+						<div>加速</div>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
+
+	</div>
+</template>
+
+<script>
+    import { workList,queryTrajectory } from '@/api'
+	export default {
+		props: {
+			oldworkjiant:Boolean,
+			njnumListValue:Array,
+			zycsnumListValue:Array,
+			njListNumValue:Object,
+			idData:Object,
+			mapTcData:String,
+		},
+		name: "zzmjCov",
+		data() {
+			return {
+				tableDialogVisible: false,
+				options: [{
+					label: '选项一',
+					value: 1
+				}],
+				input: '',
+				value: '',
+				value3: '',
+				valueTime:'',
+				tableData: [],
+				carType: [{
+						label: '拖拉机',
+						val: '1'
+					},
+					{
+						label: '收获机',
+						val: '2'
+					},
+					{
+						label: '植保机',
+						val: '3'
+					},
+					{
+						label: '其他',
+						val: '4'
+					},
+					{
+						label: '插秧机',
+						val: '5'
+					},
+					{
+						label: '播种机',
+						val: '6'
+					},
+					{
+						label: '开沟机',
+						val: '7'
+					},
+					{
+						label: '灭茬机',
+						val: '8'
+					},
+					{
+						label: '穴播机',
+						val: '9'
+					},
+					{
+						label: '搂草机',
+						val: '10'
+					},
+					{
+						label: '无人机',
+						val: '11'
+					},
+					{
+						label: '制肥机',
+						val: '12'
+					},
+					{
+						label: ' 烘干机',
+						val: '13'
+					}
+				],
+				workType: [{
+						label: '其他作业',
+						val: '1'
+					},
+					{
+						label: '深松作业',
+						val: '13'
+					},
+					{
+						label: '播种作业',
+						val: '15'
+					},
+					{
+						label: '深翻作业',
+						val: '17'
+					},
+					{
+						label: '收获作业',
+						val: '20'
+					},
+					{
+						label: '植保作业(喷药)',
+						val: '30'
+					},
+					{
+						label: '插秧作业',
+						val: '41'
+					},
+					{
+						label: '秸秆还田作业',
+						val: '50'
+					},
+					{
+						label: '旋耕作业',
+						val: '61'
+					},
+
+				],
+				currentPage: 1,
+				pageSize: 6,
+				//拖拉机详情
+				detailDialogVisible: false,
+				seldate: '',
+				infolist: [{
+					label: '农机名称',
+					val: '轮式拖拉机'
+				}, {
+					label: '出厂编号',
+					val: 'YQ-4789'
+				}, {
+					label: '机主',
+					val: '关村股份经济联合社'
+				}, {
+					label: '生产企业',
+					val: '中国第一汽车制造集团'
+				}, {
+					label: '生产企业',
+					val: '3676465467'
+				}, {
+					label: '补贴金额',
+					val: '56800元'
+				}, {
+					label: '经销商',
+					val: '山西农工农机有限公司'
+				}, {
+					label: '农机性质',
+					val: '已结算'
+				}, {
+					label: '补贴地址',
+					val: '山西省临汾市襄汾县'
+				}],
+				runlist: [{
+					label: '总时长',
+					val: '56986.85小时'
+				}, {
+					label: '总里程',
+					val: '18696.36公里'
+				}, {
+					label: '总面积',
+					val: '45630.58亩'
+				}],
+				runData: [{
+					date: '2023-12-25',
+					duration: '12.23',
+					mileage: '123.26',
+					area: '古城镇',
+					openarea: '98.26',
+				}, {
+					date: '2024-01-05',
+					duration: '18.53',
+					mileage: '156.2',
+					area: '古城镇',
+					openarea: '115.3',
+				}, {
+					date: '2024-10-24',
+					duration: '54.55',
+					mileage: '86.55',
+					area: '关村',
+					openarea: '95',
+				}, {
+					date: '2024-10-12',
+					duration: '12.23',
+					mileage: '123.26',
+					area: '关村',
+					openarea: '46.26',
+				}, {
+					date: '2024-08-15',
+					duration: '12.23',
+					mileage: '65.56',
+					area: '古城镇',
+					openarea: '78.66',
+				}],
+				rownjList:'',
+				zygjshow:'',
+				//播放轨迹
+				mapDialogVisible: false,
+				myMap: {},
+				polyline: {},
+				passedPolyline: {},
+				marker: {},
+				int: null,
+				percentage: 50, // 进度条进度
+				sliderVal: 0,
+				progressTime: 0,
+				markerSpeed: 100, // 初始化速度
+				afterData: [], //后面的数据
+				lineArr: [],
+				playsttus:0,
+				duration:200,
+				// 播放轨迹结束
+				tableTotal:'',
+				zydtgb:false,
+			}
+		},
+		watch:{
+			oldworkjiant:{
+				handler(newValue, oldValue) {
+					if (newValue) {
+						this.detailDialogVisible = newValue
+					}
+				},
+				deep: true, // 启用深度监听
+				immediate:true,
+			},
+			idData:{
+				handler(newValue, oldValue) {
+					if (newValue) {
+						this.rownjList = this.idData
+						let devid = this.idData.deviceId
+						if (devid) {
+							workList(devid).then(res=>{
+								this.tableData = res.result.records
+								this.tableTotal = res.result
+							})
+						}
+					}
+				},
+				deep: true, // 启用深度监听
+				immediate:true,
+			},       
+		},
+		mounted() {
+			new window.AMap.plugin(['AMap.MouseTool', 'AMap.ElasticMarker', 'AMap.PolyEditor', 'AMap.ControlBar', 'AMap.CitySearch','AMap.Scale'], (res) => {})
+		},
+		methods: {
+			njxqshow(){
+				this.mapDialogVisible = false;
+				this.detailDialogVisible = true;
+				this.playsttus = 0
+				if (this.marker) {
+					this.marker.stopMove();
+				}
+			},
+			njxqshowguabi(){
+				this.mapDialogVisible=false;
+				this.playsttus = 0
+				if (this.marker) {
+					this.marker.stopMove();
+				}
+			},
+			njshow(row) {
+				this.$router.push({name:'zhnjshow',params: { rowItem: row }});
+			},
+			njjkshow(row){
+				this.mapTcData = ''
+				this.rownjList = row
+				let devid = row.deviceId
+				this.workListApi(devid)
+			},
+			workListApi(id){
+				let deviceId = id
+				workList(deviceId).then(res=>{
+					this.tableData = res.result.records
+					this.tableTotal = res.result
+				})
+			},
+			rowstyle() {
+				return {
+					color: '#1C89FF',
+					background: 'none',
+					'background-color': 'none',
+					padding: '15px 0'
+				}
+			},
+			close() {
+				this.tableDialogVisible = false
+				this.detailDialogVisible = false
+				this.$emit('closeold',false)
+			},
+			handleModalClick(){
+				this.detailDialogVisible = false
+				this.$emit('closeold',false)
+			},
+			searh() {
+
+			},
+			handleSizeChange(val) {
+
+			},
+			handleCurrentChange(val) {
+
+			},
+			tableRowClassName({row, rowIndex}) {
+			if (rowIndex % 2 === 0) {
+					return 'even-row';
+				} else {
+					return 'odd-row';
+				}
+			},
+			// 作业动态传过来的作业轨迹
+			childBMethod(value) {
+				// console.log('收到值:', value)
+				this.looktrajectory(value)
+				this.zydtgb = true
+			},
+			looktrajectory(row) {
+				this.zygjshow = row
+				this.lineArr = []
+				queryTrajectory([row.id]).then(res=>{
+					this.lineArr = res.result[0].trajectorys.map(item=>{
+						return [Number(item.lng),Number(item.lat)]
+					})
+					this.mapDialogVisible = true
+					this.$nextTick(() => {
+						// let dome = document.getElementById('trajectory')
+						this.myMap = new AMap.Map('trajectory', {
+							resizeEnable: true,
+							viewMode: "3D", // 使用3D视图
+							zoomEnable: true, // 地图是否可缩放，默认值为true
+							dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
+							doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
+							zoom: 17, //初始化地图级别 
+							center: this.lineArr[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,
+						//   detectRetina: true,
+						});
+						googleLayer.setMap(this.myMap);
+						this.loadMap(res)
+					})
+				})
+				
+			},
+			loadMap(res) {
+				this.polyline = new AMap.Polyline({
+					map: this.myMap,
+					path: this.lineArr,
+					showDir: true,
+					strokeColor: "#28F", //线颜色
+					strokeWeight: 6, //线宽
+				});
+				this.myMap.add(this.polyline);
+
+				// 添加路径的起点标记
+				this.marker = new AMap.Marker({
+					map: this.myMap,
+					position: this.lineArr[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(); // 根据覆盖物自适应展示地图
+
+				// this.startPathAnimation()
+			},
+			// startPathAnimation() {
+			// 	// 实现路径动画播放的逻辑
+			// 	// 这里使用简单的setInterval来模拟动画
+			// 	let step = 0;
+			// 	const interval = setInterval(() => {
+			// 		if (step >= this.path.length) {
+			// 			clearInterval(interval); // 动画结束，清除定时器
+			// 			return;
+			// 		}
+			// 		this.marker.setPosition(this.path[step]); // 更新标记位置
+			// 		step++;
+			// 	}, 100); // 每100毫秒移动一步
+			// },
+			
+			// 松开手触发
+			silderInput() {
+				
+				if(this.playsttus == 1){
+					this.pauseAnimation()
+					return false 
+				}else if(this.playsttus == 2){
+					
+					this.resumeAnimation()
+					return false
+				}else{
+					this.playsttus == 1
+				}
+				
+				let array = [];
+				if (this.afterData.length === 0) {
+					array = this.lineArr;
+				} else {
+					array = this.afterData
+				}
+				var that = this;
+				AMap.plugin("AMap.MoveAnimation", () => {
+					that.progressTime = that.formatSeconds(0);
+					console.log(array,1321321)
+					that.markerSpeed = that.markerSpeed * that.speedCount; //markerSpeed的值是100;
+					this.marker.moveAlong(array, {
+						duration: this.duration, //可根据实际采集时间间隔设置速度
+						autoRotation: true,
+					});
+					this.marker.on("moving", (e) => {
+						let lngs = e.passedPath[e.passedPath.length - 1].lng; // 经度 当前所在的位置信息; 
+						let lats = e.passedPath[e.passedPath.length - 1].lat; // 纬度
+						let info = [];
+						info.push('<div style="margin-top: -10px;">');
+						info.push("经度 :" + lngs);
+						info.push("纬度 :" + lats);
+						var index = this.lineArr.findIndex(([lng, lat]) => lng === lngs && lat === lats);
+						if (index > 0) {
+							this.sliderVal = index;
+						} 
+						this.passedPolyline.setPath(e.passedPath);
+						this.myMap.setCenter(e.target.getPosition(),true)
+						if(e.passedPath.length == this.lineArr.length){
+							this.playsttus = 0
+						}else if(e.passedPath.length < this.lineArr.length){
+							this.playsttus = 1
+						}
+						
+					});
+				});
+			},
+			sliderChange(val) {
+				let beforeData = this.lineArr.slice(0, val + 1); //包含val;
+				this.afterData = this.lineArr.slice(val + 1); //不包含val;因为不包含所以不能设置setPostion;
+				let info = [];
+				info.push('<div style="margin-top: -10px;">');
+				info.push("经度 :" + this.lineArr[val][0]);
+				info.push("纬度 :" + this.lineArr[val][1]);
+				let infoWindow = new AMap.InfoWindow({
+					content: info.join("<br/>"),
+					offset: new AMap.Pixel(3, -20),
+				});
+				console.log(this.lineAr,4654)
+				infoWindow.open(this.map, new AMap.LngLat(this.lineArr[val][0], this.lineArr[val][1]));
+				if (val > 0) { //解决车闪烁问题;
+					this.marker.setPosition(new AMap.LngLat(this.lineArr[val][0], this.lineArr[val][1]));
+				}
+				if (beforeData.length > 0) {
+					this.passedPolyline.setPath(beforeData); //设置走过的路径;
+				}
+			}, 
+			monitorInterval() { 
+				this.int = setInterval(() => {
+					this.sliderVal += 1 * this.speedCount;
+				}, (TIME_VARIABLE / 500) * 100);
+			},
+			pauseAnimation() {
+				clearInterval(this.int);
+				this.marker.pauseMove();
+				this.playsttus = 2 
+			},
+			jog(){
+				// clearInterval(this.int);
+				// this.marker.pauseMove();
+				this.duration += 50 
+				// this.marker.resumeMove();
+				this.marker.moveAlong(this.lineArr, {
+					duration: this.duration, //可根据实际采集时间间隔设置速度
+					autoRotation: true,
+				});
+			},
+			//快进
+			fastforward(){
+				// clearInterval(this.int);
+				// this.marker.pauseMove();
+				if(this.duration != 50){
+					this.duration -= 50
+				}
+				// this.marker.resumeMove();
+				this.marker.moveAlong(this.lineArr, {
+					duration: this.duration, //可根据实际采集时间间隔设置速度
+					autoRotation: true,
+				});
+			},
+			
+			// 继续回放
+			resumeAnimation() {
+				this.marker.resumeMove();
+			},
+			formatSeconds(value) {
+				var secondTime = parseInt(value); // 秒
+				var minuteTime = 0; // 分
+				var hourTime = 0; // 小时
+				if (secondTime > 60) {
+					minuteTime = parseInt(secondTime / 60);
+					secondTime = parseInt(secondTime % 60);
+					if (minuteTime > 60) {
+						hourTime = parseInt(minuteTime / 60);
+						minuteTime = parseInt(minuteTime % 60);
+					}
+				}
+				var result =
+					parseInt(secondTime) < 10 ?
+					"0" + parseInt(secondTime) :
+					"" + parseInt(secondTime);
+				result =
+					parseInt(minuteTime) < 10 ?
+					"0" + parseInt(minuteTime) + ":" + result :
+					"" + parseInt(minuteTime) + ":" + result;
+				return result;
+			},
+		}
+	};
+</script>
+
+
+<style scoped lang="less">
+	@import "@/assets/css/home.css";
+	:deep.el-pagination.is-background .el-pager li:not(.disabled).active{
+		background: #409EFF!important;
+	}
+</style>
+<style lang="less" >
+	.njxxtab{
+		width: 100%;
+		height: 30px;
+		line-height: 30px;
+		color: #fff;
+		font-size: 14px;
+		margin: 10px 0px;
+	}
+	.djcknj{
+		width: 188px;
+		height: 149px;
+		background: url(@/assets/images/zhnjshow/djcknj.png)no-repeat;
+		 background-size: 100% 100%;
+		background-position: center;
+		cursor: pointer;
+		.tranjiconctor{
+			width: 102px;
+			height: 72px;
+			margin-top: 14px;
+			margin-left: 50px;
+		}
+		.djcknjname{
+			font-size: 16px;
+			color:#01fffa ;
+			display: block;
+			text-align: center;
+			margin-top: 10px;
+		}
+	}
+	.njvideo{
+		width: 509px;
+		height: 172px;
+		position: relative;
+		float: right;
+		top: -30px;
+		.lizidong{
+			width: 509px;
+			height: 172px;
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: 1;
+			mix-blend-mode: color-dodge;
+		}
+		.zlcpng{
+			width: 509px;
+			height: 172px;
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: 2;
+		}
+		.samlltractor{
+			width: 76px;
+			height: 76px;
+			position: absolute;
+			top: 110px;
+			right: 220px;
+			z-index: 3;
+		}
+		.zonglc{
+			width: 200px;
+			height: 60px;
+			position: absolute;
+			top: -30px;
+			right: 160px;
+			z-index: 4;
+			text-align: center;
+			.namezlc{
+				font-size: 16px;
+				color:#01fffa;
+				display: block;
+			}
+			.numZlc{
+				font-size: 16px;
+				font-family: "UnidreamLED";
+				color: #fff;
+				span{
+					font-size: 14px;
+				}
+			}
+		}
+		.zong2lc{
+			width: 200px;
+			height: 60px;
+			position: absolute;
+			top: 50px;
+			left: -50px;
+			z-index: 4;
+			text-align: center;
+			.namezlc{
+				font-size: 16px;
+				color:#01fffa;
+				display: block;
+			}
+			.numZlc{
+				font-size: 16px;
+				font-family: "UnidreamLED";
+				color: #fff;
+				span{
+					font-size: 14px;
+				}
+			}
+		}
+		.zong3lc{
+			width: 100px;
+			height: 60px;
+			position: absolute;
+			top: 50px;
+			right: 0px;
+			z-index: 4;
+			text-align: center;
+			.namezlc{
+				font-size: 16px;
+				color:#01fffa;
+				display: block;
+			}
+			.numZlc{
+				font-size: 16px;
+				font-family: "UnidreamLED";
+				color: #fff;
+				span{
+					font-size: 14px;
+				}
+			}
+		}
+	}
+	.nnjxxCov{
+		width: 100%;
+		height: 100px;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.njname{
+			font-size: 14px;
+			color: #01fffa;
+			width: 32%;
+			span{
+				color: #fff;
+			}
+		}
+	}
+	.njxqBat{
+		width: 184px;
+		height: 54px;
+		line-height: 40px;
+		background: url(@/assets/images/zhnjshow/biaoti.png)no-repeat;
+		float: left;
+		.yxjlname{
+		  color: #01fffa;
+		  padding-left: 40px;
+		  font-size: 16px;
+		  font-weight: bold;
+		}
+	}
+	/* 修改el-select的字体颜色 */
+	.el-select .el-input__inner {
+		color: blue; /* 设置字体颜色为蓝色 */
+	}
+	/* 修改下拉菜单的字体颜色 */
+	.el-select-dropdown__item {
+		color: #01fffa; /* 设置下拉菜单的字体颜色为绿色 */
+	}
+	.inner_width .has-gutter tr{
+		background-color:none !important;
+		box-shadow: inset 0 0 30px rgba(12, 202, 255, 0.90)!important; 
+		color: #01fffa!important;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+	.el-table--enable-row-hover .el-table__body tr:hover>td{
+		background: rgba(4, 34, 73, 0.3);
+	}
+	.el-table td, .el-table th.is-leaf{
+		border: none;
+		background: none;
+	}
+	.table_dialog .el-table tr{
+		color: #fff;
+	}
+	
+	.even-row {
+		background-color: #0A344C!important; /* 偶数行背景色 */
+	}
+	.odd-row {
+		background-color: #0D5072!important; /* 奇数行背景色 */
+	}
+	.table_dialog {
+		width: 100%;
+		height: calc(100vh - 122px);
+		margin-bottom: 0;
+		background: none;
+		padding: 20px;
+		box-sizing: border-box;
+
+		.header {
+			// background: rgba(11, 37, 54, 0.8);
+			margin-bottom: 6px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.tit {
+				font-weight: 500;
+				font-size: 20px;
+				color: #1C89FF;
+				padding-left: 20px;
+
+				&::after {
+					content: '';
+					width: 4px;
+					height: 24px;
+					background: #1080FF;
+					position: absolute;
+					left: 0;
+				}
+			}
+
+		}
+
+		.inner_width {
+			width: 100%;
+			height: 100%;
+			// background: #0B2536;
+			position: relative;
+
+			.inner-img-w {
+				width: 100%;
+				height: 100%;
+			}
+
+			.content-box,
+			.left_content,
+			.right_content,
+			.table_content {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				margin: auto;
+
+			}
+
+			.content-box {
+				padding: 15px 20px;
+				box-sizing: border-box;
+				.selopt{
+					border-radius: 4px;
+					border: 1px solid #06a3ce;
+					box-shadow: inset 0 0 20px rgba(12, 202, 255, 0.90); 
+				}
+				.sousuocov{
+					width: 118px;
+					height: 36px;
+					line-height: 36px;
+					border-radius: 4px;
+					border: 1px solid #06a3ce;
+					box-shadow: inset 0 0 20px rgba(12, 202, 255, 0.90); 
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-evenly;
+					color: #fff;
+					font-size: 16px;
+					cursor: pointer;
+				}
+				.banrutimg{
+					width: 88px;
+					height: 36px;
+					line-height: 36px;
+					background: url(@/assets/images/zhnj/backreturn.png)no-repeat ;
+					background-size: 100% 100%;
+					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/images/zhnj/backreturnhover.png)no-repeat ;
+					background-size: 100% 100%;
+				}
+			}
+
+			.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%;
+				.play{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					flex-wrap: wrap;
+					padding: 10px 0;
+					box-sizing: border-box;
+					cursor: pointer;
+					img{
+						width: 28px;
+						height: 28px;
+					}
+					div{
+						width: 100%;
+						font-weight: 400;
+						font-size: 16px;
+						color: #FFFFFF;
+						text-align: center;
+					}
+				}
+			}
+
+			.left_content {
+				height: 100%;
+				padding: 20px;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.info {
+					height: 100%;
+					width: calc(100% - 150px);
+
+				}
+
+				.detal-btn {
+					// width: 120px;
+					height: 40px;
+					background: #01fffa;
+					border-radius: 4px;
+					padding: 11px;
+					box-sizing: border-box;
+					font-weight: 500;
+					font-size: 16px;
+					color: #FFFFFF;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+
+					img {
+						width: 22px;
+						margin-right: 8px;
+					}
+
+				}
+
+			}
+
+			.right_content {
+				height: 100%;
+				padding: 20px;
+				box-sizing: border-box;
+
+				.info {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+				}
+
+				.last-box {
+					display: flex;
+					justify-content: space-between;
+
+					.reload {
+						color: #0B6DDB;
+						font-weight: 400;
+						font-size: 18px;
+						display: flex;
+						align-items: center;
+						cursor: pointer;
+
+						img {
+							margin-right: 10px;
+						}
+					}
+				}
+
+				.ul {
+					.li {
+						margin: 0;
+					}
+				}
+			}
+
+			.ul {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.li {
+					width: 33%;
+					font-size: 12px;
+					display: flex;
+					align-items: center;
+					margin-top: 16px;
+					line-height: 1.2;
+
+					.label {
+						width: 80px;
+						font-weight: 400;
+						font-size: 16px;
+						color: #1C89FF;
+						text-align: right;
+						letter-spacing: 1px;
+					}
+
+					.cal {
+						font-weight: 400;
+						font-size: 16px;
+						color: #FFFFFF;
+					}
+				}
+			}
+
+			.model-tit {
+				display: flex;
+				align-items: center;
+				padding-left: 8px;
+				box-sizing: border-box;
+
+				span {
+					font-size: 16px;
+					color: #fff;
+					margin-left: 10px;
+				}
+			}
+
+			.top-left,
+			.top-right {
+				position: relative;
+				height: 180px;
+				background: #0B2536;
+			}
+
+			.top-right {}
+
+
+		}
+
+		.table_content {
+			padding: 30px 40px;
+			box-sizing: border-box;
+
+			.btn-par {
+				display: flex;
+				justify-content: space-between;
+
+				.btn1 {
+					display: flex;
+					align-items: center;
+					font-weight: 500;
+					font-size: 20px;
+					color: #1A86FF;
+					margin-right: 20px;
+					cursor: pointer;
+
+					img {
+						width: 22px;
+						height: 20px;
+						margin-right: 10px;
+					}
+				}
+
+				.query {
+					margin-left: 20px;
+				}
+			}
+		}
+
+		.bgimg {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+		}
+
+		.model-img {
+			width: 20px;
+		}
+
+		.mapparent {
+			width: 98%;
+			height: 96%;
+			margin: 0 auto;
+			margin-top: 1%;
+		}
+
+		.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%;
+			.map_detail_tit {
+				font-weight: 500;
+				font-size: 18px;
+				color: #01fffa;
+				position: relative;
+				padding-left: 20px;
+				box-sizing: border-box;
+				line-height: 1.5;
+
+				&:before {
+					content: ' ';
+					width: 4px;
+					height: 24px;
+					background: #01fffa;
+					position: absolute;
+					left: 0;
+					top: 0;
+					bottom: 0;
+					margin: auto;
+				}
+			}
+
+			.map-ul {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				margin-top: 10px;
+
+				.map-li {
+					width: 25%;
+					font-weight: 400;
+					font-size: 14px;
+					color: #FFFFFF;
+					line-height: 2.5;
+					overflow: hidden;
+					display: block;
+				}
+			}
+		}
+
+
+
+		.el-dialog__header {
+			padding: 0;
+		}
+
+		.el-dialog__body {
+			height: 100%;
+			padding: 0;
+		}
+
+		.el-table tr {
+			background: none;
+		}
+
+		.el-table td.el-table__cell,
+		.el-table th.el-table__cell.is-leaf {
+			border-color: rgba(16, 128, 255, 0.4);
+			color: #fff;
+		}
+
+		.el-input__inner {
+			background: none;
+			border:none;
+			color: #01fffa;
+			height: 36px;
+			line-height: 36px;
+		}
+
+		.el-table th.el-table__cell {
+			background: none;
+		}
+
+		.el-table--border::after,
+		.el-table--group::after,
+		.el-table::before {
+			background-color: rgba(16, 128, 255, 0.4);
+		}
+
+		.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+			background: none;
+		}
+
+		.pagination {
+			margin-top: 20px;
+			color: #fff;
+			text-align: center;
+			.el-pager li {
+				background: none;
+				color: #fff;
+			}
+
+			.el-pagination .btn-next,
+			.el-pagination .btn-prev {
+				background: none;
+				color: #fff;
+			}
+
+			.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-label {
+			color: #fff;
+		}
+	}
+
+	.el-select-dropdown__item.hover,
+	.el-select-dropdown__item:hover {
+		background-color: #0b202f;
+		color: #fff;
+	}
+
+	.popper__arrow {
+		border-color: #0b202f;
+	}
+
+	.table-box {
+		position: relative;
+		height: calc(100% - 200px);
+		margin-top: 20px;
+	}
+	.el-button--text{
+		color: #01fffa;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue
index 4fef2df..8ac4178 100644
--- a/src/pages/Home/index.vue
+++ b/src/pages/Home/index.vue
@@ -757,70 +757,83 @@ export default {
       this.vehicleMarkers.push(locationMarker);
     },
     
-    // 显示车辆信息窗口（深色科技风）
-    showVehicleInfoWindow(point, vehicleInfo) {
-      this.closeVehicleInfoWindow();
-      
-      const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
-      const lat = parseFloat(point.weidu || point.latitude || point.lat);
-      
-      const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
-      
-      const infoContent = `
-        <div style="
-          padding: 16px 20px; 
-          max-width: 360px; 
-          min-width: 250px; 
-          background: rgba(0, 20, 40, 0.95); 
-          border-radius: 8px; 
-          border: 1px solid rgba(0, 212, 255, 0.3);
-          box-shadow: 0 0 40px rgba(0, 212, 255, 0.1);
-          backdrop-filter: blur(10px);
-        ">
-          <div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
-            <span style="font-size: 28px; margin-right: 12px;">🚛</span>
-            <span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
+   // 显示车辆信息窗口（深色科技风）
+  showVehicleInfoWindow(point, vehicleInfo) {
+    this.closeVehicleInfoWindow();
+    
+    const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
+    const lat = parseFloat(point.weidu || point.latitude || point.lat);
+    
+    const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
+    
+    // 使用自定义HTML，不依赖InfoWindow的默认样式
+    const infoContent = `
+      <div style="
+        padding: 16px 20px; 
+        max-width: 360px; 
+        min-width: 250px; 
+        background: rgba(0, 20, 40, 0.95) !important; 
+        border-radius: 8px; 
+        border: 1px solid rgba(0, 212, 255, 0.3);
+        box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
+        backdrop-filter: blur(10px);
+        color: #8bb4d0;
+      ">
+        <div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
+          <span style="font-size: 28px; margin-right: 12px;">🚛</span>
+          <span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
+        </div>
+        <div style="font-size: 13px; line-height: 2.2;">
+          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+            <span style="color: #4a8ba8;">设备ID：</span>
+            <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
           </div>
-          <div style="font-size: 13px; line-height: 2.2; color: #8bb4d0;">
-            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-              <span style="color: #4a8ba8;">设备ID：</span>
-              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-              <span style="color: #4a8ba8;">车牌号：</span>
-              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-              <span style="color: #4a8ba8;">最新时间：</span>
-              <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-              <span style="color: #4a8ba8;">经度：</span>
-              <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; padding: 3px 0;">
-              <span style="color: #4a8ba8;">纬度：</span>
-              <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
-            </div>
+          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+            <span style="color: #4a8ba8;">车牌号：</span>
+            <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
           </div>
-          <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #4a8ba8; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px;">
-            📍 点击标记查看详情
+          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+            <span style="color: #4a8ba8;">最新时间：</span>
+            <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+            <span style="color: #4a8ba8;">经度：</span>
+            <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; padding: 3px 0;">
+            <span style="color: #4a8ba8;">纬度：</span>
+            <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
           </div>
         </div>
-      `;
+        <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #4a8ba8; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px;">
+          📍 点击标记查看详情
+        </div>
+      </div>
+    `;
+    
+    this.vehicleInfoWindow = new AMap.InfoWindow({
+      content: infoContent,
+      offset: new AMap.Pixel(0, -35),
+      autoMove: true,
+      closeWhenClickMap: true,
+      // 关键：设置背景透明
+      isCustom: true,
+    });
+    
+    if (!isNaN(lng) && !isNaN(lat)) {
+      this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
+      this.vehicleMarkers.push(this.vehicleInfoWindow);
       
-      this.vehicleInfoWindow = new AMap.InfoWindow({
-        content: infoContent,
-        offset: new AMap.Pixel(0, -35),
-        autoMove: true,
-        closeWhenClickMap: true,
-      });
-      
-      if (!isNaN(lng) && !isNaN(lat)) {
-        this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
-        this.vehicleMarkers.push(this.vehicleInfoWindow);
-      }
-    },
+      // 额外：手动覆盖InfoWindow的默认背景
+      setTimeout(() => {
+        const infoWindowEl = document.querySelector('.amap-info-content');
+        if (infoWindowEl) {
+          infoWindowEl.style.background = 'transparent !important';
+          infoWindowEl.style.padding = '0 !important';
+        }
+      }, 50);
+    }
+  },
     
     // 关闭信息窗口
     closeVehicleInfoWindow() {