Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

shuishen

2021-04-23 8d837b97ffb27e4e26f067c1febde353bfdf91cf

 src/views/dataL/dataL.vue

@@ -1,6 +1,6 @@
<template>
  <div id="Lour">
    <div class="left">
  <div id="Lour" style="height: 100%">
    <div class="left" style="height: 101%">
      <div class="top">
        <div class="top-l">
          <div class="left-top">
@@ -10,9 +10,10 @@
            <div class="l-t-state">
              <span
                :class="{
                  'l-t-s-grey': state == '掉线',
                  'l-t-s-green': state == '测试',
                  'l-t-s-red': state == '报警',
                  'l-t-s-grey': state == dataState[0],
                  'l-t-s-green': state == dataState[1],
                  'l-t-s-yewllo': state == dataState[3],
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span>
@@ -37,9 +38,13 @@
            <el-tab-pane label="预警历史" name="first">
              <!-- <el-tab-pane label="预警历史" name="second"> -->
              <div class="frist-left">
                <div id="echart01" style="width: 100%; height: 260px"></div>
                <div
                  id="echart01"
                  style="width: 100%; height: 260px"
                  ref="echart01"
                ></div>

                <div class="l-main-2">
                <div class="l-main-2" ref="aaa">
                  <div class="l-m-2-heard">
                    <span style="font-size: 14px">历史事件</span>
                    <span style="font-size: 12px">全部事件类型</span>
@@ -93,8 +98,9 @@
                            viewBox="0 0 1024 1024"
                            width="100%"
                            height="100%"
                            fill="#29c093"
                            fill="rgba(0,0,0,0.5)"
                            style="width: 13px; position: relative; top: 2px"
                            ref="svgBut"
                          >
                            <path
                              d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z"
