Главная Обзор Помощь
Регистрация Вход
TEAMMODEL
/
TEAMModelOS
5
4
Ответвить 0
Файлы Задачи 172 Запросы на слияние 0 Вики
Просмотр исходного кода

update

chenmy 3 лет назад
Родитель
eb36812e75
Сommit
b8675d27c4
13 измененных файлов с 1574 добавлено и 3 удалено
Единый вид Показать статистику Diff
  1. 1 0
      TEAMModelBI/ClientApp/package.json
  2. 1 1
      TEAMModelBI/ClientApp/public/index.html
  3. 142 0
      TEAMModelBI/ClientApp/src/components/echarts/PiegangedBar.vue
  4. 219 0
      TEAMModelBI/ClientApp/src/components/echarts/commonLine.vue
  5. 163 0
      TEAMModelBI/ClientApp/src/components/echarts/commonPie.vue
  6. 158 0
      TEAMModelBI/ClientApp/src/components/echarts/doublePie.vue
  7. 116 0
      TEAMModelBI/ClientApp/src/components/echarts/schoolPie.vue
  8. 119 0
      TEAMModelBI/ClientApp/src/components/echarts/sizePie.vue
  9. 162 0
      TEAMModelBI/ClientApp/src/components/echarts/test.vue
  10. 115 0
      TEAMModelBI/ClientApp/src/components/echarts/versionsPie.vue
  11. 6 2
      TEAMModelBI/ClientApp/src/view/areaServe/index.vue
  12. 366 0
      TEAMModelBI/ClientApp/src/view/areaServe/statistics.vue
  13. 6 0
      TEAMModelBI/ClientApp/src/view/index/dashboard.vue

+ 1 - 0
TEAMModelBI/ClientApp/package.json
Просмотреть файл 

@@ -17,6 +17,7 @@
 
         "clipboard": "^2.0.10",
 
         "clipboard": "^2.0.10",
 
         "core-js": "^3.7.0",
 
         "core-js": "^3.7.0",
 
         "echarts": "^5.2.2",
 
         "echarts": "^5.2.2",
 
+        "echarts-liquidfill": "^3.1.0",
 
         "el-plus-powerful-table-ts": "^1.0.5",
 
         "el-plus-powerful-table-ts": "^1.0.5",
 
         "element-plus": "^1.1.0-beta.24",
 
         "element-plus": "^1.1.0-beta.24",
 
         "elui-china-area-dht": "^1.0.4",
 
         "elui-china-area-dht": "^1.0.4",

+ 1 - 1
TEAMModelBI/ClientApp/public/index.html
Просмотреть файл 

@@ -11,7 +11,7 @@
 
     </title>
 
     </title>
 
 </head>
 
 </head>
 
 <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
 
 <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
 
-<script src="https://at.alicdn.com/t/font_2934132_j14cj66bb8m.js"></script>
 
+<script src="https://at.alicdn.com/t/font_2934132_7la2600x4ah.js"></script>
 
 
 
 <body>
 
 <body>
 
     <noscript>
 
     <noscript>

+ 142 - 0
TEAMModelBI/ClientApp/src/components/echarts/PiegangedBar.vue
Просмотреть файл 

@@ -0,0 +1,142 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
 
+import * as echarts from 'echarts'
 
