Iot接口联调

src/components/ColorDiv.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="color-div">
+    <div
+      v-for="(item, index) in data"
+      :key="index"
+      :style="{ width: item.numRatio }"
+      class="small-div"
+    >
+      <div
+        :style="{
+          borderBottomColor: colorData[index % data.length],
+          opacity: index != 0 ? 1 : 0
+        }"
+        class="left-border-item"
+      ></div>
+      <div
+        :style="{
+          background: colorData[index % data.length],
+        }"
+        class="color-item"
+      ></div>
+      <div
+        :style="{
+          borderTopColor: colorData[index % data.length],
+          opacity: index != data.length - 1 ? 1 : 0
+        }"
+        class="border-item"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * data数组类型
+   * Array<{
+   *  numRatio: 小div块比例
+   * }>
+   */
+  data: {
+    type: Array,
+    required: true,
+  },
+  colorData: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss">
+.color-div {
+  height: 8px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  .small-div {
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    .color-item {
+      box-sizing: border-box;
+      width: calc(100% - 16px);
+      height: 100%;
+    }
+    .border-item {
+      box-sizing: border-box;
+      border-right: 8px solid transparent;
+      border-top: 8px solid;
+    }
+    .left-border-item {
+      box-sizing: border-box;
+      border-left: 8px solid transparent;
+      border-bottom: 8px solid;
+    }
+  }
+}
+</style>

src/service/iotService.js

@@ -0,0 +1,37 @@
+import { requestGet, requestPost } from "./index.js";
+
+//基本信息
+export function QueryBasicsInfo() {
+  return requestGet({
+    url: "/iot/basics",
+  });
+}
+
+//iot列表（树）
+export function QueryIotListTree(){
+  return requestGet({
+    url: '/iot/list/tree'
+  })
+}
+
+//设备类型/设备分布
+export function QueryListEquipment(){
+  return requestGet({
+    url: '/iot/list/equipment'
+  })
+}
+
+//获取消息趋势
+export function QueryTrendsmsg() {
+  return requestGet({
+    url: '/iot/trends/msg'
+  })
+}
+
+//获取在线趋势
+export function QueryTrendsOnline() {
+  return requestGet({
+    url: '/iot/trends/online'
+  })
+}
+

src/views/IOTDataAnalysis/components/IOTLIstDialog.vue

@@ -9,8 +9,9 @@
         show-checkbox
         check-strictly
         node-key="id"
-        :default-expand-all="true"
+        :default-expand-all="false"
         :renderContent="renderContent"
+        :props="defaultPropsValue"
       >
       </el-tree>
     </div>
@@ -19,94 +20,45 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { QueryBasicsInfo, QueryIotListTree } from "../../../service/iotService";
+
 const treeTabSecondRef = ref(null);
