添加报表子系统和设备管理子系统

public/index.html

@@ -14,6 +14,8 @@
   <script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.min.js"></script>
   <script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.min.js"></script>
   <script src="<%= VUE_APP_LIB_MANAGER %>/operateManage/lib/operateManage.umd.min.js"></script>
+  <script src="<%= VUE_APP_LIB_MANAGER %>/statisticsManage/lib/statisticsManage.umd.min.js"></script>
+  <script src="<%= VUE_APP_LIB_MANAGER %>/deviceManage/lib/deviceManage.umd.min.js"></script>
 
   <link rel="stylesheet" href="<%= VUE_APP_LIB_MANAGER %><%= VUE_APP_LIB_BASE_URL %>lib/manageShell.css" />
   <title>系统管理</title>

src/components/input/AreaDashboard/AreaSelect.vue

@@ -6,6 +6,7 @@
     @change="changeHandle"
     :multiple="multiple"
   >
+    <el-option :value="-1">全选</el-option>
     <el-option
       v-for="(item, index) in dashboardArea"
       :key="index"
@@ -34,14 +35,23 @@ export default {
   methods: {
     changeHandle(val) {
       if (val) {
-        this.$emit('input', val);
+        if (val && val.length && val.indexOf(-1) > -1) {
+          if (val.length === this.dashboardArea.length + 1) {
+            this.$emit('input', []);
+            return;
           } else {
-        if (this.multiple) {
-          this.$emit('input', dashboardArea.map(item => item.id));
+            this.$emit('input', this.dashboardArea.map(item => item.id));
+            return;
+          }
+        }
+        // if (this.multiple && val.length == 0) {
+        //   this.$emit('input', this.dashboardArea.map(item => item.id));
+        // } else {
+        this.$emit('input', val);
+        // }
       } else {
         this.$emit('input', null);
       }
-      }
     },
   },
 };

src/containers/Dashboard/CampusRank/CampusRankChart.vue

 <template>
   <div class="CampusRank">
-    <div id="CampusRank">
-      <div class="CampusRank-legend">
-        <template v-if="this.data && this.data.length === 10">
-          其他校区：<span>{{other.toFixed(2)}}</span><br>
-          前十校区：<span>{{topTen.toFixed(2)}}</span>
-        </template>
-        <template v-else-if="this.data.length">
-          校区汇总：<span>{{topTen.toFixed(2)}}</span>
-        </template>
-      </div>
-    </div>
+    <div id="CampusRank"></div>
   </div>
 </template>
 
@@ -48,7 +38,7 @@ export default {
         container: 'CampusRank',
         forceFit: true,
         height: this.height,
-        padding: [20, 160, 20, 0],
+        padding: [20, 230, 20, 0],
       });
       this.chart.source(this.data);
       this.chart.coord('theta', {
@@ -57,7 +47,49 @@ export default {
       });
       this.chart.tooltip(false);
       // 图例
-      this.chart.legend(false);
+      this.chart.legend({
+        position: 'right-center',
+        marker: 'square',
+        clickable: false,
+        offsetX: -10,
+        useHtml: true,
+        containerTpl: `
+         <div class="g2-legend">
+          <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
+         </div>`,
+        itemTpl: (value, color, checked, index) => {
+          const obj = this.data[index];
+          checked = checked ? 'checked' : 'unChecked';
+          return `
+            <li
+              class="g2-legend-list-item item-${index} ${checked}"
+              data-value="${value}"
+              data-color=${color}
+              style="cursor: pointer;font-size:14px;width:100%;"
+            >
+              <i
+                class="g2-legend-marker"
+                style="display:inline-block;margin-right:10px;background-color:${color};"
+              ></i>
+              <span class="g2-legend-text">${value}： </span>
+              <span>${obj.count}</span>
+            </li>
+            `;
+        },
+        'g2-legend': {
+          width: '230px',
+          maxHeight: '',
+          // left: '-20px',
+        },
+        'g2-legend-list-item': {
+          color: '#333',
+        },
+        'g2-legend-marker': {
+          width: '10px',
+          height: '5px',
+          borderRadius: 'none',
+        },
+      });
       // 坐标系及着色
       this.chartGeom = this.chart
         .intervalStack()
@@ -125,10 +157,14 @@ export default {
       this.percentDom = document.querySelector('.CampusRank-percent');
       this.areaNameDom = document.querySelector('.CampusRank-areaName');
       if (this.percentDom) {
+        if (this.total === 0) {
+          this.percentDom.innerHTML = '0.00';
+        } else {
           this.percentDom.innerHTML = ((data.count / this.total) * 100).toFixed(
             2
           );
         }
+      }
       if (this.areaNameDom) {
         this.areaNameDom.innerHTML = data.areaName;
       }
@@ -153,5 +189,9 @@ export default {
     top: 50%;
     right: 0;
   }
+  .g2-legend {
+    max-height: 270px;
+    overflow-y: auto;
+  }
 }
 </style>

src/containers/Dashboard/Dashboard.js

@@ -119,8 +119,6 @@ const actions = {
           commit(GET_EUIPMENT_DATA, list);
           commit(LOADING_EQUIPMENT, false);
         } else {
-          console.log(list.list);
-
           if (list.list && list.list.length > 5) {
             let areaList = list.list.slice(0, 5);
             dispatch('updateFilters', {

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -123,10 +123,14 @@ export default {
       this.serviceNameDom = document.querySelector('.SeviceRatio-serviceName');
 
       if (this.percentDom) {
+        if (this.total === 0) {
+          this.percentDom.innerHTML = '0.00';
+        } else {
           this.percentDom.innerHTML = ((data.count / this.totle) * 100).toFixed(
             2
           );
         }
+      }
       if (this.serviceNameDom) {
         this.serviceNameDom.innerHTML = data.serviceName;
       }

src/dev-local/develop.html

@@ -24,6 +24,9 @@
 <script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.min.js"></script>
 <script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.min.js"></script>
 <script src="<%= VUE_APP_LIB_MANAGER %>/operateManage/lib/operateManage.umd.min.js"></script>
+<script src="<%= VUE_APP_LIB_MANAGER %>/statisticsManage/lib/statisticsManage.umd.min.js"></script>
+<script src="<%= VUE_APP_LIB_MANAGER %>/deviceManage/lib/deviceManage.umd.min.js"></script>
+
 <script src="https://webapi.amap.com/maps?v=1.4.12&key=dd6103c90f2f17310a8711f2d330a0a6"></script>
 <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
 <script src="https://unpkg.com/@antv/data-set"></script>

src/dev-local/develop.js

@@ -8,6 +8,8 @@ setTimeout(() => {
     ...baseManage.default,
     ...systemManage.default,
     ...operateManage.default,
+    ...statisticsManage.default,
+    ...deviceManage.default,
   ];
 
   System.createSystem({

src/main.js

@@ -3,6 +3,8 @@ let allAasyncRouterMap = [
   ...baseManage.default,
   ...systemManage.default,
   ...operateManage.default,
+  ...statisticsManage.default,
+  ...deviceManage.default,
 ];
 
 const System = manageShell.default;