添加土壤数据弹窗50%

src/api/index.js

@@ -77,7 +77,15 @@ export function login(data) {
       data: data? data : {}
     })
   }
-
+// 土壤数据
+export function getSoilSummry(data) {
+  return requests({
+    url: '/zh-applet-admin/appmana/statistic/airSoilIntegrate',
+    method: 'post',
+    headers: { 'content-type': 'application/json; charset=UTF-8' },
+    data: data? data : {}
+  })
+}
    // 站点详情
    export function getStationDetail(stationCode) {
     return requests({

src/components/SoilDialog.vue

@@ -0,0 +1,857 @@
+<template>
+  <!-- 土壤弹窗 -->
+  <el-dialog
+      width="45%"
+      top="160px"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible.sync="trzddialogTableVisible"
+  >
+    <div class="xintc">
+      <div class="tz_cov_chanye" style="height: 670px">
+        <img
+            src="@/assets/image/zhwl/guanbi.png"
+            class="guanbiann"
+            @click="closeDialog"
+            alt=""
+        />
+        <div class="tz_cov_topchanye">
+          <span class="tz_cov_top_tit">土壤环境监测</span>
+        </div>
+        <el-row class="tz_cov_topyqjs">
+          <el-col :span="10">
+            <div class="grid-content bg-purple ycboxlt4">
+              <span class="tcxitit">实时监测信息</span>
+              <div class="qxsjssjcTc" @click.stop="trzxshow($event)">
+                <div class="qxsjssjc_left" style="margin-top:20px;">
+                  <el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome1"
+                          :key="index" :data-item="JSON.stringify(item)">
+                    <div class="jcsjtclist" style="overflow: hidden">
+                      <el-row :gutter="20">
+                        <el-col :span="10">
+                          <img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
+                        </el-col>
+                        <el-col :span="14">
+                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
+                          <button type="button" @click="startAnimate()" style="display: none"></button>
+                          <span class="jcsjicon1_num"
+                                v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
+                                      <span>0</span>
+                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
+                                    </span>
+                          <span class="jcsjicon1_num" v-else>
+                                      <animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
+                                                      :key="item.value" duration="3000"></animate-number>
+                                      <span>{{ item.value }}</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="720" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg">
+                    <source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
+                  </video>
+                </div>
+                <div class="qxsjssjc_right" style="margin-top:20px;">
+                  <el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome2"
+                          :key="index" :data-item="JSON.stringify(item)">
+                    <div class="jcsjtclist" style="overflow: hidden">
+                      <el-row :gutter="20">
+                        <el-col :span="10">
+                          <img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
+                        </el-col>
+                        <el-col :span="14">
+                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
+                          <button type="button" @click="startAnimate()" style="display: none"></button>
+                          <span class="jcsjicon1_num"
+                                v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
+                                      <span>0</span>
+                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
+                                    </span>
+                          <span class="jcsjicon1_num" v-else>
+                                      <animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
+                                                      :key="item.value" duration="3000"></animate-number>
+                                      <span>{{ item.value }}</span>
+                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
+                                    </span>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </el-col>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="14">
+            <span class="tcxitit">土壤环境监测历史记录</span>
+            <div class="bianqianlist">
+              <div :class="time==1?'xiaoshiHover':'xiaoshi'" @click="timeqieh('xiao')">小时</div>
+              <div :class="time==2?'xiaoshiHover':'xiaoshi'" @click="timeqieh('ri')">日均</div>
+              <div :class="time==3?'xiaoshiHover':'xiaoshi'" @click="timeqieh('yue')">月均</div>
+              <el-date-picker
+                  v-model="value1"
+                  class="custom-date-picker"
+                  type="date"
+                  size="small"
+                  @blur="timetrpicker"
+                  style="float:left;margin-left:10px;"
+                  placeholder="选择日期">
+              </el-date-picker>
+              <div class="xiaoshiHover" @click="tanchuangshuj">查询</div>
+              <div class="zsfsList">
+                展示方式：
+                <el-radio-group v-model="radio1" @input="numtab" size="small" fill="#1783C6">
+                  <el-radio-button label="折线"></el-radio-button>
+                  <el-radio-button label="表格"></el-radio-button>
+                </el-radio-group>
+              </div>
+            </div>
+            <div ref="columnTrEchart" v-if="tabnum==true" style="width: 100%; height: 480px;"></div>
+            <el-table
+                v-else
+                :data="formListVlaue"
+                height="480"
+                border
+                style="width: 100%;">
+              <el-table-column
+                  prop="date"
+                  label="时间"
+                  width="360">
+              </el-table-column>
+              <el-table-column
+                  prop="name"
+                  :label="'数值单位：' + unitValue">
+              </el-table-column>
+            </el-table>
+            <div class="loader" v-if="lodshow==true">
+              <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';
+
+export default {
+  props: {
+    soilDataId: String
+  },
+  components: {},
+  data() {
+    return {
+      airDataListHome1: [],
+      airDataListHome2: [],
+      trzddialogTableVisible: true,
+      itemValue: {},
+      timeout8: null,
+      timeout9: null,
+      timeout18: null,
+      deployType: 'soil',
+      trListVlaue: true,
+      formListVlaue: [],
+      unitValue: true,
+      lodshow: false,
+      tabnum: true,
+      radio1: '',
+      value1: '',
+      urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
+      time: 1,
+    }
+  },
+  mounted() {
+    console.log('土壤弹窗显示拉!', this.soilDataId)
+  },
+  methods: {
+    // 土壤弹窗
+    trzxshow(e) {
+      let that = this
+      const lisst = e.target.closest(".tcgd2"); // 定位元素
+      if (lisst) { // 是否是滚动组件的某一行/列
+        let itemlist = lisst.dataset.item
+        let value = JSON.parse(itemlist)
+        this.deployId = value.deployId
+        this.itemValue = value.item
+        this.summrayMode = 'dayhours'
+        this.deviceSummaryApi()
+      }
+      this.trzddialogTableVisible = true;
+      that.lodshow = true
+      this.timeout8 = setTimeout(() => {
+        that.echrtTrCkick()
+      }, 1500);
+      this.timeout9 = setTimeout(() => {
+        that.lodshow = false
+      }, 2000);
+    },
+    startAnimate() {
+      this.$nextTick(() => {
+        this.$refs.myNum1.map(res => {
+          res.start()
+        })
+      })
+    },
+
+    // 历史数据曲线
+    deviceSummaryApi() {
+      let obj = {
+        deployId: this.deployId,
+        startTime: this.startTime,
+        survItem: this.itemValue,
+        auths: this.auths,
+        summrayMode: this.summrayMode,
+      }
+      getSoilSummry(obj).then(res => {
+        let that = this
+        this.trListVlaue = res.result
+        this.dataListVlaue = res.result.dataList
+        this.timeListVlaue = res.result.timeList
+        this.formListVlaue = res.result.formList
+        this.descriptionValue = res.result.itemInfo.description
+        this.unitValue = res.result.itemInfo.unit
+        if (res.code === 200) {
+          this.timeout18 = setTimeout(() => {
+            that.lodshow = false
+            that.$nextTick(() => {
+              if (this.deployType == 'soil') {
+                this.echrtTrCkick();
+              }
+            })
+          }, 1000);
+        }
+      })
+    },
+    echrtTrCkick() {
+      console.log('initEchart')
+    },
+    timeqieh() {
+    },
+    timetrpicker() {
+    },
+    tanchuangshuj() {
+    },
+    numtab() {
+    },
+    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, .3);
+    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.7);
+    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;
+  }
+
+  .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: 160px;
+    float: left;
+    margin-left: 40px;
+  }
+
+  .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: 45%;
+    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: 0;
+  }
+
+  .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: 14px;
+    }
+
+    .jcsjicon1_tit {
+      font-size: 14px;
+      color: #fff;
+      display: block;
+      margin-top: 14px;
+      text-align: left;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .jcsjicon1_num {
+      color: #4FBFF9;
+      font-size: 18px;
+      font-family: "UnidreamLED";
+      text-align: left;
+      display: block;
+    }
+
+    .jcsjicon1_dan {
+      font-size: 14px;
+      color: #fff;
+      margin-left: 3%;
+    }
+  }
+
+  .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: 20%;
+    height: 400px;
+    position: absolute;
+    left: 11%;
+    top: 120px;
+    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;
+  }
+
+
+  .tz_cov_topyqjs {
+    width: 100%;
+    height: 600px;
+  }
+
+  .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;
+  }
+}
+</style>