+export default {
 
+    name: 'baseBar',
 
+    props: {
 
+        width: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        height: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        mapData: {
 
+            type: Object,
 
+            default: () => {},
 
+        },
 
+        title: {
 
+            type: String,
 
+            default: '',
 
+        },
 
+    },
 
+    setup(props) {
 
+        console.log(props.mapData, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    nweProps ? chart.init(props.mapData, proxy) : ''
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        var value = 0.6
 
+        var data = [value]
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            backgroundColor: '#fff',
 
+            title: [
 
+                {
 
+                    text: '空间已使用率',
 
+                    x: '12%',
 
+                    y: '82%',
 
+                    textStyle: {
 
+                        fontSize: 14,
 
+                        fontWeight: '100',
 
+                        color: '#2e86de',
 
+                        lineHeight: 16,
 
+                        textAlign: 'center',
 
+                    },
 
+                },
 
+            ],
 
+            series: [
 
+                {
 
+                    type: 'liquidFill',
 
+                    radius: '70%',
 
+                    center: ['25%', '45%'],
 
+                    color: [
 
+                        {
 
+                            type: 'linear',
 
+                            x: 0,
 
+                            y: 0,
 
+                            x2: 1,
 
+                            y2: 1,
 
+                            colorStops: [
 
+                                {
 
+                                    offset: 0,
 
+                                    color: '#00FFFF',
 
+                                },
 
+                                {
 
+                                    offset: 1,
 
+                                    color: '#76EE00',
 
+                                },
 
+                            ],
 
+                            globalCoord: false,
 
+                        },
 
+                    ],
 
+                    data: data, // data个数代表波浪数
 
+                    backgroundStyle: {
 
+                        borderWidth: 1,
 
+                        color: 'RGBA(51, 66, 127, 0.7)',
 
+                    },
 
+                    label: {
 
+                        normal: {
 
+                            textStyle: {
 
+                                fontSize: 24,
 
+                                color: '#8395a7',
 
+                            },
 
+                        },
 
+                    },
 
+                    outline: {
 
+                        // show: false
 
+                        borderDistance: 0,
 
+                        itemStyle: {
 
+                            borderWidth: 2,
 
+                            borderColor: '#fff',
 
+                        },
 
+                    },
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 219 - 0
TEAMModelBI/ClientApp/src/components/echarts/commonLine.vue
Просмотреть файл 

@@ -0,0 +1,219 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } 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, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    chart.init(props.mapData, proxy)
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+
 
+        this.state.chart.setOption({
 
+            backgroundColor: '#fff',
 
+            grid: {
 
+                top: '17%',
 
+                bottom: '22%',
 
+                left: '4%',
 
+                right: '3%',
 
+            },
 
+            tooltip: {
 
+                trigger: 'axis',
 
+                axisPointer: {
 
+                    type: 'line',
 
+                    lineStyle: {
 
+                        color: '#FF8736',
 
+                    },
 
+                },
 
+            },
 
+            xAxis: {
 
+                boundaryGap: true, // 默认，坐标轴留白策略
 
+                axisLine: {
 
+                    // 坐标轴轴线相关设置。数学上的x轴
 
+                    show: true,
 
+                    lineStyle: {
 
+                        color: '#85B1B4',
 
+                    },
 
+                },
 
+                axisLabel: {
 
+                    // 坐标轴刻度标签的相关设置
 
+                    textStyle: {
 
+                        color: '#709FD9',
 
+                        margin: 15,
 
+                    },
 
+                },
 
+                splitLine: {
 
+                    show: false,
 
+                },
 
+                axisTick: {
 
+                    show: true,
 
+                    alignWithLabel: true,
 
+                },
 
+                data: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周', '第八周', '第九周'],
 
+            },
 
+            yAxis: {
 
+                axisLine: {
 
+                    show: true,
 
+                    color: '#85B1B4',
 
+                },
 
+                axisLabel: {
 
+                    // 坐标轴刻度标签的相关设置
 
+                    show: true,
 
+                    textStyle: {
 
+                        color: '#709FD9',
 
+                        margin: 15,
 
+                    },
 
+                },
 
+                splitLine: {
 
+                    show: true,
 
+                },
 
+                axisTick: {
 
+                    show: true,
 
+                },
 
+            },
 
+            dataZoom: [
 
+                {
 
+                    show: true,
 
+                    height: 15,
 
+                    xAxisIndex: [0, 1],
 
+                    bottom: 10,
 
+                    right: '8%',
 
+                    left: '5%',
 
+                    start: 0,
 
+                    end: 100,
 
+                    backgroundColor: 'rgba(0,0,0,0)',
 
+                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-1,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
 
+                    handleSize: '110%',
 
+                    handleStyle: {
 
+                        color: '#999999',
 
+                    },
 
+                    textStyle: {
 
+                        color: '#999999',
 
+                    },
 
+                    borderColor: '',
 
+                    zoomOnMouseWheel: false,
 
+                    moveOnMouseMove: true,
 
+                    moveOnMouseWheel: true,
 
+                },
 
+                {
 
+                    type: 'inside',
 
+                    show: true,
 
+                    height: 15,
 
+                    start: 1,
 
+                    end: 100,
 
+                },
 
+            ],
 
+            series: [
 
+                {
 
+                    type: 'scatter',
 
+                    symbolSize: 10,
 
+                    itemStyle: {
 
+                        color: '#3498db',
 
+                    },
 
+                    silent: true,
 
+                    tooltip: {
 
+                        show: false,
 
+                    },
 
+                    markPoint: {
 
+                        data: [
 
+                            { type: 'max', name: 'Max' },
 
+                            { type: 'min', name: 'Min' },
 
+                        ],
 
+                        label: {
 
+                            color: '#FFF', // 文字颜色
 
+                            padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
 
+                            show: true,
 
+                        },
 
+                    },
 
+                    data: [200, 180, 280, 90, 160, 320, 180, 369, 571],
 
+                },
 
+                {
 
+                    type: 'line',
 
+                    symbol: 'circle',
 
+                    symbolSize: 16,
 
+                    symbol: 'path://M488 187.381L242.872 328.906a48 48 0 0 0-24 41.57v283.049a48 48 0 0 0 24 41.569L488 836.619a48 48 0 0 0 48 0l245.128-141.525a48 48 0 0 0 24-41.57V370.476a48 48 0 0 0-24-41.569L536 187.381a48 48 0 0 0-48 0z m32 27.713l245.128 141.525a16 16 0 0 1 8 13.856v283.05a16 16 0 0 1-8 13.856L520 808.906a16 16 0 0 1-16 0L258.872 667.381a16 16 0 0 1-8-13.856v-283.05a16 16 0 0 1 8-13.856L504 215.094a16 16 0 0 1 16 0z',
 
+                    lineStyle: {
 
+                        color: '#3498db',
 
+                    },
 
+                    itemStyle: {
 
+                        color: '#3498db',
 
+                        borderWidth: 1,
 
+                        borderColor: '#3498db',
 
+                    },
 
+                    label: {
 
+                        show: true,
 
+                        position: 'top',
 
+                        textStyle: {
 
+                            color: '#fff',
 
+                        },
 
+                    },
 
+
 
+                    data: [200, 180, 280, 90, 160, 320, 180, 369, 571],
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 163 - 0
TEAMModelBI/ClientApp/src/components/echarts/commonPie.vue
Просмотреть файл 

@@ -0,0 +1,163 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } 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, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    chart.init(props.mapData, proxy)
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+
 
+        this.state.chart.setOption({
 
+            title: {
 
+                text: '研修学校占比',
 
+                textStyle: {
 
+                    color: '#595959',
 
+                    fontSize: 14,
 
+                },
 
+                // subtext: '年度任务总数：18个',
 
+                // subtextStyle: {
 
+                //     fontSize: 14,
 
+                //     color: '#8C8C8C',
 
+                // },
 
+                itemGap: 20,
 
+                left: 'center',
 
+                top: '55%',
 
+            },
 
+            angleAxis: {
 
+                max: 100,
 
+                clockwise: true, // 逆时针
 
+                // 隐藏刻度线
 
+                show: false,
 
+            },
 
+            radiusAxis: {
 
+                type: 'category',
 
+                show: true,
 
+                axisLabel: {
 
+                    show: false,
 
+                },
 
+                axisLine: {
 
+                    show: false,
 
+                },
 
+                axisTick: {
 
+                    show: false,
 
+                },
 
+            },
 
+            polar: {
 
+                center: ['50%', '50%'],
 
+                radius: '110%', //图形大小
 
+            },
 
+            series: [
 
+                {
 
+                    type: 'bar',
 
+                    data: [32],
 
+                    showBackground: true,
 
+                    coordinateSystem: 'polar',
 
+                    roundCap: true,
 
+                    barWidth: 8,
 
+                    itemStyle: {
 
+                        normal: {
 
+                            opacity: 1,
 
+                            color: '#1890FF',
 
+                        },
 
+                    },
 
+                    z: 10,
 
+                },
 
+                {
 
+                    type: 'bar',
 
+                    data: [100],
 
+                    showBackground: true,
 
+                    barGap: '-100%',
 
+                    coordinateSystem: 'polar',
 
+                    roundCap: true,
 
+                    barWidth: 8,
 
+                    itemStyle: {
 
+                        normal: {
 
+                            opacity: 1,
 
+                            color: '#E7E9EB',
 
+                        },
 
+                    },
 
+                },
 
+                {
 
+                    type: 'pie',
 
+                    data: [1],
 
+                    radius: '90%',
 
+                    itemStyle: {
 
+                        color: 'transparent',
 
+                    },
 
+                    label: {
 
+                        show: true,
 
+                        position: 'center',
 
+                        formatter: 32 + '%',
 
+                        color: '#1890FF',
 
+                        fontSize: 22,
 
+                    },
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 158 - 0
TEAMModelBI/ClientApp/src/components/echarts/doublePie.vue
Просмотреть файл 

@@ -0,0 +1,158 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
 
+import * as echarts from 'echarts'
 
+export default {
 
+    name: 'baseBar',
 
+    props: {
 
+        width: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        height: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        mapData: {
 
+            type: Object,
 
+            default: () => {},
 
+        },
 
+        title: {
 
+            type: String,
 
+            default: '',
 
+        },
 
+    },
 
+    setup(props) {
 
+        console.log(props.mapData, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    nweProps ? chart.init(props.mapData, proxy) : ''
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        var color = ['#78e08f ', '#3498db', '#fa983a', '#5555FF', '#079992']
 
+        var data = [
 
+            { value: 9, name: '高教' },
 
+            { value: 33, name: '普教' },
 
+        ]
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            color: color,
 
+            tooltip: {
 
+                trigger: 'item',
 
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
 
+            },
 
+            legend: {
 
+                orient: 'vertical',
 
+                right: 0,
 
+                top: '15%',
 
+                // width:,
 
+                // height:,
 
+
 
+                // 图例颜色块宽高
 
+                itemWidth: 15,
 
+                itemHeight: 15,
 
+                // 		// 图例字体大小
 
+                textStyle: {
 
+                    fontSize: 12,
 
+                },
 
+                formatter: function (name) {
 
+                    var total = 0
 
+                    var target
 
+                    for (var i = 0, l = data.length; i < l; i++) {
 
+                        total += data[i].value
 
+                        if (data[i].name == name) {
 
+                            target = data[i].value
 
+                        }
 
+                    }
 
+                    // return name + ' ' + ((target / total) * 100).toFixed(2) + '%'
 
+                    return name
 
+                },
 
+                data: [
 
+                    { value: 10, name: '小学' },
 
+                    { value: 3, name: '初中' },
 
+                    { value: 7, name: '高中' },
 
+                    { value: 3, name: '职高类' },
 
+                ],
 
+            },
 
+            series: [
 
+                {
 
+                    // name:'访问来源',
 
+                    name: '类型',
 
+                    type: 'pie',
 
+                    selectedMode: 'single',
 
+                    radius: [0, '55%'],
 
+                    label: {
 
+                        normal: {
 
+                            position: 'inner',
 
+                            fontSize: 12,
 
+                        },
 
+                    },
 
+                    labelLine: {
 
+                        normal: {
 
+                            show: false,
 
+                        },
 
+                    },
 
+                    data: data,
 
+                    // [
 
+                    //     { value: 10, name: '小学' },
 
+                    //     { value: 3, name: '初中' },
 
+                    //     { value: 7, name: '高中' },
 
+                    //     { value: 3, name: '职高类' },
 
+                    // ],
 
+                },
 
+                {
 
+                    name: '学段占比',
 
+                    type: 'pie',
 
+                    radius: ['65%', '90%'],
 
+                    data: [
 
+                        { value: 10, name: '小学' },
 
+                        { value: 3, name: '初中' },
 
+                        { value: 7, name: '高中' },
 
+                        { value: 3, name: '职高类' },
 
+                    ],
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 116 - 0
TEAMModelBI/ClientApp/src/components/echarts/schoolPie.vue
Просмотреть файл 

@@ -0,0 +1,116 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
 
+import * as echarts from 'echarts'
 
+export default {
 
+    name: 'baseBar',
 
+    props: {
 
+        width: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        height: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        mapData: {
 
+            type: Object,
 
+            default: () => {},
 
+        },
 
+        title: {
 
+            type: String,
 
+            default: '',
 
+        },
 
+    },
 
+    setup(props) {
 
+        console.log(props.mapData, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    nweProps ? chart.init(props.mapData, proxy) : ''
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        console.log(datas, '1111111111111111')
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            color: ['#ef5777', '#0fbcf9', '#0be881', '#575fcf', '#ffd32a'],
 
+            legend: {
 
+                right: '0%',
 
+                orient: 'vertical',
 
+                itemWidth: 8,
 
+                itemHeight: 8, // 修改icon图形大小
 
+                textStyle: {
 
+                    fontSize: 12,
 
+                    color: '#333',
 
+                },
 
+            },
 
+            tooltip: {
 
+                trigger: 'item',
 
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
 
+            },
 
+            series: [
 
+                {
 
+                    name: '版本占比',
 
+                    type: 'pie',
 
+                    radius: '90%',
 
+                    center: ['50%', '50%'],
 
+                    itemStyle: {
 
+                        borderRadius: 2,
 
+                    },
 
+                    label: {
 
+                        normal: {
 
+                            position: 'inner',
 
+                            show: false,
 
+                        },
 
+                    },
 
+                    data: [
 
+                        { value: 1340, name: '师大附小' },
 
+                        { value: 380, name: '外国语小学' },
 
+                        { value: 658, name: '树德中学' },
 
+                        { value: 936, name: '川大附中' },
 
+                    ],
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 119 - 0
TEAMModelBI/ClientApp/src/components/echarts/sizePie.vue
Просмотреть файл 

@@ -0,0 +1,119 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
 
+import * as echarts from 'echarts'
 
+export default {
 
+    name: 'baseBar',
 
+    props: {
 
+        width: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        height: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        mapData: {
 
+            type: Object,
 
+            default: () => {},
 
+        },
 
+        title: {
 
+            type: String,
 
+            default: '',
 
+        },
 
+    },
 
+    setup(props) {
 
+        console.log(props.mapData, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    nweProps ? chart.init(props.mapData, proxy) : ''
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        console.log(datas, '1111111111111111')
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            color: ['#00d2d3', '#54a0ff', '#5f27cd', '#ff6b6b', '#1dd1a1', '#feca57', '#ff9ff3', '#833471'],
 
+            legend: {
 
+                right: '1%',
 
+                orient: 'vertical',
 
+                itemWidth: 8,
 
+                itemHeight: 8, // 修改icon图形大小
 
+                textStyle: {
 
+                    fontSize: 12,
 
+                    color: '#333',
 
+                },
 
+            },
 
+            tooltip: {
 
+                trigger: 'item',
 
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
 
+            },
 
+            series: [
 
+                {
 
+                    name: '空间占比',
 
+                    type: 'pie',
 
+                    radius: '90%',
 
+                    center: ['50%', '50%'],
 
+                    itemStyle: {
 
+                        borderRadius: 2,
 
+                    },
 
+                    label: {
 
+                        normal: {
 
+                            position: 'inner',
 
+                            show: false,
 
+                        },
 
+                    },
 
+                    data: [
 
+                        { value: 240, name: '教材' },
 
+                        { value: 180, name: '图片' },
 
+                        { value: 280, name: '视频' },
 
+                        { value: 136, name: '文档' },
 
+                        { value: 36, name: '音频' },
 
+                        { value: 536, name: '平台数据' },
 
+                        { value: 336, name: '其他' },
 
+                    ],
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 162 - 0
TEAMModelBI/ClientApp/src/components/echarts/test.vue
Просмотреть файл 

@@ -0,0 +1,162 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } 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, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    chart.init(props.mapData, proxy)
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            title: {
 
+                text: '数据全区占比',
 
+                textStyle: {
 
+                    color: '#595959',
 
+                    fontSize: 14,
 
+                },
 
+                // subtext: '年度任务总数：18个',
 
+                // subtextStyle: {
 
+                //     fontSize: 14,
 
+                //     color: '#8C8C8C',
 
+                // },
 
+                itemGap: 20,
 
+                left: 'center',
 
+                top: '55%',
 
+            },
 
+            angleAxis: {
 
+                max: 100,
 
+                clockwise: true, // 逆时针
 
+                // 隐藏刻度线
 
+                show: false,
 
+            },
 
+            radiusAxis: {
 
+                type: 'category',
 
+                show: true,
 
+                axisLabel: {
 
+                    show: false,
 
+                },
 
+                axisLine: {
 
+                    show: false,
 
+                },
 
+                axisTick: {
 
+                    show: false,
 
+                },
 
+            },
 
+            polar: {
 
+                center: ['50%', '50%'],
 
+                radius: '110%', //图形大小
 
+            },
 
+            series: [
 
+                {
 
+                    type: 'bar',
 
+                    data: [45],
 
+                    showBackground: true,
 
+                    coordinateSystem: 'polar',
 
+                    roundCap: true,
 
+                    barWidth: 8,
 
+                    itemStyle: {
 
+                        normal: {
 
+                            opacity: 1,
 
+                            color: '#1890FF',
 
+                        },
 
+                    },
 
+                    z: 10,
 
+                },
 
+                {
 
+                    type: 'bar',
 
+                    data: [100],
 
+                    showBackground: true,
 
+                    barGap: '-100%',
 
+                    coordinateSystem: 'polar',
 
+                    roundCap: true,
 
+                    barWidth: 8,
 
+                    itemStyle: {
 
+                        normal: {
 
+                            opacity: 1,
 
+                            color: '#E7E9EB',
 
+                        },
 
+                    },
 
+                },
 
+                {
 
+                    type: 'pie',
 
+                    data: [1],
 
+                    radius: '90%',
 
+                    itemStyle: {
 
+                        color: 'transparent',
 
+                    },
 
+                    label: {
 
+                        show: true,
 
+                        position: 'center',
 
+                        formatter: 45 + '%',
 
+                        color: '#1890FF',
 
+                        fontSize: 22,
 
+                    },
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 115 - 0
TEAMModelBI/ClientApp/src/components/echarts/versionsPie.vue
Просмотреть файл 

@@ -0,0 +1,115 @@
 
+<!--基础折线图-->
 
+<template>
 
+    <div ref="myEcharts" :style="{ height, width }"></div>
 
+</template>
 
+<script>
 
+import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
 
+import * as echarts from 'echarts'
 
+export default {
 
+    name: 'baseBar',
 
+    props: {
 
+        width: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        height: {
 
+            type: String,
 
+            default: '100%',
 
+        },
 
+        mapData: {
 
+            type: Object,
 
+            default: () => {},
 
+        },
 
+        title: {
 
+            type: String,
 
+            default: '',
 
+        },
 
+    },
 
+    setup(props) {
 
+        console.log(props.mapData, '传进来的值')
 
+        const myEcharts = ref(null)
 
+        let { proxy } = getCurrentInstance()
 
+        const chart = new InitChart(props, myEcharts)
 
+        onMounted(() => {
 
+            chart.init(props.mapData, proxy)
 
+        })
 
+        watch(
 
+            props,
 
+            (nweProps) => {
 
+                nextTick(() => {
 
+                    nweProps ? chart.init(props.mapData, proxy) : ''
 
+                })
 
+            },
 
+            { immediate: true, deep: true }
 
+        )
 
+        return {
 
+            myEcharts,
 
+        }
 
+    },
 
+}
 
+class InitChart {
 
+    constructor(props, myEcharts) {
 
+        this.props = props
 
+        this.myEcharts = myEcharts
 
+        this.state = {
 
+            chart: null,
 
+        }
 
+    }
 
+    init(datas, proxy) {
 
+        console.log(datas, '1111111111111111')
 
+        this.state.chart && this.destory()
 
+        this.state.chart = echarts.init(this.myEcharts.value)
 
+        this.state.chart.setOption({
 
+            legend: {
 
+                right: '-2%',
 
+                orient: 'vertical',
 
+                itemWidth: 8,
 
+                itemHeight: 8, // 修改icon图形大小
 
+                textStyle: {
 
+                    fontSize: 12,
 
+                    color: '#333',
 
+                },
 
+            },
 
+            tooltip: {
 
+                trigger: 'item',
 
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
 
+            },
 
+            series: [
 
+                {
 
+                    name: '版本占比',
 
+                    type: 'pie',
 
+                    radius: '80%',
 
+                    center: ['50%', '50%'],
 
+                    roseType: 'area',
 
+                    itemStyle: {
 
+                        borderRadius: 8,
 
+                    },
 
+                    label: {
 
+                        normal: {
 
+                            position: 'inner',
 
+                            show: false,
 
+                        },
 
+                    },
 
+                    data: [
 
+                        { value: 70, name: '基础版' },
 
+                        { value: 38, name: '标准版' },
 
+                        { value: 32, name: '专业版' },
 
+                    ],
 
+                },
 
+            ],
 
+        })
 
+        window.addEventListener('resize', () => {
 
+            this.state.chart.resize()
 
+        })
 
+    }
 
+
 
+    destory() {
 
+        this.state.chart.dispose()
 
+        window.removeEventListener('resize', () => {
 
+            console.log('事件移除')
 
+        })
 
+    }
 
+}
 
+</script>
 
+<style lang="less"></style>
 
+

+ 6 - 2
TEAMModelBI/ClientApp/src/view/areaServe/index.vue
Просмотреть файл 

@@ -1,7 +1,9 @@
 
 <template>
 
 <template>
 
     <div class="area-servebox">
 
     <div class="area-servebox">
 
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
 
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
 
-            <el-tab-pane label="数据总览" name="statistics">数据统计</el-tab-pane>
 
+            <el-tab-pane label="数据总览" name="statistics">
 
+                <Statistics></Statistics>
 
+            </el-tab-pane>
 
             <el-tab-pane label="详细数据" name="detail">
 
             <el-tab-pane label="详细数据" name="detail">
 
                 <AreaManage></AreaManage>
 
                 <AreaManage></AreaManage>
 
             </el-tab-pane>
 
             </el-tab-pane>
 
@@ -10,15 +12,17 @@
 
 </template>
 
 </template>
 
 <script>
 
 <script>
 
 import { ref } from 'vue'
 
 import { ref } from 'vue'
 
+import Statistics from './statistics.vue'
 
 import AreaManage from './areamanage.vue'
 
 import AreaManage from './areamanage.vue'
 
 export default {
 
 export default {
 
     components: {
 
     components: {
 
         AreaManage,
 
         AreaManage,
 
+        Statistics,
 
     },
 
     },
 
     setup() {
 
     setup() {
 
         const activeName = ref('statistics')
 
         const activeName = ref('statistics')
 
         const handleClick = (TabsPaneContext, event) => {
 
         const handleClick = (TabsPaneContext, event) => {
 
-            console.log(TabsPaneContext, event)
 
+            ;+console.log(TabsPaneContext, event)
 
         }
 
         }
 
         return { activeName, handleClick }
 
         return { activeName, handleClick }
 
     },
 
     },

+ 366 - 0
TEAMModelBI/ClientApp/src/view/areaServe/statistics.vue
Просмотреть файл 

@@ -0,0 +1,366 @@
 
+<template>
 
+    <div class="statisticsbox">
 
+        <c-scrollbar ref="scrollbarRef" width="100%" height="88vh" trigger="hover" direction="y">
 
+            <div class="top-resource">
 
+                <div class="top-aspects" v-for="(item,index) in aspectsData" :key="index">
 
+                    <div :class="[item.classname,'left-top-icon']">
 
+                        <svg :class="'top-header-icon'" aria-hidden="true">
 
+                            <use :xlink:href="item.icon"></use>
 
+                        </svg>
 
+                    </div>
 
+                    <div class="right-top-text">
 
+                        <p class="right-top-num">{{item.num}}</p>
 
+                        <p class="right-top-title">{{item.title}}</p>
 
+                    </div>
 
+                </div>
 
+                <div class="leftbox">
 
+                    <div class="tagbox">
 
+                        <p class="tags basics"><span>基础数据</span></p>
 
+                    </div>
 
+                    <div :class="[items.type==='month' ? 'alonebox' :'totalalonebox']" v-for="(items,indexs) in activityData" :key="indexs">
 
+                        <p :class="[items.type ==='month' ? 'alonebox-title':'total-alonebox-title']">{{items.title}}</p>
 
+                        <p :class="[items.type ==='month' ? 'alonebox-content':'total-alonebox-content']">{{items.num}}</p>
 
+                    </div>
 
+                </div>
 
+                <div class="rightbox">
 
+                    <div class="tagbox">
 
+                        <p class="tags basics"><span>基础数据</span></p>
 
+                    </div>
 
+                    <div class="rightbox-pie">
 
+                        <CommonPie></CommonPie>
 
+                    </div>
 
+                    <div class="rightbox-pie">
 
+                        <Test></Test>
 
+                    </div>
 
+                    <div class="rightbox-pie versions">
 
+                        <VersionsPie></VersionsPie>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="center-resource">
 
+                <div class="center-resource-left">
 
+                    <div class="tagbox ">
 
+                        <p class="tags source"><span>课例数据</span></p>
 
+                    </div>
 
+                    <SchoolPie></SchoolPie>
 
+                </div>
 
+                <div class="center-resource-right">
 
+                    <div class="tagbox">
 
+                        <p class="tags dynamic"><span>课例活跃度</span></p>
 
+                    </div>
 
+                    <CommonLine></CommonLine>
 
+                </div>
 
+            </div>
 
+            <div class="bottom-resource">
 
+                <div class="bottom-leftbox">
 
+                    <div class="tagbox">
 
+                        <p class="tags types"><span>类型占比</span></p>
 
+                    </div>
 
+                    <DoublePie></DoublePie>
 
+                </div>
 
+                <div class="bottom-rightbox">
 
+                    <div class="tagbox">
 
+                        <p class="tags interspace"><span>空间使用情况</span></p>
 
+                    </div>
 
+                    <div class="bottom-rightbox-left">
 
+                        <PiegangedBar></PiegangedBar>
 
+                    </div>
 
+                    <div class="bottom-rightbox-right">
 
+                        <SizePie></SizePie>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </c-scrollbar>
 
+    </div>
 
+</template>
 
+<script>
 
+import { ref } from 'vue'
 
+import CommonPie from '@/components/echarts/commonPie.vue'
 
+import VersionsPie from '@/components/echarts/versionsPie.vue'
 
+import SchoolPie from '@/components/echarts/schoolPie.vue'
 
+import CommonLine from '@/components/echarts/commonLine.vue'
 
+import DoublePie from '@/components/echarts/doublePie.vue'
 
+import PiegangedBar from '@/components/echarts/PiegangedBar.vue'
 
+import SizePie from '@/components/echarts/sizePie.vue'
 
+import Test from '@/components/echarts/test.vue'
 
+import * as echarts from 'echarts'
 
+import 'echarts-liquidfill'
 
+export default {
 
+    components: {
 
+        CommonPie,
 
+        VersionsPie,
 
+        SchoolPie,
 
+        CommonLine,
 
+        DoublePie,
 
+        PiegangedBar,
 
+        SizePie,
 
+        Test,
 
+    },
 
+    setup() {
 
+        let aspectsData = ref([
 
+            { id: 1, title: '区内学校', num: 0, icon: '#icon-renshixuexiao', classname: 'school' },
 
+            { id: 2, title: '区内老师', num: 0, icon: '#icon-laoshi', classname: 'teach' },
 
+            { id: 3, title: '本周数据', num: 0, icon: '#icon-benzhou', classname: 'months' },
 
+            { id: 4, title: '产出总数据', num: 0, icon: '#icon-ziyuan1', classname: 'datas' },
 
+            { id: 5, title: '空间总容量', num: 0, icon: '#icon-kongjian', classname: 'size' },
 
+        ])
 
+        let activityData = ref([
 
+            { id: 1, title: '本周课例数', num: 15, type: 'month' },
 
+            { id: 2, title: '学期课例数', num: 75, type: 'month' },
 
+            { id: 3, title: '本周活动数', num: 35, type: 'month' },
 
+            { id: 4, title: '学期活动数', num: 475, type: 'month' },
 
+            { id: 5, title: '累计课例', num: 9805, type: 'total' },
 
+            { id: 6, title: '优质课例', num: 9875, type: 'total' },
 
+            { id: 7, title: '累计资源', num: 1355, type: 'total' },
 
+            { id: 8, title: '累计活动', num: 705, type: 'total' },
 
+        ])
 
+        let eachSchool = ref({
 
+            color: ['#f53b57', '#0fbcf9', '#0be881', '#575fcf', '#ffd32a'],
 
+            data: [
 
+                { id: 1, title: '实验附小', value: 1340 },
 
+                { id: 2, title: '师大附中', value: 800 },
 
+                { id: 3, title: '成都锦江区外国语小学', value: 340 },
 
+            ],
 
+            type: 'eachschool',
 
+        })
 
+        return { aspectsData, activityData, eachSchool }
 
+    },
 
+}
 
+</script>
 
+<style scoped>
 
+.statisticsbox {
 
+    width: 100%;
 
+    height: 100%;
 
+    padding: 0% 1%;
 
+    line-height: 20px;
 
+}
 
+.top-resource {
 
+    width: 100%;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    margin-top: 10px;
 
+    padding-right: 10px;
 
+    flex-wrap: wrap;
 
+    justify-content: space-between;
 
+}
 
+.top-aspects {
 
+    width: 17%;
 
+    height: 110px;
 
+    position: relative;
 
+    border-radius: 2px;
 
+    overflow: hidden;
 
+}
 
+.left-top-icon {
 
+    float: left;
 
+    height: 100%;
 
+    display: table;
 
+    text-align: center;
 
+    background: rgb(45, 140, 240);
 
+    width: 36%;
 
+    position: relative;
 
+}
 
+.right-top-text {
 
+    width: 64%;
 
+    background: #fff;
 
+    float: left;
 
+    height: 100%;
 
+    display: table;
 
+    text-align: center;
 
+    position: relative;
 
+}
 
+.top-header-icon {
 
+    width: 45px;
 
+    height: 45px;
 
+    fill: currentColor;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+}
 
+.right-top-num {
 
+    position: absolute;
 
+    font-size: 48px;
 
+    top: 30%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    color: #515a6e;
 
+}
 
+.right-top-title {
 
+    position: absolute;
 
+    font-size: 16px;
 
+    bottom: 0%;
 
+    left: 50%;
 
+    transform: translate(-50%, 0%);
 
+    color: #2c3e50;
 
+}
 
+.leftbox {
 
+    width: 48%;
 
+    height: 100%;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    background-color: #fff;
 
+    margin-top: 2%;
 
+    padding: 15px;
 
+    position: relative;
 
+    justify-content: space-between;
 
+}
 
+.rightbox {
 
+    width: 50%;
 
+    height: 100%;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    background-color: #fff;
 
+    margin-top: 2%;
 
+    padding: 23px;
 
+    position: relative;
 
+}
 
+.alonebox {
 
+    width: 19%;
 
+    padding: 7px;
 
+    text-align: left;
 
+    background-color: #95afc0;
 
+    border-radius: 5px;
 
+    margin: 2% 2.5%;
 
+}
 
+.totalalonebox {
 
+    width: 19%;
 
+    padding: 7px;
 
+    text-align: left;
 
+    background-color: #60a3bc;
 
+    border-radius: 5px;
 
+    margin: 1% 2.5%;
 
+}
 
+.alonebox-title {
 
+    font-size: 16px;
 
+    color: #535c68;
 
+    font-weight: 600;
 
+}
 
+.total-alonebox-title {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    color: #dff9fb;
 
+}
 
+.alonebox-content {
 
+    font-size: 26px;
 
+    color: #fff;
 
+    font-weight: 750;
 
+}
 
+.total-alonebox-content {
 
+    font-size: 26px;
 
+    color: #fff;
 
+    font-weight: 750;
 
+}
 
+.rightbox-pie {
 
+    width: 30%;
 
+    height: 205px;
 
+}
 
+.tagbox {
 
+    width: 100%;
 
+    height: 40px;
 
+    position: absolute;
 
+    top: 3px;
 
+    left: 1px;
 
+}
 
+.tags {
 
+    width: 100px;
 
+    height: 22px;
 
+    background: rgb(256 169 100) no-repeat center;
 
+    background-size: contain;
 
+    font-size: 12px;
 
+    font-weight: 400;
 
+    color: #ffffff;
 
+    text-align: center;
 
+    position: relative;
 
+    display: block;
 
+}
 
+.tags:after {
 
+    border: 12px solid #fff;
 
+    content: '';
 
+    border-top-color: transparent;
 
+    border-left-color: transparent;
 
+    border-bottom-color: transparent;
 
+    width: 0px;
 
+    height: 0px;
 
+    position: absolute;
 
+    left: calc(118px - 40px);
 
+    top: 0px;
 
+}
 
+.center-resource {
 
+    display: flex;
 
+    width: 100%;
 
+    margin-top: 2%;
 
+}
 
+.center-resource-left {
 
+    width: 30%;
 
+    height: 300px;
 
+    position: relative;
 
+    background: #fff;
 
+    padding: 20px 10px;
 
+}
 
+.center-resource-right {
 
+    width: 67.5%;
 
+    margin-left: 2%;
 
+    height: 300px;
 
+    position: relative;
 
+    background: #fff;
 
+    padding: 25px 10px;
 
+}
 
+.versions {
 
+    width: 35% !important;
 
+}
 
+.bottom-resource {
 
+    width: 100%;
 
+    margin-top: 0px;
 
+    padding: 30px 0px;
 
+    display: flex;
 
+    flex-direction: row;
 
+    justify-content: flex-start;
 
+    position: relative;
 
+}
 
+.bottom-leftbox {
 
+    width: 40%;
 
+    padding: 1%;
 
+    height: 200px;
 
+    background: #fff;
 
+    position: relative;
 
+}
 
+.bottom-rightbox {
 
+    width: 57.5%;
 
+    height: 200px;
 
+    background-color: #fff;
 
+    display: flex;
 
+    justify-content: center;
 
+    position: relative;
 
+    margin-left: 2%;
 
+}
 
+.bottom-rightbox-left {
 
+    width: 30%;
 
+    height: 100%;
 
+    margin-left: 10%;
 
+}
 
+.bottom-rightbox-right {
 
+    width: 60%;
 
+    height: 100%;
 
+}
 
+.school,
 
+.basics {
 
+    background: rgb(45, 140, 240);
 
+}
 
+.teach,
 
+.types {
 
+    background: #2ecc71 !important;
 
+}
 
+.datas,
 
+.source {
 
+    background: #f1c40f !important;
 
+}
 
+.size,
 
+.interspace {
 
+    background: #7ed6df !important;
 
+}
 
+.months,
 
+.dynamic {
 
+    background: #ef5777 !important;
 
+}
 
+</style>

+ 6 - 0
TEAMModelBI/ClientApp/src/view/index/dashboard.vue
Просмотреть файл 

@@ -91,6 +91,7 @@ import '../../until/china'
 
 import { getCurrentInstance, ref, onMounted } from 'vue'
 
 import { getCurrentInstance, ref, onMounted } from 'vue'
 
 import { useStore } from 'vuex'
 
 import { useStore } from 'vuex'
 
 import router from '@/router/index.js'
 
 import router from '@/router/index.js'
 
+import { useRouter } from 'vue-router'
 
 import { ElMessage } from 'element-plus'
 
 import { ElMessage } from 'element-plus'
 
 export default {
 
 export default {
 
     components: {
 
     components: {
 
@@ -106,6 +107,7 @@ export default {
 
     setup() {
 
     setup() {
 
         let { proxy } = getCurrentInstance()
 
         let { proxy } = getCurrentInstance()
 
         const store = useStore()
 
         const store = useStore()
 
+        const routers = useRouter()
 
         //各城市学校数量排名基础数据
 
         //各城市学校数量排名基础数据
 
         let barData = ref({
 
         let barData = ref({
 
             xAxis: [],
 
             xAxis: [],
 
@@ -163,6 +165,10 @@ export default {
 
                 // console.log(isFull, '全屏值')
 
                 // console.log(isFull, '全屏值')
 
                 var explorer = window.navigator.userAgent.toLowerCase()
 
                 var explorer = window.navigator.userAgent.toLowerCase()
 
                 console.log(explorer, '全屏的值')
 
                 console.log(explorer, '全屏的值')
 
+                console.log(routers.currentRoute.value.path, '当前的路由')
 
+                if (routers.currentRoute.value.path.indexOf('/home/index') === -1) {
 
+                    return
 
+                }
 
                 if (explorer.indexOf('chrome') > 0) {
 
                 if (explorer.indexOf('chrome') > 0) {
 
                     //webkit
 
                     //webkit
 
                     if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
 
                     if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {