修改，图例，top长度，省份间距，标题文字

liuyg

2021-04-12 e2234fabe971a539fcffd1e0dec1f5cedd6078fa

修改，图例，top长度，省份间距，标题文字

 src/components/liu-legend/Legend.vue

New file
@@ -0,0 +1,54 @@
<template>
  <span id="l-legendOur">
    <span v-for="(value,index) in datas" :key="index" class="l-l-o">
      <span class="l-l-Img" :style="{backgroundColor: value.color}"></span>
      <span class="l-l-Text">{{value.text}}</span>
    </span>
  </span>
</template>
<script>
import { color } from "echarts"


export default ({
    props:['datas'],
    data(){
        return{
            datalist:[//示例数据格式
                {
                    color: 'rgb(233, 39, 25)',
                    text: '掉线'
                },
                {
                    color: 'black',
                    text: '在线'
                }
            ]
        }
    }
})
</script>

<style lang="scss" >
#l-legendOur{
    position: absolute;
    right: 0;
    .l-l-o{
        color: rgba($color: #000000, $alpha: .5);
        position: relative;
        right: 150px;
        margin-left: 10px;
        font-size: 12px;
        font-weight: 300;
        font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
    }
    .l-l-Img{
        display: inline-block;
        width: 7px;
        height: 7px;
        // border: 1px solid rgb(17, 198, 253);
        border-radius: 7px;
        margin-right: 7px;
    }
}
</style>

 src/views/clientManagement/clientManagement.vue

@@ -37,6 +37,9 @@
                       v-if="permission.clientManagement_delete"
                       @click="handleDelete">删 除
            </el-button>
            <span><!--图例 components-->
              <Legend :datas="datalistLIU"></Legend>
            </span>
          </template>


