添加土壤数据弹窗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/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;