完善数据监控echarts统计

.env.development

@@ -12,7 +12,7 @@ VITE_GLOB_PUBLIC_PATH = /
 
 # 线上演示环境
 VITE_PROXY = [["/api","http://117.174.10.73:19200"],["/agent","http://117.174.10.73:31895"],["/iserver","http://221.182.8.141:15000/iserver"],["/onlineIde","http://106.12.170.138:4001/examples"],["/tfDemo","http://106.12.170.138:4001/demo"]]
-                                                              
+# VITE_PROXY = [["/api","http://192.168.119.143:9200"],["/agent","http://192.168.119.143:31895"],["/iserver","http://221.182.8.141:15000/iserver"],["/onlineIde","http://106.12.170.138:4001/examples"],["/tfDemo","http://106.12.170.138:4001/demo"]]                                                            
 # 线上测试环境
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","http://localhost:3000/"],["/large-designer", "http://localhost:5555/large-designer/"]]

.env.production

@@ -25,8 +25,11 @@ VITE_GLOB_BUILD_COMPRESS = ''
 VITE_GLOB_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=http://117.174.10.73:19200
-VITE_GLOB_API_URL2=http://117.174.10.73:31895
+# VITE_GLOB_API_URL=http://192.168.119.143:19200
+# VITE_GLOB_API_URL2=http://117.174.10.73:31895
+
+VITE_GLOB_API_URL=http://192.168.119.143:9200
+VITE_GLOB_API_URL2=http://192.168.119.143:31895
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly

src/main.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2023-08-15 11:20:48
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2023-09-14 09:46:41
+ * @FilePath: \xld-gis-admin\src\main.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import '/@/design/index.less';
 // Register windi
 import 'virtual:windi.css';
@@ -18,6 +26,7 @@ import { usePlatform } from './views/system/customize/hook/usePlatformInfo';
 import { useWebSecurityPolicy } from './hooks/web/useWebSecurityPolicy';
 import 'core-js/es/array/at';
 import eventBus from './utils/eventBus';
+import * as echarts from 'echarts';
 window.eventBus = eventBus;
 
 if (import.meta.env.DEV) {
@@ -27,6 +36,7 @@ async function bootstrap() {
   useWebSecurityPolicy();
 
   const app = createApp(App);
+  app.config.globalProperties.$echarts = echarts;
   // Configure store
   setupStore(app);
 

src/views/dashboard/workbench/component/InterfaceEveryday.vue

@@ -0,0 +1,221 @@
+
+<template>
+  <div class="spatial-analysis-statistic">
+    <div class="title">{{ title }}</div>
+    <div class="echart-container" id="defect-column" ref="domRef"></div>
+  </div>
+</template>
+    
+  <script>
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  ref,
+  watch,
+  getCurrentInstance,
+  shallowRef,
+} from 'vue';
+import moment from 'moment';
+
+const props = {
+  type: {
+    type: Object,
+  },
+};
+
+export default defineComponent({
+  name: 'InterfaceEveryday',
+  components: {},
+  props,
+  setup(props) {
+    const data = reactive({
+      title: '每日接口调用次数',
+    });
+    const domRef = ref(null);
+    const { proxy } = getCurrentInstance();
+    const echarts = proxy.$echarts;
+    const mychart = shallowRef(null);
+
+    /**
+     * 查询统计数据
+     */
+    const queryData = async () => {
+      setEcharts();
+    };
+
+    const setEcharts = () => {
+      if (mychart.value) mychart.value.clear();
+      mychart.value = echarts.init(domRef.value);
+      const option = getOption();
+      mychart.value.setOption(option);
+      window.onresize = () => {
+        mychart.value.resize();
+      };
+    };
+
+    const getOption = () => {
+      const seriesData = [60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220];
+      const maxValue = Math.max.apply(null, seriesData);
+      const xAxisData = [
+        '09/01',
+        '09/02',
+        '09/03',
+        '09/04',
+        '09/05',
+        '09/06',
+        '09/07',
+        '09/08',
+        '09/09',
+        '09/10',
+        '09/11',
+        '09/12',
+      ];
+      const colorList = [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(6,113,221,1)', // 0% 处的颜色
+            },
+            {
+              offset: 0.5,
+              color: 'rgba(6,113,221,0.9)', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(6,113,221,0)', // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(237,172,75,1)', // 0% 处的颜色
+            },
+            {
+              offset: 0.5,
+              color: 'rgba(237,172,75,0.9)', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(237,172,75,0.2)', // 100% 处的颜色   'rgba(6,113,221,0.2)'
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      ];
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',  // 'shadow',
+          },
+          formatter: (params) => {
+            const names = params[0].name.split('/')
+            const nameLable = `${parseInt(names[0])}月${parseInt(names[1])}`
+            return nameLable + ': ' + params[0].value+'次';
+          },
+        },
+        grid: {
+          top: '10%',
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            data: xAxisData,
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              color: '#000',
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(222, 222, 222, 1)',
+              },
+            },
+          },
+        ],
+        yAxis: {
+          splitLine: { show: false },
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { show: true },
+        },
+        series: [
+          {
+            name: '调用次数',
+            type: 'bar',
+            barWidth: '60%',
+            data: [60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220],
+            itemStyle: {
+              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
+              normal: {
+                // 柱形图圆角，初始化效果
+                barBorderRadius: [15, 15, 0, 0],
+                color: (params) => {
+                  let color = colorList[0];
+                  if (params.data === maxValue) color = colorList[1];
+                  return color;
+                },
+              },
+            },
+            barGap: '0%',
+          },
+        ],
+      };
+    };
+
+    onMounted(() => {
+      queryData();
+    });
+
+    return {
+      domRef,
+      mychart,
+      ...toRefs(data),
+      queryData,
+      setEcharts,
+      getOption,
+    };
+  },
+});
+</script>
+    <style lang="less" scoped>
+.spatial-analysis-statistic {
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  .title {
+    height: 1.2rem;
+    font-family: Source Han Sans CN;
+    font-size: 1.012rem;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #3d3d3d;
+    margin-bottom: 1.2rem;
+  }
+  .echart-container {
+    height: calc(100% - 2.4rem);
+    width: 100%;
+  }
+}
+</style>