@@ -193,13 +196,28 @@
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client";
  import {mapGetters} from "vuex";
  import axios from "axios";
  import Legend from '../../components/liu-legend/Legend'

  export default {
    components:{
      Legend,
    },
    created() {
      //this.payWin();
    },
    data() {
      return {
        //legend-liu数据
        datalistLIU:[
                {
                    color: 'rgb(233, 39, 25)',
                    text: '掉线'
                },
                {
                    color: 'black',
                    text: '在线'
                }
            ],
        form: {},
        query: {},
        showMap: false,

 src/views/dataL/dataL.vue

@@ -12,7 +12,8 @@
                :class="{
                  'l-t-s-grey': state == dataState[0],
                  'l-t-s-green': state == dataState[1],
                  'l-t-s-red': state == dataState[2],
                  'l-t-s-yewllo': state == dataState[3],
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span>
@@ -133,7 +134,7 @@
                        {{ value.year }}年
                      </p>
                      <div class="l-m-2-m-tablemain">
                        <el-table :data="value.data" style="width: 100%">
                        <el-table :data="value.data" style="width: 100%" highlight-current-row @current-change="handleCurrentChange"><!--highlight-current-row: 单选，current-change单选事件-->
                          <el-table-column type="index"> </el-table-column>
                          <el-table-column label="日期" prop="day">
                          </el-table-column>
@@ -158,8 +159,9 @@
                              <el-tag>{{ props.row.state }}</el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column label="跳转实时" prop="">
                          </el-table-column>
                          <!-- <el-table-column label="跳转实时" prop="">
                            
                          </el-table-column> -->
                        </el-table>
                      </div>
                    </div>
@@ -436,8 +438,6 @@
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="心跳时间">
                              <el-input
@@ -534,7 +534,7 @@
                width="100%"
                height="100%"
              ></iframe> -->
             
              <!-- <button @click="re">刷新</button> -->
              <iframe
                id="detailMap"
                ref="detailMap"
@@ -591,7 +591,13 @@
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", "报警"], //[grey,green,red][0,1,2]
      dataState: ["掉线", "在线", '故障', "预警"], 
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
      //   state!= "",
      //   jtype != 2
      //   ]
      checkAll: false,
      checkedCities: [], //选择的
      cities: cityOptions,
@@ -839,9 +845,9 @@
      this.myChart.setOption(option);
      this.myChart.hideLoading();
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // window.addEventListener("resize", function () {
      //   this.myChart.resize();
      // });
    },
    modifyl() {
      //right 修改按钮
@@ -933,12 +939,28 @@
    },
    stetDetails(d) {
      this.name = "无数据" && d.deviceName;
      this.state =
        "无数据" && this.a.dtype == 0
          ? this.dataState[0]
          : this.a.dtype == 1
          ? this.dataState[1]
          : this.dataState[2];
      //设备状态
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
      //   state!= "",
      //   jtype != 2
      //   ]
      var states,
      o = this.a.onlineStatus,
      s = this.a.state,
      j = this.a.jtype;
      if(o == 0){
        states = '掉线';
      }else if(o == 1){
        states = '在线';
      }else if(s != ""){
        states = '故障';
      }else if(j != 2){
        states = '预警';
      }
      this.state = "无数据" && states;

      this.evaluate = "空气质量";
      this.machineCode = "无数据" && d.deviceNumber;
      this.smoke = "烟雾";
@@ -947,7 +969,8 @@
      this.contacts = "无数据" && d.oneContacts;
      this.calls = "无数据" && d.onePhone;
      this.labels = ["无数据"] && [d.deviceType];
      this.imgsl = ["no"];
      var imgD = ["no"];
      this.imgsl = ["no"] && imgD;
      this.deploymentTime = "无数据" && d.stime;

      this.detailsData = {
@@ -1037,6 +1060,18 @@
          creates(i, tData);
        }
      }
      for(var k1 in Num){//添加序号
        var n2 = Num[k1];
        for(var k2 in n2){
          if(k2 == 'year'){continue};
          // console.log(n2[k2])
          var n3 = n2[k2];
          for(var k3 in n3){
            // console.log(+k3 + 1);
            n3[k3].i = +k3 + 1;
          }
        }
      }
      // console.log(Num);
      this.eventDetaill = Num;
      this.eventDetails = this.eventDetaill; //载入历史事件数据
@@ -1060,6 +1095,22 @@
      // console.log(dataM);
      this.numdatalist = dataM;
      this.startEcharts01();
    },
    getMap() {
      window.frames[0].init("DetailMap", {
        x: this.a.jd,
        y: this.a.wd,
      });
    },
    re() {
      //   var _body = window.parent;
      //   var _iframe1=_body.document.getElementById('detailMap');
      //   window.onbeforeunload=function(){};
      //   _iframe1.contentWindow.location.reload(true);
      location.reload();
    },
    handleCurrentChange(val){
        console.log(val.i)
    }
  },
  created() {
@@ -1068,7 +1119,7 @@
    this.a = this.$route.query;
    this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
    this.myDeviceNumber = this.$route.query.deviceNumber;

    // console.log(this.a);
    // console.log(this.myDeviceNumber);
    this.getdata();
    this.getdataG();
@@ -1078,12 +1129,19 @@
    this.loginEcharts01(); //载入折线图等待数据
    // this.eventDetails = this.eventDetaill;//载入历史事件数据
    // this.doEvents();
      this.$refs.detailMap.onload = () => {
         window.frames[0].init("DetailMap", {
          x: this.a.jd,
          y: this.a.wd,
        });
      };
    // var timel = setTimeout(() => {
    this.$refs.detailMap.onload = () => {
      // window.frames[0].init("DetailMap", {
      //   x: this.a.jd,
      //   y: this.a.wd,
      // });
      if (window.frames[0].init) {
        this.getMap();
      } else {
        // this.re();
        this.getMap();
      }
    };
  },
};
</script>
@@ -1160,8 +1218,11 @@
            .l-t-s-green {
              background-color: rgb(41, 202, 135);
            }
            .l-t-s-yewllo{
              background-color: rgb(240, 181, 20);
            }
            .l-t-s-red {
              background-color: rgb(243, 75, 75);
              background-color: rgba(247, 28, 28, 0.877);
            }
          }
        }