-const testData = [
-  {
-    id: 1,
-    label: "Level one 1",
-    children: [
-      {
-        id: 4,
-        label: "Level two 1-1",
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: "Level one 2",
-    children: [
-      {
-        id: 5,
-        label: "Level two 2-1",
-      },
-      {
-        id: 6,
-        label: "Level two 2-2",
-      },
-      {
-        id: 19,
-        label: "Level two 3-1",
-      },
-      {
-        id: 110,
-        label: "Level two 3-2",
-      },
-      {
-        id: 111,
-        label: "Level two 3-1",
-      },
-      {
-        id: 112,
-        label: "Level two 3-2",
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: "Level one 3",
-    children: [
-      {
-        id: 7,
-        label: "Level two 3-1",
-      },
-      {
-        id: 8,
-        label: "Level two 3-2",
-      },
-      {
-        id: 9,
-        label: "Level two 3-1",
-      },
-      {
-        id: 10,
-        label: "Level two 3-2",
-      },
-      {
-        id: 11,
-        label: "Level two 3-1",
-      },
-      {
-        id: 12,
-        label: "Level two 3-2",
-      },
-    ],
-  },
-];
+let treeDataTabSecond = ref([]);
+
+//获取iot列表树
+const getListTree = () => {
+  QueryIotListTree().then(res => {
+    debugger
+    if(res.data.code == '200'){
+      treeDataTabSecond.value = [res.data.data]
+    }
+  })
+}
+
+const defaultPropsValue = ref({
+  children: 'child',
+  label: 'name'
+})
+
+onMounted(() => {
+  getListTree()
+})
+
 const renderContent = (h, { node, data, store }) => {
-  if (data.children == null || data.children.length === 0) {
+  if (data.child == null || data.child.length === 0) {
     return h("div", { class: "custom-tree-node" }, [
       h(
         "span",
-        { class: "node-label ch-label", title: data.label },
-        data.label
+        { class: "node-label ch-label", title: data.name },
+        data.name
       ),
     ]);
   }
 
   return h("div", { class: "custom-tree-node" }, [
     h("span", { class: "node-label" }, [
-      data.label,
+      data.name,
       h(
         "svg",
         {
@@ -128,7 +80,7 @@ const renderContent = (h, { node, data, store }) => {
     ]),
   ]);
 };
-let treeDataTabSecond = ref([...testData]);
+
 </script>
 
 <style scoped lang="scss">

src/views/IOTDataAnalysis/components/IOTLeft.vue

@@ -5,74 +5,61 @@
         <div class="base-data">
           <div class="base-box base-data-device">
             <span class="name">物联设备</span>
-            <span class="num">230</span>
+            <span class="num">{{ basicsInfo.totalDevices }}</span>
           </div>
           <div class="base-box base-data-online">
             <span class="name">在线数</span>
-            <span class="num">230</span>
+            <span class="num">{{ basicsInfo.onlineDevices }}</span>
           </div>
           <div class="base-box base-data-unline">
             <span class="name">离线数</span>
-            <span class="num">230</span>
+            <span class="num">{{ basicsInfo.offlineDevices }}</span>
           </div>
           <div class="base-box base-data-ratio">
             <span class="name">在线率</span>
-            <span class="num">230</span>
+            <span class="num">{{ basicsInfo.onlineRate }}</span>
           </div>
         </div>
       </titleBgBox>
 
       <titleBgBox class="left-title-bg-box" title="设备类型">
+        <!-- 头部色彩比例块 -->
+        <colorDiv
+          class="color-box"
+          :data="deviceTypeArr"
+          :colorData="equipmentColor"
+        ></colorDiv>
         <div class="device-type">
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #549bf1"></div>
-            <span class="name">文明施工检测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #67d470"></div>
-            <span class="name">建筑物和构筑物结构安全监测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #bcbf5c"></div>
-            <span class="name">深基坑监测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #0daee3"></div>
-            <span class="name">玻璃幕墙监测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #3182ea"></div>
-            <span class="name">历史建筑保护</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #aa8a6e"></div>
-            <span class="name">桥梁监测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #5a70bc"></div>
-            <span class="name">隧道检测</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #b2dfff"></div>
-            <span class="name">边坡保护</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #5cabbf"></div>
-            <span class="name">路面塌陷</span>
-            <span class="num">20%</span>
-          </div>
-          <div class="device-type-item">
-            <div class="icon-label" style="background-color: #2cecbc"></div>
-            <span class="name">水环境监测</span>
-            <span class="num">20%</span>
+          <div
+            class="device-type-item"
+            v-for="(item, index) in deviceTypeArr"
+            :key="index"
+            @click="selectCurrentKey(item)"
+          >
+            <div
+              class="icon-label"
+              :style="{
+                backgroundColor: equipmentColor[index % deviceTypeArr.length],
+              }"
+            ></div>
+            <span
+              class="name"
+              :style="{
+                color: selectDeviceType.includes(item.monitorScene)
+                  ? '#FFD041'
+                  : '',
+              }"
+              >{{ item.monitorScene }}</span
+            >
+            <span
+              class="num"
+              :style="{
+                color: selectDeviceType.includes(item.monitorScene)
+                  ? '#FFC85A'
+                  : '',
+              }"
+              >{{ item.numRatio }}</span
+            >
           </div>
         </div>
       </titleBgBox>
@@ -99,76 +86,42 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, reactive, ref, computed } from "vue";
 import titleBgBox from "./titleBgBox.vue";
+import colorDiv from "@/components/ColorDiv.vue";
+import {
+  QueryBasicsInfo,
+  QueryListEquipment,
+  QueryTrendsOnline,
+} from "../../../service/iotService";
 
-const deviceDistrubuteArr = ref([
-  {
-    name: "黄浦",
-    num: 231,
-  },
-  {
-    name: "徐汇",
-    num: 231,
-  },
-  {
-    name: "长宁",
-    num: 231,
-  },
-  {
-    name: "静安",
-    num: 231,
-  },
-  {
-    name: "普陀",
-    num: 231,
-  },
-  {
-    name: "虹口",
-    num: 231,
-  },
-  {
-    name: "杨浦",
-    num: 231,
-  },
-  {
-    name: "闵行",
-    num: 231,
-  },
-  {
-    name: "宝山",
-    num: 231,
-  },
-  {
-    name: "浦东",
-    num: 231,
-  },
-  {
-    name: "金山",
-    num: 231,
-  },
-  {
-    name: "黄浦",
-    num: 231,
-  },
-  {
-    name: "松江",
-    num: 231,
-  },
-  {
-    name: "青浦",
-    num: 231,
-  },
-  {
-    name: "奉贤",
-    num: 231,
-  },
-  {
-    name: "崇明",
-    num: 231,
-  },
+//设备类型统计数据
+const equipmentData = ref([]);
+const equipmentColor = ref([
+  "#549bf1",
+  "#67d470",
+  "#bcbf5c",
+  "#0daee3",
+  "#3182ea",
+  "#aa8a6e",
+  "#5a70bc",
+  " #b2dfff",
+  "#5cabbf",
+  "#2cecbc",
 ]);
 
+//基本情况obj
+const basicsInfo = reactive({
+  totalDevices: "",
+  onlineDevices: "",
+  offlineDevices: "",
+  unregisterDevices: "",
+  onlineRate: "",
+});
+
+//设备分类当前项选中
+const selectDeviceType = ref([]);
+
 const getCount = (totalArr, num) => {
   const total = totalArr
     .map((item) => item.num)
@@ -178,6 +131,102 @@ const getCount = (totalArr, num) => {
   console.log(total);
   return (num / total) * 100;
 };
+
+const getBasicsInfo = () => {
+  QueryBasicsInfo().then((res) => {
+    if (res.data.code == "200") {
+      basicsInfo.totalDevices = res.data.data.totalDevices;
+      basicsInfo.onlineDevices = res.data.data.onlineDevices;
+      basicsInfo.offlineDevices = res.data.data.offlineDevices;
+      basicsInfo.onlineRate = res.data.data.onlineRate;
+    }
+  });
+};
+
+//设备类型/设备分布数据
+const getListEquipment = () => {
+  QueryListEquipment().then((res) => {
+    if (res.data.code == "200") {
+      const data = res.data.data;
+      const typeObj = {};
+      debugger
+      data.list.forEach((item) => {
+        if (typeObj[item.monitorScene]) {
+          typeObj[item.monitorScene].num++;
+          //onlineState: 设备状态 0:未激活;1:在线;2:离线
+          item.onlineState == 1 && typeObj[item.monitorScene].onlineNum++;
+          item.onlineState == 2 && typeObj[item.monitorScene].unlineNum++;
+        } else {
+          typeObj[item.monitorScene] = {
+            monitorScene: item.monitorScene, //监管场景
+            serialNumber: item.serialNumber,
+            district: item.district, //分布区域
+            num: 1,
+            onlineNum: 1,
+            unlineNum: 1,
+            total: data.total
+          };
+        }
+      });
+      equipmentData.value = Object.values(typeObj)
+    }
+  });
+};
+
+//获取设备分布数据
+const deviceDistrubuteArr = computed(() => {
+  const deviceDistruibute = {};
+  equipmentData.value.forEach((item) => {
+    if (
+      selectDeviceType.value.length > 0 &&
+      !selectDeviceType.value.includes(item.monitorScene)
+    ) {
+      return;
+    }
+    if (deviceDistruibute[item.district]) {
+      deviceDistruibute[item.district].num += item.num;
+    } else {
+      deviceDistruibute[item.district] = {
+        name: item.district,
+        num: item.num,
+      };
+    }
+  });
+  return Object.values(deviceDistruibute);
+});
+
+const deviceTypeArr = computed(() => {
+  const result =  equipmentData.value.map((item) => {
+    return {
+      ...item,
+      numRatio: ((item.num * 100) / item.total).toFixed(0) + "%",
+    };
+  });
+  return result
+});
+
+//设备类型选中
+const selectCurrentKey = (params) => {
+  //暂时只支持单选，如果后续可以多选，将下行代码注释
+  selectDeviceType.value = [];
+
+  if (selectDeviceType.value.includes(params.monitorScene)) {
+    selectDeviceType.value = selectDeviceType.value.filter(
+      (item) => item != params.monitorScene
+    );
+    return;
+  }
+  selectDeviceType.value.push(params.monitorScene);
+};
+
+const init = () => {
+  getBasicsInfo();
+  getListEquipment();
+};
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped lang="scss">
@@ -191,7 +240,12 @@ const getCount = (totalArr, num) => {
   font-size: 18px;
   z-index: 99;
   padding: 58px 0 44px 25px;
-  background: linear-gradient(90deg, rgba(0,17,50,0.75), rgba(0,17,50,0.5), rgba(0,17,51,0));
+  background: linear-gradient(
+    90deg,
+    rgba(0, 17, 50, 0.75),
+    rgba(0, 17, 50, 0.5),
+    rgba(0, 17, 51, 0)
+  );
   .left-box {
     box-sizing: border-box;
     width: 100%;
@@ -201,6 +255,11 @@ const getCount = (totalArr, num) => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
     // background-position-x: -220px;
+    .color-box {
+      width: calc(100% - 30px);
+      padding-left: 3px;
+      margin-top: 5px;
+    }
     .base-data {
       position: relative;
       width: 100%;
@@ -234,7 +293,7 @@ const getCount = (totalArr, num) => {
         left: 30px;
         bottom: 22px;
         .num {
-          color: #ffd041;
+          // color: #ffd041;
         }
       }
       .base-data-unline {
@@ -293,12 +352,14 @@ const getCount = (totalArr, num) => {
         .name {
           font-size: 14px;
           color: #bfd5e0;
+          width: 50px;
         }
         .num {
           font-size: 18px;
           font-family: "heitao";
-          padding-left: 22px;
+          padding-left: 15px;
           color: #c6daeb;
+          width: 30px;
         }
         .num1 {
           font-size: 14px;
@@ -306,23 +367,27 @@ const getCount = (totalArr, num) => {
           color: #c6daeb;
         }
         :deep(.el-progress) {
-          width: calc(100% - 130px);
+          width: calc(100% - 160px);
           margin-left: 13px;
           .el-progress-bar__outer {
-            background-color: rgba(35, 64, 95, 0.21);
-            height: 6px!important;
+            background-color: rgba(35, 64, 95, 0.51);
+            height: 6px !important;
           }
           .el-progress-bar__inner {
             // background-color: rgba(60, 139, 219, 1);
             height: 6px;
-            background: linear-gradient(to right, rgba(60, 139, 219, 1), rgba(60, 139, 219, 0.5));
+            background: linear-gradient(
+              to right,
+              rgba(60, 139, 219, 1),
+              rgba(60, 139, 219, 0.5)
+            );
           }
         }
       }
     }
     .left-title-bg-box {
       :deep(.title-box) {
-        width: calc(100% - 20px);
+        width: calc(100% - 25px);
       }
     }
   }

src/views/IOTDataAnalysis/components/IOTRight.vue

@@ -55,59 +55,118 @@ import { onMounted, ref } from "vue";
 import IOTPie from "./IOTPie.vue";
 import titleBgBox from "./titleBgBox.vue";
 import * as echarts from "echarts";
+import { QueryTrendsmsg, QueryTrendsOnline } from "../../../service/iotService";
 const deviceInfoRef = ref(null);
 const onLineRef = ref(null);
 
 //设备消息趋势折线图options
-const deviceInfoOption = ref({
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "cross",
+const deviceInfoOption = (xData, yData) => {
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
     },
-  },
-  grid: {
-    left: "5%",
-    right: "5%",
-    bottom: "3%",
-    top: "3%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      boundaryGap: false,
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: "#BFC8D7",
+    grid: {
+      left: "5%",
+      right: "5%",
+      bottom: "3%",
+      top: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#BFC8D7",
+          },
         },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: true, //是否显示轴线
+          lineStyle: {
+            color: "#fff", //刻度线的颜色
+            opacity: 0.12,
+          },
+        },
+        data: xData,
       },
-      axisTick: {
-        show: false,
+    ],
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed",
+            color: "#fff", //刻度线的颜色
+            opacity: 0.12,
+          },
+        },
+
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#BFC8D7",
+          },
+        },
       },
-      axisLine: {
-        show: true, //是否显示轴线
-        lineStyle: {
-          color: "#fff", //刻度线的颜色
-          opacity: 0.12,
+    ],
+    series: [
+      {
+        name: "Email",
+        type: "line",
+        stack: "Total",
+        //   emphasis: {
+        //     focus: "series",
+        //   },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(45, 144, 255, 0.86)",
+            },
+            {
+              offset: 0.2,
+              color: "rgba(45, 144, 255, 0.4)",
+            },
+            {
+              offset: 1,
+              color: "rgba(45, 144, 255, 0)",
+            },
+          ]),
         },
+        data: yData,
+      },
+    ],
+  };
+};
+
+const barWidth = 20;
+const onLineOptions = (xData, yData) => {
+  return {
+    xAxis: {
+      data: xData,
+      axisTick: {
+        show: false,
       },
-      data: ["8-18", "8-19", "8-20", "8-21", "8-22", "8-23", "8-24"],
+      axisLine: { lineStyle: { color: "#ffffff", opacity: 0.52, width: 1 } },
     },
-  ],
-  yAxis: [
-    {
-      type: "value",
+    yAxis: {
       splitLine: {
         show: true,
         lineStyle: {
           type: "dashed",
-          color: "#fff", //刻度线的颜色
-          opacity: 0.12,
+          color: "#ffffff",
+          opacity: 0.18,
         },
       },
-
       axisLabel: {
         show: true,
         textStyle: {
@@ -115,149 +174,101 @@ const deviceInfoOption = ref({
         },
       },
     },
-  ],
-  series: [
-    {
-      name: "Email",
-      type: "line",
-      stack: "Total",
-      //   emphasis: {
-      //     focus: "series",
-      //   },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(45, 144, 255, 0.86)",
-          },
-          {
-            offset: 0.2,
-            color: "rgba(45, 144, 255, 0.4)",
-          },
-          {
-            offset: 1,
-            color: "rgba(45, 144, 255, 0)",
-          },
-        ]),
-      },
-      data: [120, 132, 101, 134, 90, 230, 210],
-    },
-  ],
-});
-
-const barWidth = 20;
-const onLineOptions = ref({
-  xAxis: {
-    data: ["春节", "元宵节", "端午节", "中秋节"],
-    axisTick: {
-      show: false,
-    },
-    axisLine: { lineStyle: { color: "#ffffff", opacity: 0.52, width: 1 } },
-  },
-  yAxis: {
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: "dashed",
-        color: "#ffffff",
-        opacity: 0.18,
-      },
+    dataGroupId: "",
+    grid: {
+      left: "5%",
+      right: "5%",
+      bottom: "3%",
+      top: "3%",
+      containLabel: true,
     },
-    axisLabel: {
-      show: true,
-      textStyle: {
-        color: "#BFC8D7",
+    series: [
+      {
+        type: "pictorialBar", // 象型柱状
+        symbol: "diamond",
+        symbolSize: [barWidth, 5], // 调整大小
+        // symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
+        symbolOffset: ["0%", -3], // 图形相对于原本位置的偏移
+        symbolPosition: "end",
+        z: 12,
+        color: "#E1EEFF",
+        data: yData, //Y轴上的高度
       },
-    },
-  },
-  dataGroupId: "",
-  grid: {
-    left: "5%",
-    right: "5%",
-    bottom: "3%",
-    top: "3%",
-    containLabel: true,
-  },
-  series: [
-    {
-      type: "pictorialBar", // 象型柱状
-      symbol: "diamond",
-      symbolSize: [barWidth, 5], // 调整大小
-      // symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
-      symbolOffset: ["0%", -3], // 图形相对于原本位置的偏移
-      symbolPosition: "end",
-      z: 12,
-      color: "#E1EEFF",
-      data: [
-        {
-          name: "春节",
-          value: 24,
-        },
-        { name: "端午节", value: 44 },
-        { name: "中秋节", value: 32 },
-        { name: "春节", value: 50 },
-      ], //Y轴上的高度
-    },
-    {
-      name: "",
-      type: "bar",
-      barWidth: barWidth,
-      barGap: "10%",
-      // zlevel: 2,
-      stack: "1",
+      {
+        name: "",
+        type: "bar",
+        barWidth: barWidth,
+        barGap: "10%",
+        // zlevel: 2,
+        stack: "1",
 
-      itemStyle: {
-        opacity: 0.7,
-        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
-          {
-            offset: 0.5,
-            color: "rgba(199,217,243,0.99)",
-          },
-          {
-            offset: 0.5,
-            color: "rgba(199,217,243,0.5)",
-          },
-          {
-            offset: 0.5,
-            color: "#6C86C4",
-          },
-          {
-            offset: 1,
-            color: "#6C86C4",
-          },
-        ]),
-        // barBorderRadius: 0,
-        borderRadius: 0,
-      },
-      // 是否在每个柱子显示 相应的值
-      label: {
-        show: false,
-        position: ["0", "-25"],
-        color: "#005dd9",
-        fontSize: 14,
-        fontWeight: "bold",
-      },
-      data: [
-        {
-          name: "春节",
-          value: 24,
+        itemStyle: {
+          opacity: 0.7,
+          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+            {
+              offset: 0.5,
+              color: "rgba(199,217,243,0.99)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(199,217,243,0.5)",
+            },
+            {
+              offset: 0.5,
+              color: "#6C86C4",
+            },
+            {
+              offset: 1,
+              color: "#6C86C4",
+            },
+          ]),
+          // barBorderRadius: 0,
+          borderRadius: 0,
         },
-        { name: "端午节", value: 44 },
-        { name: "中秋节", value: 32 },
-        { name: "春节", value: 50 },
-      ],
-    },
-  ],
-});
+        // 是否在每个柱子显示 相应的值
+        label: {
+          show: false,
+          position: ["0", "-25"],
+          color: "#005dd9",
+          fontSize: 14,
+          fontWeight: "bold",
+        },
+        data: yData,
+      }
+    ],
+  };
+};
 
 const initCharts = (domRefValue, options) => {
   const myChart = echarts.init(domRefValue);
   options && myChart.setOption(options);
 };
 