src/views/dashboard/workbench/component/InterfaceMonth.vue

@@ -0,0 +1,242 @@
+
+<template>
+  <div class="spatial-analysis-statistic">
+    <div class="title">{{ title }}</div>
+    <div class="echart-container" id="defect-column" ref="domRef"></div>
+  </div>
+</template>
+    
+  <script>
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  ref,
+  watch,
+  getCurrentInstance,
+  shallowRef,
+} from 'vue';
+import moment from 'moment';
+
+const props = {
+  type: {
+    type: Object,
+  },
+};
+
+export default defineComponent({
+  name: 'InterfaceMonth',
+  components: {},
+  props,
+  setup(props) {
+    const data = reactive({
+      title: '月度接口访问次数',
+    });
+    const domRef = ref(null);
+    const { proxy } = getCurrentInstance();
+    const echarts = proxy.$echarts;
+    const mychart = shallowRef(null);
+
+    /**
+     * 查询统计数据
+     */
+    const queryData = async () => {
+      setEcharts();
+    };
+
+    const setEcharts = () => {
+      if (mychart.value) mychart.value.clear();
+      mychart.value = echarts.init(domRef.value);
+      const option = getOption();
+      mychart.value.setOption(option);
+      window.onresize = () => {
+        mychart.value.resize();
+      };
+    };
+
+    const getOption = () => {
+      const seriesData = [123, 60, 25, 28, 42, 39, 20, 40, 123, 60, 25, 28];
+      const maxValue = Math.max.apply(null, seriesData);
+      const xAxisData = [
+        '01月',
+        '02月',
+        '03月',
+        '04月',
+        '05月',
+        '06月',
+        '07月',
+        '08月',
+        '09月',
+        '10月',
+        '11月',
+        '12月',
+      ];
+      const colorList = [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(6,113,221,1)', // 0% 处的颜色
+            },
+            {
+              offset: 0.5,
+              color: 'rgba(6,113,221,0.9)', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(6,113,221,0)', // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(237,172,75,1)', // 0% 处的颜色
+            },
+            {
+              offset: 0.5,
+              color: 'rgba(237,172,75,0.9)', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(237,172,75,0.2)', // 100% 处的颜色   'rgba(6,113,221,0.2)'
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      ];
+      let seriesSymboleData = [];
+      seriesData.map((item) => {
+        seriesSymboleData.push({
+          value: item,
+          symbol: 'rect',
+          symbolSize: ['100%', 4],
+          itemStyle:{
+            color:item < maxValue ? 'rgba(6,113,221,1)' :  'rgba(237,172,75,1)',
+          },
+        });
+      });
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+          },
+          formatter: function (params) {
+            return params[0].name + ': ' + params[0].value;
+          },
+        },
+        xAxis: {
+          data: xAxisData,
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: {
+            color: '#000',
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(222, 222, 222, 1)'
+            },
+          },
+        },
+        yAxis: {
+          splitLine: { show: false },
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { show: true },
+        },
+        grid: {
+          //极坐标
+          top: '10%',
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true,
+        },
+       
+        series: [
+          {
+            name: 'hill',
+            type: 'pictorialBar',
+            barCategoryGap: '60%',
+            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+            symbol: 'rect',
+            itemStyle: {
+              opacity: 1,
+              color: (params) => {
+                let color = colorList[0];
+                if (params.data === maxValue) color = colorList[1];
+                return color;
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                opacity: 1,
+              },
+            },
+            data: seriesData,
+            z: 10,
+          },
+          {
+            name: 'glyph',
+            type: 'pictorialBar',
+            barGap: '-100%',
+            symbolPosition: 'end',
+            //symbolSize: 50,
+            symbolOffset: [0, '-160%'],
+            data: seriesSymboleData,
+          },
+        ],
+      };
+    };
+
+    onMounted(() => {
+      queryData();
+    });
+
+    return {
+      domRef,
+      mychart,
+      ...toRefs(data),
+      queryData,
+      setEcharts,
+      getOption,
+    };
+  },
+});
+</script>
+    <style lang="less" scoped>
+.spatial-analysis-statistic {
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  .title {
+    height: 1.2rem;
+    font-family: Source Han Sans CN;
+    font-size: 1.012rem;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #3d3d3d;
+    margin-bottom: 1.2rem;
+  }
+  .echart-container {
+    height: calc(100% - 2.4rem);
+    width: 100%;
+  }
+}
+</style>

