|
@@ -0,0 +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:100%;">
|
|
|
+ <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;'>394</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;'>226</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id='yjchart' style="width:45rem;height:30rem;margin-top: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:100%;">
|
|
|
+ <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: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 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 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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 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:100%;">
|
|
|
+ <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>
|
|
|
+ <img src="../../assets/images/goverce/bg.png" style="width:40rem;height:20rem;margin-top:2rem;margin-left:4rem"/>
|
|
|
+ </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>
|
|
|
+ <!-- <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 headerdiv from '@/components/HeaderDiv/index.vue'
|
|
|
+import { httpRequest } from "@/api/data/http";
|
|
|
+import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
|
|
|
+
|
|
|
+import videodiv from "../../components/Videoplayer/index.vue"
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "big",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userList:[],
|
|
|
+ areaList:[],
|
|
|
+ tdxjCount:111,
|
|
|
+ tdcsCount:152,
|
|
|
+ currentindexNew:4,
|
|
|
+ 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:[]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ mapdiv,
|
|
|
+ headerdiv,
|
|
|
+ videodiv,
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(111)
|
|
|
+ this.initchart();
|
|
|
+ this.getGovern();
|
|
|
+ this.inityjchart();
|
|
|
+ this.getGdChart();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ 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 =>{
|
|
|
+ console.log(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,471,421]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预警总数',
|
|
|
+ type: 'bar',
|
|
|
+ data: [582, 366, 391, 498, 577, 337, 483, 492]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ 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(){
|
|
|
+ console.log(11111)
|
|
|
+ console.log(this.videoChartDate);
|
|
|
+ // console.log(document.getElementById('videoeChart'));
|
|
|
+ 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);
|
|
|
+ console.log(option)
|
|
|
+ },
|
|
|
+ initlcchart(){
|
|
|
+ console.log(111);
|
|
|
+ console.log(this.$echarts);
|
|
|
+ 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">
|
|
|
+ .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;
|
|
|
+}
|
|
|
+.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
|
|
|
+}
|
|
|
+</style>
|