| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | 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> |
| | |
| | | </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> |
| | |
| | | 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> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | a: '', |
| | | // timeL: "", |
| | | a: "", |
| | | myDeviceNumber: "", |
| | | |
| | | //折线图 |
| | |
| | | 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", |
| | | |
| | |
| | | isRecord: true, |
| | | screens: false, |
| | | //复选框 |
| | | dataState: ["掉线", "在线", "报警"], //[grey,green,red][0,1,2] |
| | | checkAll: false, |
| | | checkedCities: [], //选择的 |
| | | cities: cityOptions, |
| | |
| | | menuAlign: "center", |
| | | column: {}, |
| | | }, |
| | | |
| | | eventDetails: [], //真实数据 |
| | | eventDetaill: [ |
| | | //原始数据 |
| | |
| | | // heartbeat: '2021-04-07', // 心跳时间 |
| | | // }, |
| | | baseUrl: "", //mapurl\ |
| | | mapStart: false, |
| | | |
| | | //省份 |
| | | form: {}, |
| | |
| | | let option = { |
| | | title: { |
| | | text: "警情月分布", |
| | | textStyle: { |
| | | fontSize: 18, |
| | | fontStyle: "300", |
| | | fontFamily: "sans-serif", |
| | | }, |
| | | }, |
| | | tooltip: { |
| | | trigger: "axis", |
| | |
| | | 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 = "烟雾"; |
| | |
| | | // 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); |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | } |
| | | .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 { |
| | |
| | | } |
| | | .right { |
| | | width: 30%; |
| | | height: 88.5%; |
| | | height: 90.5%; |
| | | // border: 1px solid rgb(23, 201, 62); |
| | | background-color: #fff; |
| | | display: flex; |
| | |
| | | .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; |
| | |
| | | } |
| | | } |
| | | .r-b-map { |
| | | height: 550px; |
| | | height: 500px; |
| | | border: 1px solid rgba(109, 109, 109, 0.2); |
| | | #mapL { |
| | | #detailMap { |
| | | width: 100%; |
| | | height: 550px; |
| | | height: 500px; |
| | | } |
| | | } |
| | | } |