BI update

TEAMModeBI/ClientApp/src/api/index.js

@@ -95,5 +95,23 @@ export default {
     //对学校编辑提交更改
     updateSchoolinfo(data) {
         return post('/batchschool/upd-schoolassist', data)
+    },
+
+    //首页dashboard数据接口
+    //获取各城市的学校数量（bar）
+    getEachSchool(data) {
+        return post('/homestatis/get-cityschool', data)
+    },
+    //根据城市code获取 下面的学生、老师、学校数量
+    getSchoolDetails(data) {
+        return post('/homestatis/get-districtstics', data)
+    },
+    //获取全部教师数量、学生数量、创校数量、空间大小 总和
+    geteachTotal(data) {
+        return post('/homestatis/get-allnumber', data)
+    },
+    //地图 获取各个省的数据统计
+    getEachProvince(data) {
+        return post('/homestatis/get-provincestics', data)
     }
 }

TEAMModeBI/ClientApp/src/components/echarts/baseBar.vue

@@ -1,8 +1,9 @@
 <template>
-    <div ref="myEcharts" :style="{ height, width }"></div>
+    <div ref="myEcharts" :style="{ height, width}"></div>
 </template>
 <script>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
+import { ElLoading } from 'element-plus'
 import * as echarts from 'echarts'
 export default {
     name: 'baseBar',
@@ -25,12 +26,22 @@ export default {
         },
     },
     setup(props) {
-        console.log(props)
+        console.log(props.mapData.data, '数据常规')
+        let { proxy } = getCurrentInstance()
         const myEcharts = ref(null)
         const chart = new InitChart(props, myEcharts)
         onMounted(() => {
-            chart.init()
+            chart.init(props.mapData)
         })
+        watch(
+            props,
+            (nweProps) => {
+                nextTick(() => {
+                    chart.init(props.mapData)
+                })
+            },
+            { immediate: true, deep: true }
+        )
         return {
             myEcharts,
         }
@@ -45,10 +56,9 @@ class InitChart {
         }
     }
 
-    init() {
+    init(datas) {
         this.state.chart && this.destory()
         this.state.chart = echarts.init(this.myEcharts.value)
-
         this.state.chart.setOption({
             color: ['#2f89cf'],
             tooltip: {
@@ -62,66 +72,17 @@ class InitChart {
                 left: '0%',
                 top: '5%',
                 right: '0%',
-                bottom: '4%',
+                bottom: '0%',
                 containLabel: true,
             },
-            xAxis: [
-                {
-                    type: 'value',
-                    axisLabel: {
-                        textStyle: {
-                            color: 'rgba(255,255,255,.6)',
-                            fontSize: '12',
-                        },
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.1)',
-                            // width: 1,
-                            // type: "solid"
-                        },
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,.1)',
-                        },
-                    },
-                },
-            ],
-            yAxis: [
-                {
-                    type: 'category',
-                    data: ['旅游行业', '教育培训', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
-                    // axisTick: {
-                    //     alignWithLabel: true,
-                    // },
-                    axisLabel: {
-                        textStyle: {
-                            color: 'rgba(255,255,255,.6)',
-                            fontSize: '10',
-                        },
-                    },
-                    axisLine: {
-                        show: false,
-                    },
-                },
-            ],
-            series: [
-                {
-                    type: 'bar',
-                    barWidth: '25%',
-                    data: [200, 300, 300, 900, 1500, 1200, 600],
-                    itemStyle: {
-                        barBorderRadius: 5,
-                    },
-                },
-            ],
+            xAxis: [datas.xAxis],
+            yAxis: [datas.yAxis],
+            series: datas.data,
         })
         window.addEventListener('resize', () => {
             this.state.chart.resize()
         })
     }
-
     destory() {
         this.state.chart.dispose()
         window.removeEventListener('resize', () => {

TEAMModeBI/ClientApp/src/components/echarts/baseBarAcross.vue

@@ -0,0 +1,92 @@
+<template>
+    <div ref="myEcharts" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, onMounted, watch, nextTick } from 'vue'
+import * as echarts from 'echarts'
+export default {
+    name: 'baseBar',
+    props: {
+        width: {
+            type: String,
+            default: '100%',
+        },
+        height: {
+            type: String,
+            default: '100%',
+        },
+        mapData: {
+            type: Array,
+            default: () => [],
+        },
+        title: {
+            type: String,
+            default: '',
+        },
+    },
+    setup(props) {
+        console.log(props.mapData.data, '数据')
+        const myEcharts = ref(null)
+        const chart = new InitChart(props, myEcharts)
+        onMounted(() => {
+            chart.init(props.mapData)
+        })
+        watch(
+            props,
+            (nweProps) => {
+                nextTick(() => {
+                    chart.init(props.mapData)
+                })
+            },
+            { immediate: true, deep: true }
+        )
+        return {
+            myEcharts,
+        }
+    },
+}
+class InitChart {
+    constructor(props, myEcharts) {
+        this.props = props
+        this.myEcharts = myEcharts
+        this.state = {
+            chart: null,
+        }
+    }
+
+    init(datas) {
+        this.state.chart && this.destory()
+        this.state.chart = echarts.init(this.myEcharts.value)
+        this.state.chart.setOption({
+            color: ['#2f89cf'],
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    // 坐标轴指示器，坐标轴触发有效
+                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+                },
+            },
+            grid: {
+                left: '0%',
+                top: '5%',
+                right: '2%',
+                bottom: '1%',
+                containLabel: true,
+            },
+            xAxis: [datas.xAxis],
+            yAxis: [datas.yAxis],
+            series: [datas.data],
+        })
+        window.addEventListener('resize', () => {
+            this.state.chart.resize()
+        })
+    }
+    destory() {
+        this.state.chart.dispose()
+        window.removeEventListener('resize', () => {
+            console.log('事件移除')
+        })
+    }
+}
+</script>
+<style lang="less"></style>

