修改首页

src/views/dashboard/storeChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="chart" style="width: 100%; height: 600px;margin: 20px;"></div>
+    <div ref="chart" style="width: 100%; height: 650px;margin: 20px;"></div>
   </div>
 </template>
 

src/views/dashboard/twinChart.vue

@@ -1,7 +1,8 @@
-智能箱 AI生成的内容如下：
+
 <template>
   <div>
-    <div ref="chart" style="width: 100%; height: 600px; margin: 20px"></div>
+    <!-- ${wheight}px -->
+    <div ref="chart" :style="`width: 100%; height:600px; margin: 20px`"></div>
   </div>
 </template>
 
@@ -11,10 +12,28 @@ import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
+  props: {
+    rightData: {
+      type: Array,
+      default: () => [],
+    },
+    wheight: {
+      type: Number,
+      default: 600,
+    },
+  },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart();
+    this.$watch("rightData", () => {
+      this.$nextTick(() => {
+        this.initChart();
+      });
+    });
+    this.$watch("wheight", () => {
+      this.$nextTick(() => {
+        this.initChart();
+      });
     });
+    
   },
   beforeDestroy() {
     if (this.chart) {
@@ -25,71 +44,154 @@ export default {
   },
   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 colors = [
+        {
+          borderColor: "rgba(2, 201, 254, 1)",
+          start: "rgba(2, 201, 254, 0.8)",
+          end: "rgba(17, 107, 243, 0.3)",
+        },
+        {
+          borderColor: "rgba(0, 222, 255, 1)",
+          start: "rgba(205, 178, 73, 0.3)",
+          end: "rgba(252, 205, 20, 0.8)",
+        },
       ];
-
-      const xAxisData = data.map(item => item.name);
-      const bluetoothData = data.map(item => item.bluetooth);
-      const wifiData = data.map(item => item.wifi);
-
+      // 初始化图表，并绑定在之前创建的div元素上
+      this.chart = echarts.init(this.$refs.chart);
+      //   const data = [{ bluetooth: 32, name: "高新体育中心", wifi: 23 },{ bluetooth: 12, name: "高新体育中心", wifi: 33 },{ bluetooth: 8, name: "高新体育中心", wifi: 3 },];
+      // 提取x轴数据和蓝牙、wifi数据
+      const xAxisData = this.rightData.map((item) => item.name);
+      const bluetoothData = this.rightData.map((item) => item.bluetooth);
+      const wifiData = this.rightData.map((item) => item.wifi);
+      // 设置图表的配置项
       this.option = {
+        title: {
+          //标题
+          show: true,
+          text: "接入点数TOP10",
+          textStyle: {
+            color: "#000",
+            fontSize: 18,
+          },
+        },
         tooltip: {
-          trigger: 'axis',
+          // 提示框的触发类型
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
-          }
+            // 指示器类型
+            type: "shadow",
+          },
         },
         legend: {
-          data: ['bluetooth', 'wifi']
+          //图例数据
+          data: ["蓝牙", "WIFI"],
+          top: "0%", //图例组件离容器上侧的距离。
+          right: "5%", //图例组件离容器右侧的距离
+          itemWidth: 12, //图例标记的图形宽度。
+          itemHeight: 12, //图例标记的图形高度
+          icon: "horizontal", //水平线段,图例标记以水平方向进行排列  "circle"：原型圆形
+          textStyle: {
+            color: "#409EFF",
+            fontSize: 14,
+          },
         },
         grid: {
-          top: '10%',
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          // 图表布局
+          top: "10%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          }
+            show: false,
+            // type: "value",
+            // boundaryGap: [0, 0.01], //横坐标上相邻数据点的差距
+          },
         ],
         yAxis: [
           {
-            type: 'category',
-            data: xAxisData
-          }
+            // type: "category",
+            data: xAxisData,
+            axisTick: {
+              show: false, // 隐藏刻度线
+            },
+            axisLine: {
+              show: false, // 隐藏坐标轴线
+            },
+            // axisLabel: {
+            //   show: false, // 隐藏刻度标签
+            // },
+          },
         ],
         series: [
           {
-            name: 'bluetooth',
-            type: 'bar',
+            name: "蓝牙",
+            type: "bar",
             barWidth: 20,
             itemStyle: {
-              borderRadius: [0, 10, 10, 0]
+              normal: {
+                // 柱状图样式
+                borderRadius: [0, 10, 10, 0],
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: colors[1].start,
+                  },
+                  {
+                    offset: 1,
+                    color: colors[1].end,
+                  },
+                ]),
+              },
+            },
+            // itemStyle: {
+            // borderRadius: [0, 10, 10, 0],
+            // },
+            label: {
+              show: true, // 显示柱状图数据标签
+              position: "inside", // 数据标签显示在柱状图内部
+              align: "center", // 数据标签居中对齐
             },