@@ -1271,7 +1332,12 @@
      .l-m-2-main {
        width: 100%;
        height: 370px;
        overflow: scroll;
        // overflow: scroll;
        overflow-y: scroll;//滚动条
        scrollbar-color: transparent transparent;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;

        // border: 1px solid rg b(23, 66, 209);
        .l-m-2-m-not {
          display: flex;
@@ -1368,7 +1434,9 @@
          display: flex;
          align-items: center;
          justify-content: space-between;
          // border: 1px solid rgb(148, 199, 159);
          padding: 10px 0 10px 0;
          margin-bottom: 5px;
        }
        .r-b-t-left {
          display: block;
@@ -1401,8 +1469,10 @@
      }
      .r-b-map {
        height: 500px;
        border: 1px solid rgba(109, 109, 109, 0.2);
        // border: 1px solid rgba(109, 109, 109, 0.2);
        #detailMap {
          position: relative;
          top: 25px;
          width: 100%;
          height: 500px;
        }

 src/views/realTimePolice/real.vue

@@ -66,6 +66,9 @@
          @click="getQBdata(3)"
          >全部
        </el-button>
        <span>
          <Legend :datas="datalistLIU"></Legend>
        </span>
      </template>

      <template slot-scope="{ row }" slot="jtype">
@@ -408,9 +411,30 @@

import Recorder from "js-audio-recorder";

import Legend from '../../components/liu-legend/Legend'

export default {
  components:{
      Legend,
    },
  data() {
    return {
      //legend-liu数据
      datalistLIU:[
                {
                    color: 'rgb(233, 39, 25)',
                    text: '未处理'
                },
                {
                    color: 'rgb(17, 198, 253)',
                    text: '处理中'
                },
                {
                    color: 'black',
                    text: '已处理'
                }
            ],

      showMap: false,
      hls: "",
      videoSource: "",

 src/views/system/cs.vue

@@ -104,6 +104,7 @@
        viewBtn: true,
        //dialogType: 'drawer',
        dialogClickModal: false,
        //  searchSize: 'mini',
        column: [
          {
            label: "客户ID",
@@ -124,6 +125,7 @@
            search: true,
            width: 190,
            span: 12,
            searchSpan: 3,
            rules: [{
              required: true,
              message: "请输入参数名称",
@@ -135,6 +137,7 @@
            prop: "linkman",
            width: 100,
            search: true,
            searchSpan: 3,
            rules: [{
              required: true,
              message: "请输入联系人",
@@ -200,23 +203,23 @@
            className: "cityClass3"
          },
          {
            label: '坐标',
            label: '地址',
            prop: 'map',
            hide: true,
            span: 24,
            component: "AvueMap",
          },
          {
            label: '经度',
            hide: true,
            addDisplay: false,
            prop: 'jd',
          },
          {
            label: '纬度',
            hide: true,
            addDisplay: false,
            prop: 'wd',
          },
          {
            label: '经度',
            hide: true,
            addDisplay: false,
            prop: 'jd',
          },
          {
            label: "账号额度",
@@ -528,15 +531,16 @@
      }
    };
  },
  watch:{
    'form.map':{// form是表单或者表格绑定的数据集，v-model='form'
      handler(val){
        this.form.jd = val.latitude
        this.form.wd = val.longitude
      },
      immediate: true
    }
  },
  //报错: TypeError: val is undefined 处理时间2021.4.10，处理人  liuyg
  // watch:{     
  //   'form.map':{// form是表单或者表格绑定的数据集，v-model='form'
  //     handler(val){
  //       this.form.jd = val.latitude
  //       this.form.wd = val.longitude
  //     },
  //     immediate: true
  //   }
  // },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
@@ -849,42 +853,49 @@
};
</script>

<style>
<style lang="scss">
$city-m-l: 10px;

  /*页面样式*/
  .el-card__body .cityClass1 {
    width: 155px;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }

  .el-card__body .cityClass2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }

  .el-card__body .cityClass3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }

  /*新增窗体样式*/
  .el-dialog .cityClass1 {
    width: 220px;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }

  .el-dialog .cityClass2 {
    width: 110px;
    width: 130px;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: $city-m-l;
  }

  .el-dialog .cityClass3 {
    width: 110px;
    width: 130px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }

  .cityClass2 div label {
@@ -899,5 +910,7 @@
    font-size: 15px;
  }


.el-input__inner{
  width: aotu;
}
</style>