TEAMModeBI/ClientApp/src/components/echarts/basicPie.vue

@@ -1,114 +1,106 @@
 <!--基础折线图-->
 <template>
-  <div ref="myEcharts" :style="{ height, width }"></div>
+    <div ref="myEcharts" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, onMounted } from "vue";
-import * as echarts from "echarts";
+import { ref, onMounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts'
 export default {
-  name: "baseBar",
-  props: {
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
-    mapData: {
-      type: Array,
-      default: () => [],
+    name: 'baseBar',
+    props: {
+        width: {
+            type: String,
+            default: '100%',
+        },
+        height: {
+            type: String,
+            default: '100%',
+        },
+        mapData: {
+            type: Array,
+            default: () => [],
+        },
+        title: {
+            type: String,
+            default: '',
+        },
     },
-    title: {
-      type: String,
-      default: "",
+    setup(props) {
+        console.log(props.mapData, '传进来的值')
+        const myEcharts = ref(null)
+        const chart = new InitChart(props, myEcharts)
+        onMounted(() => {
+            chart.init(props.mapData)
+        })
+        watch(
+            props,
+            (nweProps) => {
+                nextTick(() => {
+                    chart.init(props.mapData)
+                })
+            },
+            { immediate: true, deep: true }
+        )
+        return {
+            myEcharts,
+        }
     },
-  },
-  setup(props) {
-    console.log(props);
-    const myEcharts = ref(null);
-    const chart = new InitChart(props, myEcharts);
-    onMounted(() => {
-      chart.init();
-    });
-    return {
-      myEcharts,
-    };
-  },
-};
+}
 class InitChart {
-  constructor(props, myEcharts) {
-    this.props = props;
-    this.myEcharts = myEcharts;
-    this.state = {
-      chart: null,
-    };
-  }
-
-  init() {
-    this.state.chart && this.destory();
-    this.state.chart = echarts.init(this.myEcharts.value);
+    constructor(props, myEcharts) {
+        this.props = props
+        this.myEcharts = myEcharts
+        this.state = {
+            chart: null,
+        }
+    }
+    init(datas) {
+        this.state.chart && this.destory()
+        this.state.chart = echarts.init(this.myEcharts.value)
 
-    this.state.chart.setOption({
-      tooltip: {
-        trigger: "item",
-        formatter: "{a} <br/>{b}: {c} ({d}%)",
-        position: function (p) {
-          //其中p为当前鼠标的位置
-          return [p[0] + 10, p[1] - 10];
-        },
-      },
-      legend: {
-        top: "90%",
-        itemWidth: 10,
-        itemHeight: 10,
-        data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
-        textStyle: {
-          color: "rgba(255,255,255,.5)",
-          fontSize: "12",
-        },
-      },
-      series: [
-        {
-          name: "年龄分布",
-          type: "pie",
-          center: ["50%", "42%"],
-          radius: ["40%", "60%"],
-          color: [
-            "#065aab",
-            "#066eab",
-            "#0682ab",
-            "#0696ab",
-            "#06a0ab",
-            "#06b4ab",
-            "#06c8ab",
-            "#06dcab",
-            "#06f0ab",
-          ],
-          label: { show: false },
-          labelLine: { show: false },
-          data: [
-            { value: 1, name: "0岁以下" },
-            { value: 4, name: "20-29岁" },
-            { value: 2, name: "30-39岁" },
-            { value: 2, name: "40-49岁" },
-            { value: 1, name: "50岁以上" },
-          ],
-        },
-      ],
-    });
-    window.addEventListener("resize", () => {
-      this.state.chart.resize();
-    });
-  }
+        this.state.chart.setOption({
+            tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
+                position: function (p) {
+                    //其中p为当前鼠标的位置
+                    return [p[0] + 10, p[1] - 10]
+                },
+            },
+            legend: {
+                top: '75%',
+                itemWidth: 10,
+                itemHeight: 10,
+                data: datas.legendData,
+                textStyle: {
+                    color: 'rgba(255,255,255,.5)',
+                    fontSize: '12',
+                },
+            },
+            series: [
+                {
+                    name: '各城市学校数量占比：',
+                    type: 'pie',
+                    center: ['50%', '42%'],
+                    radius: ['40%', '60%'],
+                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+                    label: { show: false },
+                    labelLine: { show: false },
+                    data: datas.data,
+                },
+            ],
+        })
+        window.addEventListener('resize', () => {
+            this.state.chart.resize()
+        })
+    }
 
-  destory() {
-    this.state.chart.dispose();
-    window.removeEventListener("resize", () => {
-      console.log("事件移除");
-    });
-  }
+    destory() {
+        this.state.chart.dispose()
+        window.removeEventListener('resize', () => {
+            console.log('事件移除')
+        })
+    }
 }
 </script>
 <style lang="less"></style>

TEAMModeBI/ClientApp/src/components/echarts/chinaMap.vue

@@ -2,7 +2,7 @@
     <div ref="myEcharts" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 export default {
@@ -26,11 +26,21 @@ export default {
         },
     },
     setup(props) {
+        console.log(props.mapData, '子页面接受到的数据')
         const myEcharts = ref(null)
         const chart = new InitChart(props, myEcharts)
         onMounted(() => {
-            chart.init()
+            chart.init(props.mapData)
         })
+        watch(
+            props,
+            (nweProps) => {
+                nextTick(() => {
+                    chart.init(props.mapData)
+                })
+            },
+            { immediate: true, deep: true }
+        )
         return {
             myEcharts,
         }
@@ -45,306 +55,157 @@ class InitChart {
         }
     }
 
-    init() {
+    init(datas) {
         this.state.chart && this.destory()
         this.state.chart = echarts.init(this.myEcharts.value)
-
-        var geoCoordMap = {
-            上海: [121.4648, 31.2891],
-            东莞: [113.8953, 22.901],
-            东营: [118.7073, 37.5513],
-            中山: [113.4229, 22.478],
-            临汾: [111.4783, 36.1615],
-            临沂: [118.3118, 35.2936],
-            丹东: [124.541, 40.4242],
-            丽水: [119.5642, 28.1854],
-            乌鲁木齐: [87.9236, 43.5883],
-            佛山: [112.8955, 23.1097],
-            保定: [115.0488, 39.0948],
-            兰州: [103.5901, 36.3043],
-            包头: [110.3467, 41.4899],
-            北京: [116.4551, 40.2539],
-            北海: [109.314, 21.6211],
-            南京: [118.8062, 31.9208],
-            南宁: [108.479, 23.1152],
-            南昌: [116.0046, 28.6633],
-            南通: [121.1023, 32.1625],
-            厦门: [118.1689, 24.6478],
-            台州: [121.1353, 28.6688],
-            合肥: [117.29, 32.0581],
-            呼和浩特: [111.4124, 40.4901],
-            咸阳: [108.4131, 34.8706],
-            哈尔滨: [127.9688, 45.368],
-            唐山: [118.4766, 39.6826],
-            嘉兴: [120.9155, 30.6354],
-            大同: [113.7854, 39.8035],
-            大连: [122.2229, 39.4409],
-            天津: [117.4219, 39.4189],
-            太原: [112.3352, 37.9413],
-            威海: [121.9482, 37.1393],
-            宁波: [121.5967, 29.6466],
-            宝鸡: [107.1826, 34.3433],
-            宿迁: [118.5535, 33.7775],
-            常州: [119.4543, 31.5582],
-            广州: [113.5107, 23.2196],
-            廊坊: [116.521, 39.0509],
-            延安: [109.1052, 36.4252],
-            张家口: [115.1477, 40.8527],
-            徐州: [117.5208, 34.3268],
-            德州: [116.6858, 37.2107],
-            惠州: [114.6204, 23.1647],
-            成都: [103.9526, 30.7617],
-            扬州: [119.4653, 32.8162],
-            承德: [117.5757, 41.4075],
-            拉萨: [91.1865, 30.1465],
-            无锡: [120.3442, 31.5527],
-            日照: [119.2786, 35.5023],
-            昆明: [102.9199, 25.4663],
-            杭州: [119.5313, 29.8773],
-            枣庄: [117.323, 34.8926],
-            柳州: [109.3799, 24.9774],
-            株洲: [113.5327, 27.0319],
-            武汉: [114.3896, 30.6628],
-            汕头: [117.1692, 23.3405],
-            江门: [112.6318, 22.1484],
-            沈阳: [123.1238, 42.1216],
-            沧州: [116.8286, 38.2104],
-            河源: [114.917, 23.9722],
-            泉州: [118.3228, 25.1147],
-            泰安: [117.0264, 36.0516],
-            泰州: [120.0586, 32.5525],
-            济南: [117.1582, 36.8701],
-            济宁: [116.8286, 35.3375],
-            海口: [110.3893, 19.8516],
-            淄博: [118.0371, 36.6064],
-            淮安: [118.927, 33.4039],
-            深圳: [114.5435, 22.5439],
-            清远: [112.9175, 24.3292],
-            温州: [120.498, 27.8119],
-            渭南: [109.7864, 35.0299],
-            湖州: [119.8608, 30.7782],
-            湘潭: [112.5439, 27.7075],
-            滨州: [117.8174, 37.4963],
-            潍坊: [119.0918, 36.524],
-            烟台: [120.7397, 37.5128],
-            玉溪: [101.9312, 23.8898],
-            珠海: [113.7305, 22.1155],
-            盐城: [120.2234, 33.5577],
-            盘锦: [121.9482, 41.0449],
-            石家庄: [114.4995, 38.1006],
-            福州: [119.4543, 25.9222],
-            秦皇岛: [119.2126, 40.0232],
-            绍兴: [120.564, 29.7565],
-            聊城: [115.9167, 36.4032],
-            肇庆: [112.1265, 23.5822],
-            舟山: [122.2559, 30.2234],
-            苏州: [120.6519, 31.3989],
-            莱芜: [117.6526, 36.2714],
-            菏泽: [115.6201, 35.2057],
-            营口: [122.4316, 40.4297],
-            葫芦岛: [120.1575, 40.578],
-            衡水: [115.8838, 37.7161],
-            衢州: [118.6853, 28.8666],
-            西宁: [101.4038, 36.8207],
-            西安: [109.1162, 34.2004],
-            贵阳: [106.6992, 26.7682],
-            连云港: [119.1248, 34.552],
-            邢台: [114.8071, 37.2821],
-            邯郸: [114.4775, 36.535],
-            郑州: [113.4668, 34.6234],
-            鄂尔多斯: [108.9734, 39.2487],
-            重庆: [107.7539, 30.1904],
-            金华: [120.0037, 29.1028],
-            铜川: [109.0393, 35.1947],
-            银川: [106.3586, 38.1775],
-            镇江: [119.4763, 31.9702],
-            长春: [125.8154, 44.2584],
-            长沙: [113.0823, 28.2568],
-            长治: [112.8625, 36.4746],
-            阳泉: [113.4778, 38.0951],
-            青岛: [120.4651, 36.3373],
-            韶关: [113.7964, 24.7028],
+        var geoCoordMapData = {
+            北京: [116.405285, 39.904989],
+            天津: [117.190182, 39.125596],
+            河北省: [114.502461, 38.045474],
+            山西省: [112.549248, 37.857014],
+            内蒙古自治区: [111.670801, 40.818311],
+            辽宁省: [123.429096, 41.796767],
+            吉林省: [125.3245, 43.886841],
+            黑龙江省: [126.642464, 45.756967],
+            上海: [121.472644, 31.231706],
+            江苏省: [118.767413, 32.041544],
+            浙江省: [120.153576, 30.287459],
+            安徽省: [117.283042, 31.86119],
+            福建省: [119.306239, 26.075302],
+            江西省: [115.892151, 28.676493],
+            山东省: [117.000923, 36.675807],
+            河南省: [113.665412, 34.757975],
+            湖北省: [114.298572, 30.584355],
+            湖南省: [112.982279, 28.19409],
+            广东省: [113.280637, 23.125178],
+            广西壮族自治区: [108.320004, 22.82402],
+            海南省: [110.33119, 20.031971],
+            重庆: [106.504962, 29.533155],
+            四川省: [104.065735, 30.659462],
+            贵州省: [106.713478, 26.578343],
+            云南省: [102.712251, 25.040609],
+            西藏自治区: [91.132212, 29.660361],
+            陕西省: [108.948024, 34.263161],
+            甘肃省: [103.823557, 36.058039],
+            青海省: [101.778916, 36.623178],
+            宁夏回族自治区: [106.278179, 38.46637],
+            新疆维吾尔自治区: [87.617733, 43.792818],
+            台湾: [121.509062, 25.044332],
+            香港特别行政区: [114.173355, 22.320048],
+            澳门特别行政区: [113.54909, 22.198951],
+            钓鱼岛: [123.478088, 25.742385],
+        }
+        console.log(datas, '进来的数据')
+        var data = datas
+        function convertDatainfo(data) {
+            console.log(data, 'DATA数据')
+            var res = []
+            for (var i = 0; i < data.length; i++) {
+                var geoCoord = geoCoordMapData[data[i].provName]
+                if (geoCoord && data[i].schoolCount !== 0) {
+                    res.push({
+                        name: data[i].provName,
+                        value: geoCoord.concat(data[i].schoolCount),
+                        studentCount: data[i].standardCount,
+                        teacherCount: data[i].teacherCount,
+                    })
+                }
+            }
+            return res
         }
-
-        var BJData = [
-            [{ name: '北京' }, { name: '上海', value: 95 }],
-            [{ name: '北京' }, { name: '广州', value: 90 }],
-            [{ name: '北京' }, { name: '大连', value: 80 }],
-            [{ name: '北京' }, { name: '南宁', value: 70 }],
-            [{ name: '北京' }, { name: '南昌', value: 60 }],
-            [{ name: '北京' }, { name: '拉萨', value: 50 }],
-            [{ name: '北京' }, { name: '长春', value: 40 }],
-            [{ name: '北京' }, { name: '包头', value: 30 }],
-            [{ name: '北京' }, { name: '重庆', value: 20 }],
-            [{ name: '北京' }, { name: '常州', value: 10 }],
-            [{ name: '北京' }, { name: '武汉', value: 10 }],
-            [{ name: '北京' }, { name: '郑州', value: 10 }],
-            [{ name: '北京' }, { name: '哈尔滨', value: 10 }],
-        ]
-
-        var SHData = [
-            [{ name: '上海' }, { name: '包头', value: 95 }],
-            [{ name: '上海' }, { name: '昆明', value: 90 }],
-            [{ name: '上海' }, { name: '广州', value: 80 }],
-            [{ name: '上海' }, { name: '郑州', value: 70 }],
-            [{ name: '上海' }, { name: '长春', value: 60 }],
-            [{ name: '上海' }, { name: '重庆', value: 50 }],
-            [{ name: '上海' }, { name: '长沙', value: 40 }],
-            [{ name: '上海' }, { name: '北京', value: 30 }],
-            [{ name: '上海' }, { name: '丹东', value: 20 }],
-            [{ name: '上海' }, { name: '大连', value: 10 }],
-        ]
-
-        var GZData = [
-            [{ name: '广州' }, { name: '福州', value: 95 }],
-            [{ name: '广州' }, { name: '太原', value: 90 }],
-            [{ name: '广州' }, { name: '长春', value: 80 }],
-            [{ name: '广州' }, { name: '重庆', value: 70 }],
-            [{ name: '广州' }, { name: '西安', value: 60 }],
-            [{ name: '广州' }, { name: '成都', value: 50 }],
-            [{ name: '广州' }, { name: '常州', value: 40 }],
-            [{ name: '广州' }, { name: '北京', value: 30 }],
-            [{ name: '广州' }, { name: '北海', value: 20 }],
-            [{ name: '广州' }, { name: '海口', value: 10 }],
-        ]
-        var YCData = [
-            [{ name: '拉萨' }, { name: '北京', value: 100 }],
-            [{ name: '拉萨' }, { name: '潍坊', value: 100 }],
-            [{ name: '拉萨' }, { name: '哈尔滨', value: 100 }],
-        ]
-
-        var color = ['#fff', '#fff', '#fff', '#fff'] //航线的颜色
-
         var planePath =
             'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
         var series = []
-
-        ;[
-            ['北京', BJData],
-            ['上海', SHData],
-            ['广州', GZData],
-            ['拉萨', YCData],
-        ].forEach((item, i) => {
-            series.push(
-                {
-                    name: item[0] + ' Top10',
-                    type: 'lines',
-                    zlevel: 1,
-                    effect: {
-                        show: true,
-                        period: 6,
-                        trailLength: 0.7,
-                        color: 'red',
-                        symbolSize: 3,
+        let option = {
+            tooltip: {
+                trigger: 'item',
+                formatter: function (params) {
+                    console.log(params, '查看')
+                    if (typeof params.value[2] == 'undefined') {
+                        return params.provName + ' : ' + params.value
+                    } else {
+                        return params.data.name + ' : ' + '学校数量:' + params.data.value[2] + '  老师总数:' + params.data.teacherCount + ' 学生总数:' + params.data.studentCount
+                    }
+                },
+            },
+            geo: {
+                map: 'china',
+                show: true,
+                roam: false,
+                zoom: 1.25,
+                label: {
+                    normal: {
+                        show: false,
                     },
-                    lineStyle: {
-                        normal: {
-                            color: color[i],
-                            width: 0,
-                            curveness: 0.2,
-                        },
+                    emphasis: {
+                        show: false,
                     },
-                    data: this.convertData(geoCoordMap, item[1]),
                 },
+                itemStyle: {
+                    normal: {
+                        areaColor: 'rgba(43, 196, 243, 0.42)',
+                        borderColor: 'rgba(43, 196, 243, 1)',
+                        borderWidth: 1,
+                    },
+                    emphasis: {
+                        areaColor: '#2B91B7',
+                    },
+                },
+            },
+            series: [
                 {
-                    name: item[0] + ' Top10',
-                    type: 'lines',
-                    symbol: ['none', 'arrow'],
-                    symbolSize: 10,
-                    zlevel: 2,
-                    effect: {
-                        show: true,
-                        period: 6,
-                        trailLength: 0,
-                        symbol: planePath,
-                        symbolSize: 15,
+                    symbolSize: 5,
+                    label: {
+                        normal: {
+                            formatter: '{b}',
+                            position: 'right',
+                            show: true,
+                        },
+                        emphasis: {
+                            show: true,
+                        },
                     },
-                    lineStyle: {
+                    itemStyle: {
                         normal: {
-                            color: color[i],
-                            width: 1,
-                            opacity: 0.4,
-                            curveness: 0.2,
+                            color: '#fff',
                         },
                     },
-                    data: this.convertData(geoCoordMap, item[1]),
+                    name: 'light',
+                    type: 'scatter',
+                    coordinateSystem: 'geo',
+                    data: convertDatainfo(data),
                 },
                 {
-                    name: item[0] + ' Top10',
-                    type: 'effectScatter',
+                    type: 'scatter',
                     coordinateSystem: 'geo',
-                    zlevel: 2,
-                    rippleEffect: {
-                        brushType: 'stroke',
-                    },
+                    symbol: 'pin',
+                    symbolSize: [50, 50],
                     label: {
                         normal: {
                             show: true,
-                            position: 'right',
-                            formatter: '{b}',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12,
+                            },
+                            formatter(value) {
+                                return value.data.value[2]
+                            },
                         },
                     },
-                    symbolSize: function (val) {
-                        return val[2] / 8
-                    },
                     itemStyle: {
                         normal: {
-                            color: color[i],
+                            color: '#666', //标志颜色
                         },
                     },
-                    data: item[1].map(function (dataItem) {
-                        return {
-                            name: dataItem[1].name,
-                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
-                        }
-                    }),
-                }
-            )
-        })
-        let option = {
-            // backgroundColor: "#404a59",
-            // title: {
-            //   text: "人员流动分布图",
-            //   subtext: "数据纯属虚构",
-            //   left: "center",
-            //   textStyle: {
-            //     color: "#fff",
-            //   },
-            // },
-            // tooltip: {
-            //     trigger: 'item',
-            // },
-            legend: {
-                orient: 'vertical',
-                top: 'bottom',
-                left: 'right',
-                data: ['北京 Top10', '上海 Top10', '广州 Top10'],
-                textStyle: {
-                    color: '#fff',
-                },
-                selectedMode: 'single',
-            },
-            geo: {
-                map: 'china',
-                label: {
-                    emphasis: {
-                        show: false,
-                        color: '#fff',
-                    },
-                },
-                roam: false,
-                itemStyle: {
-                    normal: {
-                        areaColor: 'rgba(43, 196, 243, 0.42)',
-                        borderColor: 'rgba(43, 196, 243, 1)',
-                        borderWidth: 1,
-                    },
-                    emphasis: {
-                        areaColor: '#2B91B7',
+                    data: convertDatainfo(data),
+                    showEffectOn: 'render',
+                    rippleEffect: {
+                        brushType: 'stroke',
                     },
+                    hoverAnimation: true,
+                    zlevel: 1,
                 },
-            },
-            series: series,
+            ],
         }
         this.state.chart.setOption(option)
         window.addEventListener('resize', () => {

TEAMModeBI/ClientApp/src/view/index/dashboard.vue

@@ -7,20 +7,20 @@
         <div class="mainBox">
             <div class="column">
                 <div class="panel bar">
-                    <div class="chart">
-                        <BaseBar></BaseBar>
+                    <div class="chart" v-loading="loading.BaseBarAcross" element-loading-background="rgba(62,182,250, 0.2)">
+                        <BaseBarAcross :mapData="AcrossBar"></BaseBarAcross>
                     </div>
                     <div class="panel-footer"></div>
                 </div>
                 <div class="panel line">
-                    <div class="chart">
-                        <BasicLine></BasicLine>
+                    <div class="chart" v-loading="loading.BaseBar" element-loading-background="rgba(62,182,250, 0.2)">
+                        <BaseBar :mapData="barData"></BaseBar>
                     </div>
                     <div class="panel-footer"></div>
                 </div>
                 <div class="panel pie">
-                    <div class="chart">
-                        <BasicPie></BasicPie>
+                    <div class="chart" v-loading="loading.BasicPie" element-loading-background="rgba(62,182,250, 0.2)">
+                        <BasicPie :mapData="schoolPie"></BasicPie>
                     </div>
                     <div class="panel-footer"></div>
                 </div>
@@ -29,20 +29,19 @@
                 <div class="no">
                     <div class="no-hd">
                         <ul>
-                            <li>235469</li>
-                            <li>356789</li>
+                            <li v-for="(items,index) in totalData" :key="index">{{items.value}}</li>
                         </ul>
                     </div>
                     <div class="no-bd">
                         <ul>
-                            <li>当前人数</li>
-                            <li>总人数</li>
+                            <li v-for="(item,index) in totalData" :key="index">{{item.name}}</li>
+                            <!-- <li>总人数</li> -->
                         </ul>
                     </div>
                 </div>
                 <div class="map">
-                    <div class="chart">
-                        <ChinaMap></ChinaMap>
+                    <div class="chart" v-loading="loading.map" element-loading-background="rgba(62,182,250, 0.5)">
+                        <ChinaMap :mapData="mapData"></ChinaMap>
                     </div>
                     <div class="map1"></div>
                     <div class="map2"></div>
@@ -55,18 +54,21 @@
 </template>
 <script>
 import BaseBar from '@/components/echarts/baseBar'
+import BaseBarAcross from '@/components/echarts/baseBarAcross'
 import CustomBar from '@/components/echarts/customBar'
 import ChinaMap from '@/components/echarts/chinaMap'
 import BasicLine from '@/components/echarts/basicLine'
 import CustomLine from '@/components/echarts/customLine'
 import BasicPie from '@/components/echarts/basicPie'
 import CustomPie from '@/components/echarts/customPie'
+import * as echarts from 'echarts'
 import '../../until/china'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, ref } from 'vue'
 import { useStore } from 'vuex'
 export default {
     components: {
         BaseBar,
+        BaseBarAcross,
         CustomBar,
         ChinaMap,
         BasicLine,
@@ -77,8 +79,271 @@ export default {
     setup() {
         let { proxy } = getCurrentInstance()
         const store = useStore()
-        let barData = ref({})
-        function handleBarData() {}
+        //各城市学校数量排名基础数据
+        let barData = ref({
+            xAxis: [],
+            yAxis: [],
+            data: [],
+        })
+        let AcrossBar = ref({
+            xAxis: [],
+            yAxis: [],
+            data: [],
+        })
+        //第一名的数据内容
+        let no1Data = ref({})
+        //饼图需要数据（各城市总数占比）
+        let schoolPie = ref({
+            legendData: [],
+            data: [],
+        })
+        //Map数据
+        let mapData = ref([])
+        //loading
+        let loading = ref({
+            BaseBarAcross: true,
+            BaseBar: true,
+            BasicPie: true,
+            map: true,
+        })
+        //数据综合
+        let totalData = ref([
+            { name: '创校总数', value: '' },
+            { name: '教师总人数', value: '' },
+            { name: '学生总人数', value: '' },
+            { name: '空间总大小', value: '' },
+        ])
+        //获取各市学校数量数据
+        function handleBarData() {
+            //基础数据
+            let xAxisInfo = {
+                type: 'value',
+                axisLabel: {
+                    textStyle: {
+                        color: 'rgba(255,255,255,.6)',
+                        fontSize: '12',
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.1)',
+                        // width: 1,
+                        // type: "solid"
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.1)',
+                    },
+                },
+            }
+            let yAxisInfo = {
+                type: 'category',
+                data: [],
+                // axisTick: {
+                //     alignWithLabel: true,
+                // },
+                axisLabel: {
+                    textStyle: {
+                        color: 'rgba(255,255,255,.6)',
+                        fontSize: '10',
+                    },
+                },
+                axisLine: {
+                    show: false,
+                },
+            }
+            let dataInfo = {
+                type: 'bar',
+                barWidth: '25%',
+                data: [],
+                itemStyle: {
+                    barBorderRadius: 5,
+                },
+            }
+            proxy.$api.getEachSchool({}).then((res) => {
+                console.log(res, 'API返回')
+                let sortData = res.citySchools.sort(function (a, b) {
+                    return a.schoolCount - b.schoolCount
+                })
+                console.log(sortData)
+                res.state === 200
+                    ? (sortData.forEach((element) => {
+                          element.schoolCount !== 0 ? (yAxisInfo.data.push(element.cityName), dataInfo.data.push(element.schoolCount)) : ''
+                      }),
+                      (AcrossBar.value.xAxis = xAxisInfo),
+                      (AcrossBar.value.yAxis = yAxisInfo),
+                      (AcrossBar.value.data = dataInfo),
+                      (no1Data.value = res.citySchools[res.citySchools.length - 1]),
+                      handleAreaBar(),
+                      handelPie(res.citySchools),
+                      (loading.value.BaseBarAcross = false))
+                    : ''
+            })
+        }
+        //获取第一名下的各区数据
+        function handleAreaBar() {
+            //基础数据
+            let xAxisInfo = {
+                type: 'category',
+                data: [],
+                // axisTick: {
+                //     alignWithLabel: true,
+                // },
+                axisLabel: {
+                    interval: 0,
+                    rotate: 30,
+                    textStyle: {
+                        color: 'rgba(255,255,255,.6)',
+                        fontSize: '10',
+                    },
+                },
+                axisLine: {
+                    show: false,
+                },
+            }
+            let yAxisInfo = {
+                type: 'value',
+                axisLabel: {
+                    textStyle: {
+                        color: 'rgba(255,255,255,.6)',
+                        fontSize: '10',
+                        fontFamily: 'Microsoft YaHei',
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.1)',
+                        // width: 1,
+                        // type: "solid"
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.1)',
+                    },
+                },
+            }
+            let studentsNum = []
+            let teacherNum = []
+            let schoolNum = []
+            let datasInfo = [
+                {
+                    name: '学校数量',
+                    type: 'bar',
+                    barGap: 0,
+                    barWidth: '10%',
+                    data: schoolNum,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#8bd46e',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#09bcb7',
+                                },
+                            ]),
+                            barBorderRadius: 11,
+                        },
+                    },
+                },
+                {
+                    name: '教师人数',
+                    type: 'bar',
+                    barWidth: '10%',
+                    data: teacherNum,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#fccb05',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#f5804d',
+                                },
+                            ]),
+                            barBorderRadius: 12,
+                        },
+                    },
+                },
+                {
+                    name: '学生人数',
+                    type: 'bar',
+                    barWidth: '10%',
+                    data: studentsNum,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#1067e1',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#3eb6fa',
+                                },
+                            ]),
+                            barBorderRadius: 12,
+                        },
+                    },
+                },
+            ]
+            let datas = { cityCode: no1Data.value.cityCode }
+            proxy.$api.getSchoolDetails(datas).then((res) => {
+                console.log(res, '详细的各区数据')
+                res.state === 200
+                    ? (res.districtSticss.forEach((item) => {
+                          xAxisInfo.data.push(item.distName)
+                          studentsNum.push(item.studentCount)
+                          teacherNum.push(item.teacherCount)
+                          schoolNum.push(item.schoolCount)
+                      }),
+                      ((barData.value.xAxis = xAxisInfo), (barData.value.yAxis = yAxisInfo), (barData.value.data = datasInfo), (loading.value.BasicPie = false)))
+                    : ''
+            })
+        }
+        //各城市学校数量占比
+        function handelPie(data) {
+            let datas = {
+                legendData: [],
+                data: [],
+            }
+            data.forEach((items) => {
+                let parms = {
+                    value: items.schoolCount,
+                    name: items.cityName,
+                }
+                items.schoolCount === 0 ? '' : schoolPie.value.data.push(parms), schoolPie.value.legendData.push(items.cityName), (loading.value.BaseBar = false)
+            })
+        }
+        //API获取各项总和
+        function getEachTotal() {
+            proxy.$api.geteachTotal({}).then((res) => {
+                console.log(res, '总和数据返回')
+                res.state === 200
+                    ? ((totalData.value[0].value = res.schoolCount),
+                      (totalData.value[1].value = res.teacherCount),
+                      (totalData.value[2].value = res.studentCount),
+                      (totalData.value[3].value = res.schoolSize))
+                    : ''
+            })
+        }
+        //获取map需要的数据
+        function getMapdata() {
+            proxy.$api.getEachProvince({}).then((res) => {
+                console.log(res, '地图数据')
+                res.state === 200 ? ((mapData.value = res.provinceStics), (loading.value.map = false)) : ''
+            })
+        }
+        handleBarData()
+        getEachTotal()
+        getMapdata()
+        return { proxy, store, barData, handleBarData, no1Data, handleAreaBar, AcrossBar, handelPie, schoolPie, loading, getEachTotal, totalData, getMapdata, mapData }
     },
 }
 </script>
