up

src/api.js

@@ -168,6 +168,11 @@ export default {
 	uploadMonittask: params => {
 		return axios.post(`${baseURL}/api/admin/monittask/upload`, params);
 	},
+	//巡检
+	getMonitjobList: params => {
+		return axios.get(`${baseURL}/api/admin/monitjob/list`,{params:params})
+	},
+	
 	//消息
 	getMessagesList: params => {
 		return axios.get(`${baseURL}/api/admin/messages/list`,{params:params})
@@ -191,4 +196,7 @@ export default {
 	getFriendlinkList: params => {
 		return axios.get(`${baseURL}/api/admin/friendlink/list`,{params:params})
 	},
+	getChartData: params => {
+		return axios.get(`${baseURL}/api/admin/dashboard/index`,{params:params})
+	},
 }

src/router.js

@@ -111,6 +111,10 @@ export default new Router({
         path: '/dangertask',
         component: () => import('./views/task/DangerTask.vue'),
         name: '风险点任务'
+      },{
+        path: '/monitjob',
+        component: () => import('./views/task/Monitjob.vue'),
+        name: '巡检记录'
       }]
     },
     {

src/views/CompanyData.vue

@@ -190,7 +190,7 @@
                 <h4>安全风险实时统计</h4>
                 <div style="position:relative;">
                   <p class="all">
-                    32   <span>总风险(起)</span>
+                    {{count}}   <span>总风险(起)</span>
                   </p>
                   <div id="chart1" style="width: 100%;height:230px;"></div>
                 </div>
@@ -201,8 +201,8 @@
                 <img class="top" src="../images/bk.png" alt="">
                 <h4>安全隐患实时统计</h4>
                 <div style="position:relative;">
-                  <p class="all" style="top:75px;">
-                    24   <span>总隐患数(起)</span>
+                  <p class="all" style="top:75px;" v-if='data.yh_data'>
+                    {{data.yh_data[0].value+data.yh_data[1].value}}   <span>总隐患数(起)</span>
                   </p>
                   <div id="chart3" style="width: 100%;height:250px;"></div>
                 </div>
@@ -214,8 +214,8 @@
                 <img class="top" src="../images/bk.png" alt="">
                 <h4>系统实时监测</h4>
                 <p class="count">
-                  <span class="span3">风险点5个</span>
-                  <span class="span4">管控任务5个</span>
+                  <span class="span3">风险点 {{data.riskpoint_count}} 个</span>
+                  <span class="span4">管控任务 {{data.monittask_count}} 个</span>
                 </p>
                 <h4>风险点任务</h4>
                 <div id="chart4" style="width: 100%;height:310px;"></div>
@@ -231,16 +231,9 @@
               <h4>最新告警</h4>
               <table cellpadding='0' cellspacing='0'>
                 <!-- <thead><td>序号</td><td>企业名称</td><td>告警次数</td></thead> -->
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
-                <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
+                <tr v-for="(item,index) in data.latest_warning" :key='index'>
+                  <td>{{item.riskpoint_name}}</td>
+                  <td>{{item.monit_name}}</td><td>{{item.ctime}}</td></tr>
               </table>
               <img class="bottom" src="../images/bk-1.png" alt="">
             </div>
@@ -261,273 +254,220 @@ export default {
   data(){
     return{
       fullscreen:'',
-      info:{}
+      info:{},
+      count:0,
+      data:{}
     }
   },
   methods:{
-    getData(){   
-      // 基于准备好的dom，初始化echarts实例
-      var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
-      var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
-      var myChart3 = this.$echarts.init(document.getElementById('chart3'),'dark');
-      var myChart4 = this.$echarts.init(document.getElementById('chart4'),'dark');
-      var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
-      var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
-      this.myChart1=myChart1;
-      this.myChart2=myChart2;
-      this.myChart3=myChart3;
-      this.myChart4=myChart4;
-      this.myChart5=myChart5;
-      this.myChart6=myChart6;
-      // 指定图表的配置项和数据
-        let color=['#dc402c','#ee5930','#fcd865','#3074b5']
-	    var option1 = {
-            backgroundColor:'rgba(0,0,0,0)',
-            color:color,
-                tooltip: {formatter: '{b}: {c} ({d}%)'},
-                legend: {
-            y:'bottom',
-            itemWidth:8,
-            itemHeight:8,
-            textStyle:{
-                color:'#8C8C8C',
-            },
-                    data:['重大风险', '较大风险','一般风险','低风险']
+    getData(){  
+      this.$api.getChartData({type:'qy'}).then(res=>{
+              this.data=res.data.data
+              var data=res.data.data;
+              let count=0;
+              for(let i=0;i<data.risk_data.length;i++){
+                count+=data.risk_data[i].value
+              }
+              this.count=count;
+          
+          // 基于准备好的dom，初始化echarts实例
+          var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
+          var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
+          var myChart3 = this.$echarts.init(document.getElementById('chart3'),'dark');
+          var myChart4 = this.$echarts.init(document.getElementById('chart4'),'dark');
+          var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
+          var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
+          this.myChart1=myChart1;
+          this.myChart2=myChart2;
+          this.myChart3=myChart3;
+          this.myChart4=myChart4;
+          this.myChart5=myChart5;
+          this.myChart6=myChart6;
+          // 指定图表的配置项和数据
+            let color=['#dc402c','#ee5930','#fcd865','#3074b5']
+            var option1 = {
+              backgroundColor:'rgba(0,0,0,0)',
+              color:color,
+              tooltip: {formatter: '{b}: {c} ({d}%)'},
+              legend: {
+                y:'bottom',
+                itemWidth:8,
+                itemHeight:8,
+                textStyle:{
+                  color:'#8C8C8C',
                 },
-                series: [{
-            type: 'pie',
-            radius: ['55%', '60%'],
-            label: {
-                normal: {
-                    show: false
+                data:['重大风险', '较大风险','一般风险','低风险']
+              },
+              series: [{
+                type: 'pie',
+                radius: ['55%', '60%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
                 },
-            },
-			data: [
-                            {value: 100,name:'重大风险'},
-                            {value: 200,name:'较大风险'},
-                            {value: 50,name:'一般风险'},
-                            {value: 200,name:'低风险'},
-                        ]
-			}]
-        };
-        var option2 = {
-            backgroundColor:'rgba(0,0,0,0)',
-            // color:['#3398dc'],
-            tooltip: {formatter: '{b}: {c}'},
-            grid: {
-                left: '1%',
-                right: '1%',
-                bottom: '20px',
-                // top:'50px',
-                containLabel: true
-            },
-            xAxis: {
-            data: ['重大风险', '较大风险','一般风险','低风险'],
+                data: data.risk_data
+              }]
+            };
+            var option2 = {
+              backgroundColor:'rgba(0,0,0,0)',
+              color:color,
+              tooltip: {formatter: '{b}: {c}'},
+              grid: {
+                  left: '1%',
+                  right: '1%',
+                  bottom: '30px',
+                  // top:'50px',
+                  containLabel: true
+              },
+              xAxis: {
+                data: ['重大风险', '较大风险','一般风险','低风险'],
+              },
+              yAxis: {
+                axisLine:{
+                  show:false
                 },
-                yAxis: {
-            axisLine:{
-                show:false
-            },
-            splitLine:{
-                show:true,
-                lineStyle:{
-                    type:'solid',
-                    color:'#414B66'
-                }
-            },
-            },
-            series: [{
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                      type:'solid',
+                      color:'#414B66'
+                    }
+                },
+              },
+              series: [{
                 type: 'bar',
                 barWidth: 20,
                 data:  [
-                    {
-                    value:20,
+                  {
+                    value:data.risk_data[0].value,
                     itemStyle:{
-                        color:color[0]
+                      color:color[0]
                     }
-                    },{
-                    value:60,
+                  },{
+                    value:data.risk_data[1].value,
                     itemStyle:{
-                        color:color[1]
+                      color:color[1]
                     }
-                    },{
-                    value:120,
+                  },{
+                    value:data.risk_data[2].value,
                     itemStyle:{
-                        color:color[2]
+                      color:color[2]
                     }
-                    },{
-                    value:204,
+                  },{
+                    value:data.risk_data[3].value,
                     itemStyle:{
-                        color:color[3]
+                      color:color[3]
                     }
-                    },
+                  },
                 ],
-            }]
-        };
-        var option3 = {
-                backgroundColor:'rgba(0,0,0,0)',
-                    title: {
-                        text: ''
-                },
-                color:['#dc402c','#fcd865'],
-                tooltip: {formatter: '{b}: {c} ({d}%)'},
-                legend: {
+              }]
+            };
+            var option3 = {
+              backgroundColor:'rgba(0,0,0,0)',
+              title: {
+                text: ''
+              },
+              color:['#dc402c','#fcd865'],
+              tooltip: {formatter: '{b}: {c} ({d}%)'},
+              legend: {
                 y:'bottom',
                 itemWidth:8,
                 itemHeight:8,
-                    data:['重大隐患','一般隐患']
-                },
-                series: [{
-                    type: 'pie',
-                    radius: ['55%', '60%'],
-                    label: {
-                        normal: {
-                            show: false
-                        },
+                data:['重大隐患','一般隐患']
+              },
+              series: [{
+                type: 'pie',
+                radius: ['55%', '60%'],
+                label: {
+                    normal: {
+                        show: false
                     },
-                    data: [
-                                {value: 3,name:'重大隐患'},
-                                {value: 10,name:'一般隐患'},
-                    ]
-                }]
-        };
-        var option4 = {
-            backgroundColor:'rgba(0,0,0,0)',
-            // color:['#3398dc'],
-            tooltip: {formatter: '{b}: {c}'},
-            grid: {
-                left: '1%',
-                right: '1%',
-                bottom: '20px',
-                top:'20px',
-                containLabel: true
-            },
-            xAxis: {
-            data: ['加油区', '加油区1','加油区2','加油区3','加油区4','加油区5'],
                 },
-                yAxis: {
-            axisLine:{
-                show:false
-            },
-            splitLine:{
-                show:true,
-                lineStyle:{
-                    type:'solid',
-                    color:'#414B66'
-                }
-            },
-            },
-            series: [{
-            type: 'bar',
-            barWidth: 20,
-            data:  [5, 20, 36, 10,70,100],
-            itemStyle: {
-                    color: new echarts.graphic.LinearGradient(
-                        0, 0, 0, 1,
-                        [
-                            {offset: 0, color: '#7AF7FF'},
-                            {offset: 1, color: '#3687FF'}
-                        ]
-                    )
-            },
-            }]
-        };
-        let day=[],data=[];
-        for(let i=1;i<25;i++){
-            day.push(i)
-            data.push(Math.ceil(Math.random()*50+20))
-        }
-        var option5 = {
-            backgroundColor:'rgba(0,0,0,0)',
-            // color:['#3398dc'],
-            tooltip: {formatter: '{b}: {c}'},
-            grid: {
-                left: '1%',
-                right: '1%',
-                bottom: '20px',
-                top:'20px',
-                containLabel: true
-            },
-            xAxis: {
-            data: day,
+                data:data.yh_data
+              }]
+            };
+            let fxd_name=[]
+            for(let i=0;i<data.riskpoint_count_data.length;i++){
+              fxd_name.push(data.riskpoint_count_data[i].name)
+            }
+            var option4 = {
+                backgroundColor:'rgba(0,0,0,0)',
+                // color:['#3398dc'],
+                tooltip: {formatter: '{b}: {c}'},
+                grid: {
+                    left: '1%',
+                    right: '1%',
+                    bottom: '20px',
+                    top:'20px',
+                    containLabel: true
                 },
-                yAxis: {
-            axisLine:{
-                show:false
-            },
-            splitLine:{
-                show:true,
-                lineStyle:{
-                    type:'solid',
-                    color:'#414B66'
-                }
-            },
-            },
-            series: [{
-            type: 'line',
-            smooth: 0.6,
-            data:  data,
-            areaStyle: {},
-            itemStyle: {
-                    color: new echarts.graphic.LinearGradient(
-                        0, 0, 0, 1,
-                        [
-                            {offset: 0, color: '#7AF7FF'},
-                            {offset: 1, color: '#3687FF'}
-                        ]
-                    )
-            },
-            }]
-        };
-        var option6 = {
-            backgroundColor:'rgba(0,0,0,0)',
-            color:['#3398dc'],
-            tooltip: {formatter: '{b}: {c}'},
-            legend: {
-            y:'bottom',
-            x:'left',
-            itemWidth:8,
-            itemHeight:8,
-            textStyle:{
-                color:'#8C8C8C',
-            },
-                    data:['风险点', '管控任务']
+                xAxis: {
+                data: fxd_name,
+                    },
+                    yAxis: {
+                axisLine:{
+                    show:false
                 },
-            grid: {
-                left: '1%',
-                right: '1%',
-                bottom: '10px',
-                top:'10px',
-                containLabel: true
-            },
-            yAxis: {
-            data: ['加油区1', '加油区2','加油区3','加油区4','加油区5'], 
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                        type:'solid',
+                        color:'#414B66'
+                    }
                 },
-                xAxis: {
-            show:false
-            },
-                series: [
-            {
-                    name: '风险点',
-                    type: 'bar',
-                    barWidth:10,
-                    data: [320, 332, 301, 334,690],
-                    itemStyle: {
+                },
+                series: [{
+                type: 'bar',
+                barWidth: 20,
+                data:  data.riskpoint_count_data,
+                itemStyle: {
                         color: new echarts.graphic.LinearGradient(
                             0, 0, 0, 1,
                             [
-                                {offset: 0, color: '#FFEE7F'},
-                                {offset: 1, color: '#E8B35F'}
+                                {offset: 0, color: '#7AF7FF'},
+                                {offset: 1, color: '#3687FF'}
                             ]
                         )
+                },
+                }]
+            };
+            let fxd_date_name=[]
+            for(let i=0;i<data.time_count.length;i++){
+              fxd_date_name.push(data.time_count[i].date)
+            }
+            var option5 = {
+                backgroundColor:'rgba(0,0,0,0)',
+                // color:['#3398dc'],
+                tooltip: {formatter: '{b}: {c}'},
+                grid: {
+                    left: '1%',
+                    right: '1%',
+                    bottom: '20px',
+                    top:'20px',
+                    containLabel: true
+                },
+                xAxis: {
+                data: fxd_date_name,
                     },
-            },
-            {
-                    name: '管控任务',
-                    type: 'bar',
-                    barWidth:10,
-                    data: [30, 132, 201, 34,270],
-                    itemStyle: {
+                    yAxis: {
+                axisLine:{
+                    show:false
+                },
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                        type:'solid',
+                        color:'#414B66'
+                    }
+                },
+                },
+                series: [{
+                type: 'line',
+                smooth: 0.6,
+                data:  data.time_count,
+                areaStyle: {},
+                itemStyle: {
                         color: new echarts.graphic.LinearGradient(
                             0, 0, 0, 1,
                             [
@@ -535,26 +475,87 @@ export default {
                                 {offset: 1, color: '#3687FF'}
                             ]
                         )
+                },
+                }]
+            };
+            var option6 = {
+                backgroundColor:'rgba(0,0,0,0)',
+                color:['#3398dc'],
+                tooltip: {formatter: '{b}: {c}'},
+                legend: {
+                y:'bottom',
+                x:'left',
+                itemWidth:8,
+                itemHeight:8,
+                textStyle:{
+                    color:'#8C8C8C',
+                },
+                        data:['风险点', '管控任务']
+                    },
+                grid: {
+                    left: '1%',
+                    right: '1%',
+                    bottom: '10px',
+                    top:'10px',
+                    containLabel: true
+                },
+                yAxis: {
+                data: ['加油区1', '加油区2','加油区3','加油区4','加油区5'], 
                     },
-            },
-            ]
-        };
-		  // 使用刚指定的配置项和数据显示图表。
-		myChart1.setOption(option1);
-        myChart2.setOption(option2);  
-        myChart3.setOption(option3);  
-        myChart4.setOption(option4);  
-        myChart5.setOption(option5);  
-        myChart6.setOption(option6);  
-        window.addEventListener("resize", () => {
-            myChart1.resize();
-            myChart2.resize();
-            myChart3.resize();
-            myChart4.resize();
-            myChart5.resize();
-            myChart6.resize();
-        })
+                    xAxis: {
+                show:false
+                },
+                    series: [
+                {
+                        name: '风险点',
+                        type: 'bar',
+                        barWidth:10,
+                        data: [320, 332, 301, 334,690],
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    {offset: 0, color: '#FFEE7F'},
+                                    {offset: 1, color: '#E8B35F'}
+                                ]
+                            )
+                        },
+                },
+                {
+                        name: '管控任务',
+                        type: 'bar',
+                        barWidth:10,
+                        data: [30, 132, 201, 34,270],
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    {offset: 0, color: '#7AF7FF'},
+                                    {offset: 1, color: '#3687FF'}
+                                ]
+                            )
+                        },
+                },
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart1.setOption(option1);
+            myChart2.setOption(option2);  
+            myChart3.setOption(option3);  
+            myChart4.setOption(option4);  
+            myChart5.setOption(option5);  
+            myChart6.setOption(option6);  
+            window.addEventListener("resize", () => {
+                  myChart1.resize();
+                  myChart2.resize();
+                  myChart3.resize();
+                  myChart4.resize();
+                  myChart5.resize();
+                  myChart6.resize();
+            })
+      }) 
     },
+
     reload(){
         this.myChart1.resize();
         this.myChart2.resize();

src/views/Data.vue

@@ -200,7 +200,7 @@
               transform: translateY(0);
           }
           100%{
-              transform: translateY(-228px);
+              transform: translateY(-266px);
           }
         }
       }
@@ -222,7 +222,7 @@
                 <h4>安全风险实时统计</h4>
                 <div style="position:relative;">
                   <p class="all">
-                    32   <span>总风险(起)</span>
+                    {{count}}   <span>总风险(起)</span>
                   </p>
                   <div id="chart1" style="width: 100%;height:250px;"></div>
                 </div>
@@ -233,8 +233,9 @@
                 <img class="top" src="../images/bk.png" alt="">
                 <h4>安全隐患实时统计</h4>
                 <div style="position:relative;">
-                  <p class="all" style="top:75px;">
-                    24   <span>总隐患数(起)</span>
+                  <p class="all" style="top:75px;" v-if='data.yh_data'>
+                    {{data.yh_data[0].value+data.yh_data[1].value}}
+                       <span>总隐患数(起)</span>
                   </p>
                   <div id="chart3" style="width: 100%;height:250px;"></div>
                 </div>
@@ -247,16 +248,16 @@
                 <h4>实时监测</h4>
                 <p class="count">
                   
-                  <span class="span1">行业5个</span>
-                  <span class="span2">企业5个</span><br>
-                  <span class="span3">风险点5个</span>
-                  <span class="span4">管控任务5个</span>
-                  <span class="span4">政府5个</span>
+                  <span class="span1">行业 {{data.industry_count}} 个</span>
+                  <span class="span2">企业 {{data.enterprise_count}} 个</span><br>
+                  <span class="span3">风险点 {{data.riskpoint_count}} 个</span>
+                  <span class="span4">管控任务 {{data.monittask_count}} 个</span><br>
+                  <span class="span4">政府 {{data.goverment_count}} 个</span>
                 </p>
                 <h4>行业风险统计</h4>
                 <div id="chart4" style="width: 100%;height:315px;"></div>
                 <br><br>
-                <h4>企业风险统计</h4>
+                <h4>行业隐患统计</h4>
                 <div id="chart5" style="width: 100%;height:315px;"></div>
                 <img class="bottom" src="../images/bk.png" alt="">
             </div>
@@ -269,65 +270,21 @@
                 <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
                 <div class="outer_div">
                   <div class="inner_div">
-                    <li>
-                      <span><img src="../images/1.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
+                    <li v-for="(item,index) in data.enterprise_warning_top5" :key="index">
+                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
+                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
+                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
+                      <span v-if="index>2">{{index+1}}</span>
+                      <span class="second">{{item.enterprise_name}}</span>
+                      <span>{{item.value}}</span>
                     </li>
-                    <li>
-                      <span><img src="../images/2.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/3.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>4</span>
-                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>5</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>6</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/1.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/2.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/3.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>4</span>
-                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>5</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>6</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
+                    <li v-for="(item,index) in data.enterprise_warning_top5" :key="index+'_'+index">
+                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
+                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
+                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
+                      <span v-if="index>2">{{index+1}}</span>
+                      <span class="second">{{item.enterprise_name}}</span>
+                      <span>{{item.value}}</span>
                     </li>
                   </div>
                 </div>
@@ -358,11 +315,57 @@ export default {
   data(){
     return{
       fullscreen:'',
-      info:{}
+      info:{},
+      data:{},
+      count:0
     }
   },
   methods:{
     getData(){   
+      this.$api.getChartData({type:'pt'}).then(res=>{
+          this.data=res.data.data
+          var data=res.data.data;
+          let count=0;
+          for(let i=0;i<data.risk_data.length;i++){
+            count+=data.risk_data[i].value
+          }
+          this.count=count;
+          //行业风险
+          let fx_data=[],fx_name=[];
+          for(let j=0;j<data.industry_fx_data[0].data.length;j++){
+              fx_name.push(data.industry_fx_data[0].data[j].name)
+          }
+          for(let i=0;i<data.industry_fx_data.length;i++){
+            let _data=data.industry_fx_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            fx_data.push({
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: array,
+                name:data.industry_fx_data[i].name
+            })
+          }
+          //行业隐患
+          let yh_data=[],yh_name=[];
+          for(let j=0;j<data.industry_yh_data[0].data.length;j++){
+              yh_name.push(data.industry_yh_data[0].data[j].name)
+          }
+          for(let i=0;i<data.industry_yh_data.length;i++){
+            let _data=data.industry_yh_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            yh_data.push({
+                type: 'bar',
+                stack:'隐患',
+                barWidth:20,
+                data: array,
+                name:data.industry_yh_data[i].name
+            })
+          }
       // 基于准备好的dom，初始化echarts实例
       var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
       var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
@@ -401,12 +404,7 @@ export default {
                   show: false
               },
           },
-				  data: [
-                            {value: 100,name:'重大风险'},
-                            {value: 200,name:'较大风险'},
-                            {value: 50,name:'一般风险'},
-                            {value: 200,name:'低风险'},
-                        ]
+				  data: data.risk_data
 			  }]
       };
       var option2 = {
@@ -440,22 +438,22 @@ export default {
           barWidth: 20,
           data:  [
             {
-              value:20,
+              value:data.risk_data[0].value,
               itemStyle:{
                 color:color[0]
               }
             },{
-              value:60,
+              value:data.risk_data[1].value,
               itemStyle:{
                 color:color[1]
               }
             },{
-              value:120,
+              value:data.risk_data[2].value,
               itemStyle:{
                 color:color[2]
               }
             },{
-              value:204,
+              value:data.risk_data[3].value,
               itemStyle:{
                 color:color[3]
               }
@@ -484,10 +482,7 @@ export default {
                   show: false
               },
           },
-				  data: [
-                            {value: 3,name:'重大隐患'},
-                            {value: 10,name:'一般隐患'},
-                ]
+				  data: data.yh_data
 			  }]
       };
       var option4 = {
@@ -506,7 +501,9 @@ export default {
 				  data:['重大风险', '较大风险','一般风险','低风险']
 			  },
         color:color,
-        tooltip: {formatter: '{b}: {c}'},
+        tooltip: {
+            trigger: 'axis',
+        },
         grid: {
             left: '1%',
             right: '1%',
@@ -515,7 +512,7 @@ export default {
             containLabel: true
         },
         xAxis: {
-				  data: ['危险化学品', '煤矿','非煤矿山','工贸行业']
+				  data:fx_name
 			  },
 			  yAxis: {
           axisLine:{
@@ -529,40 +526,13 @@ export default {
               }
           },
         },
-			  series: [
-           {
-                name: '重大风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [320, 332, 301, 334]
-            },
-            {
-                name: '较大风险',
-                type: 'bar',
-                stack:'风险',
-                data: [310, 32, 31, 334]
-            },
-            {
-                name: '一般风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [390, 320, 31, 140]
-            },
-            {
-                name: '低风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [90, 20, 31, 40]
-            },
-        ]
+			  series: fx_data
       };
-      var option6 = {
+      var option5 = {
         backgroundColor:'rgba(0,0,0,0)',
-        color:['#3398dc'],
-        tooltip: {formatter: '{b}: {c}'},
+        title: {
+				  text: ''
+        },
         legend: {
           y:'bottom',
           x:'left',
@@ -571,8 +541,77 @@ export default {
           textStyle:{
             color:'#8C8C8C',
           },
-				  data:['风险点', '管控任务']
+				  data:['重大隐患','一般隐患']
 			  },
+        color:['#dc402c','#fcd865'],
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            left: '1%',
+            right: '1%',
+            top: '10px',
+            bottom:'40px',
+            containLabel: true
+        },
+        xAxis: {
+				  data:yh_name
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: yh_data
+      };
+      //企业风险
+      let qy_fx_data=[],qy_fx_name=[];
+      for(let j=0;j<data.enterprise_fx_data[0].data.length;j++){
+              qy_fx_name.push(data.enterprise_fx_data[0].data[j].enterprise_name)
+      }
+      for(let i=0;i<data.enterprise_fx_data.length;i++){
+            let _data=data.enterprise_fx_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            qy_fx_data.push({
+                type: 'bar',
+                stack:'隐患',
+                barWidth:10,
+                data: array,
+                name:data.enterprise_fx_data[i].name,
+                // itemStyle: {
+                //       color: new echarts.graphic.LinearGradient(
+                //           0, 0, 0, 1,
+                //           [
+                //               {offset: 0, color: '#FFEE7F'},
+                //               {offset: 1, color: '#E8B35F'}
+                //           ]
+                //       )
+                // },
+            })
+      }
+      var option6 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:color,
+        tooltip: {trigger: 'axis',},
+        // legend: {
+        //   y:'bottom',
+        //   x:'left',
+        //   itemWidth:8,
+        //   itemHeight:8,
+        //   textStyle:{
+        //     color:'#8C8C8C',
+        //   },
+				//   data:['重大风险', '较大风险','一般风险','低风险']
+			  // },
         grid: {
             left: '1%',
             right: '1%',
@@ -581,52 +620,77 @@ export default {
             containLabel: true
         },
         yAxis: {
-          data: ['巴中达芙妮', '巴中达芙妮2','巴中达芙妮3','巴中达芙妮4'], 
+          data: qy_fx_name, 
 			  },
 			  xAxis: {
           show:false
         },
-			  series: [
-          {
-                name: '风险点',
-                type: 'bar',
-                barWidth:10,
-                data: [320, 332, 301, 334],
-                itemStyle: {
-                      color: new echarts.graphic.LinearGradient(
-                          0, 0, 0, 1,
-                          [
-                              {offset: 0, color: '#FFEE7F'},
-                              {offset: 1, color: '#E8B35F'}
-                          ]
-                      )
-                },
-          },
-          {
-                name: '管控任务',
+			  series: qy_fx_data
+      };
+      //企业隐患
+      let qy_yh_data=[],qy_yh_name=[];
+      for(let j=0;j<data.enterprise_yh_data[0].data.length;j++){
+              qy_yh_name.push(data.enterprise_yh_data[0].data[j].enterprise_name)
+      }
+      for(let i=0;i<data.enterprise_yh_data.length;i++){
+            let _data=data.enterprise_yh_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            qy_yh_data.push({
                 type: 'bar',
+                stack:'隐患',
                 barWidth:10,
-                data: [30, 132, 201, 34],
-                itemStyle: {
-                      color: new echarts.graphic.LinearGradient(
-                          0, 0, 0, 1,
-                          [
-                              {offset: 0, color: '#7AF7FF'},
-                              {offset: 1, color: '#3687FF'}
-                          ]
-                      )
-                },
-          },
-        ]
+                data: array,
+                name:data.enterprise_yh_data[i].name,
+                // itemStyle: {
+                //       color: new echarts.graphic.LinearGradient(
+                //           0, 0, 0, 1,
+                //           [
+                //               {offset: 0, color: '#FFEE7F'},
+                //               {offset: 1, color: '#E8B35F'}
+                //           ]
+                //       )
+                // },
+            })
+      }
+      var option7 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:['#dc402c','#fcd865'],
+        tooltip: {trigger: 'axis',},
+        // legend: {
+        //   y:'bottom',
+        //   x:'left',
+        //   itemWidth:8,
+        //   itemHeight:8,
+        //   textStyle:{
+        //     color:'#8C8C8C',
+        //   },
+				//   data:['重大风险', '较大风险','一般风险','低风险']
+			  // },
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '10px',
+            top:'10px',
+            containLabel: true
+        },
+        yAxis: {
+          data: qy_yh_name, 
+			  },
+			  xAxis: {
+          show:false
+        },
+			  series: qy_yh_data
       };
 		  // 使用刚指定的配置项和数据显示图表。
 		  myChart1.setOption(option1);
       myChart2.setOption(option2);  
       myChart3.setOption(option3);  
       myChart4.setOption(option4);  
-      myChart5.setOption(option4);  
+      myChart5.setOption(option5);  
       myChart6.setOption(option6);  
-      myChart7.setOption(option6);  
+      myChart7.setOption(option7);  
       window.addEventListener("resize", () => {
         myChart1.resize();
         myChart2.resize();
@@ -636,6 +700,7 @@ export default {
         myChart6.resize();
         myChart7.resize();
       })
+      })
     },
     reload(){
         this.myChart1.resize();

src/views/GovermentData.vue

@@ -200,7 +200,7 @@
               transform: translateY(0);
           }
           100%{
-              transform: translateY(-228px);
+              transform: translateY(-266px);
           }
         }
       }
@@ -222,7 +222,7 @@
                 <h4>安全风险实时统计</h4>
                 <div style="position:relative;">
                   <p class="all">
-                    32   <span>总风险(起)</span>
+                    {{count}}   <span>总风险(起)</span>
                   </p>
                   <div id="chart1" style="width: 100%;height:250px;"></div>
                 </div>
@@ -233,8 +233,9 @@
                 <img class="top" src="../images/bk.png" alt="">
                 <h4>安全隐患实时统计</h4>
                 <div style="position:relative;">
-                  <p class="all" style="top:75px;">
-                    24   <span>总隐患数(起)</span>
+                  <p class="all" style="top:75px;" v-if='data.yh_data'>
+                    {{data.yh_data[0].value+data.yh_data[1].value}}
+                       <span>总隐患数(起)</span>
                   </p>
                   <div id="chart3" style="width: 100%;height:250px;"></div>
                 </div>
@@ -246,15 +247,16 @@
                 <img class="top" src="../images/bk.png" alt="">
                 <h4>实时监测</h4>
                 <p class="count">
-                  <span class="span1">行业5个</span>
-                  <span class="span2">企业5个</span><br>
-                  <span class="span3">风险点5个</span>
-                  <span class="span4">管控任务5个</span>
+                  
+                  <span class="span1">行业 {{data.industry_count}} 个</span>
+                  <span class="span2">企业 {{data.enterprise_count}} 个</span><br>
+                  <span class="span3">风险点 {{data.riskpoint_count}} 个</span>
+                  <span class="span4">管控任务 {{data.monittask_count}} 个</span><br>
                 </p>
                 <h4>行业风险统计</h4>
                 <div id="chart4" style="width: 100%;height:315px;"></div>
                 <br><br>
-                <h4>企业风险统计</h4>
+                <h4>行业隐患统计</h4>
                 <div id="chart5" style="width: 100%;height:315px;"></div>
                 <img class="bottom" src="../images/bk.png" alt="">
             </div>
@@ -267,65 +269,21 @@
                 <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
                 <div class="outer_div">
                   <div class="inner_div">
-                    <li>
-                      <span><img src="../images/1.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
+                    <li v-for="(item,index) in data.enterprise_warning_top5" :key="index">
+                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
+                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
+                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
+                      <span v-if="index>2">{{index+1}}</span>
+                      <span class="second">{{item.enterprise_name}}</span>
+                      <span>{{item.value}}</span>
                     </li>
-                    <li>
-                      <span><img src="../images/2.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/3.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>4</span>
-                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>5</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>6</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/1.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/2.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span><img src="../images/3.png" alt=""></span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>4</span>
-                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>5</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
-                    </li>
-                    <li>
-                      <span>6</span>
-                      <span class="second">巴中达芙妮</span>
-                      <span>20</span>
+                    <li v-for="(item,index) in data.enterprise_warning_top5" :key="index+'_'+index">
+                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
+                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
+                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
+                      <span v-if="index>2">{{index+1}}</span>
+                      <span class="second">{{item.enterprise_name}}</span>
+                      <span>{{item.value}}</span>
                     </li>
                   </div>
                 </div>
@@ -356,11 +314,57 @@ export default {
   data(){
     return{
       fullscreen:'',
-      info:{}
+      info:{},
+      data:{},
+      count:0
     }
   },
   methods:{
     getData(){   
+      this.$api.getChartData({type:'zf'}).then(res=>{
+          this.data=res.data.data
+          var data=res.data.data;
+          let count=0;
+          for(let i=0;i<data.risk_data.length;i++){
+            count+=data.risk_data[i].value
+          }
+          this.count=count;
+          //行业风险
+          let fx_data=[],fx_name=[];
+          for(let j=0;j<data.industry_fx_data[0].data.length;j++){
+              fx_name.push(data.industry_fx_data[0].data[j].name)
+          }
+          for(let i=0;i<data.industry_fx_data.length;i++){
+            let _data=data.industry_fx_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            fx_data.push({
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: array,
+                name:data.industry_fx_data[i].name
+            })
+          }
+          //行业隐患
+          let yh_data=[],yh_name=[];
+          for(let j=0;j<data.industry_yh_data[0].data.length;j++){
+              yh_name.push(data.industry_yh_data[0].data[j].name)
+          }
+          for(let i=0;i<data.industry_yh_data.length;i++){
+            let _data=data.industry_yh_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            yh_data.push({
+                type: 'bar',
+                stack:'隐患',
+                barWidth:20,
+                data: array,
+                name:data.industry_yh_data[i].name
+            })
+          }
       // 基于准备好的dom，初始化echarts实例
       var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
       var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
@@ -399,12 +403,7 @@ export default {
                   show: false
               },
           },
-				  data: [
-                            {value: 100,name:'重大风险'},
-                            {value: 200,name:'较大风险'},
-                            {value: 50,name:'一般风险'},
-                            {value: 200,name:'低风险'},
-                        ]
+				  data: data.risk_data
 			  }]
       };
       var option2 = {
@@ -438,22 +437,22 @@ export default {
           barWidth: 20,
           data:  [
             {
-              value:20,
+              value:data.risk_data[0].value,
               itemStyle:{
                 color:color[0]
               }
             },{
-              value:60,
+              value:data.risk_data[1].value,
               itemStyle:{
                 color:color[1]
               }
             },{
-              value:120,
+              value:data.risk_data[2].value,
               itemStyle:{
                 color:color[2]
               }
             },{
-              value:204,
+              value:data.risk_data[3].value,
               itemStyle:{
                 color:color[3]
               }
@@ -482,10 +481,7 @@ export default {
                   show: false
               },
           },
-				  data: [
-                            {value: 3,name:'重大隐患'},
-                            {value: 10,name:'一般隐患'},
-                ]
+				  data: data.yh_data
 			  }]
       };
       var option4 = {
@@ -504,7 +500,9 @@ export default {
 				  data:['重大风险', '较大风险','一般风险','低风险']
 			  },
         color:color,
-        tooltip: {formatter: '{b}: {c}'},
+        tooltip: {
+            trigger: 'axis',
+        },
         grid: {
             left: '1%',
             right: '1%',
@@ -513,7 +511,7 @@ export default {
             containLabel: true
         },
         xAxis: {
-				  data: ['危险化学品', '煤矿','非煤矿山','工贸行业']
+				  data:fx_name
 			  },
 			  yAxis: {
           axisLine:{
@@ -527,40 +525,13 @@ export default {
               }
           },
         },
-			  series: [
-           {
-                name: '重大风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [320, 332, 301, 334]
-            },
-            {
-                name: '较大风险',
-                type: 'bar',
-                stack:'风险',
-                data: [310, 32, 31, 334]
-            },
-            {
-                name: '一般风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [390, 320, 31, 140]
-            },
-            {
-                name: '低风险',
-                type: 'bar',
-                stack:'风险',
-                barWidth:20,
-                data: [90, 20, 31, 40]
-            },
-        ]
+			  series: fx_data
       };
-      var option6 = {
+      var option5 = {
         backgroundColor:'rgba(0,0,0,0)',
-        color:['#3398dc'],
-        tooltip: {formatter: '{b}: {c}'},
+        title: {
+				  text: ''
+        },
         legend: {
           y:'bottom',
           x:'left',
@@ -569,8 +540,77 @@ export default {
           textStyle:{
             color:'#8C8C8C',
           },
-				  data:['风险点', '管控任务']
+				  data:['重大隐患','一般隐患']
 			  },
+        color:['#dc402c','#fcd865'],
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            left: '1%',
+            right: '1%',
+            top: '10px',
+            bottom:'40px',
+            containLabel: true
+        },
+        xAxis: {
+				  data:yh_name
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: yh_data
+      };
+      //企业风险
+      let qy_fx_data=[],qy_fx_name=[];
+      for(let j=0;j<data.enterprise_fx_data[0].data.length;j++){
+              qy_fx_name.push(data.enterprise_fx_data[0].data[j].enterprise_name)
+      }
+      for(let i=0;i<data.enterprise_fx_data.length;i++){
+            let _data=data.enterprise_fx_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            qy_fx_data.push({
+                type: 'bar',
+                stack:'隐患',
+                barWidth:10,
+                data: array,
+                name:data.enterprise_fx_data[i].name,
+                // itemStyle: {
+                //       color: new echarts.graphic.LinearGradient(
+                //           0, 0, 0, 1,
+                //           [
+                //               {offset: 0, color: '#FFEE7F'},
+                //               {offset: 1, color: '#E8B35F'}
+                //           ]
+                //       )
+                // },
+            })
+      }
+      var option6 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:color,
+        tooltip: {trigger: 'axis',},
+        // legend: {
+        //   y:'bottom',
+        //   x:'left',
+        //   itemWidth:8,
+        //   itemHeight:8,
+        //   textStyle:{
+        //     color:'#8C8C8C',
+        //   },
+				//   data:['重大风险', '较大风险','一般风险','低风险']
+			  // },
         grid: {
             left: '1%',
             right: '1%',
@@ -579,52 +619,77 @@ export default {
             containLabel: true
         },
         yAxis: {
-          data: ['巴中达芙妮', '巴中达芙妮2','巴中达芙妮3','巴中达芙妮4'], 
+          data: qy_fx_name, 
 			  },
 			  xAxis: {
           show:false
         },
-			  series: [
-          {
-                name: '风险点',
-                type: 'bar',
-                barWidth:10,
-                data: [320, 332, 301, 334],
-                itemStyle: {
-                      color: new echarts.graphic.LinearGradient(
-                          0, 0, 0, 1,
-                          [
-                              {offset: 0, color: '#FFEE7F'},
-                              {offset: 1, color: '#E8B35F'}
-                          ]
-                      )
-                },
-          },
-          {
-                name: '管控任务',
+			  series: qy_fx_data
+      };
+      //企业隐患
+      let qy_yh_data=[],qy_yh_name=[];
+      for(let j=0;j<data.enterprise_yh_data[0].data.length;j++){
+              qy_yh_name.push(data.enterprise_yh_data[0].data[j].enterprise_name)
+      }
+      for(let i=0;i<data.enterprise_yh_data.length;i++){
+            let _data=data.enterprise_yh_data[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            qy_yh_data.push({
                 type: 'bar',
+                stack:'隐患',
                 barWidth:10,
-                data: [30, 132, 201, 34],
-                itemStyle: {
-                      color: new echarts.graphic.LinearGradient(
-                          0, 0, 0, 1,
-                          [
-                              {offset: 0, color: '#7AF7FF'},
-                              {offset: 1, color: '#3687FF'}
-                          ]
-                      )
-                },
-          },
-        ]
+                data: array,
+                name:data.enterprise_yh_data[i].name,
+                // itemStyle: {
+                //       color: new echarts.graphic.LinearGradient(
+                //           0, 0, 0, 1,
+                //           [
+                //               {offset: 0, color: '#FFEE7F'},
+                //               {offset: 1, color: '#E8B35F'}
+                //           ]
+                //       )
+                // },
+            })
+      }
+      var option7 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:['#dc402c','#fcd865'],
+        tooltip: {trigger: 'axis',},
+        // legend: {
+        //   y:'bottom',
+        //   x:'left',
+        //   itemWidth:8,
+        //   itemHeight:8,
+        //   textStyle:{
+        //     color:'#8C8C8C',
+        //   },
+				//   data:['重大风险', '较大风险','一般风险','低风险']
+			  // },
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '10px',
+            top:'10px',
+            containLabel: true
+        },
+        yAxis: {
+          data: qy_yh_name, 
+			  },
+			  xAxis: {
+          show:false
+        },
+			  series: qy_yh_data
       };
 		  // 使用刚指定的配置项和数据显示图表。
 		  myChart1.setOption(option1);
       myChart2.setOption(option2);  
       myChart3.setOption(option3);  
       myChart4.setOption(option4);  
-      myChart5.setOption(option4);  
+      myChart5.setOption(option5);  
       myChart6.setOption(option6);  
-      myChart7.setOption(option6);  
+      myChart7.setOption(option7);  
       window.addEventListener("resize", () => {
         myChart1.resize();
         myChart2.resize();
@@ -634,6 +699,7 @@ export default {
         myChart6.resize();
         myChart7.resize();
       })
+      })
     },
     reload(){
         this.myChart1.resize();

src/views/task/Monitjob.vue

@@ -0,0 +1,174 @@
+<style lang="scss">
+    
+</style>
+<template>
+    <section>
+        <p>任务管理  >  巡检记录</p>
+        <div class="filter">
+            <el-form   :inline="true" size="small" label-position="left">
+                <el-form-item>
+                        <el-input clearable placeholder="请输入风险点" v-model="form.riskpoint_item"></el-input>
+                </el-form-item>
+                <el-form-item>
+                       <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button>
+                       <!-- <el-button @click="dialogFormVisible=true,message={send_type:1}" type="primary">发送消息</el-button> -->
+                </el-form-item>
+            </el-form>
+        </div>
+
+
+        <el-table
+                class="table"
+                :data="list" height="64vh"
+                border  v-loading="loading"
+                style="width: 100%">
+              
+                <el-table-column
+                prop="sender_user_name" 
+                label="公司名称">
+                </el-table-column>
+                <el-table-column
+                prop="name" 
+                label="任务名称">
+                </el-table-column>
+                <el-table-column
+                prop="content" 
+                label="任务状态">
+                </el-table-column>
+                <el-table-column
+                prop="report_person_name" 
+                label="上报人">
+                </el-table-column>
+                <el-table-column
+                prop="ctime"  
+                label="上报时间">
+                <!-- <template>
+                    <el-tag type="success">启用</el-tag>
+                </template> -->
+                </el-table-column>
+                <el-table-column fixed="right"
+                prop="zip"  width="100"
+                label="操作">
+                <template slot-scope="scope">
+                    <el-button icon="el-icon-view" @click="open(scope.row)" size="mini"  type="success">查看</el-button>
+                    <!-- <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button> -->
+                </template>
+                </el-table-column>
+        </el-table>
+        <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
+
+        <el-dialog title="" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
+            <el-form  label-width="100px">
+                <el-form-item label="任务名称">
+                    {{message.name}}
+                </el-form-item>
+                <el-form-item label="任务状态">
+                    {{message.task_status}}
+                </el-form-item>
+                <el-form-item label="上报人">
+                    {{message.report_person_name}}                
+                </el-form-item>
+                <el-form-item label="上报时间">
+                    {{message.ctime}}
+                </el-form-item>
+                <el-form-item label="图片">
+                    <img style="margin:0 3px;" width="80px" height="80px" v-for="item in message.imgs" :key='item' :src="item" alt="">
+                </el-form-item>
+                <el-form-item label="视频">
+                    <video :poster="message.videos_faceimg" width="300px" height="150px" controls :src="message.videos"></video>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </section>
+</template>
+<script>
+import Page from '../../components/Page';
+export default {
+  components:{
+        Page
+  },
+  data(){
+    return{
+      dialogFormVisible:false,
+      form:{riskpoint_item:'',page:1,page_size:20,message_type:'notice'},
+      message:{send_type:1},
+      activeName:"1",
+      total:1,
+      list:[],
+      loading:false,
+      category:[],
+      area:[],
+      company:[]
+    }
+  },
+  methods:{
+        gopage(size){
+            if(size){
+                this.form.page_size=size
+            }
+            this.form.page=this.$refs.pageButton.page
+            this.getData()
+        },
+        getData(){
+            var parm=this.form;
+            this.loading=true
+            this.$api.getMonitjobList(parm).then(res=>{
+                this.list=res.data.data.list
+                this.total=res.data.data.total
+                this.loading=false
+                this.area=this.store.area;
+                this.category=this.store.categorys;
+            })
+            this.$api.getEnterpriseAll().then(res=>{
+                this.company=res.data.data;
+            })
+        },
+        del(id){
+                this.$confirm('确定删除吗', '提示', {
+                        type: 'warning'
+                    }).then(() => {
+                    this.$api.deleteMessages({id:id}).then((res)=>{
+                            this.$message({
+                                message: '删除成功',
+                                type: 'success'
+                            })
+                            this.getData()
+                    })
+                })
+        },
+        upload(type){
+            var file=document.getElementById(type).files;
+            var data=new FormData();
+                data.append("file",file[0])
+            this.$api.uploadFile(data).then(res=>{
+                if(res.data.code==0){
+                        let form=this.message;
+                        this.$set(form,type,res.data.data.url)
+                        this.$message({message: '上传成功！',type: 'success'});
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+            })
+        },
+        send(){
+            let parm=this.message;
+            this.$api.sendMessage(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.$message({message: '发送成功！',type: 'success'});
+                        this.getData();
+                        this.dialogFormVisible=false;
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+            })
+        },
+        open(data) {
+            this.dialogFormVisible=true;
+            this.message={...data}
+        }
+  },
+  created(){
+      this.getData()
+  }
+}
+</script>