充电统计看板

admin-web/src/router/route.ts

@@ -102,7 +102,21 @@ export const adminRoutes: Array<RouteRecordRaw> = [
                     // perm:'admin'
                 }
             },
-
+            {
+                path: '/kanban',
+                name: 'adminKanban',
+                component: () => import('/@/views/admin/kanban/index.vue'),
+                meta: {
+                    title: '数据看板',
+                    isLink: '',
+                    isHide: false,
+                    isKeepAlive: true,
+                    isAffix: false,
+                    isIframe: false,
+                    icon: 'ele-PictureRounded',
+                    // perm:"banner.list",
+                }
+            },
             {
                 path: '/station',
                 name: 'adminStation',

admin-web/src/views/admin/kanban/index.vue

@@ -0,0 +1,182 @@
+<style scoped lang="scss">
+.system-container {
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    overflow: auto;
+
+    .el-table {
+      flex: 1;
+    }
+
+  }
+}
+
+.page-content {
+  margin-bottom: 20px;
+}
+
+.page-pager {
+  background-color: #fff;
+  height: 24px;
+}
+</style>
+<template>
+  <div class="system-container layout-padding">
+    <el-card shadow="hover" class="layout-padding-auto">
+
+      <el-form
+          :model="state.formQuery"
+          ref="queryRef"
+          size="default" label-width="0px" class="mt5 mb5">
+        <ext-select
+            v-model="state.formQuery.stationIdList"
+            placeholder="活动名称"
+            clearable
+            multiple
+            :data-list="state.stationList"
+            @blur="loadData(true)"
+            class="wd150 mr10">
+        </ext-select>
+
+        <el-button class="ml10" plain size="default" type="success" @click="loadData()">
+          <SvgIcon name="ele-Search"/>
+          查询
+        </el-button>
+      </el-form>
+
+    </el-card>
+
+    <el-card>
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>充电用户数</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>有效订单数</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>总电量</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>总金额</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>总电费</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>服务费</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>平均电量</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>平均订单费用</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+
+
+      <el-card shadow="hover" class="layout-padding-auto">
+        <template #header>平均充电用电量</template>
+        <template #default>
+          XXXx
+        </template>
+      </el-card>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts" name="ActivityList">
+import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onBeforeUnmount} from 'vue';
+import {$body, $get} from "/@/utils/request";
+import {Msg} from "/@/utils/message";
+
+
+import mittBus from '/@/utils/mitt';
+import ExtDSelect from "/@/components/form/ExtDSelect.vue";
+import ExtDatePicker from "/@/components/form/ExtDatePicker.vue";
+import ExtSelect from "/@/components/form/ExtSelect.vue";
+
+//定义引用
+const queryRef = ref();
+
+//定义变量
+const state = reactive({
+  formQuery: {
+    stationIdList: []
+  },
+  stationList: []
+})
+
+
+// 监听双向绑定 modelValue 的变化
+// watch(
+//         () => state.pageIndex,
+//         () => {
+//
+//         }
+// );
+
+//生命周期钩子
+onBeforeMount(() => {
+  loadStationList()
+})
+
+onMounted(() => {
+  loadData();
+});
+
+
+//region 方法区
+
+const loadStationList = () => {
+  $get(`/station/listStation`, {pageNum: 1024}).then((res: any) => {
+    state.stationList = res;
+  }).catch(e => {
+    console.error(e)
+  })
+}
+
+// 初始化表格数据
+const loadData = () => {
+};
+
+
+//endregion
+
+</script>