@@ -170,6 +435,26 @@ ul > li {
     bottom: 0;
     width: 100%;
 }
+.mainBox .column .panel .panel-footer::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-left: 2px solid #02a6b5;
+}
+.mainBox .column .panel .panel-footer::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-right: 2px solid #02a6b5;
+}
 .mainBox .column .panel::after {
     position: absolute;
     top: 0;
@@ -215,14 +500,17 @@ ul > li {
     font-family: electronicFont;
     font-weight: bold;
 }
-.mainBox .column-center .no .no-hd ul li:first-child::after {
+.mainBox .column-center .no .no-hd ul li:after {
     content: '';
     position: absolute;
     height: 50%;
     width: 1px;
     background: rgba(255, 255, 255, 0.2);
     right: 0;
-    top: 25%;
+    top: 30%;
+}
+.mainBox .column-center .no .no-hd ul li:last-child:after {
+    display: none;
 }
 .mainBox .column-center .no .no-bd ul li {
     flex: 1;
@@ -273,6 +561,16 @@ ul > li {
     animation: rotate 15s linear infinite;
     z-index: 2;
 }
+.mainBox .column-center .no .no-hd::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-right: 2px solid #02a6b5;
+    right: 0;
+    bottom: 0;
+}
 @keyframes rotate {
     from {
         transform: translate(-50%, -50%) rotate(0deg);

TEAMModeBI/ClientApp/src/view/teachermanage/manage.vue

@@ -217,9 +217,9 @@ export default {
             let states = state ? 'up' : 'del'
             let manaName = [rowkey]
             let users = JSON.parse(localStorage.getItem('userData'))
-            if (operateUser.tmdid) {
+            if (operateUser.tmdId) {
                 let data = {
-                    ids: [operateUser.tmdid],
+                    ids: [operateUser.tmdId],
                     school_code: 'hbcn',
                     mode: states,
                     paramPower: manaName,