数据报表

src/components/dashboard/iocDashboard.vue

@@ -12,8 +12,11 @@
               </a-button>
             </template>
             <a-row>
-              <a-col v-for="(item, index) in commonMenu" :span="6" :key="index">
-                <IocFunction :item="item"></IocFunction>
+              <a-col v-for="(item, index) in commonMenu" :span="6" :key="index" >
+                <div @click="toRoute(item.router)">
+                  <IocFunction :item="item" ></IocFunction>
+                </div>
+
               </a-col>
             </a-row>
           </IocCard>
@@ -49,7 +52,6 @@ import DashboardMessageCard from "@/components/dashboard/message/dashboardMessag
 import DashboardPortrait from "@/components/dashboard/portrait/dashboardPortrait.vue";
 import DashboardMore from "@/components/dashboard/more/dashboardMore.vue";
 import FunctionManage from "@/components/dashboard/commonFuncManage/functionManage.vue";
-import {requireImg} from "@/utils/requireImg";
 
 
 export default {
@@ -71,10 +73,12 @@ export default {
     this.commonMenu = this.$store.menuStore().commonFunction;
   },
   methods: {
-    requireImg,
     openFuncManage() {
       this.showFuncManage = true;
-    }
+    },
+    toRoute(route) {
+      this.$router.push({path: route})
+    },
   }
 }
 </script>
