调整

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>
 
@@ -58,113 +68,251 @@
 		tableMixin
 	} from 'common'
 	export default {
-		mixins: [tableMixin],
-		name: 'appVersion',
+    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() {
+    /* 初始额外赋值*/
+    async mounted() {
       this.getYearsToNow()
-			this.$refs['TablePager'].pageQuery()
-		},
-		data() {
-			return {
-        yearsToNow:[],
-				/*需要的额外参数 */
-				/* 基础url*/
-				baseUrl: 'aqgl/yhgl/yhjl/yhtj',
-				/* 查询参数*/
-				queryParams: {
-            year:'',
-            month:''
-				},
+      this.$refs['TablePager'].pageQuery()
+    },
+    data() {
+      return {
+        myChart:{},
+        yearsToNow: [],
+        /*需要的额外参数 */
+        /* 基础url*/
+        baseUrl: 'aqgl/yhgl/yhjl/yhtj',
+        /* 查询参数*/
+        queryParams: {
+          hzfs: 'FL',
+          year: '',
+          month: ''
+        },
         getYearsToNow() {
-              // this.yearsToNow=[2020,2021,2022]
-              //获取到从那一年开始
-              let smallYears = 2000
-              //获取当前时间
-              let date = new Date
-              let nowYears = date.getFullYear()
-              let Years = nowYears - smallYears
-              let arrYear = []
-              for (let i = 0; i <= Years; i++) {
-                arrYear.push(nowYears--)
-              }
-              this.yearsToNow.push('')
-              arrYear.forEach(item => {
-                //下拉框的数组
-                this.yearsToNow.push(item)
-              })
-            },
-				/* 表格标题对应参数*/
-				tableTitle: [
+          // this.yearsToNow=[2020,2021,2022]
+          //获取到从那一年开始
+          let smallYears = 2000
+          //获取当前时间
+          let date = new Date
+          let nowYears = date.getFullYear()
+          let Years = nowYears - smallYears
+          let arrYear = []
+          for (let i = 0; i <= Years; i++) {
+            arrYear.push(nowYears--)
+          }
+          this.yearsToNow.push('')
+          arrYear.forEach(item => {
+            //下拉框的数组
+            this.yearsToNow.push(item)
+          })
+        },
+        /* 表格标题对应参数*/
+        tableTitle: [
           {
-						prop: 'year',
-						label: '年份',
-            width:292
-					},
-					{
-						prop: 'month',
-						label: '月份',
-            width:292
-					},
-					{
-						prop: 'allCount',
-						label: '隐患数量',
-						width: 300
-					},
+            prop: 'year',
+            label: '年份',
+            width: 200
+          },
+          {
+            prop: 'month',
+            label: '月份',
+            width: 200
+          },
           {
-          	prop: 'wclCount',
-          	label: '未处理完毕数量',
-          	width: 300
+            prop: 'yhflName',
+            label: '分类名称',
+            width: 200
+          },
+          {
+            prop: 'yhdjName',
+            label: '隐患等级',
+            width: 200
+          },
+
+          {
+            prop: 'allCount',
+            label: '隐患数量',
+            width: 150
+          },
+          {
+            prop: 'wclCount',
+            label: '未处理完毕数量',
+            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
+            prop: 'cqCount',
+            label: '超期总数量',
+            width: 150
           },
           // {
           // 	prop: 'yqzgsj',
           // 	label: '统计日期',
           // 	width:300
           // }
-				]
-			}
-		},
-		methods: {
+        ]
+      }
+    },
+    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)
+        })
 
-			/* 基础查询*/
-			query: queryYhhz,
-			/* 初始化赋值操作*/
-			init() {
+        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,
+      /* 初始化赋值操作*/
+      init() {
 
-		},
-		components: {
-			Edit,
-		}
+      },
 
 
-	}
+    },
+    components: {
+      Edit,
+    }
+  }
 </script>
 
 <style scoped>
-
+  #yhtjChart{
+    height: 100%;
+    width: 100%;
+    border: 1px solid #eee;
+  }
+  .chartsbody{
+    height: 330px;
+    padding: 5px;
+  }
 </style>