update

src/components/Page.vue

@@ -17,7 +17,7 @@
     background :page-size='page_size?page_size:20'
     @size-change="handleSizeChange"
     :current-page="current"
-    :page-sizes="[1,20, 30, 40, 50,60,70,80,90,100]"
+    :page-sizes="[10,20, 30, 40, 50,60,70,80,90,100]"
     layout="sizes,total,prev, pager, next"
     :total="total">
     </el-pagination>

src/views/CompanyData.vue

@@ -40,14 +40,14 @@
         position: relative;
         span{
           position: absolute;
-          top: 20px;
+          top: 15px;
           width: 80%;
           text-align: center;
           left: 0;
           right: 0;
           margin: auto;
           font-size: 22px;
-          // line-height: 70px;
+          line-height: inherit;
           font-weight:300;
         }
       }

src/views/Data.vue

@@ -61,6 +61,7 @@
           vertical-align: top;
           .li{
             background: rgba(39, 51, 76, 0.64);
+            cursor: pointer;
             margin-bottom: 30px;
             padding: 20px;
             position: relative;
@@ -203,6 +204,7 @@
             cursor: pointer;
           }
         }
+        
         @keyframes move {
            0%{
               transform: translateY(0);
@@ -212,6 +214,21 @@
           }
         }
       }
+      .tc{
+          position: fixed;
+          width: calc(100vw - 290px);
+          top:100px;
+          left: 250px;
+          // right: 0;
+          // margin: auto;
+          padding: 10px;
+          background: rgba(39, 51, 76, 1);
+          z-index: 999;
+          text-align: right;
+          i{
+            cursor: pointer;
+          }
+      }
   }
 </style>
 <template>
@@ -263,10 +280,10 @@
                   <span class="span4" @click='goTo("/government")'>政府 {{data.goverment_count}} 个</span>
                 </p>
                 <h4>行业风险统计</h4>
-                <div id="chart4" style="width: 100%;height:330px;"></div>
+                <div id="chart4" @click="zindex1=999" style="width: 100%;height:330px;"></div>
                 <br><br>
                 <h4>行业隐患统计</h4>
-                <div id="chart5" style="width: 100%;height:320px;"></div>
+                <div id="chart5"  @click="zindex2=999" style="width: 100%;height:320px;"></div>
                 <img class="bottom" src="../images/bk.png" alt="">
             </div>
           </li>
@@ -314,6 +331,14 @@
             </div>
           </li>
         </ul>
+       <div class="tc" :style="'z-index:'+zindex1">
+         <i class="el-icon-close" @click="zindex1=-1"></i>
+          <div id="chart8" style="width: 100%;height:500px;"></div>
+       </div>
+       <div class="tc" :style="'z-index:'+zindex2">
+         <i class="el-icon-close" @click="zindex2=-1"></i>
+          <div id="chart9" style="width: 100%;height:500px;"></div>
+       </div>   
     </div>
   </section>
 </template>
@@ -322,6 +347,8 @@ import echarts from 'echarts';
 export default {
   data(){
     return{
+      zindex1:-1,
+      zindex2:-1,
       fullscreen:'',
       info:{},
       data:{},
@@ -339,7 +366,7 @@ export default {
           }
           this.count=count;
           //行业风险
-          let fx_data=[],fx_name=[];
+          let fx_data=[],fx_data_more=[],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)
           }
@@ -356,8 +383,21 @@ export default {
                 name:data.industry_fx_data[i].name
             })
           }
+          for(let i=0;i<data.industry_fx_data_more.length;i++){
+            let _data=data.industry_fx_data_more[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            fx_data_more.push({
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: array,
+                name:data.industry_fx_data_more[i].name
+            })
+          }
           //行业隐患
-          let yh_data=[],yh_name=[];
+          let yh_data=[],yh_data_more=[],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)
           }
@@ -374,6 +414,19 @@ export default {
                 name:data.industry_yh_data[i].name
             })
           }
