调整

src/views/dangerManagement/yhznytj/index.vue

@@ -32,7 +32,12 @@
 				        </el-select>
 				    </div>
 				</el-col>
-
+        <el-col :span="6" class="search-col">
+          <div class="search-item">
+            <el-radio v-model="queryParams.hzfs" label="FL">按分类</el-radio>
+            <el-radio v-model="queryParams.hzfs" label="DJ">按等级</el-radio>
+          </div>
+        </el-col>
 			</el-row>
 		</div>
 		<!-- 按钮操作-->
@@ -43,6 +48,11 @@
 
 			</TablePager>
 		</div>
+    <div class="chartsbody">
+      <div id="yhtjChart" v-echartResize="resize" >
+
+      </div>
+    </div>
 	</div>
 </template>
 
@@ -60,6 +70,18 @@
 	export default {
     mixins: [tableMixin],
     name: 'appVersion',
+    async mounted() {
+      var yhtjChart = document.getElementById('yhtjChart');
+      var inityhtjChart = echarts.init(yhtjChart);
+      this.myChart=inityhtjChart
+      this.$refs['TablePager'].pageQuery()
+    },
+    computed: {
+      radio() {
+        let val = this.queryParams.hzfs
+        return val
+      }
+    },
 
     /* 初始额外赋值*/
     async mounted() {
@@ -68,14 +90,16 @@
     },
     data() {
       return {
-        yearsToNow:[],
+        myChart:{},
+        yearsToNow: [],
         /*需要的额外参数 */
         /* 基础url*/
         baseUrl: 'aqgl/yhgl/yhjl/yhtj',
         /* 查询参数*/
         queryParams: {
-            year:'',
-            month:''
+          hzfs: 'FL',
+          year: '',
+          month: ''
         },
         getYearsToNow() {
           // this.yearsToNow=[2020,2021,2022]
@@ -100,42 +124,53 @@
           {
             prop: 'year',
             label: '年份',
-            width:292
+            width: 200
           },
           {
             prop: 'month',
             label: '月份',
-            width:292
+            width: 200
+          },
+          {
+            prop: 'yhflName',
+            label: '分类名称',
+            width: 200
+          },
+          {
+            prop: 'yhdjName',
+            label: '隐患等级',
+            width: 200
           },
+
           {
             prop: 'allCount',
             label: '隐患数量',
-						width: 300
+            width: 150
           },
           {
             prop: 'wclCount',
             label: '未处理完毕数量',
-          	width: 300
+            width: 150
           },
           {
             prop: 'yclCount',
             label: '已处理完毕数量',
-            width: 300
+            width: 150
           },
           {
             prop: 'cqwclCount',
             label: '超期未处理数量',
-            width: 300
+            width: 150
           },
           {
             prop: 'cqyclCount',
             label: '超期已处理数量',
-            width: 300
+            width: 150
           },
           {
             prop: 'cqCount',
             label: '超期总数量',
-          	width: 300
+            width: 150
           },
           // {
           // 	prop: 'yqzgsj',
@@ -145,8 +180,116 @@
         ]
       }
     },
+    watch: {
+      radio(val) {
+        val == 'FL' && this.$refs['TablePager']['newGridList'].forEach(item => {
+          item.prop == 'yhdjName' && (item.show = false);
+          item.prop == 'yhflName' && (item.show = true)
+        })
+        val == 'DJ' && this.$refs['TablePager']['newGridList'].forEach(item => {
+          item.prop == 'yhdjName' && (item.show = true);
+          item.prop == 'yhflName' && (item.show = false)
+
+        })
+      },
+    },
     methods: {
+      resize(){
+        this.myChart.resize()
+      },
+      getData: function(e) {
+        this.tabData = e
+        this.myChart.setOption(this.setOption());
+      },
+      setOption(){
+        let fxdList=[]
+        let wclCountList=[]
+        let yclCountList=[]
+        this.tabData.forEach(item=>{
+          fxdList.push(item.yhflName)
+          wclCountList.push(item.wclCount+item.yclCount)
+          yclCountList.push(item.yclCount)
+        })
+
+        var option = {
+          dataZoom: [
+            {
+              show: true,
+              start: 0,
+              end: 10
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 10
+            },
+            {
+              show: false,
+              yAxisIndex: 0,
+              filterMode: 'empty',
+              width: 20,
+              height: '80%',
+              showDataShadow: false,
+              left: '93%'
+            }
+          ],
+          grid: {
+            top:'10%',
+            left: '6%',
+            right: '3%',
+            bottom: '25%',
+            // containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: fxdList,
+            axisLabel: {
+              interval:0,//代表显示所有x轴标签显示
+              rotate:15, //代表逆时针旋转45度
+            }
+          },
+          yAxis: {
+            type: 'value'
+          },
+          legend: {
+            data: ['隐患数量', '处理完毕数量']
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          series: [
+            {
+              name: '隐患数量',
+              data: wclCountList,
+              type: 'bar',
+              barMaxWidth: '20px',
+              itemStyle: {
+                color: '#f00000',
+                shadowColor: '#f00000',
+                borderType: 'dashed',
+
+              }
+
+            },
+            {
+              name: '处理完毕数量',
+              data: yclCountList,
+              type: 'bar',
+              itemStyle: {
+                color: '#91cc75',
+                shadowColor: '#91cc75',
+                borderType: 'dashed',
 
+              },
+              barMaxWidth: '20px',
+            }
+          ]
+        };
+        return option
+      },
       /* 基础查询*/
       query: queryYhhz,
       /* 初始化赋值操作*/
@@ -155,16 +298,21 @@
       },
 
 
-
     },
     components: {
       Edit,
     }
-
-
   }
 </script>
 
 <style scoped>
-
+  #yhtjChart{
+    height: 100%;
+    width: 100%;
+    border: 1px solid #eee;
+  }
+  .chartsbody{
+    height: 330px;
+    padding: 5px;
+  }
 </style>