瀏覽代碼

修改首页最新版,未调接口

“yueshang” 1 年之前
父節點
當前提交
a4eda70736
共有 3 個文件被更改,包括 134 次插入4 次删除
  1. 16 0
      src/api/system/index.js
  2. 95 0
      src/views/dashboard/twinChart.vue
  3. 23 4
      src/views/index.vue

+ 16 - 0
src/api/system/index.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+// 查询部门列表
+export function indexTop(query) {
+    return request({
+      url: '/index/top',
+      method: 'get',
+      params: query
+    })
+  }
+export function indexInfo(query) {
+    return request({
+      url: '/index/info',
+      method: 'get',
+      params: query
+    })
+ }

+ 95 - 0
src/views/dashboard/twinChart.vue

@@ -0,0 +1,95 @@
+智能箱 AI生成的内容如下:
+<template>
+  <div>
+    <div ref="chart" style="width: 100%; height: 600px; margin: 20px"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import resize from "./mixins/resize";
+
+export default {
+  mixins: [resize],
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+    clearInterval(this.timeOut);
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      const data = [
+        { bluetooth: 12, name: "高新体育中心", wifi: 2 },
+        { bluetooth: 23, name: "高新体育中心", wifi: 23 },
+        { bluetooth: 0, name: "高新体育中心", wifi: 23 },
+        { bluetooth: 4, name: "高新体育中心", wifi: 0 }
+      ];
+
+      const xAxisData = data.map(item => item.name);
+      const bluetoothData = data.map(item => item.bluetooth);
+      const wifiData = data.map(item => item.wifi);
+
+      this.option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['bluetooth', 'wifi']
+        },
+        grid: {
+          top: '10%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            data: xAxisData
+          }
+        ],
+        series: [
+          {
+            name: 'bluetooth',
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              borderRadius: [0, 10, 10, 0]
+            },
+            data: bluetoothData
+          },
+          {
+            name: 'wifi',
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              borderRadius: [0, 10, 10, 0]
+            },
+            data: wifiData
+          }
+        ]
+      };
+
+      this.chart.setOption(this.option);
+    }
+  }
+};
+</script>

+ 23 - 4
src/views/index.vue

@@ -35,26 +35,45 @@
         <div class="chart-wrapper cont-left">
           <store-chart />
         </div>
-        <div class="cont-right">sdf</div>
+        <div class="cont-right">
+          <twin-chart />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { indexTop,indexInfo} from "@/api/system/index";
 import storeChart from "./dashboard/storeChart";
+import twinChart from "./dashboard/twinChart";
 export default {
   name: "Dict",
   components: {
     storeChart,
+    twinChart
   },
   data() {
     return {
       data: "sdff",
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.getInfoTop()
+    this.getInfo()
+  },
+  methods: {
+    getInfoTop(){
+      indexTop().then((response) => {
+           console.log('response', response)
+      });
+    },
+    getInfo(){//头部
+      indexInfo().then((response) => {
+           console.log('responsesss', response)
+      });
+    }
+  },
 };
 </script>
 
@@ -163,7 +182,7 @@ export default {
     margin-right: 24px;
   }
   .cont-right {
-    width: 384px;
+    width: 550px;
   }
   .cont-left,
   .cont-right {