+//获取消息趋势
+const getDeviceInfo = () => {
+  QueryTrendsmsg().then(res => {
+    if(res.data.code == '200'){
+      const xData = res.data.data.map(item => item.date.slice(5))
+      const yData = res.data.data.map(item => item.reportCount)
+      initCharts(deviceInfoRef.value, deviceInfoOption(xData, yData));
+    }
+  })
+};
+
+//获取在线趋势数据
+const getOnlineInfo = () => {
+  QueryTrendsOnline().then(res => {
+    if(res.data.code == '200'){
+      const xData = res.data.data.map(item => item.date.slice(5))
+      const yData = res.data.data.map(item => item.onlineCount)
+      initCharts(onLineRef.value, onLineOptions(xData, yData));
+    }
+  })
+}
+
 onMounted(() => {
-  initCharts(deviceInfoRef.value, deviceInfoOption.value);
-  initCharts(onLineRef.value, onLineOptions.value);
+  getDeviceInfo()
+  getOnlineInfo()
 });
 </script>
 
@@ -272,7 +283,12 @@ onMounted(() => {
   font-size: 18px;
   z-index: 99;
   padding: 58px 25px 44px 0;
-  background: linear-gradient(90deg, rgba(0,17,51,0),rgba(0,17,50,0.5),rgba(0,17,50,0.75),);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 17, 51, 0),
+    rgba(0, 17, 50, 0.5),
+    rgba(0, 17, 50, 0.75)
+  );
   .left-box {
     box-sizing: border-box;
     width: 100%;
@@ -326,12 +342,12 @@ onMounted(() => {
             border-radius: 50%;
             top: 25%;
             left: 2px;
-            &::before{
+            &::before {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
-              content: '';
+              content: "";
               border: 3px solid;
               border-color: inherit;
               border-radius: 5px;

src/views/IOTDataAnalysis/index.vue

@@ -4,7 +4,7 @@
     <IOTLeft/>
     <IOTRight/>
     <IOTLIstDialog/>
-    <IOTToolDialog/>
+    <!-- <IOTToolDialog/> -->
     <div class="gis-map" id="gisMap" ref="gisMapRef">
         <Map/>
     </div>