南昌市物联网技防平台-前端
zengh
2021-04-10 51238c649af8d5a2bf9b960871d7a718b21af9ea
src/views/dataL/dataL.vue
@@ -10,9 +10,9 @@
            <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-red': state == dataState[2],
                  'l-t-s-yuan': true,
                }"
              ></span>
@@ -37,7 +37,11 @@
            <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-m-2-heard">
@@ -122,7 +126,12 @@
                      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-column type="index"> </el-table-column>
@@ -479,30 +488,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>
@@ -518,14 +534,16 @@
                width="100%"
                height="100%"
              ></iframe> -->
                <iframe
                    id="mapL"
                    ref="mapL"
                    :src="baseUrl"
                    frameborder="0"
                    width="100%"
                    height="100%"
                ></iframe>
              <iframe
                id="detailMap"
                ref="detailMap"
                :src="baseUrl"
                frameborder="0"
                width="100%"
                height="100%"
                name="detailMap"
              ></iframe>
            </el-row>
          </div>
        </div>
@@ -543,7 +561,8 @@
export default {
  data() {
    return {
      a: '',
      // timeL: "",
      a: "",
      myDeviceNumber: "",
      //折线图
@@ -561,9 +580,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",
@@ -572,6 +591,7 @@
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", "报警"], //[grey,green,red][0,1,2]
      checkAll: false,
      checkedCities: [], //选择的
      cities: cityOptions,
@@ -589,6 +609,7 @@
        menuAlign: "center",
        column: {},
      },
      eventDetails: [], //真实数据
      eventDetaill: [
        //原始数据
@@ -680,6 +701,7 @@
      //     heartbeat: '2021-04-07', //     心跳时间
      // },
      baseUrl: "", //mapurl\
      mapStart: false,
      //省份
      form: {},
@@ -749,6 +771,11 @@
      let option = {
        title: {
          text: "警情月分布",
          textStyle: {
            fontSize: 18,
            fontStyle: "300",
            fontFamily: "sans-serif",
          },
        },
        tooltip: {
          trigger: "axis",
@@ -907,7 +934,11 @@
    stetDetails(d) {
      this.name = "无数据" && d.deviceName;
      this.state =
        "无数据" && d.dtype == 0 ? "掉线" : d.dtype == 1 ? "测试" : "报警";
        "无数据" && this.a.dtype == 0
          ? this.dataState[0]
          : this.a.dtype == 1
          ? this.dataState[1]
          : this.dataState[2];
      this.evaluate = "空气质量";
      this.machineCode = "无数据" && d.deviceNumber;
      this.smoke = "烟雾";
@@ -1029,14 +1060,13 @@
      // console.log(dataM);
      this.numdatalist = dataM;
      this.startEcharts01();
    },
    }
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
    // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    this.a = this.$route.query;
    console.log(this.a);
    this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.a.id}&jd=${this.a.jd}&wd=${this.a.wd}&pid=${this.a.deptId}&deptId=${this.a.deptId}&oneId=${this.a.oneId}`;
    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.myDeviceNumber);
@@ -1047,20 +1077,21 @@
  mounted() {
    this.loginEcharts01(); //载入折线图等待数据
    // this.eventDetails = this.eventDetaill;//载入历史事件数据
    // this.doEvents();//cc\
    this.$refs.mapL.onload = () => {
      window.frames[0].init("AlertSecurity", {
        x: this.a.jd,
        y: this.a.wd,
      });
    };
    // this.doEvents();
      this.$refs.detailMap.onload = () => {
         window.frames[0].init("DetailMap", {
          x: this.a.jd,
          y: this.a.wd,
        });
      };
  },
};
</script>
<style lang="scss" >
#Lour {
  width: 100%;
  height: 100%;
  font-size: 14px;
  height: 99.5%;
  // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
  // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
  // font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
@@ -1069,15 +1100,16 @@
  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%;
    height: 99.5%;
    // border: 1px solid rgb(236, 24, 24);
    background-color: #fff;
    display: flex;
@@ -1136,8 +1168,9 @@
      }
      .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 {
@@ -1293,7 +1326,7 @@
  }
  .right {
    width: 30%;
    height: 88.5%;
    height: 90.5%;
    // border: 1px solid rgb(23, 201, 62);
    background-color: #fff;
    display: flex;
@@ -1347,6 +1380,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;
@@ -1365,11 +1400,11 @@
        }
      }
      .r-b-map {
        height: 550px;
        height: 500px;
        border: 1px solid rgba(109, 109, 109, 0.2);
        #mapL {
        #detailMap {
          width: 100%;
          height: 550px;
          height: 500px;
        }
      }
    }