src/views/dashboard/workbench/component/ResTypeStatistic.vue

@@ -0,0 +1,184 @@
+
+<template>
+  <div class="spatial-analysis-statistic">
+    <div class="title">{{ title }}</div>
+    <div class="echart-container" id="defect-column" ref="domRef"></div>
+  </div>
+</template>
+    
+  <script>
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  ref,
+  watch,
+  getCurrentInstance,
+  shallowRef,
+} from 'vue';
+import moment from 'moment';
+
+const props = {
+  type: {
+    type: Object,
+  },
+};
+
+export default defineComponent({
+  name: 'ResTypeStatistic',
+  components: {},
+  props,
+  setup(props) {
+    const data = reactive({
+      title: '数据资源分类统计',
+    });
+    const domRef = ref(null);
+    const { proxy } = getCurrentInstance();
+    const echarts = proxy.$echarts;
+    const mychart = shallowRef(null);
+
+    /**
+     * 查询统计数据
+     */
+    const queryData = async () => {
+      setEcharts();
+    };
+
+    const setEcharts = () => {
+      if (mychart.value) mychart.value.clear();
+      mychart.value = echarts.init(domRef.value);
+      const option = getOption();
+      mychart.value.setOption(option);
+      window.onresize = () => {
+        mychart.value.resize();
+      };
+    };
+
+    const getOption = () => {
+      const seriesData = [
+        { value: 1048, name: '地图资源' },
+        { value: 735, name: '文件资源' },
+        { value: 580, name: '数据库资源' },
+        { value: 484, name: '工具资源' },
+        { value: 300, name: '接口资源' },
+      ];
+      let sumValue = 0
+      seriesData.map(item=>{
+        sumValue += item.value 
+      })
+      return {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          right: '10%',
+          top: 'center',
+          orient: 'vertical', //图例竖直排列
+          itemGap: 20, //图例间距，vertical时行间距，horizontal：水平间距
+          itemWidth: 14,
+          itemHeight: 14,
+          formatter: (param) => {
+            let label = '';
+            const obj = seriesData.find((item) => item.name === param);
+            if (obj) {
+              if (param === '数据库资源') label = `${obj.name}   ${obj.value}`;
+              else label = `${obj.name}      ${obj.value}`;
+            } else label = param;
+            return label;
+          },
+          textStyle: {
+            color: '#000',
+            fontSize: 14,
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['60%', '90%'],
+            left: '-40%',
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: '#fff',
+              borderWidth: 6,
+            },
+            // label: {
+            //   show: true,
+            //   position: 'center',
+            // },
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                formatter: () => {
+                  return `{a|${sumValue}}\n\n{b|资源总数}`;
+                },
+                rich: {
+                  a: {
+                    color: '#333333',
+                    fontSize: 24,
+                    fontWeight: 900,
+                  },
+                  b: {
+                    fontSize: 16,
+                    fontWeight: 700,
+                    color: '#999999',
+                  },
+                },
+              },
+            },
+
+            // emphasis: {
+            //   label: {
+            //     show: true,
+            //     fontSize: 16,
+            //     fontWeight: 'bold',
+            //   },
+            // },
+            labelLine: {
+              show: false,
+            },
+            data: seriesData,
+          },
+        ],
+      };
+    };
+
+    onMounted(() => {
+      queryData();
+    });
+
+    return {
+      domRef,
+      mychart,
+      ...toRefs(data),
+      queryData,
+      setEcharts,
+      getOption,
+    };
+  },
+});
+</script>
+    <style lang="less" scoped>
+.spatial-analysis-statistic {
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  .title {
+    height: 1.2rem;
+    font-family: Source Han Sans CN;
+    font-size: 1.012rem;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #3d3d3d;
+    margin-bottom: 1.2rem;
+  }
+  .echart-container {
+    height: calc(100% - 2.4rem);
+    width: 100%;
+  }
+}
+</style>