@@ -83,7 +87,7 @@ export default {
 .ioc-dashboard {
   width: 100%;
   height: 100%;
-  padding: 12px;
+  padding: 12px 18px;
   background-color: #f0f2f5;
   overflow-y: auto;
   div {

src/components/home/ContainerAside.vue

@@ -72,9 +72,6 @@ export default {
             <span>{{ item.name }}</span>
           </template>
           <a-menu-item v-for="subItem in item.children" :key="subItem.router" :route="subItem.router">
-            <span class="anticon" style="vertical-align: text-top">
-          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
-        </span>
             <span>{{ subItem.name }}</span>
           </a-menu-item>
         </a-sub-menu>

src/components/report/common/reportQuery.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="ioc-report-query-form">
+    <a-form layout="inline" :form="formData">
+      <!--<a-form-item label="单位名称：" class="formItem">-->
+      <!--  <a-select style="width: 240px">-->
+      <!--    <a-select-option value="中迅"> 中迅 </a-select-option>-->
+      <!--    <a-select-option value="电信规划院"> 电信规划院 </a-select-option>-->
+      <!--  </a-select>-->
+      <!--</a-form-item>-->
+      <!--<a-form-item label="部门名称：" class="formItem">-->
+      <!--  <a-select style="width: 240px">-->
+      <!--    <a-select-option value="中迅"> 中迅 </a-select-option>-->
+      <!--    <a-select-option value="电信规划院"> 电信规划院 </a-select-option>-->
+      <!--  </a-select>-->
+      <!--</a-form-item>-->
+      <a-form-item label="时间范围：" class="formItem">
+        <timeRange ref="timeRange"></timeRange>
+      </a-form-item>
+      <a-form-item class="formItem">
+        <a-button type="primary">重置</a-button>
+        <a-button type="primary">查询</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import timeRange from "@/components/common/timeRange.vue";
+export default {
+  components: {
+    timeRange,
+  },
+  data() {
+    return {
+      formData: {},
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.formItem {
+  margin: 0px 15px;
+}
+</style>

src/components/report/data/reportDataRestaurant.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportData-restaurant">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-data-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportData-restaurant {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-data {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/report.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="iot-report">
+    <ContainerAside></ContainerAside>
+    <div class="pageContainer-body">
+      <Breadcrumb></Breadcrumb>
+        <div class="pageContainer-content" >
+          <router-view />
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineAsyncComponent} from "vue";
+
+export default {
+  data() {
+    return {
+    }
+  },
+  components: {
+    ContainerAside: defineAsyncComponent(() => import("@/components/home/ContainerAside.vue")),
+    Breadcrumb: defineAsyncComponent(() => import("@/components/breadcrumb/iotBreadcrumb.vue")),
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.iot-report {
+  width: 100%;
+  height: 100%;
+}
+.myChart {
+  width: 100%;
+}
+</style>

src/components/report/reportData.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/report/reportTable.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/report/table/reportTableCarbon.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-carbon">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-carbon {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/table/reportTableCustom.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-custom">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-custom {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/table/reportTableLife.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-life">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-life {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/table/reportTableOperation.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-operation">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-operation {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/table/reportTableSecurity.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-security">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-security {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/components/report/table/reportTableWork.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="reportTable-work">
+    <div class="report-query">
+      <ReportQuery />
+    </div>
+
+    <div class="report-table-view">
+      <Card title="报告预览">
+        <template #title-extra>
+          <div style="padding-right: 20px">
+            <span style="color: #B2B2B2;font-size: 12px">支持 pdf,word,excel</span>
+            <a-button type="link" size="small">导出</a-button>
+            <a-button type="link" size="small" >打印</a-button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReportQuery from "@/components/report/common/reportQuery.vue";
+import Card from "@/components/common/card.vue";
+export default {
+  components: {
+    Card,
+    ReportQuery
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.reportTable-work {
+  width: 100%;
+  height: 100%;
+  .report-query {
+    background-color: #ffffff;
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+  .report-table-view {
+    width: 100%;
+    height: 690px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/data/json/menuList.json

@@ -238,13 +238,52 @@
     "children": [
       {
         "name": "报表",
-        "router": "",
-        "icon": ""
+        "router": "/report/table",
+        "icon": "",
+        "children": [
+          {
+            "name": "定制化消费报表",
+            "router": "/report/table/custom",
+            "icon": ""
+          },
+          {
+            "name": "智享生活报表",
+            "router": "/report/table/life",
+            "icon": ""
+          },
+          {
+            "name": "智慧办公报表",
+            "router": "/report/table/work",
+            "icon": ""
+          },
+          {
+            "name": "数智双碳报表",
+            "router": "/report/table/carbon",
+            "icon": ""
+          },
+          {
+            "name": "智慧运营报表",
+            "router": "/report/table/operation",
+            "icon": ""
+          },
+          {
+            "name": "智慧安防报表",
+            "router": "/report/table/security",
+            "icon": ""
+          }
+        ]
       },
       {
         "name": "报告",
-        "router": "",
-        "icon": ""
+        "router": "/report/data",
+        "icon": "",
+        "children": [
+          {
+            "name": "餐厅消费报告",
+            "router": "/report/data/restaurant",
+            "icon": ""
+          }
+        ]
       }
     ]
   },

src/router/index.js

@@ -158,6 +158,72 @@ const router = new VueRouter({
             }
           ]
         },
+        {
+          path: '/report',
+          name: 'report',
+          meta: {breadcrumb: '数据报表'},
+          component: () => import('@/components/report/report.vue'),
+          children: [
+            {
+              path: '/report/table',
+              name: 'reportTable',
+              meta: {breadcrumb: '报表'},
+              component: () => import('@/components/report/reportTable.vue'),
+              children: [
+                {
+                  path: '/report/table/custom',
+                  name: 'reportTableCustom',
+                  meta: {breadcrumb: '定制化消费报表'},
+                  component: () => import('@/components/report/table/reportTableCustom.vue')
+                },
+                {
+                  path: '/report/table/life',
+                  name: 'reportTableLife',
+                  meta: {breadcrumb: '智享生活报表'},
+                  component: () => import('@/components/report/table/reportTableLife.vue')
+                },
+                {
+                  path: '/report/table/work',
+                  name: 'reportTableWork',
+                  meta: {breadcrumb: '智慧办公报表'},
+                  component: () => import('@/components/report/table/reportTableWork.vue')
+                },
+                {
+                  path: '/report/table/carbon',
+                  name: 'reportTableCarbon',
+                  meta: {breadcrumb: '数智双碳报表'},
+                  component: () => import('@/components/report/table/reportTableCarbon.vue')
+                },
+                {
+                  path: '/report/table/operation',
+                  name: 'reportTableOperation',
+                  meta: {breadcrumb: '智慧运营报表'},
+                  component: () => import('@/components/report/table/reportTableOperation.vue')
+                },
+                {
+                  path: '/report/table/reportTableSecurity',
+                  name: 'reportTableSecurity',
+                  meta: {breadcrumb: '智慧安防报表'},
+                  component: () => import('@/components/report/table/reportTableSecurity.vue')
+                },
+              ]
+            },
+            {
+              path: '/report/data',
+              name: 'reportData',
+              meta: {breadcrumb: '报告'},
+              component: () => import('@/components/report/reportData.vue'),
+              children: [
+                {
+                  path: '/report/data/restaurant',
+                  name: 'reportDataRestaurant',
+                  meta: {breadcrumb: '餐厅消费报告'},
+                  component: () => import('@/components/report/table/reportDataRestaurant.vue')
+                }
+              ]
+            }
+          ]
+        },
         {
           path: '/security',
           name: 'security',

src/views/HomeView.vue

@@ -77,10 +77,12 @@ export default {
     },
     judgeHideAside() {
       let name = this.$route.name
-      //if (['dashboard','notice'].indexOf(name)>-1) {
-      if (['notice'].indexOf(name)>-1) {
+      if (['dashboard','notice'].indexOf(name)>-1) {
         this.asideWidth = 0;
         this.collapsedWidth=0;
+      } else if (this.asideWidth===0) {
+        this.asideWidth = 160;
+        this.collapsedWidth = 60;
       }
     },
   },