引入大屏三方库。修改路由等信息。

package.json

@@ -7,7 +7,6 @@
     "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
     "build:prod": "vite build --mode production && vue-tsc --noEmit",
-    "prepare": "husky",
     "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
@@ -42,6 +41,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@kjgl77/datav-vue3": "^1.7.3",
     "@smallwei/avue": "^3.3.3",
     "@types/smallwei__avue": "^3.0.5",
     "@vueuse/core": "^10.9.0",
@@ -91,6 +91,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "fast-glob": "^3.3.2",
+    "less": "^4.2.0",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.35",
     "postcss-html": "^1.6.0",

src/layout/components/header.vue

@@ -1,12 +1,203 @@
-<script lang="ts" setup></script>
-
 <template>
-  <div class="commonHeader">zhe shi header</div>
+  <div class="commonHeader">
+    <div style="width: 155px">
+      <svg-icon
+        v-if="routeMeta.back"
+        icon-class="back"
+        size="48"
+        @click="commonBack"
+      />
+      <!-- <svg-icon v-else icon-class="LOGO" style="height: 48px; width: 155px" /> -->
+    </div>
+    <div class="middle-title">
+      {{ routeMeta.title }}
+    </div>
+    <div>
+      <el-space>
+        <div>
+          <svg-icon
+            class="activeNotice"
+            icon-class="lingdang"
+            size="48"
+            @click="messageStatus = !messageStatus"
+          />
+        </div>
+        <div class="task"></div>
+        <div>
+          <div class="name">{{ userStore.user.username }}</div>
+          <div class="work">{{ userStore.user.station }}</div>
+        </div>
+        <el-dropdown
+          ref="dropdown1"
+          trigger="contextmenu"
+          @command="handleCommand"
+        >
+          <!--          <img-->
+          <!--            v-if="userStore.user.avatar"-->
+          <!--            :alt="userStore.user.avatar"-->
+          <!--            :src="userStore.user.avatar"-->
+          <!--            fit="cover"-->
+          <!--            style="-->
+          <!--              width: 48px;-->
+          <!--              height: 48px;-->
+          <!--              border-radius: 24px;-->
+          <!--              border: 1px solid #ccc;-->
+          <!--            "-->
+          <!--            @click="showClick"-->
+          <!--          />-->
+          <svg-icon
+            icon-class="head"
+            size="48"
+            style="
+              width: 48px;
+              height: 48px;
+              border-radius: 24px;
+              border: 1px solid #ccc;
+            "
+            @click="showClick"
+          />
+          <template #dropdown>
+            <el-dropdown-menu style="width: 150px">
+              <el-dropdown-item command="b">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-space>
+    </div>
+  </div>
 </template>
 
+<script lang="ts" setup>
+// import dayjs from "dayjs";
+import type { DropdownInstance } from "element-plus";
+import { logoutApi } from "@/api/auth";
+import { useUserStore } from "@/store";
+
+const userStore = useUserStore();
+
+const router = useRouter();
+const route = useRoute();
+const routeMeta = computed(() => {
+  return route.meta;
+});
+
+const dropdown1 = ref<DropdownInstance>();
+
+const processCount = ref(50);
+const messageStatus = ref(false);
+
+const showClick = () => {
+  if (!dropdown1.value) return;
+  dropdown1.value.handleOpen();
+};
+
+const commonBack = (itemValue) => {
+  router.back();
+};
+
+const handleCommand = (command: string | number | object) => {
+  if (command === "b") {
+    logoutApi().then(() => {
+      localStorage.setItem("token", "");
+      location.reload();
+    });
+  }
+};
+</script>
+
 <style lang="scss" scoped>