-            data: bluetoothData
+            data: bluetoothData,
           },
           {
-            name: 'wifi',
-            type: 'bar',
+            name: "WIFI",
+            type: "bar",
             barWidth: 20,
             itemStyle: {
-              borderRadius: [0, 10, 10, 0]
+              //图形样式。
+              normal: {
+                //指定默认的样式设置。
+                borderRadius: [0, 10, 10, 0],
+                //柱条的颜色  通过new echarts.graphic.LinearGradient()创建了一个线性渐变的颜色对象
+                // 0, 0, 1, 0：表示线性渐变的方向，具体为从左到右进行渐变
+                // offset：表示渐变的位置(范围为0-1)，其中0表示起始位置，1表示结束位置。
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: colors[0].start,
+                  },
+                  {
+                    offset: 1,
+                    color: colors[0].end,
+                  },
+                ]),
+              },
             },
-            data: wifiData
-          }
-        ]
+            label: {
+              show: true, // 显示柱状图数据标签
+              position: "inside", // 数据标签显示在柱状图内部
+              align: "center", // 数据标签居中对齐
+            },
+            data: wifiData,
+          },
+        ],
       };
 
       this.chart.setOption(this.option);
-    }
-  }
+    },
+  },
 };
 </script>

src/views/index.vue

@@ -6,37 +6,40 @@
           <img src="../assets/images/nav-one.png" alt="" />
           <div>
             <div class="nav-title">设备数量</div>
-            <div class="nav-count">23</div>
+            <div class="nav-count">{{ topData.deviceNO }}</div>
           </div>
         </div>
         <div class="nav-two">
           <img src="../assets/images/nav-two.png" alt="" />
           <div>
             <div class="nav-title">WIFI数量</div>
-            <div class="nav-count">23</div>
+            <div class="nav-count">{{ topData.wifiNO }}</div>
           </div>
         </div>
         <div class="nav-three">
           <img src="../assets/images/nav-three.png" alt="" />
           <div>
             <div class="nav-title">蓝牙数量</div>
-            <div class="nav-count">23</div>
+            <div class="nav-count">{{ topData.bluetoothNO }}</div>
           </div>
         </div>
         <div class="nav-four">
           <img src="../assets/images/nav-four.png" alt="" />
           <div>
             <div class="nav-title">场管数量</div>
-            <div class="nav-count">23</div>
+            <div class="nav-count">{{ topData.venueNO }}</div>
           </div>
         </div>
       </div>
-      <div class="contbody">
-        <div class="chart-wrapper cont-left">
-          <store-chart />
+      <div class="contbody" id="contbody">
+        <div class="cont-left">
+          <img src="../assets/images/ditu.png" alt=""  style="width: 100%;height:690px;">
         </div>
+        <!-- <div class="chart-wrapper cont-left">
+          <store-chart />
+        </div> -->
         <div class="cont-right">
-          <twin-chart />
+          <twin-chart :rightData="rightData" :wheight="wheight"/>
         </div>
       </div>
     </div>
@@ -56,21 +59,27 @@ export default {
   data() {
     return {
       data: "sdff",
+      topData:{},
+      rightData:[],
+      wheight:0
     };
   },
   created() {
-    this.getInfoTop()
+    this.$nextTick(()=>{
+    this.wheight=document.getElementById('contbody').clientHeight
+    })
+    this.getList()
     this.getInfo()
   },
   methods: {
-    getInfoTop(){
+    getList(){
       indexTop().then((response) => {
-           console.log('response', response)
+        this.rightData=response
       });
     },
     getInfo(){//头部
       indexInfo().then((response) => {
-           console.log('responsesss', response)
+        this.topData=response
       });
     }
   },
@@ -184,10 +193,5 @@ export default {
   .cont-right {
     width: 550px;
   }
-  .cont-left,
-  .cont-right {
-    background: #fff;
-    border-radius: 16px;
-  }
 }
 </style>

vue.config.js

@@ -36,6 +36,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target:`http://8.142.173.95:19527`,
+        // target:`http://192.168.1.21:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''