src/pages/Home/index.vue

@@ -21,10 +21,12 @@
         <div class="btn_left">
           <span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span>
         </div>
-				<div class="btn_right"><hefentianqi />
+        <div class="btn_right">
+          <hefentianqi/>
           <img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
           <img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else>
-					<span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg" alt=""></span>
+          <span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg"
+                                            alt=""></span>
         </div>
       </div>
       <!-- 退出登录弹窗 -->
@@ -44,13 +46,18 @@
       </div>
 
       <div class="content">
-				<img src="@/assets/image/qiehuan2.png" @click="mapTypeSwitch" style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-if="mapTypeFlag==true" >
+        <img src="@/assets/image/qiehuan2.png" @click="mapTypeSwitch"
-				<img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch" style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
+             style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt=""
+             v-if="mapTypeFlag==true">
+        <img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch"
+             style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
         <!--				<div id="container" v-if="fullscreen==false" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;transform:scale(1.05,1.05);"></div>-->
         <!--				<div id="container" v-else                   style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>-->
-				<div id="container" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
+        <div id="container"
+             style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
         <!-- 左上头部 -->
-        <transition enter-active-class="animate__animated animate__backInLeft" leave-active-class="animate__animated animate__backOutLeft">
+        <transition enter-active-class="animate__animated animate__backInLeft"
+                    leave-active-class="animate__animated animate__backOutLeft">
           <template v-if="mapTypeFlag">
             <div class="baseBoxLeft left baseBoxHjleft">
               <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
