九小

src/api/backend/smallNine.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+function getAllPeople(data){//监督员质态统计
+    return request({
+        url:`/backend/watcher/page`,
+        method:"get",
+        params:data
+    })
+}
+export default{
+    getAllPeople,
+}

src/main.js

@@ -24,7 +24,8 @@ import RightToolbar from "@/components/RightToolbar"
 // import hljs from 'highlight.js'
 // import 'highlight.js/styles/github-gist.css'
 import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
-
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/views/backend/stacisticsNine/StatisticsNine.vue

@@ -0,0 +1,331 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <div class="threeBox">
+                <div class="allBag" ref="nine" id="nine">
+
+                </div>
+                <div class="allBag" id="myself">
+
+                </div>
+                <div class="allBag" id="bigTeam">
+
+                </div>
+            </div>
+            <div class="twoBox">
+                <div class="lastBag" id="people">
+
+                </div>
+                <div class="lastBag" id="unity">
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import smallNine from '../../../api/backend/smallNine';
+export default {
+    data: {
+        nine: null,
+        peopleList: [],//监督员
+        peopleNum: [],//质态
+        peopleDash:[]
+    },
+    created() {
+        this.initList()
+    },
+    mounted() {
+
+    },
+    methods: {
+        lineSmall() {//九小单位数量
+            let nine = this.$echarts.init(document.getElementById('nine'))
+            nine.setOption({
+                title: {
+                    text: '九小单位数量',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 1200,
+                },
+                series: [
+                    {
+                        data: [
+                            {
+                                value: 120,
+                            },
+                            {
+                                value: 200,
+                            },
+                            {
+                                value: 120,
+                            },
+                            {
+                                value: 120,
+                            },
+                            {
+                                value: 120,
+                            },
+                            {
+                                value: 120,
+                            },
+                            {
+                                value: 120,
+                            },
+                        ],
+                        type: 'bar',
+                        barWidth: 30
+                    }
+                ],
+                color: "#0147EB"
+            })
+        },
+        myBit() {//自查数量
+            let myself = this.$echarts.init(document.getElementById('myself'))
+            myself.setOption({
+                title: {
+                    text: '自查数量',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 120,
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                series: [
+                    {
+                        data: [82, 93, 90, 93, 32, 13, 32],
+                        type: 'line',
+                        areaStyle: {},
+                        barWidth: 30,
+                        markPoint: {
+                            data: [
+                                { type: 'max', name: 'Max' },
+                                { type: 'min', name: 'Min' },
+                            ]
+                        },
+                    }
+                ],
+                color: '#0147EB'
+            })
+        },
+        bitTeam() {//各大队检查数及活跃度
+            let bigTeam = this.$echarts.init(document.getElementById("bigTeam"))
+            bigTeam.setOption({
+                title: {
+                    text: '各大队检查活跃度',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                textStyle: {
+                    fontSize: 12
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    min: 0,
+                    max: 1200,
+                },
+                series: [
+                    {
+                        name: '活跃度',
+                        type: 'bar',
+                        data: [200, 480, 900, 490, 740, 300],
+                        color: '#0147EB',
+                        // barWidth: 30
+                    },
+                    {
+                        name: '检查总数',
+                        type: 'bar',
+                        data: [19, 43, 31, 11, 41, 67],
+                        color: "#01BCEB",
+                        // barWidth: 30
+                    },
+                ]
+            })
+        },
+        casePeople() {//监察员事态统计
+            let people = this.$echarts.init(document.getElementById('people'))
+            people.setOption({
+                title: {
+                    text: '监督员质态统计',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        var tar = params[0];
+                        return '监督人:' + tar.name + '<br/>' + '质态' + ' : ' + tar.value;
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.peopleList
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 50,
+                },
+                series: [
+                    {
+                        data: this.peopleNum,
+                        type: 'bar',
+                        barWidth: 30
+                    }
+                ],
+                color: "#0147EB"
+            })
+        },
+        caseUnity() {//负责单位数量
+            let unity = this.$echarts.init(document.getElementById('unity'))
+            unity.setOption({
+                title: {
+                    text: '负责单位数量',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        var tar = params[0];
+                        return '监督人:' + tar.name + '<br/>' + '单位数' + ' : ' + tar.value;
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.peopleList
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 50,
+                },
+                series: [
+                    {
+                        data: this.peopleDash,
+                        type: 'bar',
+                        barWidth: 30
+                    }
+                ],
+                color: "#01BCEB"
+            })
+        },
+        initList() {
+            this.$message({
+                message: "加载数据中",
+                type: "info",
+                duration: 50000
+            })
+            smallNine.getAllPeople({}).then(res => {
+                this.peopleList = res.data.list.map(item => {
+                    return item.watcher
+                })
+                this.peopleNum = res.data.list.map(item => {
+                    return item.quality
+                })
+                this.peopleDash = res.data.list.map(item=>{
+                    return item.servorg
+                })
+                if (this.peopleList.length > 0 && this.peopleNum.length > 0) {
+                    // this.$nextTick(() => {
+                    this.$message.closeAll()
+                    this.lineSmall();
+                    this.myBit()
+                    this.bitTeam()
+                    this.casePeople()
+                    this.caseUnity()
+                    // });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+.bigBox {
+    width: 100%;
+    height: calc(100vh - 180px);
+    /* border: 1px solid black; */
+}
+
+.threeBox {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding-top: 10px;
+}
+
+.allBag {
+    width: 33%;
+    height: calc(100vh - 500px);
+    /* border: 1px dashed #01BCEB; */
+    background-color: white;
+}
+
+.twoBox {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 5px;
+}
+
+.lastBag {
+    width: 49.5%;
+    height: calc(100vh - 450px);
+    /* border: 1px solid red; */
+    background-color: white;
+}
+</style>

src/views/backend/statistics/index.vue

@@ -10,15 +10,19 @@
     <div v-if="open == 1 || open == 0" style="width: 100%">
       <statisticsFire></statisticsFire>
     </div>
-    <div v-if="open == 2" >2</div>
+    <div v-if="open == 2" style="background-color: #F3F5F9;">
+      <StatisticsNine></StatisticsNine>
+    </div>
   </div>
 </template>
 <script>
 import { getDdlist } from "@/api/backend/statistics";
 import statisticsFire from "@/views/backend/statisticsFire/index";
+import StatisticsNine from "../stacisticsNine/StatisticsNine.vue";
 export default {
   components: {
-    statisticsFire
+    statisticsFire,
+    StatisticsNine,
   },
   data() {
     return {