feat:优化页面

admin_2/src/assets/css/common.less

 /* 颜色 */
+:root{
+  --primary:#1890ff;
+}
 .primary {
   color: #1890ff;
 }

admin_2/src/layouts/Layouts.vue

@@ -33,7 +33,6 @@ export default {
 
 <style lang="less" scoped>
 .not-home {
-  padding-left: 50px;
-  padding-right: 50px;
+  padding: 24px 50px;
 }
 </style>

admin_2/src/layouts/components/Header.vue

@@ -7,10 +7,10 @@
         alt="LOGO"
         @click="handleGoHome"
       />
-      <h1 class="title cursor-pointer" @click="handleGoHome">
+      <h1 class="title mr-[50px] cursor-pointer" @click="handleGoHome">
         {{ sysName ? sysName : systemName }}
       </h1>
-      <HeaderSite class="mr50 ml20"></HeaderSite>
+      <!-- <HeaderSite class="mr50 ml20"></HeaderSite> -->
       <!-- 导航 -->
       <el-menu
         :default-active="activeMenu"
@@ -56,11 +56,11 @@
 </template>
 
 <script>
-import HeaderSite from "./HeaderSite.vue";
+// import HeaderSite from "./HeaderSite.vue";
 import { mapState } from "vuex";
 export default {
   components: {
-    HeaderSite,
+    // HeaderSite,
   },
   data() {
     return {
@@ -99,6 +99,7 @@ export default {
   background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
   color: #fff;
   flex-shrink: 0;
+  border-bottom: 1px solid rgba(254, 254, 254, 0.35);
   .left {
     height: 100%;
   }
@@ -127,16 +128,16 @@ export default {
   }
   .el-menu-item {
     height: 100% !important;
-    border: none !important;
+    // border: none !important;
     display: flex;
     align-items: center;
     color: rgba(254, 254, 254, 0.65);
 
     &:hover {
-      // background-color: transparent !important;
+      background-color: transparent !important;
+      border-bottom: 2px solid #fff !important;
+      // background-color: #1890ff !important;
       color: #fff !important;
-      background-color: #1890ff !important;
-      // border-bottom: 2px solid #fff !important;
     }
   }
 }
@@ -147,12 +148,12 @@ export default {
     display: flex;
     align-items: center;
     color: rgba(254, 254, 254, 0.65) !important;
-    border: none !important;
+    // border: none !important;
     &:hover {
-      // background-color: transparent !important;
+      background-color: transparent !important;
+      border-bottom: 2px solid #fff !important;
       color: #fff !important;
-      background-color: #1890ff !important;
-      // border-bottom: 2px solid #fff !important;
+      // background-color: #1890ff !important;
     }
   }
 }
@@ -169,16 +170,16 @@ export default {
 .el-menu--horizontal .el-menu .el-menu-item.is-active {
   color: #1890ff !important;
 }
-/deep/.is-active {
-  // border-bottom: 2px solid #fff !important;
+:deep(.is-active) {
+  border-bottom: 2px solid #fff !important;
+  background-color: transparent !important;
   color: #fff !important;
-  // background-color: transparent !important;
-  background-color: #1890ff !important;
+  // background-color: #1890ff !important;
   .el-submenu__title {
     border: none !important;
     color: #fff !important;
-    // background-color: transparent !important;
-    background-color: #1890ff !important;
+    background-color: transparent !important;
+    // background-color: #1890ff !important;
   }
 }
 </style>

admin_2/src/main.js

@@ -33,9 +33,11 @@ Object.keys(directives).forEach((name) =>
 // 引入echarts
 import * as echarts from "echarts";
 Vue.prototype.$echarts = echarts;
+// swiper
+import "swiper/css/swiper.min.css";
 // 注册全局组件
-// import customComponents from "@/components";
-// Vue.use(customComponents);
+import customComponents from "@/components";
+Vue.use(customComponents);
 
 Vue.config.productionTip = false;
 new Vue({

admin_2/src/pages/engine/Engine.vue

 <template>
-  <div>数据引擎</div>
+  <div class="engine flex h-full w-full flex-col">
+    <div class="top-box flex justify-between">
+      <div class="tab-box flex items-end gap-5">
+        <div
+          :class="[
+            'tab-item',
+            'top-radius',
+            {
+              active: active == 1,
+            },
+          ]"
+          @click="active = 1"
+        >
+          排队取号系统
+        </div>
+        <div
+          :class="[
+            'tab-item',
+            'top-radius',
+            {
+              active: active == 2,
+            },
+          ]"
+          @click="active = 2"
+        >
+          评价系统
+        </div>
+      </div>
+      <div class="flex gap-5">
+        <div class="search-box top-radius flex h-full items-center gap-5">
+          <div class="text-[14px] text-[#395EBF]">
+            统计时段：2023.08.01~2023.08.17
+          </div>
+          <el-date-picker
+            size="small"
+            v-model="value2"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+          <el-button size="small" type="primary">搜索</el-button>
+        </div>
+        <div class="engine-btn top-radius">
+          <img src="@/assets/img/engine.png" class="engine-img mr-2 w-[24px]" />
+          数据搜索引擎
+        </div>
+      </div>
+    </div>
+    <div class="main w-full flex-1"></div>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value2: "",
+      active: 1,
+    };
+  },
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  95% {
+    transform: rotate(20turn);
+  }
+
+  100% {
+    transform: rotate(20turn);
+  }
+}
+.engine {
+  position: relative;
+}
+.top-box {
+  width: 100%;
+  height: 48px;
+  position: relative;
+  z-index: 0;
+  .top-radius {
+    border-radius: 12px 12px 0px 0px;
+  }
+}
+.tab-box {
+  .tab-item {
+    height: 70%;
+    padding: 0px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    cursor: pointer;
+  }
+  .active {
+    height: 100%;
+    color: var(--primary);
+    font-weight: 600;
+  }
+}
+.search-box {
+  background-color: #fff;
+
+  padding: 0px 20px;
+}
+.engine-btn {
+  width: 220px;
+  color: #fff;
+  background: linear-gradient(
+    270deg,
+    rgba(139, 87, 249, 1) 0%,
+    rgba(5, 149, 253, 1) 100%
+  );
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.main {
+  background: #fff;
+  border-radius: 0px 0px 4px 4px;
+  position: relative;
+  box-shadow: 0 -0.25rem 0.25rem rgba(204, 204, 204, 0.3);
+  z-index: 1000;
+}
+.engine-img {
+  // cubic-bezier(1, 0.05, 0.1, 1)
+  animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.85) infinite;
+}
+</style>

admin_2/src/pages/home/Home.vue

@@ -3,18 +3,21 @@
     <div class="top-bg primary-bg h-[210px] w-full"></div>
     <div class="main flex w-full flex-col gap-5">
       <div class="top-data-box flex h-[100px] w-full items-center gap-5">
-        <div class="top-data-total h-full w-[30%] rounded-md p-[20px]">
-          <div class="flex flex-col gap-5">
+        <div class="top-data-total h-full w-[30%] rounded-md">
+          <div class="h-full w-full">
+            <Carousel :ImageArray="imageData"></Carousel>
+          </div>
+          <div class="data-total flex h-full w-full flex-col gap-3">
             <div>
               <span class="mr-5"> 累计汇聚数据 </span>
               <span class="text-[14px] text-[#888888]">
                 数仓最近汇聚时间：2024-06-26 23:59:59
               </span>
             </div>
-            <div class="flex">
+            <div class="flex" @click="totalData += 100">
               <el-statistic
                 group-separator=","
-                :value="895671230"
+                :value="totalData"
                 suffix="条"
                 :value-style="{
                   color: '#1890ff',
@@ -59,13 +62,27 @@
           </div>
           <div class="flex w-full flex-col gap-5 p-[20px]">
             <div class="echarts-box">
-              <LineEchart ref="DataTotalEchart"></LineEchart>
+              <LineEchart
+                ref="DataTotalEchart"
+                title="近30日数据总量趋势"
+                :dataset="dataset"
+              ></LineEchart>
             </div>
             <div class="echarts-box">
-              <LineEchart ref="DataQueueUpEchart"></LineEchart>
+              <LineEchart
+                ref="DataQueueUpEchart"
+                title="近30日排队数据总量趋势"
+                color="#36CE9E"
+                :dataset="dataset"
+              ></LineEchart>
             </div>
             <div class="echarts-box">
-              <LineEchart ref="DataEvaluateEchart"></LineEchart>
+              <LineEchart
+                ref="DataEvaluateEchart"
+                title="近30日评价数据总量趋势"
+                color="#8B5CFF"
+                :dataset="dataset"
+              ></LineEchart>
             </div>
           </div>
         </div>
@@ -73,7 +90,11 @@
           <div class="b-border flex h-[50px] w-full items-center pl-[20px]">
             对接站点矩阵
           </div>
-          <div class="w-full p-[20px]"></div>
+          <div class="grid w-full grid-cols-4 gap-5 p-[20px]">
+            <div class="h-[130px] w-full" v-for="(v, i) in areaList" :key="i">
+              <Card :info="v"></Card>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -82,45 +103,113 @@
 
 <script>
 import LineEchart from "./components/LineEchart.vue";
+import Carousel from "./components/Carousel.vue";
+import Card from "./components/Card.vue";
+import image_1 from "@/assets/img/u54.svg";
+import image_2 from "@/assets/img/u55.svg";
+import image_3 from "@/assets/img/u56.svg";
 export default {
   components: {
     LineEchart,
+    Carousel,
+    Card,
   },
   data() {
-    return {};
+    return {
+      dataset: {
+        dimensions: ["name", "value"],
+        source: [
+          {
+            name: "06-1",
+            value: 900000,
+          },
+          {
+            name: "06-2",
+            value: 800000,
+          },
+          {
+            name: "06-3",
+            value: 700000,
+          },
+          {
+            name: "06-4",
+            value: 900000,
+          },
+        ],
+      },
+      imageData: [image_1, image_2, image_3],
+      totalData: 895671230,
+      areaList: [
+        {
+          name: "高新区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "高县",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "屏山县",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "翠屏区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "叙洲区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "珙县",
+          systemList: [],
+          date: "2024-06-26",
+        },
+        {
+          name: "南溪区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "江安县",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "长宁县",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "筠连县",
+          systemList: [],
+          date: "2024-06-26",
+        },
+        {
+          name: "兴文县",
+          systemList: ["排队系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "两海示范区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+        {
+          name: "三江新区",
+          systemList: ["排队系统", "评价系统"],
+          date: "2024-06-26",
+        },
+      ],
+    };
   },
   created() {},
-  mounted() {
-    let name = [
-      "06-1",
-      "06-2",
-      "06-3",
-      "06-4",
-      "06-5",
-      "06-6",
-      "06-7",
-      "06-8",
-      "06-9",
-      "06-10",
-      "06-11",
-      "06-12",
-      "06-13",
-      "06-14",
-      "06-15",
-      "06-16",
-      "06-17",
-      "06-18",
-      "06-19",
-      "06-20",
-    ];
-    let data = [
-      900000, 800000, 700000, 900000, 500000, 900000, 80000, 200000, 100000,
-      90000, 80000, 70000, 900000, 50000, 40000, 900000, 20000, 10000, 80000,
-    ];
-    this.$refs.DataTotalEchart.initChart("近30日数据总量趋势", name, data);
-    this.$refs.DataQueueUpEchart.initChart("近30日数据总量趋势", name, data);
-    this.$refs.DataEvaluateEchart.initChart("近30日数据总量趋势", name, data);
-  },
+  mounted() {},
   methods: {},
 };
 </script>
@@ -145,9 +234,18 @@ export default {
     border-radius: 4px;
   }
 }
+
 .top-data-total {
-  background: url("@/assets/img/u54.svg") no-repeat center / 100% 100%;
+  position: relative;
+  .data-total {
+    padding: 20px 20px 0px 20px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 10;
+  }
 }
+
 .top-data-text {
   background: url("@/assets/img/card_bg_2.png") no-repeat center / 100% 100%;
 }
@@ -155,6 +253,7 @@ export default {
   font-size: 24px;
   font-weight: 600;
 }
+
 :deep(.el-carousel--vertical) {
   width: 100%;
 }

admin_2/src/pages/home/components/Card.vue

+<template>
+  <div
+    :class="[
+      'card',
+      info.systemList.length ? 'cursor-pointer' : 'cursor-not-allowed',
+    ]"
+    @click="handleClick"
+  >
+    <div>{{ info.name }}</div>
+    <el-tag
+      size="small"
+      type="danger"
+      color="#fff"
+      v-if="!info.systemList.length"
+    >
+      <i class="el-icon-link"></i>
+      等待对接</el-tag
+    >
+    <div class="cur flex gap-2" v-else>
+      <el-tag v-for="(v, i) in info.systemList" :key="i" size="small">{{
+        v
+      }}</el-tag>
+    </div>
+    <div class="card-date" v-if="info.systemList.length">
+      对接时间：{{ info.date }}
+    </div>
+    <div class="mask" v-else></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick() {
+      if (this.info.systemList.length) {
+        this.$emit("click", this.info);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.card {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: url("@/assets/img/card_bg.png") no-repeat center / 100% 100%;
+  border-radius: 4px;
+  color: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  .card-date {
+    width: 100%;
+    padding: 2px 10px;
+    font-size: 12px;
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .mask {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+</style>

admin_2/src/pages/home/components/Carousel.vue

+<template>
+  <div class="carousel">
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <img
+          class="swiper-slide"
+          v-for="(v, index) in ImageArray"
+          :key="index"
+          :src="v"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from "swiper";
+export default {
+  props: {
+    ImageArray: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    speed: {
+      type: Number,
+      default: 1500,
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      timer: null,
+      mySwiper: null,
+    };
+  },
+  watch: {},
+  mounted() {
+    this.initSwiper();
+  },
+  methods: {
+    initSwiper() {
+      this.mySwiper = new Swiper(".swiper-container", {
+        autoplay: true,
+        effect: "fade",
+        fadeEffect: true,
+        speed: this.speed,
+        loop: true,
+        updateOnWindowResize: true,
+        watchSlidesProgress: true,
+      });
+      this.mySwiper.init();
+    },
+  },
+
+  beforeDestroy() {
+    this.mySwiper.destroy();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.carousel {
+  width: 100%;
+  height: 100%;
+  .swiper-container {
+    width: inherit;
+    height: inherit;
+  }
+  .swiper-slide {
+    width: inherit;
+    height: inherit;
+  }
+}
+</style>

admin_2/src/pages/home/components/LineEchart.vue

@@ -5,10 +5,22 @@
 <script>
 export default {
   props: {
+    dataset: {
+      type: Object,
+      default: () => {},
+    },
+    title: {
+      type: String,
+      default: "",
+    },
     endValue: {
       type: Number,
       default: 6,
     },
+    color: {
+      type: String,
+      default: "#0090FF",
+    },
   },
   data() {
     return {
@@ -16,6 +28,17 @@ export default {
       timer: null,
     };
   },
+  watch: {
+    dataset: {
+      handler(newVal) {
+        this.$nextTick(() => {
+          this.initChart(this.title, newVal);
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   mounted() {},
   methods: {
     // 适配
@@ -67,7 +90,6 @@ export default {
               color: "#D9D9D9",
             },
           },
-          data: names,
         },
         yAxis: {
           type: "value",
@@ -103,27 +125,31 @@ export default {
             // showSymbol: false,
             symbolSize: 8,
             lineStyle: {
-              color: "rgb(0, 202, 105)",
+              color: this.hexToRgba(this.color, 1),
+            },
+            itemStyle: {
+              color: this.hexToRgba(this.color, 1),
             },
             areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
                   {
                     offset: 0,
-                    color: "rgba(0, 202, 105,0.3)",
+                    color: this.hexToRgba(this.color, 0.3),
                   },
                   {
                     offset: 1,
-                    color: "rgba(0, 202, 105, 0.1)",
+                    color: this.hexToRgba(this.color, 0.1),
                   },
                 ],
-                false
-              ),
-              shadowBlur: 10,
+                global: false,
+              },
+              global: false,
             },
           },
         ],
@@ -162,6 +188,16 @@ export default {
         }, 2000);
       });
     },
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+          "0x" + hex.slice(3, 5)
+        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.adapterEcharts);