提交

package.json

@@ -44,7 +44,7 @@
     "clipboard": "2.0.8",
     "common": "file:D://FrontPackage/common",
     "core-js": "3.19.1",
-    "echarts": "4.9.0",
+    "echarts": "^4.9.0",
     "element-ui": "2.15.8",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/api/dangerManagement/yhtj.js

+import request from 'common/src/utils/request'
+
+/* query隐患统计 */
+export function queryYhhz(query) {
+return request({
+url: '/aqgl/yhgl/yhjl/yhhz',
+method: 'post',
+data: query||{}
+})
+}
+/* 更新 */
+
+
+
+

src/router/index.js

@@ -217,6 +217,19 @@ export const powerRoutes=[
        },
        name:'queryDangerRecords',
        path:"queryDangerRecords"
+      },
+      {
+       component:'dangerManagement/yhtj/index',
+       hidden:false,
+       meta:{
+           "title": "风险点隐患统计",
+           "icon": "",
+           "noCache": false,
+           "link": null,
+           "mkid":'test',
+       },
+       name:'yhtj',
+       path:"yhtj"
       }
     ]
   },

src/views/dangerManagement/yhtj/index.vue

+<template>
+	<div class="min_full">
+		<!-- 查询条件-->
+		<div class="search" v-condition>
+			<SearchButton :app='app'></SearchButton>
+			<el-row :gutter="20" class="search-row-1">
+				<el-col :span="6" class="search-col">
+				    <div class="search-item">
+				      <span class="search-span">开始日期:</span>
+				      <el-date-picker value-format="timestamp" v-model="queryParams.ksrq"></el-date-picker>
+				    </div>
+				   </el-col>
+				   <el-col :span="6" class="search-col">
+				    <div class="search-item">
+				      <span class="search-span">结束日期:</span>
+				      <el-date-picker value-format="timestamp" v-model="queryParams.jsrq"></el-date-picker>
+				    </div>
+				</el-col>
+				<el-col :span="6" class="search-col">
+				     <div class="search-item">
+				       <span class="search-span">单位:</span>
+				       <RelSelect style="width: 100%;"  src='kzzx/bm/query'  filterable clearable :match="{value:'id',label:'bmmc'}" v-model='queryParams.bmid' ></RelSelect>
+				     </div>
+				</el-col>
+			</el-row>
+		</div>
+		<!-- 按钮操作-->
+	<!-- 	<el-row class="tool-bar">
+			<ViewButton ref="view" :app='app'></ViewButton>
+			<AddButton ref="add" :app='app'></AddButton>
+			<CopyButton ref="copy" :app='app'></CopyButton>
+			<EditButton ref="edit" :app='app'></EditButton>
+		</el-row> -->
+		<!-- 表格-->
+		<div class="tablePagers">
+			<TablePager :delButton='false' @getData='getData' :ref="'TablePager'" :app='app' :query='query' @selectItem='selectItem'
+						@getRow='getRow'>
+			</TablePager>
+		</div>
+    <div class="chartsbody">
+      <div id="yhtjChart">
+
+      </div>
+    </div>
+	</div>
+</template>
+
+
+<script>
+
+	/* 引入需要的接口*/
+  import * as echarts from 'echarts';
+	import {
+		queryYhhz
+	} from  '@/api/dangerManagement/yhtj.js';
+	/* edit页面*/
+	// import Edit from './edit'
+	import {
+		tableMixin
+	} from 'common'
+	export default {
+		mixins: [tableMixin],
+		name: 'aqglYhbzfl',
+
+		/* 初始额外赋值*/
+		async mounted() {
+      /* 构建echarts*/
+      var yhtjChart = document.getElementById('yhtjChart');
+      var inityhtjChart = echarts.init(yhtjChart);
+      this.myChart=inityhtjChart
+
+		this.$refs['TablePager'].pageQuery()
+	},
+	data() {
+		return {
+      myChart:{},
+			/*需要的额外参数 */
+			showDialog: false,
+			DialogName: '',
+			type: '',
+			DialogTitle: '',
+			/* 基础url*/
+			baseUrl: '/aqgl/yhbzfl',
+			/* 查询参数*/
+			queryParams: {
+			ksrq: new Date().getTime()-1000*60*60*24*30,
+			jsrq: new Date().getTime(),
+      bmid:''
+			},
+			/* 表格标题对应参数*/
+			tableTitle: [
+				// {label: "序号", prop: "xh", fieldType: "int"},
+				// {label: "父ID", prop: "pid", fieldType: "ftString",width:192},
+				{label: "风险点", prop: "fxdName", fieldType: "ftString",width:600},
+				{label: "发现隐患数量", prop: "wclCount", fieldType: "ftString",width:300},
+				{label: "处理完毕数量", prop: "yclCount", fieldType: "ftString"},
+			]
+		}
+	},
+	methods: {
+    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.fxdName)
+        wclCountList.push(item.wclCount)
+        yclCountList.push(item.yclCount)
+      })
+
+      var option = {
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          // containLabel: true
+        },
+        xAxis: {
+           type: 'category',
+           data: fxdList
+         },
+         yAxis: {
+           type: 'value'
+         },
+          legend: {
+             data: ['隐患数量', '处理完毕数量']
+           },
+             tooltip: {
+               trigger: 'axis',
+               axisPointer: {
+                 type: 'shadow'
+               }
+             },
+         series: [
+           {
+             name: '隐患数量',
+             data: wclCountList,
+             type: 'bar',
+             barWidth: '20px',
+              itemStyle: {
+                         color: '#91cc75',
+                         shadowColor: '#91cc75',
+                         borderType: 'dashed',
+
+                       }
+
+           },
+           {
+            name: '处理完毕数量',
+             data: yclCountList,
+             type: 'bar',
+              itemStyle: {
+                         color: '#f00000',
+                         shadowColor: '#f00000',
+                         borderType: 'dashed',
+
+                       },
+                       barWidth: '20px',
+           }
+         ]
+      };
+      return option
+    },
+		/* 基础查询*/
+		query: queryYhhz,
+				/* 基础增*/
+				// apiAdd: doAdd,
+				// /* 基础更新*/
+				// apiUpdate: doUpdate,
+				// /* 删除操作*/
+				// apiDelete: doDelete,
+				/* 初始化赋值操作*/
+				init() {
+
+		}
+	},
+	components: {
+		// Edit,
+	}
+
+
+	}
+</script>
+
+<style scoped>
+  #yhtjChart{
+    height: 100%;
+    width: 100%;
+    border: 1px solid #eee;
+  }
+.chartsbody{
+  height: 250px;
+  padding: 5px;
+}
+</style>