@@ -70,10 +77,32 @@
                   </vue-seamless-scroll>
                 </div>
                 <div class="in1con_lf_img">
-									<div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
+                  <div
-										<img src="@/assets/image/xmgk01.png" class="in1con_lf_imgone" alt="">
+                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
-										<span class="in1con_lf_imglf_tit">农田面源污染监测站</span>
+                    <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
-										<span class="in1con_lf_imglf_num"> <animate-number  class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="stationCount0" :key="stationCount0" duration="3000"></animate-number>个 </span>
+                    <span class="in1con_lf_imglf_tit">对竹河监测站</span>
+                    <span class="in1con_lf_imglf_num">
+                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
+                                      :to="2" :key="stationCount0" duration="3000"></animate-number>个
+                    </span>
+                  </div>
+                  <div
+                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
+                    <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
+                    <span class="in1con_lf_imglf_tit">团柏河监测站</span>
+                    <span class="in1con_lf_imglf_num">
+                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
+                                      :to="2" :key="stationCount0" duration="3000"></animate-number>个
+                    </span>
+                  </div>
+                  <div
+                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
+                    <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">
+                    <span class="in1con_lf_imglf_tit">长期监测点位</span>
+                    <span class="in1con_lf_imglf_num">
+                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
+                                      :to="7" :key="stationCount0" duration="3000"></animate-number>个
+                    </span>
                   </div>
                 </div>
               </div>
@@ -88,7 +117,9 @@
                     <div class="qhhjcov_lf" v-for="item in climate_env" :key="item.id">
                       <img :src="urlimg+item.detailPics" class="qhhjcov_lfimg" alt="">
                       <span class="qhhjcov_lf_tit">{{ item.detailCode }}</span>
-											<span class="qhhjcov_time"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="item.detailValue" :key="item.detailValue" duration="3000"></animate-number>{{item.detailValue2}}</span>
+                      <span class="qhhjcov_time"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
+                                                                  :to="item.detailValue" :key="item.detailValue"
+                                                                  duration="3000"></animate-number>{{ item.detailValue2 }}</span>
                     </div>
                   </div>
                 </div>
@@ -100,10 +131,15 @@
                   <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                 </div>
                 <div class="in1con_lf_img">
-									<div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse" v-for="legth in water_conser" :key="legth.id">
+                  <div
+                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"
+                      v-for="legth in water_conser" :key="legth.id">
                     <img :src="urlimg+legth.detailPics" class="in1con_lf_imgone" alt="">
                     <span class="in1con_lf_imglf_tit">{{ legth.detailCode }}</span>
-										<span class="in1con_lf_imglf_num"> <animate-number  class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="legth.detailValue" :key="legth.detailValue" duration="3000"></animate-number>{{legth.detailValue2}}</span>
+                    <span class="in1con_lf_imglf_num"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum"
+                                                                       from="0" :to="legth.detailValue"
+                                                                       :key="legth.detailValue"
+                                                                       duration="3000"></animate-number>{{ legth.detailValue2 }}</span>
                   </div>
                 </div>
               </div>
@@ -118,7 +154,8 @@
                         <li class="sx_cov_lt">
                           <span class="sx_cov_lt_tit">{{ ite.detailCode }}</span>
                           <span class="sx_cov_lt_num">
-														<animate-number class="in1con_lf_imglf_num_jix" ref="reNum"  from="0" :to="ite.detailValue" :key="ite.detailValue" duration="3000"></animate-number>
+														<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="ite.detailValue"
+                                            :key="ite.detailValue" duration="3000"></animate-number>
 														{{ ite.detailValue2 }}
 													</span>
                         </li>
@@ -138,10 +175,11 @@
           </div>
           <div class="scdlist" @click="switchIcon('tuanbaihe')">
             <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
-            <span class="scdlist_tit">团百河监测站</span>
+            <span class="scdlist_tit">团柏河监测站</span>
           </div>
         </div>
-				<transition enter-active-class="animate__animated animate__backInUp" leave-active-class="animate__animated animate__backOutDown">
+        <transition enter-active-class="animate__animated animate__backInUp"
+                    leave-active-class="animate__animated animate__backOutDown">
           <template v-if="mapTypeFlag">
             <div class="zlxg_btm">
               <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
@@ -152,7 +190,9 @@
               <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
               <div>
                 <span class="zywr_titshow">重要污染物治理效果</span>
-                <el-tooltip class="item" effect="dark" :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'" placement="top-start">
+                <el-tooltip class="item" effect="dark"
+                            :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
+                            placement="top-start">
                   <span class="dataTypeEchart" @click="switchEchartType">
                       {{ dataTypeEchart ? '监测值' : '对比值' }}
                   </span>
