校园首页

src/views/platformSection/home/index.vue

@@ -217,6 +217,7 @@ export default {
             res.push({
               name: outdata[i].name,
               value: geoCoord.concat(outdata[i].value),
+              numInfo: outdata[i].numInfo,
               //单独修改圆环上的文字
               label: {
                 formatter: () => {
@@ -245,13 +246,22 @@ export default {
           appendTo: "body",
           formatter: (params) => {
             return `${params.name}<div>设备数：${
-              (params.numInfo && params.numInfo.devicenum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.devicenum) ||
+              0
             } 台</div>
             <div>用户数：${
-              (params.numInfo && params.numInfo.usernum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.usernum) ||
+              0
             } 人</div>
             <div>学校数：${
-              (params.numInfo && params.numInfo.schoolnum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.schoolnum) ||
+              0
             } 所</div>`;
           }
         },
@@ -312,6 +322,34 @@ export default {
           },
           {
             type: "scatter",
+            tooltip: {
+              show: true,
+              borderColor: "#6AC8F0",
+              // 将tooltip限制在图表内
+              confine: true,
+              // 将tooltip添加到body下
+              appendTo: "body",
+              formatter: (params) => {
+                return `${params.name}<div>设备数：${
+                  (params.data &&
+                    params.data.numInfo &&
+                    params.data.numInfo.devicenum) ||
+                  0
+                } 台</div>
+            <div>用户数：${
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.usernum) ||
+              0
+            } 人</div>
+            <div>学校数：${
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.schoolnum) ||
+              0
+            } 所</div>`;
+              }
+            },
             coordinateSystem: "geo",
             zlevel: 2,
             rippleEffect: {
@@ -323,7 +361,6 @@ export default {
               show: true,
               color: "#fff"
             },
-            // #FF243A
             symbol: "pin", //定位图标样式
             symbolSize: 60,
             //点的名称和经纬度
@@ -682,9 +719,29 @@ export default {
         color:
           this.deviceActivityInfo.doEvent === 2 ? ["#52C41A"] : ["#339DFF"],
         tooltip: {
-          trigger: "item",
-          formatter: (params) => {
-            return `${params.name}：${params.value}次`;
+          trigger: "axis",
+          backgroundColor: "#fff", //背景颜色（此时为默认色）
+          borderWidth: 1, //边框线宽
+          textStyle: {
+            lineHeight: 1.6,
+            color: "#253A70"
+          },
+          axisPointer: {
+            z: 1, //竖线在圆圈后面
+            lineStyle: {
+              color: "#f8f8fd",
+              width: 20,
+              opacity: 0.7
+            }
+          },
+          formatter: (data) => {
+            let date = "";
+            let seriesDom = "";
+            for (const item of data) {
+              date = item.name;
+              seriesDom += `<div><span style="color: #95ABDF">${item.seriesName}</span> ${item.value}次</div>`;
+            }
+            return `${date}${seriesDom}`;
           }
         },
         legend: {
@@ -769,6 +826,7 @@ export default {
                 verticalAlign: "bottom",
                 position: "top",
                 distance: 0,
+                color: "inherit",
                 formatter: `{c}`
               }
             },

src/views/regionSection/home/index.vue

@@ -210,6 +210,7 @@ export default {
             res.push({
               name: outdata[i].name,
               value: geoCoord.concat(outdata[i].value),
+              numInfo: outdata[i].numInfo,
               //单独修改圆环上的文字
               label: {
                 formatter: () => {
@@ -238,13 +239,22 @@ export default {
           appendTo: "body",
           formatter: (params) => {
             return `${params.name}<div>设备数：${
-              (params.numInfo && params.numInfo.devicenum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.devicenum) ||
+              0
             } 台</div>
             <div>用户数：${
-              (params.numInfo && params.numInfo.usernum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.usernum) ||
+              0
             } 人</div>
             <div>学校数：${
-              (params.numInfo && params.numInfo.schoolnum) || 0
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.schoolnum) ||
+              0
             } 所</div>`;
           }
         },
@@ -305,6 +315,34 @@ export default {
           },
           {
             type: "scatter",
+            tooltip: {
+              show: true,
+              borderColor: "#6AC8F0",
+              // 将tooltip限制在图表内
+              confine: true,
+              // 将tooltip添加到body下
+              appendTo: "body",
+              formatter: (params) => {
+                return `${params.name}<div>设备数：${
+                  (params.data &&
+                    params.data.numInfo &&
+                    params.data.numInfo.devicenum) ||
+                  0
+                } 台</div>
+            <div>用户数：${
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.usernum) ||
+              0
+            } 人</div>
+            <div>学校数：${
+              (params.data &&
+                params.data.numInfo &&
+                params.data.numInfo.schoolnum) ||
+              0
+            } 所</div>`;
+              }
+            },
             coordinateSystem: "geo",
             zlevel: 2,
             rippleEffect: {
@@ -316,7 +354,6 @@ export default {
               show: true,
               color: "#fff"
             },
-            // #FF243A
             symbol: "pin", //定位图标样式
             symbolSize: 60,
             //点的名称和经纬度
@@ -675,9 +712,29 @@ export default {
         color:
           this.deviceActivityInfo.doEvent === 2 ? ["#52C41A"] : ["#339DFF"],
         tooltip: {
-          trigger: "item",
-          formatter: (params) => {
-            return `${params.name}：${params.value}次`;
+          trigger: "axis",
+          backgroundColor: "#fff", //背景颜色（此时为默认色）
+          borderWidth: 1, //边框线宽
+          textStyle: {
+            lineHeight: 1.6,
+            color: "#253A70"
+          },
+          axisPointer: {
+            z: 1, //竖线在圆圈后面
+            lineStyle: {
+              color: "#f8f8fd",
+              width: 20,
+              opacity: 0.7
+            }
+          },
+          formatter: (data) => {
+            let date = "";
+            let seriesDom = "";
+            for (const item of data) {
+              date = item.name;
+              seriesDom += `<div><span style="color: #95ABDF">${item.seriesName}</span> ${item.value}次</div>`;
+            }
+            return `${date}${seriesDom}`;
           }
         },
         legend: {
@@ -762,6 +819,7 @@ export default {
                 verticalAlign: "bottom",
                 position: "top",
                 distance: 0,
+                color: "inherit",
                 formatter: `{c}`
               }
             },

src/views/schoolSection/home/index.vue

@@ -1,25 +1,883 @@
 <template>
   <div class="main_root">
     <div class="row_item">
-      <div class="cell_item left_w"></div>
-      <div class="cell_item right_w"></div>
+      <div class="cell_item left_w">
+        <div class="cell_header">
+          <div>设备用户</div>
+        </div>
+        <div class="content_main" id="deviceUserEcharts"></div>
+      </div>
+      <div class="cell_item right_w device_info">
+        <div class="device_info_left">
+          <div class="cell_header">
+            <div>设备类型</div>
+          </div>
+          <div class="content_main" id="deviceModelEcharts"></div>
+        </div>
+        <div class="device_info_right">
+          <div class="cell_header">
+            <div>客户端版本</div>
+          </div>
+          <div class="content_main">
+            <div id="controlVersionEcharts"></div>
+            <div id="appVersionEcharts"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="row_item">
-      <div class="cell_item left_w"></div>
-      <div class="cell_item right_w"></div>
+      <div class="cell_item left_w">
+        <div class="cell_header">
+          <div>增长趋势</div>
+        </div>
+        <div class="content_main" id="growthTrendEcharts"></div>
+      </div>
+      <div class="cell_item right_w">
+        <div class="cell_header">
+          <div>在线设备</div>
+        </div>
+        <div class="content_main online_devices">
+          <div>
+            <div
+              class="online_info online_1"
+              v-if="onlineDeviceList.length > 0"
+            >
+              <div>
+                {{
+                  onlineDeviceList[0].tatalnum > 0
+                    ? Math.floor(
+                        (onlineDeviceList[0].num /
+                          onlineDeviceList[0].tatalnum) *
+                          10000
+                      ) / 100
+                    : 0
+                }}%
+              </div>
+              <div>最近1小时</div>
+              <div class="online_title">
+                在线 <span>{{ onlineDeviceList[0].num }}</span>
+              </div>
+            </div>
+            <div id="onlineEcharts1"></div>
+          </div>
+          <div>
+            <div
+              class="online_info online_2"
+              v-if="onlineDeviceList.length > 0"
+            >
+              <div>
+                {{
+                  onlineDeviceList[1].tatalnum > 0
+                    ? Math.floor(
+                        (onlineDeviceList[1].num /
+                          onlineDeviceList[1].tatalnum) *
+                          10000
+                      ) / 100
+                    : 0
+                }}%
+              </div>
+              <div>最近48小时</div>
+              <div class="online_title">
+                在线 <span>{{ onlineDeviceList[1].num }}</span>
+              </div>
+            </div>
+            <div id="onlineEcharts2"></div>
+          </div>
+          <div>
+            <div
+              class="online_info online_3"
+              v-if="onlineDeviceList.length > 0"
+            >
+              <div>
+                {{
+                  onlineDeviceList[2].tatalnum > 0
+                    ? Math.floor(
+                        (onlineDeviceList[2].num /
+                          onlineDeviceList[2].tatalnum) *
+                          10000
+                      ) / 100
+                    : 0
+                }}%
+              </div>
+              <div>最近7天</div>
+              <div class="online_title">
+                在线 <span>{{ onlineDeviceList[2].num }}</span>
+              </div>
+            </div>
+            <div id="onlineEcharts3"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="row_item">
-      <div class="cell_item"></div>
+      <div class="cell_item">
+        <div class="cell_header">
+          <div>设备活跃度</div>
+          <Select
+            v-model="deviceActivityInfo.doEvent"
+            :transfer="true"
+            @on-change="getDeviceActivityList()"
+            style="width: 100px; font-size: 14px; font-weight: 400"
+          >
+            <Option :value="1">最近一月</Option>
+            <Option :value="2">最近一周</Option>
+          </Select>
+        </div>
+        <div class="content_main" id="deviceActivityEcharts"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import {
+  ra_list_dm,
+  ra_list_cc,
+  ra_list_sc,
+  ra_list_da,
+  ra_get_du,
+  ra_list_dn,
+  ra_list_dut
+} from "@/api/ra";
+import * as echarts from "echarts";
 export default {
   data() {
-    return {};
+    return {
+      // 设备用户信息
+      deviceUserInfo: {},
+      // 设备类型信息
+      deviceModelList: [],
+      // 客户端版本-管控应用
+      controlVersionList: [],
+      // 客户端版本-应用商店
+      appVersionList: [],
+      // 增长趋势
+      growthTrendList: [],
+      // 在线设备
+      onlineDeviceList: [],
+      // 设备活跃度
+      deviceActivityInfo: {
+        // 1最近一月2最近一周
+        doEvent: 2,
+        list: []
+      }
+    };
+  },
+  created() {
+    this.getDeviceUserList();
+    this.getDeviceModelList();
+    this.getControlVersionList();
+    this.getAppVersionList();
+    this.getGrowthTrendList();
+    this.getOnlineDeviceList();
+    this.getDeviceActivityList();
   },
-  methods: {}
+  computed: {
+    powerParams() {
+      return this.$store.getters.powerParams;
+    }
+  },
+  methods: {
+    // 设备用户信息
+    getDeviceUserList() {
+      ra_get_du({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.deviceUserInfo = data.obj;
+          this.initDeviceUserEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initDeviceUserEcharts() {
+      let seriesDataList = [];
+      seriesDataList = [
+        {
+          value: this.deviceUserInfo.usernum,
+          name: "用户"
+        },
+        {
+          value: this.deviceUserInfo.devicenum,
+          name: "设备"
+        }
+      ];
+      const options = {
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}`;
+          }
+        },
+        legend: {
+          right: 16,
+          top: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "vertical",
+          data: ["用户", "设备"],
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        color: ["#FF8D1A", "#339DFF"],
+        series: [
+          {
+            type: "pie",
+            name: "设备用户",
+            radius: ["30%", "45%"],
+            center: ["45%", "50%"],
+            label: {
+              formatter: (params) => {
+                if (params.name === "用户") {
+                  return `{usernumCss|${params.value}} 人`;
+                }
+                return `{devicenumCss|${params.value}} 台`;
+              },
+              rich: {
+                usernumCss: {
+                  color: "#FF8D1A",
+                  fontSize: 18
+                },
+                devicenumCss: {
+                  marginRight: 4,
+                  color: "#339DFF",
+                  fontSize: 18
+                }
+              },
+              borderWidth: 1,
+              borderRadius: 4,
+              color: "#7C8DB5",
+              fontSize: 12,
+              lineHeight: 18
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("deviceUserEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    // 设备类型信息
+    getDeviceModelList() {
+      ra_list_dm({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.deviceModelList = data.obj;
+          this.initDeviceModelEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initDeviceModelEcharts() {
+      let legendNameList = [];
+      let seriesDataList = [];
+      this.deviceModelList.forEach((item) => {
+        legendNameList.push(item.deviceModel);
+        seriesDataList.push({
+          value: item.devicenum,
+          name: item.deviceModel
+        });
+      });
+      const options = {
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}`;
+          }
+        },
+        legend: {
+          bottom: "10",
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "horizontal",
+          data: legendNameList,
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        color: ["#52C41A", "#FF811A"],
+        series: [
+          {
+            type: "pie",
+            name: "设备类型",
+            radius: ["25%", "35%"],
+            center: ["50%", "45%"],
+            label: {
+              formatter: (params) => {
+                return `${params.name}\n${params.value}`;
+              },
+              borderWidth: 1,
+              borderRadius: 4,
+              color: "#7C8DB5",
+              fontSize: 12,
+              lineHeight: 18
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("deviceModelEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    // 客户端版本-管控应用
+    getControlVersionList() {
+      ra_list_cc({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.controlVersionList = data.obj;
+          this.initControlVersionEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initControlVersionEcharts() {
+      let seriesDataList = [];
+      this.controlVersionList.forEach((item) => {
+        seriesDataList.push({
+          value: item.num,
+          name: item.cversion
+        });
+      });
+      const options = {
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}`;
+          }
+        },
+        legend: {
+          bottom: "10",
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "horizontal",
+          data: ["管控应用"],
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        color: ["#6B30FF", "#FF87C1"],
+        series: [
+          {
+            type: "pie",
+            name: "管控应用",
+            radius: ["25%", "35%"],
+            center: ["50%", "45%"],
+            label: {
+              formatter: (params) => {
+                return `${params.name}\n${params.value}`;
+              },
+              borderWidth: 1,
+              borderRadius: 4,
+              color: "#7C8DB5",
+              fontSize: 12,
+              lineHeight: 18
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("controlVersionEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    // 客户端版本-应用商店
+    getAppVersionList() {
+      ra_list_sc({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.appVersionList = data.obj;
+          this.initAppEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initAppEcharts() {
+      let seriesDataList = [];
+      this.appVersionList.forEach((item) => {
+        seriesDataList.push({
+          value: item.num,
+          name: item.cversion
+        });
+      });
+      const options = {
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}`;
+          }
+        },
+        legend: {
+          bottom: "10",
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "horizontal",
+          data: ["应用商店"],
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        color: ["#ED4A99", "#FF87C1"],
+        series: [
+          {
+            type: "pie",
+            name: "应用商店",
+            radius: ["25%", "35%"],
+            center: ["50%", "45%"],
+            label: {
+              formatter: (params) => {
+                return `${params.name}\n${params.value}`;
+              },
+              borderWidth: 1,
+              borderRadius: 4,
+              color: "#7C8DB5",
+              fontSize: 12,
+              lineHeight: 18
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("appVersionEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    // 增长趋势
+    getGrowthTrendList() {
+      ra_list_dut({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.growthTrendList = data.obj;
+          this.initGrowthTrendEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initGrowthTrendEcharts() {
+      let xAxisDataList = [];
+      let seriesDataList = [];
+      let seriesDataList1 = [];
+      this.growthTrendList.forEach((item) => {
+        xAxisDataList.push(item.date);
+        seriesDataList.push(item.usernum || 0);
+        seriesDataList1.push(item.devicenum || 0);
+      });
+      let options = {
+        color: ["#339DFF", "#FF8622"],
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: (params) => {
+        //     return `${params.name}：${params.value}次`;
+        //   }
+        // },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#fff", //背景颜色（此时为默认色）
+          borderWidth: 1, //边框线宽
+          textStyle: {
+            lineHeight: 1.6,
+            color: "#253A70"
+          },
+          axisPointer: {
+            z: 1, //竖线在圆圈后面
+            lineStyle: {
+              color: "#f8f8fd",
+              width: 20,
+              opacity: 0.7
+            }
+          },
+          formatter: (data) => {
+            let date = "";
+            let seriesDom = "";
+            for (const item of data) {
+              date = item.name;
+              seriesDom += `<div><span style="color: #95ABDF">${
+                item.seriesName
+              }</span> ${item.value}${
+                item.seriesName === "用户数" ? "个" : "台"
+              }</div>`;
+            }
+            return `${date}${seriesDom}`;
+          }
+        },
+        legend: {
+          bottom: "10",
+          left: "center",
+          icon: "rect",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "horizontal",
+          data: ["用户数", "设备数"],
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        grid: {
+          top: 20,
+          left: 50,
+          right: 20,
+          bottom: 40,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              textStyle: {
+                color: "#333"
+              },
+              // 数据多自动隐藏
+              // interval: 0,
+              rotate: 0
+            },
+            data: xAxisDataList,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            minInterval: 1,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: true //隐藏或显示
+            },
+            type: "value"
+          }
+        ],
+        series: [
+          {
+            name: "用户数",
+            type: "line",
+            label: {
+              normal: {
+                show: true,
+                align: "center",
+                verticalAlign: "bottom",
+                position: "top",
+                distance: 0,
+                color: "inherit",
+                formatter: `{c}`
+              }
+            },
+            data: seriesDataList
+          },
+          {
+            name: "设备数",
+            type: "line",
+            label: {
+              normal: {
+                show: true,
+                align: "center",
+                verticalAlign: "bottom",
+                position: "top",
+                distance: 0,
+                color: "inherit",
+                formatter: `{c}`
+              }
+            },
+            data: seriesDataList1
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("growthTrendEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    getOnlineDeviceList() {
+      ra_list_dn({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      }).then((data) => {
+        if (data.code === 0) {
+          this.onlineDeviceList = data.obj;
+          this.initOnlineEcharts({
+            domId: "onlineEcharts1",
+            onlineNum: this.onlineDeviceList[0].num,
+            onlineTatalNum: this.onlineDeviceList[0].tatalnum,
+            onlineColor: "#339CFF",
+            subtext: "最近1小时"
+          });
+          this.initOnlineEcharts({
+            domId: "onlineEcharts2",
+            onlineNum: this.onlineDeviceList[1].num,
+            onlineTatalNum: this.onlineDeviceList[1].tatalnum,
+            onlineColor: "#52C41A",
+            subtext: "最近48小时"
+          });
+          this.initOnlineEcharts({
+            domId: "onlineEcharts3",
+            onlineNum: this.onlineDeviceList[2].num,
+            onlineTatalNum: this.onlineDeviceList[2].tatalnum,
+            onlineColor: "#ED4A99",
+            subtext: "最近7天"
+          });
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initOnlineEcharts({ onlineNum, onlineTatalNum, onlineColor, domId }) {
+      let options = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{d}%",
+          show: true
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: "底盘",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "45%"],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false,
+                position: "center"
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: onlineNum,
+                name: "在线",
+                selected: false,
+                itemStyle: {
+                  color: onlineColor
+                }
+              },
+              {
+                value: onlineTatalNum - onlineNum,
+                tooltip: {
+                  show: false
+                },
+                name: "离线",
+                itemStyle: {
+                  color: "#E9EEF4"
+                },
+                label: {
+                  normal: {
+                    show: false
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      };
+      const eInstance = echarts.init(document.getElementById(domId));
+      eInstance.clear();
+      eInstance.setOption(options);
+    },
+    // 设备活跃度
+    getDeviceActivityList() {
+      ra_list_da({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid,
+        doEvent: this.deviceActivityInfo.doEvent
+      }).then((data) => {
+        if (data.code === 0) {
+          this.deviceActivityInfo.list = data.obj;
+          this.initDeviceActivityEcharts();
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    initDeviceActivityEcharts() {
+      let xAxisDataList = [];
+      let seriesDataList = [];
+      this.deviceActivityInfo.list.forEach((item) => {
+        xAxisDataList.push(item.date);
+        seriesDataList.push(item.num || 0);
+      });
+      let options = {
+        color:
+          this.deviceActivityInfo.doEvent === 2 ? ["#52C41A"] : ["#339DFF"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#fff", //背景颜色（此时为默认色）
+          borderWidth: 1, //边框线宽
+          textStyle: {
+            lineHeight: 1.6,
+            color: "#253A70"
+          },
+          axisPointer: {
+            z: 1, //竖线在圆圈后面
+            lineStyle: {
+              color: "#f8f8fd",
+              width: 20,
+              opacity: 0.7
+            }
+          },
+          formatter: (data) => {
+            let date = "";
+            let seriesDom = "";
+            for (const item of data) {
+              date = item.name;
+              seriesDom += `<div><span style="color: #95ABDF">${item.seriesName}</span> ${item.value}次</div>`;
+            }
+            return `${date}${seriesDom}`;
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: 20,
+          left: 50,
+          right: 20,
+          bottom: 40,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              textStyle: {
+                color: "#333"
+              },
+              // 数据多自动隐藏
+              // interval: 0,
+              rotate: 0
+            },
+            data: xAxisDataList,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            minInterval: 1,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: true //隐藏或显示
+            },
+            type: "value"
+          }
+        ],
+        series: [
+          {
+            name: "设备活跃度",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  this.deviceActivityInfo.doEvent === 2
+                    ? [
+                        { offset: 0, color: "rgba(82, 196, 26, 0.4)" },
+                        { offset: 0.5, color: "rgba(82, 196, 26, 0.2)" },
+                        { offset: 0.9, color: "rgba(82, 196, 26, 0)" }
+                      ]
+                    : [
+                        { offset: 0, color: "rgba(51, 157, 255, 0.4)" },
+                        { offset: 0.5, color: "rgba(51, 157, 255, 0.2)" },
+                        { offset: 0.9, color: "rgba(51, 157, 255, 0)" }
+                      ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)",
+                shadowBlur: 10
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                align: "center",
+                verticalAlign: "bottom",
+                position: "top",
+                distance: 0,
+                color: "inherit",
+                formatter: `{c}`
+              }
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("deviceActivityEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    }
+  }
 };
 </script>
 
@@ -48,6 +906,18 @@ export default {
       &.right_w {
         width: calc(60% - 10px);
       }
+      &.device_info {
+        display: flex;
+        justify-content: space-between;
+        .device_info_left {
+          width: 33.33%;
+          height: 100%;
+        }
+        .device_info_right {
+          width: 66.66%;
+          height: 100%;
+        }
+      }
       .cell_header {
         position: relative;
         display: flex;
@@ -61,6 +931,76 @@ export default {
       .content_main {
         width: 100%;
         height: calc(100% - 48px);
+        &.online_devices {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          > div {
+            position: relative;
+            width: 33.33%;
+            height: 100%;
+            .online_info {
+              position: absolute;
+              left: 0;
+              top: 0;
+              font-size: 14px;
+              text-align: center;
+              &.online_1 {
+                color: #339cff;
+                &:first-child {
+                  padding-top: 140px;
+                  font-size: 20px;
+                }
+                span {
+                  color: #339cff;
+                }
+              }
+              &.online_2 {
+                color: #52c41a;
+                &:first-child {
+                  padding-top: 140px;
+                  font-size: 20px;
+                }
+                span {
+                  color: #52c41a;
+                }
+              }
+              &.online_3 {
+                color: #ed4a99;
+                &:first-child {
+                  padding-top: 140px;
+                  font-size: 20px;
+                }
+                span {
+                  color: #ed4a99;
+                }
+              }
+              .online_title {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding-bottom: 20px;
+                font-size: 14px;
+                text-align: center;
+                color: #798cb5;
+                > span {
+                  font-weight: bold;
+                }
+              }
+            }
+            > div {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        #controlVersionEcharts,
+        #appVersionEcharts {
+          display: inline-block;
+          width: 50%;
+          height: 100%;
+        }
       }
     }
   }