@@ -122,9 +128,19 @@
                      v-show="eventDetails.length != 0"
                      class="l-m-2-m-table"
                    >
                      <p class="l-m-2-m-tableheard">{{ value.year }}年</p>
                      <p
                        class="l-m-2-m-tableheard"
                        style="fontsize: 20px; font-weight: 100"
                      >
                        {{ 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>
@@ -149,8 +165,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>
@@ -427,8 +444,6 @@
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="心跳时间">
                              <el-input
@@ -479,30 +494,37 @@
                                </span>
                            </div> -->
            <!-- 图暂时没有 -->
            <!-- <div class="r-b-t-main">
                                <span class="r-b-t-left" style="position:relative;top: -27px;">部署图片</span>
                                <span class="r-b-t-right">
                                    <div
                                    class="r-b-t-r-imgsl"
                                    v-for="(value,index) in imgsl"
                                    :key="index"
                                    >
                                        <el-image 
                                            style="width: 68px; height: 68px"
                                            :src="value" 
                                            :preview-src-list="imgsl"
                                            v-show="value != 'no'"
                                        >
                                        </el-image>
                                        <div 
                                        v-show="value == 'no'"
                                        style="width: 68px; height: 68px;text-algin: center;color: rgba(0,0,0,.5)"
                                        >
                                            无图片
                                        </div>
                                    </div>
                                </span>
                            </div> -->
            <div class="r-b-t-main">
              <span class="r-b-t-left" style="position: relative; top: -27px"
                >部署图片</span
              >
              <span class="r-b-t-right">
                <div
                  class="r-b-t-r-imgsl"
                  v-for="(value, index) in imgsl"
                  :key="index"
                >
                  <el-image
                    style="width: 68px; height: 68px"
                    :src="value"
                    :preview-src-list="imgsl"
                    v-show="value != 'no'"
                  >
                  </el-image>
                  <div
                    v-show="value == 'no'"
                    style="
                      width: 68px;
                      height: 68px;
                      text-algin: center;
                      color: rgba(0, 0, 0, 0.5);
                    "
                  >
                    无图片
                  </div>
                </div>
              </span>
            </div>
            <div class="r-b-t-main">
              <span class="r-b-t-left">部署时间</span>
              <span class="r-b-t-right">{{ deploymentTime }}</span>
@@ -510,13 +532,23 @@
          </div>
          <div class="r-b-map">
            <el-row>
              <iframe
              <!-- <iframe
                id="supervisoryMap"
                ref="supervisoryMap"
                :src="baseUrl"
                frameborder="0"
                width="100%"
                height="100%"
              ></iframe> -->
              <!-- <button @click="re">刷新</button> -->
              <iframe
                id="detailMap"
                ref="detailMap"
                :src="baseUrl"
                frameborder="0"
                width="100%"
                height="100%"
                name="detailMap"
              ></iframe>
            </el-row>
          </div>
@@ -527,7 +559,7 @@
</template>
<script>
import { Loading } from "element-ui";
import { getdataL, getGalarm, getnum } from "../../api/dataL/axiosL";
import { getdataL, getGalarm, getnum, getImg } from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
@@ -535,6 +567,8 @@
export default {
  data() {
    return {
      // timeL: "",
      a: "",
      myDeviceNumber: "",

      //折线图
@@ -552,9 +586,9 @@
      calls: "",
      labels: ["店面", "楼房"],
      imgsl: [
        "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
        "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
        "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
        // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
        // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
        // "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
      ],
      deploymentTime: "2019-08-28 11:16:14",

@@ -563,6 +597,13 @@
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", "故障", "预警"],
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
      //   state!= "",
      //   jtype != 2
      //   ]
      checkAll: false,
      checkedCities: [], //选择的
      cities: cityOptions,
@@ -580,6 +621,7 @@
        menuAlign: "center",
        column: {},
      },

      eventDetails: [], //真实数据
      eventDetaill: [
        //原始数据
@@ -671,6 +713,7 @@
      //     heartbeat: '2021-04-07', //     心跳时间
      // },
      baseUrl: "", //mapurl\
      mapStart: false,

      //省份
      form: {},
@@ -740,6 +783,11 @@
      let option = {
        title: {
          text: "警情月分布",
          textStyle: {
            fontSize: 18,
            fontStyle: "300",
            fontFamily: "sans-serif",
          },
        },
        tooltip: {
          trigger: "axis",
@@ -803,9 +851,9 @@
      this.myChart.setOption(option);
      this.myChart.hideLoading();
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // window.addEventListener("resize", function () {
      //   this.myChart.resize();
      // });
    },
    modifyl() {
      //right 修改按钮
@@ -829,6 +877,7 @@
      this.checkedCities = ["未处理", "处理中", "已处理"];
      // console.log(`按钮重置`);
      this.doEvents(this.checkedCities);
      this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
      // this.eventDetails = this.eventDetaill;
    },
    determine() {
@@ -838,8 +887,14 @@
      if (this.checkedCities.length == 0) {
        // console.log(`未选择`);
        this.eventDetails = [];
        this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
      } else {
        this.doEvents(this.checkedCities); //筛选数据
        if (this.checkedCities.length == 3) {
          this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
        } else {
          this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
        }
      }
    },
    doEvents(ends) {
@@ -889,43 +944,82 @@
        current: "1",
        size: "10",
      };
      var imgdadta = {
        deviceName: this.myDeviceNumber,
      };
      getdataL(data).then((res) => {
        var data = res.data.data.records[0];
        this.stetDetails(data);
        var setimgl = null;
        //插入图片api获取图片
// this.stetDetails(data);
        getImg(imgdadta,'post').then((res) => {
          var imgdatas = res.data.data;
          // console.log(res);
      //     imgdatas = [ //最多5张照片 
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

      //   "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
      //   "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
      // ];
          setimgl =  imgdatas.length == 0? ['no'] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        // console.log(data);
      });
    },
    stetDetails(d) {
      this.name = "无数据" && d.deviceName;
      this.state =
        "无数据" && d.dtype == 0 ? "掉线" : d.dtype == 1 ? "测试" : "报警";
    stetDetails(d, imgdata) {
      this.name = "无数据" && this.a.deviceName;
      //设备状态
      // [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.machineCode = "无数据" && this.a.deviceNumber;
      this.smoke = "烟雾";
      this.proportion = "电量";
      this.ReportTime = "最近上报：" + d.heartbeat;
      this.contacts = "无数据" && d.oneContacts;
      this.calls = "无数据" && d.onePhone;
      this.labels = ["无数据"] && [d.deviceType];
      this.imgsl = ["no"];
      this.deploymentTime = "无数据" && d.stime;
      this.ReportTime = "最近上报：" + this.a.heartbeat;
      this.contacts = "无数据" && this.a.oneContacts;
      this.calls = "无数据" && this.a.onePhone;
      this.labels = ["无数据"] && [this.a.deviceType];
      this.imgsl = imgdata;
      this.deploymentTime = "无数据" && this.a.stime;

      this.detailsData = {
        machineName: d.deviceName, // 设备名称
        machineNumber: d.deviceNumber, //
        user: d.ownership, //     使用方
        serialNumber: d.serialNumber, //     序列号
        channel: d.channelNumber, //     通道号
        deployment: d.devicestate == 1 ? "布防" : "撤防", //     布撤防状态:
        machineType: d.deviceType, //     设备类型
        province: ["邮编：", d.district, ""], //     省份
        street: d.street, //     街道
        person: d.oneContacts, //     负责人
        call: d.onePhone, //     负责人电话
        dueDate: d.expireTime, //     到期时间
        payment: d.pay, //     缴费信息
        installation: d.stime, //     安装时间
        heartbeat: d.heartbeat, //     心跳时间
        machineName: this.a.deviceName, // 设备名称
        machineNumber: this.a.deviceNumber, //
        user: this.a.ownership, //     使用方
        serialNumber: this.a.serialNumber, //     序列号
        channel: this.a.channelNumber, //     通道号
        deployment: this.a.devicestate == 1 ? "布防" : "撤防", //     布撤防状态:
        machineType: this.a.deviceType, //     设备类型
        province: ["邮编：", this.a.district, ""], //     省份
        street: this.a.street, //     街道
        person: this.a.oneContacts, //     负责人
        call: this.a.onePhone, //     负责人电话
        dueDate: this.a.expireTime, //     到期时间
        payment: this.a.pay, //     缴费信息
        installation: this.a.stime, //     安装时间
        heartbeat: this.a.heartbeat, //     心跳时间
      };
      this.form = d;
    },
@@ -997,6 +1091,21 @@
          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; //载入历史事件数据
@@ -1021,15 +1130,31 @@
      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() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
    this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    this.a = this.$route.query;
    // console.log(this.a);
    this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
    this.myDeviceNumber = this.$route.query.deviceNumber;

    var a = this.$route.query;
    console.log(a);

    // console.log(this.a);
    // console.log(this.myDeviceNumber);
    this.getdata();
    this.getdataG();
@@ -1038,13 +1163,27 @@
  mounted() {
    this.loginEcharts01(); //载入折线图等待数据
    // this.eventDetails = this.eventDetaill;//载入历史事件数据
    // this.doEvents();//cc
    // this.doEvents();
    // 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();
        console.log(`没有找到到window.frames[0].init`);
      }
    };
  },
};
</script>
<style lang="scss" >
#Lour {
  width: 100%;
  font-size: 14px;
  height: 100%;
  // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
  // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
@@ -1054,12 +1193,13 @@
  display: flex;
  // align-items: center;
  justify-content: space-around;
  position: relative;
  // position: relative;
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  .left {
    width: 67%;
    height: 100%;
@@ -1113,16 +1253,20 @@
            .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);
            }
          }
        }
      }
      .left-bot,
      .top-r {
        font-weight: 900;
        color: rgba($color: #00000075, $alpha: 0.25);
        font-size: 14px;
        font-weight: 400;
        color: #c4c4c4;
        // border: 1px solid rgb(24, 207, 48);
      }
      .left-bot {
@@ -1223,7 +1367,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;
@@ -1278,7 +1427,7 @@
  }
  .right {
    width: 30%;
    height: 88.5%;
    height: 95.5%;
    // border: 1px solid rgb(23, 201, 62);
    background-color: #fff;
    display: flex;
@@ -1320,7 +1469,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;
@@ -1332,6 +1483,8 @@
        .r-b-t-right {
          display: block;
          width: 70%;
          color: #5d5d5d;
          font-size: 12px;
          // border: 1px solid rgb(49, 74, 184);
          .r-b-t-r-label {
            float: left;
@@ -1350,11 +1503,13 @@
        }
      }
      .r-b-map {
        height: 550px;
        border: 1px solid rgba(109, 109, 109, 0.2);
        #supervisoryMap {
        height: 500px;
        // border: 1px solid rgba(109, 109, 109, 0.2);
        #detailMap {
          position: relative;
          top: 25px;
          width: 100%;
          height: 550px;
          height: 500px;
        }
      }
    }