@@ -184,7 +224,8 @@
           </template>
         </transition>
         <!--        右侧展示栏-->
-				<transition enter-active-class="animate__animated animate__backInRight" leave-active-class="animate__animated animate__backOutRight">
+        <transition enter-active-class="animate__animated animate__backInRight"
+                    leave-active-class="animate__animated animate__backOutRight">
           <template v-if="mapTypeFlag">
             <div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
               <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
@@ -198,7 +239,8 @@
                   <el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px">
                     <el-carousel-item v-for="item in stationInfoList" :key="item.id">
                       <div class="in1con_lf_tit ">
-												<span class="in1con_lf_titshow1 mywrcov_onehover" @click="addTask3(item)">{{item.stationName}}</span>
+                        <span class="in1con_lf_titshow1 mywrcov_onehover"
+                              @click="addTask3(item)">{{ item.stationName }}</span>
                         <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                       </div>
                       <div class="jczcov">
@@ -210,12 +252,14 @@
                       </div>
                       <div class="jczbtm">
                         <vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod">
-														<div class="jczbtm_lf" v-for="valist in item.wrwcode" :key="valist.index" @click="tczxtc(item.stationCode,valist.tylename)">
+                          <div class="jczbtm_lf" v-for="valist in item.wrwcode" :key="valist.index"
+                               @click="tczxtc(item.stationCode,valist.tylename)">
                             <img :src="urlimg + valist.icon" class="tpimg" alt="">
                             <div class="jczbtm_lf_rt">
                               <span class="jczbtm_lf_rttit">{{ valist.name }}</span>
                               <span class="jczbtm_lf_rtnum">
-																	<animate-number  class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code" :key="valist.code" duration="3000"></animate-number>
+																	<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"
+                                                  :key="valist.code" duration="3000"></animate-number>
                                 <!-- <span class="in1con_lf_imglf_num_jix">{{valist.code}}</span> -->
 																	{{ valist.unit }}</span>
                             </div>
@@ -242,14 +286,17 @@
                   </div>
                   <div class="mywrcov_two ">
                     <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
-										<span class="mywrcov_onenum"><span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{effect_assess1.detailValue}}</span></span>
+                    <span class="mywrcov_onenum"><span
+                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span></span>
                   </div>
                   <div class="mywrcov_three mywrcov_onehover" @click="tzalin">
-										<span class="mywrcov_onenum" style="margin-top: 1vw;"><span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{effect_assess2.detailValue}}</span></span>
+                    <span class="mywrcov_onenum" style="margin-top: 1vw;"><span
+                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span></span>
                     <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
                   </div>
                   <div class="mywrcov_four ">
-										<span class="mywrcov_onenum" style="margin-top: 1vw;"><span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{effect_assess3.detailValue}}</span></span>
+                    <span class="mywrcov_onenum" style="margin-top: 1vw;"><span
+                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span></span>
                     <span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
                   </div>
                   <div class="mywrcovcen">
@@ -276,7 +323,8 @@
                           <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
                           <span class="jcsssj_rt_numsy">
 															<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
-															<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="item.value" :key="item.value" duration="3000" :formatter="formatter"></animate-number>
+															<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="item.value"
+                                              :key="item.value" duration="3000" :formatter="formatter"></animate-number>
 															{{ item.unit }}
 														</span>
                           <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
@@ -321,7 +369,8 @@
               <div class="tz_cov_left_tit" style="float:left;">
                 <span class="tz_cov_left_tit_text">废弃农膜采样信息</span>
               </div>
-								<span class="tz_cov_right_num">累计 <span class="tz_cov_right_num_big">{{ntfmnumbtotal}}</span> 条 </span>
+              <span class="tz_cov_right_num">累计 <span
+                  class="tz_cov_right_num_big">{{ ntfmnumbtotal }}</span> 条 </span>
             </div>
             <table class="tz_cov_right_tab">
               <tr class="tz_cov_right_tab_tit" style="width:100%;">
@@ -376,7 +425,8 @@
           </div>
           <div style="margin-left: 3%;">
             <!-- survItemList -->
-            <span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index" :style="{background:(item.color)}" >{{item.name}}</span>
+            <span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index"
+                  :style="{background:(item.color)}">{{ item.name }}</span>
             <!-- <span class="jctc_text" style="background: #445fb4;">总氮</span>
             <span class="jctc_text" style="background: #52ac2a;">硝钛氨</span>
             <span class="jctc_text" style="background: #ac4f2a;">空气温度</span>
@@ -421,7 +471,8 @@
               <div class="tz_cov_left_tit" style="float:left;">
                 <span class="tz_cov_left_tit_text">粪污台账</span>
               </div>
