浏览代码

数字消防人员考勤分析

wangzhe 2 年之前
父节点
当前提交
85e720e51e
共有 3 个文件被更改,包括 110 次插入0 次删除
  1. 10 0
      src/api/bigdata.js
  2. 11 0
      src/views/bigdata/bigdata.vue
  3. 89 0
      src/views/bigdata/chart-kaoqin.vue

+ 10 - 0
src/api/bigdata.js

@@ -197,3 +197,13 @@ export function getG3() {
     method: 'post',
   })
 }
+
+//考勤
+export function bigFindAttend() {
+  return request({
+    url: '/system/sysAttendance/bigFindAttend',
+    method: 'get',
+    data: {}
+  })
+}
+

+ 11 - 0
src/views/bigdata/bigdata.vue

@@ -150,6 +150,15 @@
           <chartPitG3></chartPitG3>
         </div>
       </div>
+      <!-- 第八纵向-->
+      <div class="bigdata-list wid-li-1 m-l-15">
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>考勤统计</span>
+          </div>
+          <chartPitKaoqin></chartPitKaoqin>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -176,6 +185,7 @@ import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设
 import chartPitG1 from './chart-pit' //17 闸口资源统计、、
 import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
 import chartPitG3 from './chart-hydrant' //19 河段资源统计、、
+import chartPitKaoqin from './chart-kaoqin' //19 河段资源统计、、
 
 import { getRlt } from '@/api/bigdata'
 import {
@@ -203,6 +213,7 @@ export default {
     chartPitG1,
     chartPitG2,
     chartPitG3,
+    chartPitKaoqin
   },
   data() {
     return {

+ 89 - 0
src/views/bigdata/chart-kaoqin.vue

@@ -0,0 +1,89 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="pitKaoqin" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {bigFindAttend} from '@/api/bigdata'
+	export default {
+		name: 'pitKaoqin',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+			this.bigFindAttend()
+
+		},
+
+		methods: {
+      bigFindAttend() {
+        bigFindAttend().then(res => {
+          this.myEcharts(res.data)
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+
+			myEcharts(data) {
+
+
+				var chartDom = document.getElementById('pitKaoqin');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+				var option;
+				option = {
+
+				    color:color,
+				    tooltip : {
+				        trigger: 'item',
+				        formatter: "{b}: {c}"
+				    },
+				    toolbox: {
+				        show : true,
+
+				    },
+
+				    series : [
+				        {
+				            name:'考勤分析',
+				            type:'pie',
+				            roseType: true,
+				            radius : ['50%', '70%'],
+				            label: {
+				              show: true,
+				              formatter: "{b} {c}",
+							  textStyle: {
+							      fontSize: 10 ,
+
+							  }
+
+				            },
+				            data:data
+				        }
+				    ]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>