+:deep(.el-dropdown-menu__item) {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.9);
+}
+
 .commonHeader {
   height: $navbar-height;
   width: 100%;
+  background-color: #409eff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  //border: 1px solid red;
+
+  .middle-title {
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 24px;
+    text-align: center;
+  }
+
+  .date {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: center;
+  }
+
+  .time {
+    font-weight: 500;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 23px;
+  }
+
+  .head {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+  }
+
+  .name {
+    font-weight: 500;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 14px;
+    text-align: right;
+  }
+
+  .work {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: right;
+    margin-top: 5px;
+  }
+
+  .task {
+    padding-top: 5px;
+    margin-right: 10px;
+  }
+
+  // .activeNotice {
+  //   animation: swing 0.15s infinite alternate ease-in-out;
+  // }
+
+  // @keyframes swing {
+  //   0% {
+  //     transform: rotate(-45deg);
+  //   }
+
+  //   100% {
+  //     transform: rotate(45deg);
+  //   }
+  // }
+
+  .process {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: right;
+    margin-top: 8px;
+  }
 }
 </style>

src/main.ts

@@ -3,7 +3,13 @@ import App from "./App.vue";
 import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
-import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
+// avue
+import {
+  setupEleAvue,
+  setupElIcons,
+  setupI18n,
+  setupPermission,
+} from "@/plugins";
 
 // 本地SVG图标
 import "virtual:svg-icons-register";
@@ -14,8 +20,7 @@ import "@/styles/index.scss";
 import "uno.css";
 import "animate.css";
 
-// avue
-import { setupEleAvue } from "@/plugins";
+import DataVVue3 from "@kjgl77/datav-vue3";
 
 const app = createApp(App);
 // 全局注册 自定义指令(directive)
@@ -31,4 +36,4 @@ setupPermission();
 
 setupEleAvue(app);
 
-app.use(router).mount("#app");
+app.use(router).use(DataVVue3).mount("#app");

src/router/index.ts

@@ -26,29 +26,26 @@ export const constantRoutes: RouteRecordRaw[] = [
     path: "/",
     name: "/",
     component: Layout,
-    redirect: "/process",
+    redirect: "/main",
     children: [
       {
-        path: "process",
-        component: () => import("@/views/process/main.vue"),
-        name: "process",
+        path: "main",
+        component: () => import("@/views/main/main.vue"),
+        name: "main",
 
         meta: {
-          title: "process",
-          icon: "homepage",
-        },
-      },
-      {
-        path: "pro-steps",
-        component: () => import("@/views/pro-steps/index.vue"),
-        name: "pro-steps",
-        meta: {
-          title: "pro-steps",
+          title: "综合管理平台",
           icon: "homepage",
         },
       },
     ],
   },
