Просмотр исходного кода

上传文件至 'src/views/new'

liwei19941102 2 лет назад
Родитель
Сommit
1bc8309073
1 измененных файлов с 685 добавлено и 0 удалено
  1. 685 0
      src/views/new/index.vue

+ 685 - 0
src/views/new/index.vue

@@ -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>