-								<span class="tz_cov_right_num">累计 <span class="tz_cov_right_num_big">{{qcfmnumbtotal}}</span> 条 </span>
+              <span class="tz_cov_right_num">累计 <span
+                  class="tz_cov_right_num_big">{{ qcfmnumbtotal }}</span> 条 </span>
             </div>
             <table class="tz_cov_right_tab">
               <tr class="tz_cov_right_tab_tit" style="width:100%;">
@@ -488,8 +539,12 @@
           :modal-append-to-body="false"
       >
         <div class="tz_cov" style="height: 35vw">
-					<div style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);" v-if="trbgzhuanq"></div>
+          <div
-					<img src="@/assets/image/loading.gif" alt="" style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;" v-if="trbgzhuanq">
+              style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);"
+              v-if="trbgzhuanq"></div>
+          <img src="@/assets/image/loading.gif" alt=""
+               style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;"
+               v-if="trbgzhuanq">
           <img
               src="@/assets/image/guanbi.png"
               class="guanbiann"
@@ -544,21 +599,28 @@
         </div>
       </el-dialog>
     </div>
+    <SoilDialog ref="soilDialog" v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
   </ScaleBox>
 
 </template>
 
 <script>
 import ScaleBox from 'vue2-scale-box'
-import { displayInfo, stationInfo, fwlist, ntfmlist, getNewestData, getPollutionDict, getIndexSummry, getAllstationAndPestLight, survItemSummary } from '@/api';
+import {
+  displayInfo, stationInfo, fwlist, ntfmlist, getNewestData, getPollutionDict,
+  getIndexSummry, getAllstationAndPestLight, survItemSummary, getSoilSummry
+} from '@/api';
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import hefentianqi from '@/pages/weather/weather.vue'
+import SoilDialog from '@/components/SoilDialog.vue'
+
 export default {
-  name: 'Home',
+  name: 'mainHome',
   components: {
     vueSeamlessScroll,
     hefentianqi,
-	ScaleBox
+    ScaleBox,
+    SoilDialog
   },
   data() {
     return {
@@ -629,7 +691,9 @@ export default {
       }, {
         value: 'yearMonth',
         label: '12个月'
-      }]
+      }],
+      soidShowFlag: false,
+      soilDataId: ''
     };
   },
   created() {
@@ -694,8 +758,14 @@ export default {
     this.infor();
     this.indexinfor();
     this.handleClick({index: this.echartIndex});
+    this.initSoilData();
   },
   methods: {
+    initSoilData(){
+      getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
+        console.log(res)
+      })
+    },
     formatter: function (num) {
       return num.toFixed(3)
     },
@@ -838,8 +908,7 @@ export default {
         legend: {
           data: ['']
         },
-          toolbox: {
+        toolbox: {},
-          },
         areaStyle: {
           color: {
             type: 'linear',
@@ -1008,16 +1077,25 @@ export default {
                 console.log('livestock or orient', this.qyinformation)
               })
               this.markersOrient.push(marker)
-          } else {
+            } else if(item.type == 'soil'){
+              marker.on('click', e => {
+                this.soilDataId = e.target.getExtData().ids
+                this.soidShowFlag = true
+                console.log('soil click',  )
+              })
+            }
+            else {
               this.markersOther.push(marker)
             }
             marker.setMap(that.aMap);
           })
-			this.$forceUpdate()
+          this.$forceUpdate();
+          // that.aMap.setFitView(null, false, [100,400,200,200], 16);
           that.aMap.setFitView();
           setTimeout(() => {
-        let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
+            that.aMap.setFitView(null, false, [130, 380, 200, 200], 16);
-        that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
+            // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
+            // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
           }, 2000)
         });
       })