src/views/dashboard/workbench/component/UnstructuredStatistic.vue

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-09-13 10:06:22
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-09-13 22:55:50
+ * @LastEditTime: 2023-09-13 22:59:32
  * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\component\TopCardStatistic.vue
  * @Description: 统计卡片
 -->

src/views/dashboard/workbench/index.vue

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-08-15 11:20:48
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-09-13 14:22:46
+ * @LastEditTime: 2023-09-14 11:49:35
  * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\index.vue
  * @Description: 数据监控
 -->
@@ -18,17 +18,23 @@
       <div class="right-statistic">
         <div class="item-statistic" style="padding-right:1rem;padding-bottom: 1rem;">
           <div class="item">
-            
+            <spatial-annlysis/>
           </div>
         </div>
         <div class="item-statistic" style="padding-bottom: 1rem;">
-          <div class="item"></div>
+          <div class="item">
+            <interface-everyday/>
+          </div>
         </div>
         <div class="item-statistic" style="padding-right:1rem;">
-          <div class="item"></div>
+          <div class="item">
+            <interface-month />
+          </div>
         </div>
         <div class="item-statistic">
-          <div class="item"></div>
+          <div class="item">
+            <res-type-statistic/>
+          </div>
         </div>
       </div>
     </div>
@@ -41,9 +47,13 @@ import { getAuthCache } from '/@/utils/auth';
 import Moment from 'moment';
 import TopCardStatistic from './component/TopCardStatistic.vue';
 import UnstructuredStatistic from './component/UnstructuredStatistic.vue';
+import SpatialAnnlysis from './component/SpatialAnnlysis.vue';
+import InterfaceEveryday from './component/InterfaceEveryday.vue';
+import InterfaceMonth from './component/InterfaceMonth.vue';
+import ResTypeStatistic from './component/ResTypeStatistic.vue';
 export default defineComponent({
   name: 'dataMonitor',
-  components: { TopCardStatistic,UnstructuredStatistic },
+  components: { TopCardStatistic, UnstructuredStatistic, SpatialAnnlysis,InterfaceEveryday,InterfaceMonth,ResTypeStatistic },
   setup() {
     const userInfo: any = getAuthCache(USER_INFO_KEY);
     const role: string = userInfo?.roles[0];