+          for(let i=0;i<data.industry_yh_data_more.length;i++){
+            let _data=data.industry_yh_data_more[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            yh_data_more.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');
@@ -382,6 +435,8 @@ export default {
       var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
       var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
       var myChart7 = this.$echarts.init(document.getElementById('chart7'),'dark');
+      var myChart8 = this.$echarts.init(document.getElementById('chart8'),'dark');
+      var myChart9 = this.$echarts.init(document.getElementById('chart9'),'dark');
       this.myChart1=myChart1;
       this.myChart2=myChart2;
       this.myChart3=myChart3;
@@ -579,6 +634,92 @@ export default {
         },
 			  series: yh_data
       };
+      var option8 = {
+        backgroundColor:'rgba(39, 51, 76, 1)',
+        title: {
+				  text: ''
+        },
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+        color:color,
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            left: '1%',
+            right: '1%',
+            top: '10px',
+            bottom:'40px',
+            containLabel: true
+        },
+        xAxis: {
+				  data:fx_name
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: fx_data_more
+      };
+      var option9 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        title: {
+				  text: ''
+        },
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  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_more
+      };
       //企业风险
       let qy_fx_data=[],qy_fx_name=[];
       for(let j=0;j<data.enterprise_fx_data[1].data.length;j++){
@@ -706,6 +847,8 @@ export default {
       myChart5.setOption(option5);  
       myChart6.setOption(option6);  
       myChart7.setOption(option7);  
+      myChart8.setOption(option8);  
+      myChart9.setOption(option9);  
       window.addEventListener("resize", () => {
         myChart1.resize();
         myChart2.resize();

src/views/GovermentData.vue

@@ -1,5 +1,5 @@
 <style lang="scss">
-  .index{
+  .goverdata{
       .content{
         background: #151932;
         color:#fff;
@@ -40,15 +40,14 @@
         position: relative;
         span{
           position: absolute;
-          top: 20px;
-          width: 100%;
+          top: 15px;
+          width: 80%;
           text-align: center;
           left: 0;
-          left: 0;
           right: 0;
           margin: auto;
           font-size: 22px;
-          // line-height: 70px;
+          line-height: inherit;
           font-weight:300;
         }
       }
@@ -61,6 +60,7 @@
           vertical-align: top;
           .li{
             background: rgba(39, 51, 76, 0.64);
+            cursor: pointer;
             margin-bottom: 30px;
             padding: 20px;
             position: relative;
@@ -203,6 +203,7 @@
             cursor: pointer;
           }
         }
+        
         @keyframes move {
            0%{
               transform: translateY(0);
@@ -212,16 +213,31 @@
           }
         }
       }
+      .tc{
+          position: fixed;
+          width: calc(100vw - 290px);
+          top:100px;
+          left: 250px;
+          // right: 0;
+          // margin: auto;
+          padding: 10px;
+          background: rgba(39, 51, 76, 1);
+          z-index: 999;
+          text-align: right;
+          i{
+            cursor: pointer;
+          }
+      }
   }
 </style>
 <template>
-  <section class="index">
+  <section class="index goverdata">
     <div class="content" :id="fullscreen">
         <img @click="max" class="max" src="../images/max.png" alt="">
         <img @click="min" class="min" src="../images/min.png" alt="">
         <h1 class="title">
           <img height="90px" width="100%" src="../images/bg_1.jpg" alt="">
-          <span>{{info.name}} <br>可视化系统</span>
+          <span>{{info.name}}<br>可视化系统</span>
         </h1>
         <ul class="datas">
           <li style="width:30%;">
@@ -257,15 +273,15 @@
                 <p class="count">
                   
                   <span class="span1">行业 {{data.industry_count}} 个</span>
-                  <span class="span2" @click="goTo('/company')">企业 {{data.enterprise_count}} 个</span><br>
+                  <span class="span2" @click='goTo("/company")'>企业 {{data.enterprise_count}} 个</span><br>
                   <span class="span3" @click='goTo("/danger")'>风险点 {{data.riskpoint_count}} 个</span>
                   <span class="span4" @click='goTo("/dangertask")'>管控任务 {{data.monittask_count}} 个</span><br>
                 </p>
                 <h4>行业风险统计</h4>
-                <div id="chart4" style="width: 100%;height:340px;"></div>
-                <br><br><br>
+                <div id="chart4" @click="zindex1=999" style="width: 100%;height:330px;"></div>
+                <br><br>
                 <h4>行业隐患统计</h4>
-                <div id="chart5" style="width: 100%;height:340px;"></div>
+                <div id="chart5"  @click="zindex2=999" style="width: 100%;height:320px;"></div>
                 <img class="bottom" src="../images/bk.png" alt="">
             </div>
           </li>
@@ -277,7 +293,7 @@
                 <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
                 <div class="outer_div">
                   <div class="inner_div">
-                    <li @click='goTo("/warning")' v-for="(item,index) in data.enterprise_warning_top5" :key="index">
+                    <li @click="goTo('/warning')" 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>
@@ -313,6 +329,14 @@
             </div>
           </li>
         </ul>
+       <div class="tc" :style="'z-index:'+zindex1">
+         <i class="el-icon-close" @click="zindex1=-1"></i>
+          <div id="chart8" style="width: 100%;height:500px;"></div>
+       </div>
+       <div class="tc" :style="'z-index:'+zindex2">
+         <i class="el-icon-close" @click="zindex2=-1"></i>
+          <div id="chart9" style="width: 100%;height:500px;"></div>
+       </div>   
     </div>
   </section>
 </template>
@@ -321,6 +345,8 @@ import echarts from 'echarts';
 export default {
   data(){
     return{
+      zindex1:-1,
+      zindex2:-1,
       fullscreen:'',
       info:{},
       data:{},
@@ -338,7 +364,7 @@ export default {
           }
           this.count=count;
           //行业风险
-          let fx_data=[],fx_name=[];
+          let fx_data=[],fx_data_more=[],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)
           }
@@ -355,8 +381,21 @@ export default {
                 name:data.industry_fx_data[i].name
             })
           }
+          for(let i=0;i<data.industry_fx_data_more.length;i++){
+            let _data=data.industry_fx_data_more[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            fx_data_more.push({
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: array,
+                name:data.industry_fx_data_more[i].name
+            })
+          }
           //行业隐患
-          let yh_data=[],yh_name=[];
+          let yh_data=[],yh_data_more=[],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)
           }
@@ -373,6 +412,19 @@ export default {
                 name:data.industry_yh_data[i].name
             })
           }
+          for(let i=0;i<data.industry_yh_data_more.length;i++){
+            let _data=data.industry_yh_data_more[i].data,array=[];
+            for(let j=0;j<_data.length;j++){
+              array.push(_data[j].value)
+            }
+            yh_data_more.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');
@@ -381,6 +433,8 @@ export default {
       var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
       var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
       var myChart7 = this.$echarts.init(document.getElementById('chart7'),'dark');
+      var myChart8 = this.$echarts.init(document.getElementById('chart8'),'dark');
+      var myChart9 = this.$echarts.init(document.getElementById('chart9'),'dark');
       this.myChart1=myChart1;
       this.myChart2=myChart2;
       this.myChart3=myChart3;
@@ -578,6 +632,92 @@ export default {
         },
 			  series: yh_data
       };
+      var option8 = {
+        backgroundColor:'rgba(39, 51, 76, 1)',
+        title: {
+				  text: ''
+        },
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+        color:color,
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            left: '1%',
+            right: '1%',
+            top: '10px',
+            bottom:'40px',
+            containLabel: true
+        },
+        xAxis: {
+				  data:fx_name
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: fx_data_more
+      };
+      var option9 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        title: {
+				  text: ''
+        },
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  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_more
+      };
       //企业风险
       let qy_fx_data=[],qy_fx_name=[];
       for(let j=0;j<data.enterprise_fx_data[1].data.length;j++){
@@ -705,6 +845,8 @@ export default {
       myChart5.setOption(option5);  
       myChart6.setOption(option6);  
       myChart7.setOption(option7);  
+      myChart8.setOption(option8);  
+      myChart9.setOption(option9);  
       window.addEventListener("resize", () => {
         myChart1.resize();
         myChart2.resize();

src/views/company/Company.vue

@@ -75,7 +75,7 @@
                 label="操作">
                 <template slot-scope="scope">
                     <el-tooltip class="item" effect="dark" content="查看巡检记录" placement="top-start">
-                        <el-button icon="el-icon-document" size="mini" @click="$router.push({path:'/monitjob',query:{id:scope.row.id}})"  type="success"></el-button>
+                        <el-button icon="el-icon-document" size="mini" @click="prview(scope.row.id)"  type="success"></el-button>
                     </el-tooltip>
                     <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                         <el-button icon="el-icon-view" size="mini" @click="detail(scope.row.id)"  type="success"></el-button>
@@ -90,6 +90,55 @@
                 </el-table-column>
         </el-table>
         <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
+        <el-dialog title="巡检记录" :visible.sync="dialogFormVisible1" width="80%" :close-on-click-modal='false' :close-on-press-escape='false'>
+            <el-table
+                    class="table"
+                    :data="data" height="400px"
+                    border 
+                    style="width: 100%">
+                
+                    <el-table-column
+                    prop="enterprise_name" 
+                    label="公司名称">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name" 
+                    label="任务名称">
+                    </el-table-column>
+                    <el-table-column
+                    prop="content" 
+                    label="任务状态">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.task_status==-1">过期未巡检</span>
+                        <span v-if="scope.row.task_status==0">待巡检</span>
+                        <span v-if="scope.row.task_status==1">无异常</span>
+                        <span v-if="scope.row.task_status==2">待审核</span>
+                        <span v-if="scope.row.task_status==3">审核中</span>
+                        <span v-if="scope.row.task_status==4">整改中</span>
+                    </template>
+                    </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="pageButton1" :current='form1.page' :page_size='form1.page_size' :total='total1' @pageChange='gopage1'/>
+        </el-dialog>
     </section>
 </template>
 <script>
@@ -101,8 +150,12 @@ export default {
   data(){
     return{
       form:{name:'',page:1,page_size:20},
+      form1:{page:1,page_size:20},
       activeName:"1",
+      dialogFormVisible1:false,
       total:1,
+      total1:1,
+      data:[],
       list:[{name:'2333'}],
       loading:false,
       category:[],
@@ -112,14 +165,32 @@ export default {
   },
   methods:{
         gopage(size){
-            console.log(size)
             if(size){
                 this.form.page_size=size
             }
             this.form.page=this.$refs.pageButton.page
-            console.log(this.$refs.pageButton.page)
             this.getData()
         },
+        gopage1(size){
+            if(size){
+                this.form1.page_size=size
+            }
+            this.form1.page=this.$refs.pageButton1.page
+            this.getJl()
+        },
+        prview(id){
+            this.form1.enterprise_id=id;
+            this.getJl();
+            this.dialogFormVisible1=true
+        },
+        getJl(){
+            var parm=this.form1;
+            this.$api.getMonitjobList(parm).then(res=>{
+                this.data=res.data.data.list
+                this.total1=res.data.data.total
+                
+            })
+        },
         detail(id){
             this.$router.push({ path: '/company/detail', query: {  id: id,page:this.form.page,page_size:this.form.page_size  } });
         },