|
|
@@ -1,755 +1,685 @@
|
|
|
<template>
|
|
|
-<div style="width:100%;height:100%;position:relative">
|
|
|
- <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
|
|
|
- <div style="display: inline-flex;">
|
|
|
- <div style="width:25vw;height:95vh;">
|
|
|
- <div style="width:100%">
|
|
|
- <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">预警分析</div>
|
|
|
- </div>
|
|
|
- <!-- <br/> -->
|
|
|
- <div style="display:flex;padding:2rem 0">
|
|
|
- <div class="yjcontent1" style="padding-left:2rem;padding-top:1.5rem">
|
|
|
- <div >
|
|
|
- <div style="font-size: 1.4rem;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: #FFFFFF;
|
|
|
- ">预警总数</div>
|
|
|
- <div style='font-size: 2rem;
|
|
|
- font-family: Myriad Pro;
|
|
|
- font-weight: 400;
|
|
|
- color: #21F5F2;'>0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="yjcontent2" style="padding-left:2rem;padding-top:1.5rem">
|
|
|
- <div>
|
|
|
- <div style="font-size: 1.4rem;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: #FFFFFF;">未处理预警</div>
|
|
|
- <div style='font-size: 2rem;
|
|
|
- font-family: Myriad Pro;
|
|
|
- font-weight: 400;
|
|
|
- color: #23B9FF;'>0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id='yjchart' style="width:45rem;height:25rem;margin-top:0.5rem"></div>
|
|
|
- <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">站点预警量</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="zdyjcontrnt"></div>
|
|
|
- <div id='zdyjchart' style="width:45rem;height:27rem"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="width:50vw;height:95vh;">
|
|
|
- <div class="publicTitle2" style="margin-top:1.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">治理对比展示</div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="block" style="height:25vh">
|
|
|
- <el-carousel trigger="click" height="25vh">
|
|
|
- <el-carousel-item v-for="(item,index) in incidentList" :key="index">
|
|
|
- <div style="display:flex;flex-direction:row;padding-top:1rem;padding-left:2rem">
|
|
|
- <div>
|
|
|
- <img :src="getImageUrl(item.pics.split(',')[0])" class="imgClass"/>
|
|
|
+ <div style="width:100vw;height:100vh;">
|
|
|
+ <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
|
|
|
+ <div style="display: flex;flex-direction: row;">
|
|
|
+ <div style="width: 25vw;">
|
|
|
+ <div style="height: 45vh;">
|
|
|
+ <div class="publicTitle" style="margin-top:1rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">今日巡检</div>
|
|
|
+ </div>
|
|
|
+ <!-- <br/> -->
|
|
|
+ <div class='tdgove' style="margin-top:8vh;">
|
|
|
+ <!-- <div style="padding-top:2.5rem;padding-left:2.9rem">
|
|
|
+ <img src="../../assets/images/goverce/里程.png" style="width:3.9rem;height:3.9rem"/>
|
|
|
+ </div> -->
|
|
|
+ <div style="margin-top:1.5rem;margin-left:5vw;">
|
|
|
+ <div class="fontClass">今日巡检里程</div>
|
|
|
+ <div class='EngClass'>Inspection mileage today</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="countClass">{{tdxjCount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="countClass2" style="margin-left:0.5rem">km</div>
|
|
|
+ </div>
|
|
|
+ <div class='tdgove2' style="margin-top:5vh">
|
|
|
+ <div style="margin-left:3rem">
|
|
|
+ <div class="countClass">{{tdcsCount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="countClass2" style="margin-left:0.5rem">次</div>
|
|
|
+ <div style="margin-top:2rem;margin-left:9.5rem;">
|
|
|
+ <div class="fontClass">今日巡检打卡</div>
|
|
|
+ <div class='EngClass'>Check in today</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="padding-top:3.3rem;padding-left:3.2rem">
|
|
|
+ <img src="../../assets/images/goverce/里程碑.png" style="width:3.9rem;height:3.9rem"/>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="padding-top:5rem;margin-left:3rem">
|
|
|
- <div style="display:flex;flex-direction:row">
|
|
|
- <div><i class="el-icon-caret-left" style="color:#30FFE7;font-size: 2.4rem"></i></div>
|
|
|
- <div class='fontType'>治理前</div>
|
|
|
+ <div>
|
|
|
+ <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">隐患占比</div>
|
|
|
</div>
|
|
|
- <div style="margin-top:3rem;display:flex;flex-direction:row">
|
|
|
- <div class='fontType'>治理后</div>
|
|
|
- <div><i class="el-icon-caret-right" style="color:#30FFE7;font-size: 2.4rem"></i></div>
|
|
|
+ <div>
|
|
|
+ <div id='zdyjchart' style="width:45rem;height:40vh"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="margin-left:3rem">
|
|
|
- <img :src="getImageUrl(item.dealPics.split(',')[0])" class="imgClass"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
|
|
|
- <div style="width:100%;display:flex;flex-direction: row;">
|
|
|
- <div style="width:50%">
|
|
|
- <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">视频资源统计</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id='videoeChart' style="width:45rem;height:25rem;margin-top:2rem;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 50vw;">
|
|
|
+ <div class="publicTitle2" style="margin-top:1.5rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">治理对比展示</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div style="width:50%">
|
|
|
- <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">里程数统计</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div id='lcChart' style="width:45rem;height:25rem;margin-top:0.5rem"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="block" style="height:40vh">
|
|
|
+ <el-carousel trigger="click" height="40vh">
|
|
|
+ <el-carousel-item v-for="(item,index) in incidentList" :key="index">
|
|
|
+ <div style="display:flex;flex-direction:row;padding-top:1rem;padding-left:2rem">
|
|
|
+ <div>
|
|
|
+ <img :src="getImageUrl(item.pics.split(',')[0])" class="imgClass"/>
|
|
|
+ </div>
|
|
|
+ <div style="padding-top:5rem;margin-left:3rem">
|
|
|
+ <div style="display:flex;flex-direction:row">
|
|
|
+ <div><i class="el-icon-caret-left" style="color:#30FFE7;font-size: 2.4rem"></i></div>
|
|
|
+ <div class='fontType'>治理前</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:3rem;display:flex;flex-direction:row">
|
|
|
+ <div class='fontType'>治理后</div>
|
|
|
+ <div><i class="el-icon-caret-right" style="color:#30FFE7;font-size: 2.4rem"></i></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left:3rem">
|
|
|
+ <img :src="getImageUrl(item.dealPics.split(',')[0])" class="imgClass"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
|
|
|
- <div style="width:100%;display:flex;flex-direction: row;">
|
|
|
- <div style="width:50%">
|
|
|
- <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">当日巡检完成率</div>
|
|
|
- </div>
|
|
|
- <div style="margin-top:2rem">
|
|
|
- <div class="prcentClass">
|
|
|
- <div v-for="(item ,i) in areaList">
|
|
|
- <div style="display: inline-flex;" :class='i!=0?"isTop":""'>
|
|
|
- <div style="font-size: 1.4rem;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: #C5D0D4;
|
|
|
- ">{{item.areaName}}</div>
|
|
|
- <div style="font-size: 1.6rem;
|
|
|
- font-family: Myriad Pro;
|
|
|
- font-weight: 400;
|
|
|
- color: #4AA2FF;
|
|
|
- margin-left:1.3rem">{{item.totalDistance}}</div>
|
|
|
- <div style="font-size: 1.6rem;
|
|
|
- font-family: Myriad Pro;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;">公里</div>
|
|
|
- <div style="font-size: 1.4rem;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: #08E7E9;
|
|
|
- margin-left:1rem">({{item.percent}} %)</div>
|
|
|
+ <div style="display: flex;flex-direction: row;">
|
|
|
+ <div style="width:25vw">
|
|
|
+ <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">隐患分析</div>
|
|
|
+ </div>
|
|
|
+ <!-- <br/> -->
|
|
|
+ <div style="display:flex;padding:2rem 0">
|
|
|
+ <div class="yjcontent1" style="padding-left:2rem;padding-top:1.5rem">
|
|
|
+ <div >
|
|
|
+ <div style="font-size: 1.4rem;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+ ">预警总数</div>
|
|
|
+ <div style='font-size: 2rem;
|
|
|
+ font-family: Myriad Pro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #21F5F2;'>0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yjcontent2" style="padding-left:2rem;padding-top:1.5rem">
|
|
|
+ <div>
|
|
|
+ <div style="font-size: 1.4rem;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;">未处理预警</div>
|
|
|
+ <div style='font-size: 2rem;
|
|
|
+ font-family: Myriad Pro;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #23B9FF;'>0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id='yjchart' style="width:45rem;height:25rem;margin-top:0.5rem"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 25vw;">
|
|
|
+ <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">周巡检里程统计</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div style="width:50%">
|
|
|
- <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
+ <div id='lcChart' style="width:45rem;height:40vh;margin-top:0.5rem"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 25vw;">
|
|
|
+ <div>
|
|
|
+ <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
<img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡检考核</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="height:25rem;width:100%;padding-top:2rem">
|
|
|
- <el-table :data="userList" stripe
|
|
|
- class="my_table"
|
|
|
- max-height=300
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
|
|
|
- <el-table-column type="index" label="序号" width="55" align="center" />
|
|
|
- <el-table-column label="巡检员" align="center" prop="nickName" />
|
|
|
- <el-table-column label="巡检次数" align="center" prop="checkCount" />
|
|
|
- <el-table-column label="综合分数" align="center" prop="score" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="width:25vw;height:95vh;">
|
|
|
- <div style="width:100%;padding-left:1rem">
|
|
|
- <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">工作面貌展示</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin-top:2rem">
|
|
|
- <el-carousel trigger="click" height="20rem">
|
|
|
- <el-carousel-item v-for="item in workList" :key="item">
|
|
|
- <img :src="getImageUrl(JSON.parse(item.picUrl)[0].fileName)" style="width:40rem;height:20rem;margin-left:3rem"/>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="publicTitle" style="margin-top:1rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">今日巡检</div>
|
|
|
- </div>
|
|
|
- <!-- <br/> -->
|
|
|
- <div class='tdgove'>
|
|
|
- <div style="padding-top:2.5rem;padding-left:2.9rem">
|
|
|
- <img src="../../assets/images/goverce/里程.png" style="width:3.9rem;height:3.9rem"/>
|
|
|
- </div>
|
|
|
- <div style="margin-top:1.5rem;margin-left:2.4rem;">
|
|
|
- <div class="fontClass">今日巡检里程</div>
|
|
|
- <div class='EngClass'>Inspection mileage today</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="countClass">{{tdxjCount}}</div>
|
|
|
- </div>
|
|
|
- <div class="countClass2" style="margin-left:0.5rem">km</div>
|
|
|
- </div>
|
|
|
- <div class='tdgove2' style="margin-top:1rem">
|
|
|
- <div style="margin-left:3rem">
|
|
|
- <div class="countClass">{{tdcsCount}}</div>
|
|
|
- </div>
|
|
|
- <div class="countClass2" style="margin-left:0.5rem">次</div>
|
|
|
- <div style="margin-top:2rem;margin-left:9.5rem;">
|
|
|
- <div class="fontClass">今日巡检打卡</div>
|
|
|
- <div class='EngClass'>Check in today</div>
|
|
|
- </div>
|
|
|
- <div style="padding-top:3.3rem;padding-left:6rem">
|
|
|
- <img src="../../assets/images/goverce/里程碑.png" style="width:3.9rem;height:3.9rem"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="publicTitle" style="margin-top:1.5rem">
|
|
|
- <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
- <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">工单类型统计</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <div class='gdChart' style='margin-top:5rem'></div> -->
|
|
|
- <div id='gdChart' style="width:45rem;height:37rem"></div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import moment from "moment";
|
|
|
-import mapdiv from "../../components/map/index.vue"
|
|
|
-import { listWork } from "@/api/qdtl/work";
|
|
|
-import headerdiv from '@/components/HeaderDiv/index.vue'
|
|
|
-import { httpRequest } from "@/api/data/http";
|
|
|
-import { getLineData,getResource,getgovern,getincidentList } from "@/api/qdtl/data";
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">工作面貌展示</div>
|
|
|
+ </div>
|
|
|
|
|
|
-import videodiv from "../../components/Videoplayer/index.vue"
|
|
|
+ <div style="margin-top:1rem">
|
|
|
+ <el-carousel trigger="click" height="40vh">
|
|
|
+ <el-carousel-item v-for="item in workList" :key="item">
|
|
|
+ <img :src="getImageUrl(JSON.parse(item.picUrl)[0].fileName)" style="width:40rem;height:30vh;margin-left:3rem"/>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="publicTitle" style="margin-top:0.5rem">
|
|
|
+ <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
|
|
|
+ <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">视频资源统计</div>
|
|
|
+ </div>
|
|
|
|
|
|
-export default {
|
|
|
- name: "big",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- workList:[],
|
|
|
- incidentList:[],
|
|
|
- userList:[],
|
|
|
- areaList:[],
|
|
|
- tdxjCount:111,
|
|
|
- tdcsCount:152,
|
|
|
- currentindexNew:3,
|
|
|
- videoChartDate:{},
|
|
|
- ccode:"32068166001320000235",
|
|
|
- videoParams:{
|
|
|
- url:'http://2.90.220.252:9017/artemis-web/debug',
|
|
|
- params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
|
|
|
+ <div id='videoeChart' style="width:45rem;height:40vh;margin-top:2rem;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import moment from "moment";
|
|
|
+ import mapdiv from "../../components/map/index.vue"
|
|
|
+ import { listWork } from "@/api/qdtl/work";
|
|
|
+ import headerdiv from '@/components/HeaderDiv/index.vue'
|
|
|
+ import { httpRequest } from "@/api/data/http";
|
|
|
+ import { getLineData,getResource,getgovern,getincidentList } from "@/api/qdtl/data";
|
|
|
+
|
|
|
+ import videodiv from "../../components/Videoplayer/index.vue"
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "big",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ workList:[],
|
|
|
+ incidentList:[],
|
|
|
+ userList:[],
|
|
|
+ areaList:[],
|
|
|
+ tdxjCount:111,
|
|
|
+ tdcsCount:152,
|
|
|
+ currentindexNew:3,
|
|
|
+ videoChartDate:{},
|
|
|
+ ccode:"32068166001320000235",
|
|
|
+ videoParams:{
|
|
|
+ url:'http://2.90.220.252:9017/artemis-web/debug',
|
|
|
+ params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
|
|
|
+ },
|
|
|
+ staticCount:0,
|
|
|
+ dynamicCount:2,
|
|
|
+ areaCount:0,
|
|
|
+ lcData:{
|
|
|
+ weeks:[],
|
|
|
+ counts:[]
|
|
|
+ },
|
|
|
+ queryIncidentParams: {
|
|
|
+ queryFlag: '1'
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ mapdiv,
|
|
|
+ headerdiv,
|
|
|
+ videodiv,
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initchart();
|
|
|
+ this.getGovern();
|
|
|
+ this.inityjchart();
|
|
|
+ // this.getGdChart();
|
|
|
+ this.getImgList();
|
|
|
+ this.getWorkList();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getWorkList(){
|
|
|
+ var obj = {
|
|
|
+ status:1
|
|
|
+ }
|
|
|
+ listWork(obj).then(response =>{
|
|
|
+ this.workList = response.rows
|
|
|
+ //console.log(response);
|
|
|
+ })
|
|
|
},
|
|
|
- staticCount:0,
|
|
|
- dynamicCount:2,
|
|
|
- areaCount:0,
|
|
|
- lcData:{
|
|
|
- weeks:[],
|
|
|
- counts:[]
|
|
|
+ getImageUrl(pic){
|
|
|
+ return process.env.VUE_APP_BASE_API+pic
|
|
|
+ },
|
|
|
+ getImgList(){
|
|
|
+ getincidentList(this.queryIncidentParams).then(response =>{
|
|
|
+ console.log(response);
|
|
|
+ for(var index in response.rows){
|
|
|
+ if(response.rows[index].pics != null && response.rows[index].pics != '' && response.rows[index].dealPics != null && response.rows[index].dealPics != '' && response.rows[index].status == 2 && this.incidentList.length < 6){
|
|
|
+ this.incidentList.push(response.rows[index]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.incidentList)
|
|
|
+ })
|
|
|
},
|
|
|
- queryIncidentParams: {
|
|
|
- queryFlag: '1'
|
|
|
+ getGdChart(){
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('gdChart'));
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
+ {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
+ ]
|
|
|
+ ),
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ barWidth:15,
|
|
|
+ data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ type: 'bar'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
},
|
|
|
- };
|
|
|
- },
|
|
|
- components:{
|
|
|
- mapdiv,
|
|
|
- headerdiv,
|
|
|
- videodiv,
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initchart();
|
|
|
- this.getGovern();
|
|
|
- this.inityjchart();
|
|
|
- this.getGdChart();
|
|
|
- this.getImgList();
|
|
|
- this.getWorkList();
|
|
|
- },
|
|
|
- methods:{
|
|
|
- getWorkList(){
|
|
|
- var obj = {
|
|
|
- status:1
|
|
|
- }
|
|
|
- listWork(obj).then(response =>{
|
|
|
- this.workList = response.rows
|
|
|
- //console.log(response);
|
|
|
- })
|
|
|
- },
|
|
|
- getImageUrl(pic){
|
|
|
- return process.env.VUE_APP_BASE_API+pic
|
|
|
- },
|
|
|
- getImgList(){
|
|
|
- getincidentList(this.queryIncidentParams).then(response =>{
|
|
|
- console.log(response);
|
|
|
- for(var index in response.rows){
|
|
|
- if(response.rows[index].pics != null && response.rows[index].pics != '' && response.rows[index].dealPics != null && response.rows[index].dealPics != '' && response.rows[index].status == 2 && this.incidentList.length < 6){
|
|
|
- this.incidentList.push(response.rows[index]);
|
|
|
- }
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if ((rowIndex + 1) % 2 === 0) {
|
|
|
+ return "warning-row";
|
|
|
+ } else {
|
|
|
+ return "success-row";
|
|
|
}
|
|
|
- console.log(this.incidentList)
|
|
|
- })
|
|
|
- },
|
|
|
- getGdChart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('gdChart'));
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- color: new this.$echarts.graphic.LinearGradient(
|
|
|
- 0, 0, 0, 1,
|
|
|
- [
|
|
|
- {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
- {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
- ]
|
|
|
- ),
|
|
|
- series: [
|
|
|
- {
|
|
|
- barWidth:15,
|
|
|
- data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- tableRowClassName({ row, rowIndex }) {
|
|
|
- if ((rowIndex + 1) % 2 === 0) {
|
|
|
- return "warning-row";
|
|
|
- } else {
|
|
|
- return "success-row";
|
|
|
- }
|
|
|
- },
|
|
|
- changeMapTab(index){
|
|
|
- this.$refs.mapdiv.iconSelect = index
|
|
|
- },
|
|
|
- getGovern(){
|
|
|
- getgovern().then(data =>{
|
|
|
- this.userList = data.data.checkStatic;
|
|
|
- this.tdxjCount = data.data.xunTotalDistance;
|
|
|
- this.tdcsCount = data.data.checkPointLogNum;
|
|
|
- this.videoChartDate.name = [];
|
|
|
- this.videoChartDate.count = [];
|
|
|
- this.areaList = data.data.areaStatics
|
|
|
- for(var index in data.data.cameraslist){
|
|
|
- this.videoChartDate.name.push(data.data.cameraslist[index].name);
|
|
|
- this.videoChartDate.count.push(data.data.cameraslist[index].num);
|
|
|
- }
|
|
|
- this.initVideochart();
|
|
|
- for(var index in data.data.locationLogDaysList){
|
|
|
- this.lcData.weeks.push(data.data.locationLogDaysList[index].week)
|
|
|
- this.lcData.counts.push(data.data.locationLogDaysList[index].distance)
|
|
|
-
|
|
|
- }
|
|
|
- this.initlcchart();
|
|
|
- })
|
|
|
- },
|
|
|
- initchart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('yjchart'));
|
|
|
- var option = {
|
|
|
- color: ['#3DFCCD', '#23B9FF'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- x:'left',
|
|
|
- textStyle:{
|
|
|
- fontSize: 12,//字体大小
|
|
|
- color: '"#fft'//字体颜色
|
|
|
- },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 0.01],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇'],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '已处理预警',
|
|
|
- type: 'bar',
|
|
|
- data: [573, 289, 357, 405, 501, 286]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '预警总数',
|
|
|
- type: 'bar',
|
|
|
- data: [582, 366, 391, 498, 577, 337]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- inityjchart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
|
|
|
- var option = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Nightingale Chart',
|
|
|
- type: 'pie',
|
|
|
- radius: [20, 100],
|
|
|
- center: ['50%', '50%'],
|
|
|
- roseType: 'area',
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 8
|
|
|
- },
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- formatter: '{b} ({d}%)'
|
|
|
- }
|
|
|
- },
|
|
|
- data: [
|
|
|
- { value: 40, name: '汇龙镇', itemStyle: { color: '#38CAFB' }, },
|
|
|
- { value: 38, name: '海复镇', itemStyle: { color: '#4CAFF9' }, },
|
|
|
- { value: 32, name: '王鲍镇', itemStyle: { color: '#4ADDC9' }, },
|
|
|
- { value: 30, name: '北新镇', itemStyle: { color: '#2AA4EA' }, },
|
|
|
- { value: 28, name: '吕四镇', itemStyle: { color: '#0965D2' }, },
|
|
|
- { value: 26, name: '其它' , itemStyle: { color: '#1C3F83' },},
|
|
|
- { value: 22, name: '南阳镇' , itemStyle: { color: '#488CF7' },},
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
- },
|
|
|
- initVideochart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('videoeChart'));
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- top: '3%',
|
|
|
- bottom:'3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 0.01],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#006691"
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: this.videoChartDate.name,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#006691"
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '探头',
|
|
|
- type: 'bar',
|
|
|
- barWidth:10,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color:'#3BFFE8'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.videoChartDate.count
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- initlcchart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('lcChart'));
|
|
|
- var option = {
|
|
|
- color: [
|
|
|
- new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#00E3C0'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#0068DC'
|
|
|
- }]),
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '1%',
|
|
|
- top:'15%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 0.01],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: this.lcData.weeks,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#ACB6B9' //这里用参数代替了
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '已处理预警',
|
|
|
- type: 'bar',
|
|
|
- data: this.lcData.counts,
|
|
|
- barWidth:10
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style rel="stylesheet/scss" lang="scss">
|
|
|
- .el-table__empty-block{
|
|
|
- background-color: #112832
|
|
|
- }
|
|
|
- .publicTitle{
|
|
|
- background: url("~@/assets/images/title@2x.png") no-repeat;
|
|
|
+ },
|
|
|
+ changeMapTab(index){
|
|
|
+ this.$refs.mapdiv.iconSelect = index
|
|
|
+ },
|
|
|
+ getGovern(){
|
|
|
+ getgovern().then(data =>{
|
|
|
+ this.userList = data.data.checkStatic;
|
|
|
+ this.tdxjCount = data.data.xunTotalDistance;
|
|
|
+ this.tdcsCount = data.data.checkPointLogNum;
|
|
|
+ this.videoChartDate.name = [];
|
|
|
+ this.videoChartDate.count = [];
|
|
|
+ this.areaList = data.data.areaStatics
|
|
|
+ for(var index in data.data.cameraslist){
|
|
|
+ this.videoChartDate.name.push(data.data.cameraslist[index].name);
|
|
|
+ this.videoChartDate.count.push(data.data.cameraslist[index].num);
|
|
|
+ }
|
|
|
+ this.initVideochart();
|
|
|
+ for(var index in data.data.locationLogDaysList){
|
|
|
+ this.lcData.weeks.push(data.data.locationLogDaysList[index].week)
|
|
|
+ this.lcData.counts.push(data.data.locationLogDaysList[index].distance)
|
|
|
+
|
|
|
+ }
|
|
|
+ this.initlcchart();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initchart(){
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('yjchart'));
|
|
|
+ var option = {
|
|
|
+ color: ['#3DFCCD', '#23B9FF'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x:'left',
|
|
|
+ textStyle:{
|
|
|
+ fontSize: 12,//字体大小
|
|
|
+ color: '"#fft'//字体颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇'],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '已处理预警',
|
|
|
+ type: 'bar',
|
|
|
+ data: [573, 289, 357, 405, 501, 286]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预警总数',
|
|
|
+ type: 'bar',
|
|
|
+ data: [582, 366, 391, 498, 577, 337]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ inityjchart(){
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
|
|
|
+ var option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Nightingale Chart',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [20, 100],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ roseType: 'area',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 8
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{b} ({d}%)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 40, name: '汇龙镇', itemStyle: { color: '#38CAFB' }, },
|
|
|
+ { value: 38, name: '海复镇', itemStyle: { color: '#4CAFF9' }, },
|
|
|
+ { value: 32, name: '王鲍镇', itemStyle: { color: '#4ADDC9' }, },
|
|
|
+ { value: 30, name: '北新镇', itemStyle: { color: '#2AA4EA' }, },
|
|
|
+ { value: 28, name: '吕四镇', itemStyle: { color: '#0965D2' }, },
|
|
|
+ { value: 26, name: '其它' , itemStyle: { color: '#1C3F83' },},
|
|
|
+ { value: 22, name: '南阳镇' , itemStyle: { color: '#488CF7' },},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ initVideochart(){
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('videoeChart'));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ top: '3%',
|
|
|
+ bottom:'3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#006691"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: this.videoChartDate.name,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#006691"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '探头',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth:10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color:'#3BFFE8'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.videoChartDate.count
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ initlcchart(){
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('lcChart'));
|
|
|
+ var option = {
|
|
|
+ color: [
|
|
|
+ new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#00E3C0'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0068DC'
|
|
|
+ }]),
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '1%',
|
|
|
+ top:'15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: this.lcData.weeks,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ACB6B9' //这里用参数代替了
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '已处理预警',
|
|
|
+ type: 'bar',
|
|
|
+ data: this.lcData.counts,
|
|
|
+ barWidth:10
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style rel="stylesheet/scss" lang="scss">
|
|
|
+ .el-table__empty-block{
|
|
|
+ background-color: #112832
|
|
|
+ }
|
|
|
+ .publicTitle{
|
|
|
+ background: url("~@/assets/images/title@2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:95%;
|
|
|
+ height:3.9rem;
|
|
|
+ padding-left:1.5rem;
|
|
|
+ padding-top:0.7rem;
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+ .publicTitle2{
|
|
|
+ background: url("~@/assets/images/title2@2x.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width:95%;
|
|
|
height:3.9rem;
|
|
|
padding-left:1.5rem;
|
|
|
padding-top:0.7rem;
|
|
|
display: inline-flex;
|
|
|
- }
|
|
|
-.publicTitle2{
|
|
|
- background: url("~@/assets/images/title2@2x.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:95%;
|
|
|
- height:3.9rem;
|
|
|
- padding-left:1.5rem;
|
|
|
- padding-top:0.7rem;
|
|
|
- display: inline-flex;
|
|
|
-}
|
|
|
-.yjcontent1{
|
|
|
- background: url("~@/assets/images/safe/bg2.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:18.7rem;
|
|
|
- height:8.3rem;
|
|
|
- margin-left:3.5rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
- // display: inline-flex;
|
|
|
-}
|
|
|
-.yjcontent2{
|
|
|
- background: url("~@/assets/images/safe/bg1.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:18.7rem;
|
|
|
- height:8.3rem;
|
|
|
- margin-left:3.5rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
- // display: inline-flex;
|
|
|
-}
|
|
|
-.zdyjcontrnt{
|
|
|
- background: url("~@/assets/images/safe/组 15@2x.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:42.7rem;
|
|
|
- height:12rem;
|
|
|
- margin-left:1.5rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
-}
|
|
|
-
|
|
|
-.bgcontent{
|
|
|
- background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:6.9rem;
|
|
|
- height:6.9rem;
|
|
|
- margin-left:1.5rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
-}
|
|
|
-
|
|
|
-.pieChart{
|
|
|
- background: url("~@/assets/images/safe/piechart.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:38.8rem;
|
|
|
- height:17.5rem;
|
|
|
- margin-left:4rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
-}
|
|
|
-
|
|
|
-.countClass{
|
|
|
- font-size: 2.4rem;
|
|
|
- font-family: AlibabaSans;
|
|
|
- font-weight: 500;
|
|
|
- color: #30FDFF;
|
|
|
-}
|
|
|
-
|
|
|
-.deptClass{
|
|
|
- font-size: 1.4rem;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: #BAC3C4;
|
|
|
-}
|
|
|
-
|
|
|
-.tdgove{
|
|
|
- background: url("~@/assets/images/goverce/态势1@2x.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:32rem;
|
|
|
- height:9.6rem;
|
|
|
- margin-left:3.5rem;
|
|
|
- margin-top:1rem;
|
|
|
- display: inline-flex;
|
|
|
- // display: inline-flex;
|
|
|
-}
|
|
|
-
|
|
|
-.tdgove2{
|
|
|
- background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:37.2rem;
|
|
|
- height:9.9rem;
|
|
|
- margin-left:3.5rem;
|
|
|
- display: inline-flex;
|
|
|
- // display: inline-flex;
|
|
|
-}
|
|
|
-.fontClass{
|
|
|
- font-size: 1.5rem;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 2.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.EngClass{
|
|
|
- font-size: 1.2rem;
|
|
|
- font-family: AlibabaSans;
|
|
|
- font-weight: 400;
|
|
|
- color: #B7D0FA;
|
|
|
- line-height: 1.1rem;
|
|
|
- opacity: 0.4;
|
|
|
-}
|
|
|
-
|
|
|
-.countClass{
|
|
|
- font-size: 2.1rem;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #25FFDE;
|
|
|
- line-height: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.countClass2{
|
|
|
- font-size: 1.5rem;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 2.6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.isTop{
|
|
|
- margin-top:2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.prcentClass{
|
|
|
- background: url("~@/assets/images/goverce/prcent.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:95%;
|
|
|
- height:28rem;
|
|
|
- padding-left:25rem
|
|
|
-}
|
|
|
-
|
|
|
-.imgClass{
|
|
|
- width: 40rem;
|
|
|
- height: 20rem;
|
|
|
- border: 0.1rem solid #30FFE7;
|
|
|
-}
|
|
|
-
|
|
|
-.fontType{
|
|
|
- font-size: 1.4rem;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #DFEEF3;
|
|
|
- opacity: 0.8;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ .yjcontent1{
|
|
|
+ background: url("~@/assets/images/safe/bg2.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:18.7rem;
|
|
|
+ height:8.3rem;
|
|
|
+ margin-left:3.5rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ // display: inline-flex;
|
|
|
+ }
|
|
|
+ .yjcontent2{
|
|
|
+ background: url("~@/assets/images/safe/bg1.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:18.7rem;
|
|
|
+ height:8.3rem;
|
|
|
+ margin-left:3.5rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ // display: inline-flex;
|
|
|
+ }
|
|
|
+ .zdyjcontrnt{
|
|
|
+ background: url("~@/assets/images/safe/组 15@2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:42.7rem;
|
|
|
+ height:12rem;
|
|
|
+ margin-left:1.5rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgcontent{
|
|
|
+ background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:6.9rem;
|
|
|
+ height:6.9rem;
|
|
|
+ margin-left:1.5rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pieChart{
|
|
|
+ background: url("~@/assets/images/safe/piechart.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:38.8rem;
|
|
|
+ height:17.5rem;
|
|
|
+ margin-left:4rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countClass{
|
|
|
+ font-size: 2.4rem;
|
|
|
+ font-family: AlibabaSans;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #30FDFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deptClass{
|
|
|
+ font-size: 1.4rem;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #BAC3C4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tdgove{
|
|
|
+ background: url("~@/assets/images/goverce/态势one.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:32rem;
|
|
|
+ height:10vh;
|
|
|
+ margin-left:3.5rem;
|
|
|
+ margin-top:1rem;
|
|
|
+ display: inline-flex;
|
|
|
+ // display: inline-flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tdgove2{
|
|
|
+ background: url("~@/assets/images/goverce/态势two.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:37.2rem;
|
|
|
+ height:11vh;
|
|
|
+ margin-left:3.5rem;
|
|
|
+ display: inline-flex;
|
|
|
+ // display: inline-flex;
|
|
|
+ }
|
|
|
+ .fontClass{
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 2.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .EngClass{
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-family: AlibabaSans;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #B7D0FA;
|
|
|
+ line-height: 1.1rem;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countClass{
|
|
|
+ font-size: 2.1rem;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #25FFDE;
|
|
|
+ line-height: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countClass2{
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 2.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .isTop{
|
|
|
+ margin-top:2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prcentClass{
|
|
|
+ background: url("~@/assets/images/goverce/prcent.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width:95%;
|
|
|
+ height:28rem;
|
|
|
+ padding-left:25rem
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgClass{
|
|
|
+ width: 40rem;
|
|
|
+ height: 30vh;
|
|
|
+ border: 0.1rem solid #30FFE7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontType{
|
|
|
+ font-size: 1.4rem;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #DFEEF3;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