+  {
+    path: "/totalScreen",
+    component: () => import("@/views/big-screens/TotalScreen.vue"),
+    name: "totalScreen",
+    meta: { hidden: true },
+  },
 
   {
     path: "/:pathMatch(.*)*", // 必备

src/views/big-screens/TotalScreen.vue

@@ -0,0 +1,11 @@
+<template>
+  <div style="height: 100vh; width: 100vw">
+    <Index />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Index from "./datav/index.vue";
+</script>
+
+<style lang="scss" scoped></style>

src/views/big-screens/datav/BottomCharts.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="bottom-charts">
+    <div class="bc-chart-item">
+      <div class="bcci-header">赵钱收费站</div>
+      <dv-active-ring-chart :config="config1" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+    <dv-decoration-2 :reverse="true" class="decoration-1" style="width: 5px" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">孙李收费站</div>
+      <dv-active-ring-chart :config="config2" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+
+    <dv-decoration-2 :reverse="true" class="decoration-2" style="width: 5px" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">周吴收费站</div>
+      <dv-active-ring-chart :config="config3" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+
+    <dv-decoration-2 :reverse="true" class="decoration-3" style="width: 5px" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">郑王收费站</div>
+      <dv-active-ring-chart :config="config4" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from "./LabelTag.vue";
+
+export default {
+  name: "BottomCharts",
+  components: {
+    LabelTag,
+  },
+  data() {
+    return {
+      config1: {
+        data: [
+          {
+            name: "收费站",
+            value: 356,
+          },
+          {
+            name: "监控中心",
+            value: 215,
+          },
+          {
+            name: "道路外场",
+            value: 90,
+          },
+          {
+            name: "其他",
+            value: 317,
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        radius: "65%",
+        activeRadius: "70%",
+      },
+
+      config2: {
+        data: [
+          {
+            name: "收费站",
+            value: 615,
+          },
+          {
+            name: "监控中心",
+            value: 322,
+          },
+          {
+            name: "道路外场",
+            value: 198,
+          },
+          {
+            name: "其他",
+            value: 80,
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        radius: "65%",
+        activeRadius: "70%",
+      },
+
+      config3: {
+        data: [
+          {
+            name: "收费站",
+            value: 452,
+          },
+          {
+            name: "监控中心",
+            value: 512,
+          },
+          {
+            name: "道路外场",
+            value: 333,
+          },
+          {
+            name: "其他",
+            value: 255,
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        radius: "65%",
+        activeRadius: "70%",
+      },
+
+      config4: {
+        data: [
+          {
+            name: "收费站",
+            value: 156,
+          },
+          {
+            name: "监控中心",
+            value: 415,
+          },
+          {
+            name: "道路外场",
+            value: 90,
+          },
+          {
+            name: "其他",
+            value: 210,
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        radius: "65%",
+        activeRadius: "70%",
+      },
+
+      labelConfig: {
+        data: ["收费站", "监控中心", "道路外场", "其他"],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.bottom-charts {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .bc-chart-item {
+    width: 25%;
+    height: 100%;
+    padding-top: 20px;
+    box-sizing: border-box;
+  }
+
+  .bcci-header {
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+  }
+
+  .dv-active-ring-chart {
+    height: calc(~"100% - 80px");
+  }
+
+  .label-tag {
+    height: 30px;
+  }
+
+  .active-ring-name {
+    font-size: 18px !important;
+  }
+
+  .decoration-1,
+  .decoration-2,
+  .decoration-3 {
+    display: absolute;
+    left: 0%;
+  }
+}
+</style>

src/views/big-screens/datav/CenterCmp.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="center-cmp">
+    <div class="cc-header">
+      <dv-decoration-1 style="width: 200px; height: 50px" />
+      <div>每日产量统计</div>
+      <dv-decoration-1 style="width: 200px; height: 50px" />
+    </div>
+
+    <div class="cc-details">
+      <div>设备总数</div>
+      <div class="card">2</div>
+      <div class="card">1</div>
+      <div class="card">3</div>
+      <div class="card">7</div>
+    </div>
+
+    <div class="cc-main-container">
+      <div class="ccmc-left">
+        <div class="station-info">产品1<span>1315</span></div>
+        <div class="station-info">监控中心<span>415</span></div>
+      </div>
+
+      <dv-active-ring-chart :config="config" class="ccmc-middle" />
+
+      <div class="ccmc-right">
+        <div class="station-info"><span>90</span>道路外场</div>
+        <div class="station-info"><span>317</span>其他</div>
+      </div>
+
+      <LabelTag :config="labelConfig" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from "./LabelTag.vue";
+
+export default {
+  name: "CenterCmp",
+  components: {
+    LabelTag,
+  },
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: "产品1",
+            value: 1315,
+          },
+          {
+            name: "产品2",
+            value: 415,
+          },
+          {
+            name: "产品4",
+            value: 90,
+          },
+          {
+            name: "其他",
+            value: 317,
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        lineWidth: 30,
+        radius: "55%",
+        activeRadius: "60%",
+      },
+
+      labelConfig: {
+        data: ["收费站", "监控中心", "道路外场", "其他"],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.center-cmp {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+
+  .cc-header {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+  }
+
+  .cc-details {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    font-size: 32px;
+    align-items: center;
+
+    .card {
+      background-color: rgba(4, 49, 128, 0.6);
+      color: #08e5ff;
+      height: 70px;
+      width: 70px;
+      font-size: 45px;
+      font-weight: bold;
+      line-height: 70px;
+      text-align: center;
+      margin: 10px;
+    }
+  }
+
+  .cc-main-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+
+    .ccmc-middle {
+      width: 50%;
+      height: 90%;
+
+      .active-ring-name {
+        font-size: 20px !important;
+      }
+    }
+
+    .ccmc-left,
+    .ccmc-right {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 24px;
+
+      span {
+        font-size: 40px;
+        font-weight: bold;
+      }
+
+      .station-info {
+        height: 80px;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ccmc-left {
+      align-items: flex-end;
+
+      span {
+        margin-left: 20px;
+      }
+    }
+
+    .ccmc-right {
+      align-items: flex-start;
+
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .label-tag {
+    position: absolute;
+    width: 500px;
+    height: 30px;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/big-screens/datav/LabelTag.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="label-tag">
+    <template v-if="mergedConfig">
+      <div
+        v-for="(label, i) in mergedConfig.data"
+        :key="label"
+        class="label-item"
+      >
+        {{ label }}
+        <div
+          :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`"
+        ></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LabelTag",
+  props: {
+    config: {
+      type: Object,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      defaultConfig: {
+        /**
+         * @description Label data
+         * @type {Array<String>}
+         * @default data = []
+         * @example data = ['label1', 'label2']
+         */
+        data: [],
+        /**
+         * @description Label color (Hex|Rgb|Rgba|color keywords)
+         * @type {Array<String>}
+         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+      },
+
+      mergedConfig: null,
+    };
+  },
+  watch: {
+    config() {
+      const { mergeConfig } = this;
+
+      mergeConfig();
+    },
+  },
+  mounted() {
+    const { mergeConfig } = this;
+
+    mergeConfig();
+  },
+  methods: {
+    mergeConfig() {
+      let { config, defaultConfig } = this;
+
+      this.mergedConfig = { ...config, ...defaultConfig };
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.label-tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .label-item {
+    margin: 5px;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+
+    div {
+      width: 12px;
+      height: 12px;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

src/views/big-screens/datav/LeftChart1.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="left-chart-1">
+    <div class="lc1-header">订单信息</div>
+    <div class="lc1-details">统计<span>430</span></div>
+    <dv-capsule-chart :config="config" class="lc1-chart" />
+    <dv-decoration-2 style="height: 10px" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart1",
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: "收费系统",
+            value: 167,
+          },
+          {
+            name: "通信系统",
+            value: 67,
+          },
+          {
+            name: "监控系统",
+            value: 123,
+          },
+          {
+            name: "供配电系统",
+            value: 55,
+          },
+          {
+            name: "其他",
+            value: 98,
+          },
+        ],
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        unit: "件",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.left-chart-1 {
+  width: 100%;
+  height: 37%;
+  display: flex;
+  flex-grow: 0;
+  flex-direction: column;
+
+  .lc1-header {
+    text-align: center;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+
+  .lc1-details {
+    height: 50px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc1-chart {
+    flex: 1;
+  }
+}
+</style>

src/views/big-screens/datav/LeftChart2.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="left-chart-2">
+    <div class="lc2-header">物料情况</div>
+    <div class="lc2-details">总数<span>245</span></div>
+    <dv-charts :option="option" class="lc2-chart" />
+    <dv-decoration-2 style="height: 10px" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart2",
+  data() {
+    return {
+      option: {
+        series: [
+          {
+            type: "pie",
+            data: [
+              { name: "收费系统", value: 93 },
+              { name: "通信系统", value: 32 },
+              { name: "监控系统", value: 65 },
+              { name: "供配电系统", value: 44 },
+              { name: "其他", value: 52 },
+            ],
+            radius: ["45%", "65%"],
+            insideLabel: {
+              show: false,
+            },
+            outsideLabel: {
+              labelLineEndLength: 10,
+              formatter: "{percent}%\n{name}",
+              style: {
+                fontSize: 14,
+                fill: "#fff",
+              },
+            },
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.left-chart-2 {
+  width: 100%;
+  height: 30%;
+  display: flex;
+  flex-direction: column;
+
+  .lc2-header {
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+
+  .lc2-details {
+    height: 40px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc2-chart {
+    height: calc(~"100% - 80px");
+  }
+}
+</style>

src/views/big-screens/datav/LeftChart3.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="left-chart-3">
+    <div class="lc3-header">生产进度</div>
+    <div class="lc3-details">设备运行总数<span>245</span></div>
+    <dv-capsule-chart :config="config" class="lc3-chart" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart3",
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: "收费系统",
+            value: 78,
+          },
+          {
+            name: "通信系统",
+            value: 54,
+          },
+          {
+            name: "监控系统",
+            value: 123,
+          },
+          {
+            name: "供配电系统",
+            value: 167,
+          },
+          {
+            name: "其他",
+            value: 77,
+          },
+        ],
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        unit: "件",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.left-chart-3 {
+  width: 100%;
+  height: 33%;
+  display: flex;
+  flex-direction: column;
+
+  .lc3-header {
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+
+  .lc3-details {
+    height: 40px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc3-chart {
+    flex: 1;
+  }
+}
+</style>

src/views/big-screens/datav/RightChart1.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="right-chart-1">
+    <div class="rc1-header">生产完成情况</div>
+
+    <div class="rc1-chart-container">
+      <div class="left">
+        <div class="number">262</div>
+        <div>设备运行总数</div>
+      </div>
+
+      <dv-capsule-chart :config="config" class="right" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RightChart1",
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: "收费系统",
+            value: 25,
+          },
+          {
+            name: "通信系统",
+            value: 66,
+          },
+          {
+            name: "监控系统",
+            value: 123,
+          },
+          {
+            name: "供配电系统",
+            value: 72,
+          },
+          {
+            name: "其他",
+            value: 99,
+          },
+        ],
+        unit: "件",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.right-chart-1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .rc1-header {
+    font-size: 24px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .rc1-chart-container {
+    flex: 1;
+    display: flex;
+  }
+
+  .left {
+    width: 30%;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .number {
+      font-size: 34px;
+      color: #096dd9;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/big-screens/datav/RightChart2.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="right-chart-2">
+    <div class="rc1-header">设备监控</div>
+
+    <div class="rc1-chart-container">
+      <div class="left">
+        <div class="number">267</div>
+        <div>设备运行总数</div>
+      </div>
+
+      <dv-charts :option="option" class="right" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RightChart2",
+  data() {
+    return {
+      option: {
+        series: [
+          {
+            type: "pie",
+            data: [
+              { name: "收费系统", value: 93 },
+              { name: "通信系统", value: 66 },
+              { name: "监控系统", value: 52 },
+              { name: "供配电系统", value: 34 },
+              { name: "其他", value: 22 },
+            ],
+            radius: ["45%", "65%"],
+            insideLabel: {
+              show: false,
+            },
+            outsideLabel: {
+              labelLineEndLength: 10,
+              formatter: "{percent}%\n{name}",
+              style: {
+                fontSize: 14,
+                fill: "#fff",
+              },
+            },
+          },
+        ],
+        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.right-chart-2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .rc1-header {
+    font-size: 24px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .rc1-chart-container {
+    flex: 1;
+    display: flex;
+  }
+
+  .left {
+    width: 30%;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .number {
+      font-size: 34px;
+      color: #096dd9;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/big-screens/datav/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div id="data-view">
+    <dv-full-screen-container>
+      <div class="main-header">
+        <div class="mh-left">
+          <dv-border-box-2
+            style="
+              width: 120px;
+              height: 50px;
+              line-height: 50px;
+              text-align: center;
+              margin-left: 20px;
+            "
+            @click="goBack"
+          >
+            返回
+          </dv-border-box-2>
+        </div>
+        <div class="mh-middle">综合监控大屏</div>
+        <div class="mh-right"></div>
+      </div>
+
+      <dv-border-box-1 class="main-container">
+        <dv-border-box-3 class="left-chart-container">
+          <Left-Chart-1 />
+          <Left-Chart-2 />
+          <Left-Chart-3 />
+        </dv-border-box-3>
+
+        <div class="right-main-container">
+          <div class="rmc-top-container">
+            <dv-border-box-3 class="rmctc-left-container">
+              <Center-Cmp />
+            </dv-border-box-3>
+
+            <div class="rmctc-right-container">
+              <dv-border-box-3 class="rmctc-chart-1">
+                <Right-Chart-1 />
+              </dv-border-box-3>
+
+              <dv-border-box-4 :reverse="true" class="rmctc-chart-2">
+                <Right-Chart-2 />
+              </dv-border-box-4>
+            </div>
+          </div>
+
+          <dv-border-box-4 class="rmc-bottom-container">
+            <Bottom-Charts />
+          </dv-border-box-4>
+        </div>
+      </dv-border-box-1>
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+import LeftChart1 from "./LeftChart1.vue";
+import LeftChart2 from "./LeftChart2.vue";
+import LeftChart3 from "./LeftChart3.vue";
+
+import CenterCmp from "./CenterCmp.vue";
+
+import RightChart1 from "./RightChart1.vue";
+import RightChart2 from "./RightChart2.vue";
+
+import BottomCharts from "./BottomCharts.vue";
+
+export default {
+  name: "DataView",
+  components: {
+    LeftChart1,
+    LeftChart2,
+    LeftChart3,
+    CenterCmp,
+    RightChart1,
+    RightChart2,
+    BottomCharts,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goBack() {
+      this.$router.back();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url("./img/bg.png");
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .mh-left {
+      font-size: 20px;
+      color: rgb(1, 134, 187);
+
+      a:visited {
+        color: rgb(1, 134, 187);
+      }
+    }
+
+    .mh-middle {
+      font-size: 30px;
+    }
+
+    .mh-left,
+    .mh-right {
+      width: 450px;
+    }
+  }
+
+  .main-container {
+    height: calc(~"100% - 80px");
+
+    .border-box-content {
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+    }
+  }
+
+  .left-chart-container {
+    width: 22%;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .border-box-content {
+      flex-direction: column;
+    }
+  }
+
+  .right-main-container {
+    width: 78%;
+    padding-left: 5px;
+    box-sizing: border-box;
+  }
+
+  .rmc-top-container {
+    height: 65%;
+    display: flex;
+  }
+
+  .rmctc-left-container {
+    width: 65%;
+  }
+
+  .rmctc-right-container {
+    width: 35%;
+  }
+
+  .rmc-bottom-container {
+    height: 35%;
+  }
+
+  .rmctc-chart-1,
+  .rmctc-chart-2 {
+    height: 50%;
+  }
+}
+</style>

src/views/login/index.vue

@@ -318,4 +318,38 @@ html.dark .login-container {
     }
   }
 }
+
+:deep(.el-select__placeholder) {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+:deep(.el-select__placeholder.is-transparent) {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+:deep(.el-input__inner) {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+:deep(.el-select) {
+  .el-select__wrapper {
+    padding: 0;
+    background-color: transparent;
+    box-shadow: none;
+
+    &.is-focus,
+    &:hover {
+      box-shadow: none !important;
+    }
+
+    input:-webkit-autofill {
+      /* 通过延时渲染背景色变相去除背景颜色 */
+      transition: background-color 1000s ease-in-out 0s;
+    }
+  }
+}
 </style>

src/views/main/main.vue

@@ -0,0 +1,12 @@
+<template>
+  <div @click="gotoZHDP">综合大屏</div>
+</template>
+
+<script lang="ts" setup>
+const router = useRouter();
+const gotoZHDP = () => {
+  router.push({ name: "totalScreen" });
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/process/main.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div>工序 首页</div>
-</template>
-
-<style lang="scss" scoped></style>

src/views/pro-steps/index.vue

@@ -1,7 +1,7 @@
-<script lang="ts" setup></script>
-
 <template>
-  <div>工步</div>
+  <div>src/views/systems /systems</div>
 </template>
 
+<script lang="ts" setup></script>
+
 <style lang="scss" scoped></style>

vite.config.ts

@@ -111,7 +111,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           }),
         ],
         // 指定自定义组件位置(默认:src/components)
-        dirs: ["src/components", "src/**/components"],
+        dirs: ["src/components"],
         // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
         dts: false,
         // dts: "src/typings/components.d.ts",
@@ -240,7 +240,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
     define: {
       __APP_INFO__: JSON.stringify(__APP_INFO__),
-      "process.env": process.env, //尝试访问 Node.js 环境变量，但这些变量在浏览器环境中是不存在的。(process is not defined)
+      "process.env": process.env, //尝试访问 Node.js 环境变量，但这些变量在浏览器环境中是不存在的。(main is not defined)
     },
   };
 });