@@ -1264,11 +1342,11 @@ export default {
         console.log('开始初始化echart：')
         let dataObj = [];
         let i = 0;
-      let colors = ['#f6dd11',
+        let colors = [
-        '#02fa16',
+          '#C41E3A', '#FF7F0E', '#FFD700', '#00A36C', '#98FB98',
-        '#f41c52',
+          '#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
-        '#19ffba',
+          '#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
-        '#ee6922'];
+          '#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'];
         for (let key in data['datas']) {
           if (data['datas'][key] instanceof Array) {
             dataObj[i++] = {
@@ -1278,8 +1356,25 @@ export default {
             }
           }
         }
-      let dataStr = data['dateStr']
         this.echartInit[domKey] = this.$echarts.init(divDom);
+        let xAxisData = data['dateStr']
+        let legendData = dataObj.map(item => item.name);
+        let seriesData = dataObj.map(item => {
+          return {
+            name: item.name,
+            type: 'line',
+            stack: '',
+            data: item.value,
+            // areaStyle: { color: item.color  },
+            lineStyle: {
+              color: item.color // 设置线的颜色为红色
+            },
+            itemStyle: {
+              color: item.color // 设置线的颜色为红色
+            },
+            smooth: true,
+          }
+        });
         var optionLine = {
           tooltip: {
             trigger: 'axis'
@@ -1296,7 +1391,7 @@ export default {
             padding: [10, 50, 0, 0],
             x: 'right',      //可设定图例在左、右、居中
             y: 'top',     //可设定图例在上、下、居中
-          data: dataObj.map(item => item.name),
+            data: legendData,
             textStyle: {
               fontSize: 12,//字体大小
               color: '#ffffff'//字体颜色
@@ -1305,7 +1400,7 @@ export default {
           xAxis: {
             type: 'category',
             boundaryGap: false,
-          data: dataStr,
+            data: xAxisData,
             axisLine: {
               lineStyle: {
                 color: '#2295ee', //x轴的颜色
@@ -1327,19 +1422,7 @@ export default {
               },
             },
           },
-        series: dataObj.map(item => {
+          series: seriesData,
-         return {
-           name: item.name,
-           type:'line',
-           stack: '',
-           data: item.value,
-           // areaStyle: { color: item.color  },
-           lineStyle: {
-             color: item.color // 设置线的颜色为红色
-           },
-           smooth:true,
-         }
-        }),
         };
         //为echarts对象加载数据
         this.echartInit[domKey].setOption(optionLine);
@@ -1457,6 +1540,7 @@ export default {
 
 <style scoped>
 @import '@/assets/css/index.css';
+
 .quanping {
   width: 1.6vw;
   margin-right: 3%;
@@ -1465,17 +1549,20 @@ export default {
   right: 1%;
   z-index: 999;
 }
+
 /* 台账弹窗 */
 .tzsanguang {
   position: absolute;
   top: -1.5vw;
   right: 38%;
 }
+
 .tzsanguangbt {
   position: absolute;
   bottom: -1.5vw;
   right: 38%;
 }
+
 .tz_cov {
   width: 100%;
   height: 30vw;
@@ -1486,6 +1573,7 @@ export default {
   background: rgba(16, 45, 80, 1);
   box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
 }
+
 .tz_cov_top {
   width: 40%;
   height: 3vw;
@@ -1496,20 +1584,24 @@ export default {
   line-height: 3vw;
   margin-bottom: 2vw;
 }
+
 .tz_cov_top_tit {
   font-size: 1vw;
   color: #fff;
   text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
   font-family: douyuFont;
 }
+
 .tz_cov_left {
   width: 35%;
   float: left;
 }
+
 .tz_cov_right {
   width: 65%;
   float: right;
 }
+
 .tz_cov_left_tit {
   width: 11vw;
   height: 2vw;
@@ -1520,16 +1612,19 @@ export default {
   background-size: cover;
   margin-left: 2vw;
 }
+
 .tz_cov_left_tit_text {
   font-size: 0.9vw;
   font-weight: 500;
   color: #E5EEFA;
 }
+
 .tz_cov_left_bincov {
   position: relative;
   width: 100%;
   height: 16vw;
 }
+
 .tz_cov_left_bin {
   width: 9vw;
   height: 9vw;
@@ -1540,6 +1635,7 @@ export default {
   left: 28.5%;
   z-index: 1;
 }
+
 .tz_cov_left_bineca {
   width: 100%;
   height: 13.5vw;
@@ -1548,6 +1644,7 @@ export default {
   left: 0%;
   z-index: 2;
 }
+
 .tz_cov_right_num {
   font-size: 0.9vw;
   float: right;
@@ -1555,11 +1652,13 @@ export default {
   color: #B3C1D1;
   margin-right: 3%;
 }
+
 .tz_cov_right_num_big {
   color: #FFF220;
   font-size: 1.5vw;
   font-family: HYChangLiSongKeBen;
 }
+
 .tz_cov_right_tab {
   width: 92%;
   height: 20vw;
@@ -1568,24 +1667,28 @@ export default {
   margin-left: 5%;
   margin-top: 1vw;
 }
+
 /* 定义滚动条样式 */
 .tz_cov_right_tab::-webkit-scrollbar {
   width: 2px;
   height: 2px;
   background-color: rgba(240, 240, 240, 0.1);
 }
+
 /*定义滚动条轨道 内阴影+圆角*/
 .tz_cov_right_tab::-webkit-scrollbar-track {
   box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
   border-radius: 10px;
   background-color: rgba(240, 240, 240, .5);
 }
+
 /*定义滑块 内阴影+圆角*/
 .tz_cov_right_tab::-webkit-scrollbar-thumb {
   border-radius: 10px;
   box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
   background-color: rgba(87, 146, 255, .8);
 }
+
 .tz_cov_right_tab_tit {
   width: 100%;
   height: 1.8vw;
@@ -1596,11 +1699,13 @@ export default {
   position: sticky;
   top: -3px; /* 固定表头位置 */
 }
+
 .tz_cov_right_tab_tit th {
   width: 20%;
   height: 1.8vw;
   border: 1px solid #285A93;
 }
+
 .tz_cov_right_tab_list {
   width: 100%;
   height: 1.8vw;
@@ -1609,6 +1714,7 @@ export default {
   font-weight: 400;
   color: #5792FF;
 }
+
 .tz_cov_right_tab_list td {
   width: 20%;
   height: 1.8vw;
@@ -1616,6 +1722,7 @@ export default {
   border: 1px solid #285A93;
   color: #fff;
 }
+
 .mywrcov_onehover {
   cursor: pointer;
 }
@@ -1732,6 +1839,7 @@ export default {
   width: 68%;
   height: 100%;
 }
+
 .maps {
   width: 100%;
   height: 95%;
@@ -1757,6 +1865,7 @@ export default {
   position: relative;
   z-index: 999;
 }
+
 .liSpan {
   width: 100%;
   margin-top: 3.2%;
@@ -2065,12 +2174,14 @@ export default {
   border: none;
   background: none;
 }
+
 .noneNumber {
   width: 30%;
   margin: 0 auto;
   display: block;
   margin-top: 60px;
 }
+
 .in1con_lf_titshow1 {
   font-size: 1vw;
   color: #fff;
@@ -2095,6 +2206,7 @@ export default {
   box-sizing: border-box;
   width: 50%;
 }
+
 .el-dialog {
   position: relative;
   margin: 0 auto;
@@ -2104,22 +2216,28 @@ export default {
   box-sizing: border-box;
   width: 50%;
 }
+
 .el-dialog__header {
   display: none;
 }
+
 .home_dlhj .el-carousel__arrow {
   top: 9%;
   font-size: 1vw;
 }
+
 .home_dlhj .el-carousel__arrow--left {
   left: 0;
 }
+
 .home_dlhj .el-carousel__arrow--right {
   right: 0;
 }
+
 .el-tabs--card > .el-tabs__header {
   border: none;
 }
+
 .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
   text-align: center;
   height: 1.7vw;
@@ -2134,6 +2252,7 @@ export default {
   text-align: center;
   font-size: 12px !important;
 }
+
 .el-tabs--card > .el-tabs__header .el-tabs__item {
   text-align: center;
   height: 1.7vw;
@@ -2146,12 +2265,14 @@ export default {
   border: 1px solid #0e2c3f;
   font-size: 12px !important;
 }
+
 .el-tabs--card > .el-tabs__header .el-tabs__nav {
   border: none;
   float: right;
   margin-right: 6%;
   margin-top: 5px;
 }
+
 .zlxg_btm .el-tabs__item:hover {
   text-align: center;
   height: 1.7vw;
@@ -2164,9 +2285,11 @@ export default {
   box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
   font-size: 12px !important;
 }
+
 .v-modal {
   display: none;
 }
+
 .jcsssj_rt_num {
   display: inline-block;
   font-size: 0.8vw;
@@ -2185,6 +2308,7 @@ export default {
   display: block;
   margin-bottom: 1.6vw;
 }
+
 .tcgldw {
   font-size: 1vw;
   color: #fff;
@@ -2194,18 +2318,21 @@ export default {
   height: 15vw;
   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, .5);
   border-radius: 10px;
   background-color: rgba(240, 240, 240, .5);
 }
+
 /*定义滑块 内阴影+圆角*/
 .tcgldw::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -2217,10 +2344,12 @@ export default {
 .jgdhei {
   margin-top: 2vw;
 }
+
 .trwdcov {
   width: 94%;
   margin: 0 auto;
 }
+
 .trwdcov_top {
   width: 100%;
   height: 5vh;
@@ -2228,77 +2357,97 @@ export default {
   text-align: left;
   overflow: hidden;
 }
+
 .trwdcov_top_tit {
   color: #fff;
   font-size: 0.8vw;
   margin-right: 1%;
 }
+
 .trwdcov_top_zcz {
   color: #fff;
   font-size: 0.8vw;
   float: right;
   margin-right: 3%;
 }
+
 .trwdcov_top .el-radio__input.is-checked .el-radio__inner {
   border-color: #00ffcd;
   background: #00ffcd;
 }
+
 .trwdcov_top .el-radio__input.is-checked + .el-radio__label {
   color: #00ffcd;
 }
+
 .trwdcov_top .el-radio {
   color: #fff;
 }
+
 .trwdcov_top .el-input__inner {
   background: none;
 }
+
 .trwdcov_top .el-date-editor .el-range-input {
   background: none;
   color: #c9c9c9;
   border-color: #c9c9c9;
 }
+
 .trwdcov_top .el-date-editor .el-range-separator {
   color: #fff;
 }
+
 .trwdcov .el-table__body, .el-table__footer, .el-table__header {
   width: 100% !important;
 }
+
 .trwdcov .el-table__body, .el-table__footer, .el-table__header {
   width: 100% !important;
   text-align: center;
 }
+
 .trwdcov .el-table tr {
   background: none;
 }
+
 .trwdcov .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
   background: none;
   color: #00ffcd;
   border-bottom: 1px solid #747474;
   text-align: center;
 }
+
 .trwdcov .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
   border-right: 1px solid #747474;
 }
+
 .trwdcov .el-table--enable-row-transition .el-table__body td.el-table__cell {
   color: #c9c9c9 !important;
 }
+
 .trwdcov .el-table--border, .el-table--group {
   border: 1px solid #747474;
 }
+
 .trwdcov .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
   background: rgba(255, 255, 255, 0.2);
 }
+
 .trwdcov_top_time {
   margin-right: 3%;
 }
+
 .tz_cov_right .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
   background: rgba(255, 255, 255, 0.1);
   cursor: pointer;
 }
+
 .el-table .el-table__cell.gutter {
   background: var(--tableHeadBg);
   width: 2px;
 }
+
 .el-table__body-wrapper::-webkit-scrollbar {
   width: 2px;
   height: 2px;

src/pages/MywrList/index.vue

@@ -244,7 +244,7 @@
                 <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"
                                    :placement="`top`">
                   <div class="maintainLog">
-                    <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.omName}}</div>
+                    <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>
                     <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>
                     <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;
                       <span class="el-icon-time"></span> {{activity.maintainTime}}</div>
@@ -410,7 +410,6 @@ export default {
       timer: null,
       refresh: true,
       fullscreen: false, //全屏
-      dataStr: '',
       trqxzxdialogTableVisible: false,
       qczddialogTableVisible: false,
       trbgzhuanq: false,
@@ -425,13 +424,13 @@ export default {
       dateType: 'monthDays',
       dateTypeOptions: [ {
         value: 'dayhours',
-        label: '当日'
+        label: '24小时'
       }, {
         value: 'monthDays',
-        label: '当月'
+        label: '30天'
       }, {
         value: 'yearMonth',
-        label: '当年'
+        label: '12个月'
       }]
     };
   },
@@ -473,7 +472,7 @@ export default {
   },
   methods: {
     initMaintainLog(){
-      getMaintainLog({stationCode: this.stationCode}).then(res => {
+      getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
         if (res.code === 200) {
           this.maintainLogList = res.result.records;
           console.log('maintainLogList',this.maintainLogList)
@@ -533,11 +532,12 @@ export default {
         console.log('开始初始化echart：', domKey, divDom, data)
         let dataObj = [];
         let i = 0;
-        let colors = ['#f6dd11',
+        let colors = [
-          '#02fa16',
+          '#C41E3A', '#FF7F0E', '#FFD700', '#00A36C', '#98FB98',
-          '#f41c52',
+          '#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
-          '#19ffba',
+          '#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
-          '#ee6922'];
+          '#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
+        ] ;
         for (let key in data['datas']) {
           if (data['datas'][key] instanceof Array) {
             dataObj[i++] = {
@@ -547,8 +547,24 @@ export default {
             }
           }
         }
-        let dataStr = data['dateStr']
+        let dateStr = data['dateStr']
-        let echartObj = this.$echarts.init(divDom);
+        let legendData = dataObj.map(item => item.name);
+        let seriesData = dataObj.map(item => {
+          return {
+            name: item.name,
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            data: item.value,
+            lineStyle: {
+              color: item.color // 设置线的颜色为红色
+            },
+            itemStyle: {
+              color: item.color // 设置线的颜色为红色
+            },
+            smooth: true,
+          }
+        });
         var optionLine = {
           tooltip: {
             trigger: 'axis'
@@ -565,7 +581,7 @@ export default {
             padding: [10, 50, 0, 0],
             x: 'right',      //可设定图例在左、右、居中
             y: 'top',     //可设定图例在上、下、居中
-            data: dataObj.map(item => item.name),
+            data: legendData,
             textStyle: {
               fontSize: 12,//字体大小
               color: '#ffffff'//字体颜色
@@ -574,7 +590,7 @@ export default {
           xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: dataStr,
+            data: dateStr,
             axisLine: {
               lineStyle: {
                 color: '#2295ee', //x轴的颜色
@@ -600,21 +616,10 @@ export default {
               },
             },
           },
-          series: dataObj.map(item => {
+          series: seriesData
-            return {
-              name: item.name,
-              type: 'line',
-              stack: 'Total',
-              areaStyle: {},
-              data: item.value,
-              lineStyle: {
-                color: item.color // 设置线的颜色为红色
-              },
-              smooth: true,
-            }
-          }),
         };
         //为echarts对象加载数据
+        let echartObj = this.$echarts.init(divDom);
         echartObj.setOption(optionLine);
       })
     },
@@ -2539,6 +2544,10 @@ a:hover {
     padding-left: 74px;
     padding-top: 8px;
     color: #81b8e9;
+    width: 258px; /* 设置容器宽度 */
+    overflow: hidden; /* 隐藏超出部分 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    white-space: nowrap; /* 禁止换行 */
   }
   .maintainLogPerson{
     display: none;