整体布局，带标题的框封装

2024-05-23 15:47:12 +08:00 · 2024-05-23 15:47:12 +08:00 · 3aff4d0633
parent 658c40dae2
commit 3aff4d0633
42 changed files with 2051 additions and 274 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1 @@
+VITE_API_BASEURL = http://api.nclg.yx.zheke.com
--- a/.env.production
+++ b/.env.production
@ -0,0 +1 @@
+VITE_API_BASEURL = http://api.nclg.yx.zheke.com
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
    "dev": "vite",
    "build:old": "run-p type-check build-only",
    "build": "vite build",
-    "preview": "vite preview --port 4173",
+    "preview": "vite preview --port 9527",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
--- a/src/api/api.ts
+++ b/src/api/api.ts
@ -1,6 +1,6 @@
 /*
 * @LastEditors: 张宁
- * @LastEditTime: 2024-05-21 15:07:36
+ * @LastEditTime: 2024-05-23 10:32:10
 */
 import axios from "axios";
 import type { AxiosRequestConfig, AxiosResponse } from "axios";
@ -18,7 +18,7 @@ axios.interceptors.request.use(
  function (config: AxiosRequestConfig): any {
    // 在发送请求之前做些什么 传token
    // let token: any = getLocalStorage(StorageEnum.GB_TOKEN_STORE);
-    let token: any = getToken();
+    let token: any = getToken() || 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA4ZGI3NTE5LTMxOGUtNDE0My04MDhjLWVmYTI3YmZkZWUyOCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IlRlYWNoZXIiLCJ1c2VyaW5mbyI6IntcIklkXCI6XCIwOGRiNzUxOS0zMThlLTQxNDMtODA4Yy1lZmEyN2JmZGVlMjhcIixcIk5hbWVcIjpcImFkbWluXCIsXCJQd2RcIjpcIlwiLFwiUGhvbmVOdW1iZXJcIjpcIjE1OTcyMTc4NDQ1XCIsXCJQZXJzb25uZWxUeXBlXCI6MSxcIlVzZXJUeXBlXCI6MCxcIlJlcG9ydGluZ1Byb2Nlc3NcIjowLFwiSGVhZFNjdWxwdHVyZVVybFwiOm51bGwsXCJTZXhcIjowLFwiVGVhY2hlckNsYXNzSWRzXCI6bnVsbCxcIklzU3VydmV5XCI6ZmFsc2UsXCJTdHVkZW50SWRcIjpcIlwiLFwiV2VsY29tZVllYXJcIjowLFwiSURDYXJkXCI6bnVsbCxcIkV4YW1pbmVlTnVtYmVyXCI6bnVsbCxcIk5vdGlmaWNhdGlvbk51bWJlclwiOm51bGwsXCJFZHVjYXRpb25hbExldmVsXCI6MCxcIlBob3RvUmV2aWV3U3RhdGVcIjowLFwiQ29sbGVnZU5hbWVcIjpudWxsLFwiRW5kVGltZVwiOlwiMDAwMS0wMS0wMVQwMDowMDowMFwiLFwiQWxsRGF0YVBlcm1pc3Npb25cIjowLFwiUm9sZXNcIjpudWxsLFwiUmV2aWV3ZWRTdGF0ZVwiOm51bGx9IiwibmJmIjoxNzE2NDI4NjIxLCJleHAiOjE3MTY0MzIyMjEsImlzcyI6InprSXNzdWVyIUAjJCVeJioiLCJhdWQiOiJ6a0F1ZGllbmNlIUAjJCVeJioifQ.iH1LYSEHNKs5LZVAvRTdghF-hUkKQxFLxBbJOXdRIao';
    if (token) {
      // @ts-ignore
      // config.headers.common[RequestEnum.GB_TOKEN_KEY] = token;
@ -56,6 +56,8 @@ axios.interceptors.response.use(
     */
    if (response.data.code == UtilVar.code) {
      // router.push("/login")
+      // window.location.href = 'http://nclg.yx.zheke.com/#/login';
+
      return Promise.resolve(response);
    }
    return Promise.resolve(response);
--- a/src/assets/icons/titleIcon.svg
+++ b/src/assets/icons/titleIcon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43" height="43" viewBox="0 0 43 43">
+  <image id="色相_饱和度_1" data-name="色相/饱和度 1" x="2" width="40" height="41" xlink:href="data:img/png;base64,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"/>
+</svg>
--- a/src/assets/img/zheke/bg.png
+++ b/src/assets/img/zheke/bg.png
--- a/src/assets/img/zheke/center_top1.png
+++ b/src/assets/img/zheke/center_top1.png
--- a/src/assets/img/zheke/center_top2.png
+++ b/src/assets/img/zheke/center_top2.png
--- a/src/assets/img/zheke/left_center1.png
+++ b/src/assets/img/zheke/left_center1.png
--- a/src/assets/img/zheke/left_center2.png
+++ b/src/assets/img/zheke/left_center2.png
--- a/src/assets/img/zheke/left_center3.png
+++ b/src/assets/img/zheke/left_center3.png
--- a/src/assets/img/zheke/left_top1.png
+++ b/src/assets/img/zheke/left_top1.png
--- a/src/assets/img/zheke/left_top2.png
+++ b/src/assets/img/zheke/left_top2.png
--- a/src/assets/img/zheke/right_change.png
+++ b/src/assets/img/zheke/right_change.png
--- a/src/assets/img/zheke/right_top1.png
+++ b/src/assets/img/zheke/right_top1.png
--- a/src/assets/img/zheke/right_top2.png
+++ b/src/assets/img/zheke/right_top2.png
--- a/src/assets/img/zheke/right_top3.png
+++ b/src/assets/img/zheke/right_top3.png
--- a/src/assets/img/zheke/title_bg.png
+++ b/src/assets/img/zheke/title_bg.png
--- a/src/assets/img/zheke/title_line1.png
+++ b/src/assets/img/zheke/title_line1.png
--- a/src/assets/img/zheke/title_line2.png
+++ b/src/assets/img/zheke/title_line2.png
--- a/src/assets/img/zheke/title_line3.png
+++ b/src/assets/img/zheke/title_line3.png
--- a/src/assets/img/zheke/top_change.png
+++ b/src/assets/img/zheke/top_change.png
--- a/src/assets/img/zheke/top_title_bg.png
+++ b/src/assets/img/zheke/top_title_bg.png
--- a/src/components/scale-screen/scale-screen.vue
+++ b/src/components/scale-screen/scale-screen.vue
@ -5,7 +5,7 @@
    ref="box"
  >
    <div
-      :style="{ ...styles.wrapper, ...wrapperStyle }"
+      :style="{ ...styles.wrapper, ...wrapperStyle,margin:0 }"
      class="screen-wrapper"
      ref="screenWrapper"
    >
@ -244,3 +244,6 @@ onUnmounted(() => {
  // state.observer?.disconnect();
 });
 </script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/zk-item/index.ts
+++ b/src/components/zk-item/index.ts
@ -0,0 +1,2 @@
+import zkItem from "./zk-item.vue"
+export default zkItem
--- a/src/components/zk-item/zk-item.vue
+++ b/src/components/zk-item/zk-item.vue
@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        // 标题
+        title: number | string;
+    }>(),
+    {
+        title: "",
+    }
+);
+</script>
+
+<template>
+    <div class="item_wrap">
+        <div class="item_title" v-if="title !== ''">
+            <q-svg width="35" height="35" name="titleIcon" />
+            <span class="title-inner"> &nbsp;{{ title }} </span>
+        </div>
+        <div class="title-hr" v-if="title !== ''"></div>
+
+        <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
+            <slot></slot>
+        </div>
+    </div>
+
+</template>
+
+<style scoped lang="scss">
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.item_wrap {
+    padding: 10px;
+}
+
+.item_title {
+    height: $item-title-height;
+    line-height: $item-title-height;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    
+    .title-inner {
+        font-family: YouSheBiaoTiHei;
+        font-size: 26px;
+        color: #F7F9FE;
+        text-shadow: 2px 3px 0px rgba(28, 28, 26, 0.27);
+        margin-bottom: 5px;
+    }
+
+}
+
+.title-hr {
+    width: 100%;
+    height: 2px;
+    background: repeating-linear-gradient(90deg, #2C3E50 2%, #68C6DE 10%, #2C3E50 40%, #11181f 80%, #11181f 100%);
+}
+
+:deep(.dv-border-box-content) {
+    box-sizing: border-box;
+    padding: 6px 16px 0px;
+}
+
+.item_title_content {
+    height: $item_title_content-height;
+}
+
+.item_title_content_def {
+    width: 100%;
+    height: 100%;
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -14,23 +14,17 @@ const wrapperStyle = {};
 </script>

 <template>
-  <scale-screen
-    width="1920"
-    height="1080"
-    :delay="500"
-    :fullScreen="false"
-    :boxStyle="{
+  <scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
    background: '#03050C',
    overflow: isScale ? 'hidden' : 'auto',
-    }"
-    :wrapperStyle="wrapperStyle"
-    :autoScale="isScale"
-  >
+    
+    }" :wrapperStyle="wrapperStyle" :autoScale="isScale">
    <div class="content_wrap">
      <Headers />
      <RouterView />
      <MessageContent />
    </div>
+    <div class="title_bg"></div>
  </scale-screen>
  <Setting />
 </template>
@ -40,8 +34,17 @@ const wrapperStyle = {};
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
-  background-image: url("@/assets/img/pageBg.png");
+  background-image: url("@/assets/img/zheke/bg.png");
  background-size: cover;
  background-position: center center;
 }
+.title_bg{
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  top:0;
+  background-image: url("@/assets/img/zheke/top_title_bg.png");
+  background-size: cover;
+  background-position: center left;
+}
 </style>
--- a/src/views/header.vue
+++ b/src/views/header.vue
@ -6,69 +6,101 @@ const test = () => {
  })
 };
 const returnHome = () => {
-  console.log('history.go(-1)');
-
  history.go(-1)
  // window.location.href = 'http://nclg.yx.zheke.com/#/login';
 };
 </script>

 <template>
-  <div class="d-flex jc-center title_wrap">
-    <div class="guang"></div>
-    <div class="d-flex jc-center">
+  <div class="d-flex">
+    <div class="top-left">
      <div class="title">
        <span class="title-text" @click="test()">新生报道情况</span>
        <span style="color: yellow;" @click="returnHome()">返回</span>
      </div>
+      <div class="en-title">
+        <div class="en-line"></div>
+        <span>New student registration status</span>
+      </div>
+    </div>
+
+    <div class="change-time">
+      <div class="change-year">切换年份</div>
+      <div class="change-year">切换月份</div>
    </div>
  </div>
 </template>

 <style scoped lang="scss">
-.title_wrap {
+.d-flex {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  z-index: 999;
  height: 60px;
-  background-image: url("../assets/img/top.png");
-  background-size: cover;
-  background-position: center center;
  position: relative;
  margin-bottom: 4px;
-
-  .guang {
-    position: absolute;
-    bottom: -26px;
-    background-image: url("../assets/img/guang.png");
-    background-position: 80px center;
-    width: 100%;
-    height: 56px;
-  }
 }

+.top-left{
+  display: flex;
+}
 .title {
-  position: relative;
-  // width: 500px;
-  text-align: center;
-  background-size: cover;
-  color: transparent;
+  // position: relative;
+  width: 300px;
+  text-align: left;
+  // color: transparent;
  height: 60px;
  line-height: 46px;
-
  .title-text {
    font-family: 'YouSheBiaoTiHei';
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 6px;
-
    width: 100%;
    color: #ECEDEE;
-    text-shadow: 0px 4px 1px rgba(50, 81, 140, 0.66);
-    // background: linear-gradient(
-    //   0deg, rgba(141, 185, 253, 0.45) 0%,
-    //   rgba(237, 247, 255, 0.45) 73.3154296875%,
-    //   rgba(255, 255, 255, 0.45) 100%);
-    // opacity: 0.89;
-    // -webkit-background-clip: text;
-    // -webkit-text-fill-color: transparent;
+  }
+}
+
+.en-title {
+  width: 300px;
+  height: 40px;
+  font-family: 'YouSheBiaoTiHei';
+  font-weight: 400;
+  font-size: 14px;
+  color: #ADC0DE;
+  opacity: 0.2;
+  // line-height: 40px;
+  padding-top: 10px;
+  text-align: center;
+  .en-line{
+    width: 80%;
+    height: 2px;
+    background-color: #ADC0DE;
+    margin-left: 30px;
+  }
+}
+
+.change-time {
+  // position: relative;
+  // float: right;
+  width: 300px;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  font-family: 'YouSheBiaoTiHei';
+  font-size: 18px;
+
+
+  .change-year {
+    width: 125px;
+    height: 35px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    background-image: url("@/assets/img/zheke/top_change.png");
+    background-size: cover;
+    background-position: center center;
  }
 }
 </style>
--- a/copy/center-bottom.vue
+++ b/copy/center-bottom.vue
@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from "vue";
+import { installationPlan } from "@/api";
+import { graphic } from "echarts/core";
+import { ElMessage } from "element-plus";
+
+const option = ref({});
+const getData = () => {
+  return 
+  installationPlan()
+    .then((res) => {
+      console.log("中下--安装计划", res);
+      if (res.success) {
+        setOption(res.data);
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+const setOption = async (newData: any) => {
+  option.value = {
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+      formatter: function (params: any) {
+        // 添加单位
+        var result = params[0].name + "<br>";
+        params.forEach(function (item: any) {
+          if (item.value) {
+            if (item.seriesName == "安装率") {
+              result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
+            } else {
+              result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
+            }
+          } else {
+            result += item.marker + " " + item.seriesName + " :  - </br>";
+          }
+        });
+        return result;
+      },
+    },
+    legend: {
+      data: ["已安装", "计划安装", "安装率"],
+      textStyle: {
+        color: "#B4B4B4",
+      },
+      top: "0",
+    },
+    grid: {
+      left: "50px",
+      right: "40px",
+      bottom: "30px",
+      top: "20px",
+    },
+    xAxis: {
+      data: newData.category,
+      axisLine: {
+        lineStyle: {
+          color: "#B4B4B4",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        splitLine: { show: false },
+        axisLine: {
+          lineStyle: {
+            color: "#B4B4B4",
+          },
+        },
+
+        axisLabel: {
+          formatter: "{value}",
+        },
+      },
+      {
+        splitLine: { show: false },
+        axisLine: {
+          lineStyle: {
+            color: "#B4B4B4",
+          },
+        },
+        axisLabel: {
+          formatter: "{value}% ",
+        },
+      },
+    ],
+    series: [
+      {
+        name: "已安装",
+        type: "bar",
+        barWidth: 10,
+        itemStyle: {
+          borderRadius: 5,
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#956FD4" },
+            { offset: 1, color: "#3EACE5" },
+          ]),
+        },
+        data: newData.barData,
+      },
+      {
+        name: "计划安装",
+        type: "bar",
+        barGap: "-100%",
+        barWidth: 10,
+        itemStyle: {
+          borderRadius: 5,
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "rgba(156,107,211,0.8)" },
+            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+            { offset: 1, color: "rgba(156,107,211,0.2)" },
+          ]),
+        },
+        z: -12,
+        data: newData.lineData,
+      },
+      {
+        name: "安装率",
+        type: "line",
+        smooth: true,
+        showAllSymbol: true,
+        symbol: "emptyCircle",
+        symbolSize: 8,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "#F02FC2",
+        },
+        data: newData.rateData,
+      },
+    ],
+  };
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/copy/center-map.vue
+++ b/copy/center-map.vue
@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, reactive, nextTick } from "vue";
+import { centerMap, GETNOBASE } from "@/api";
+import { registerMap, getMap } from "echarts/core";
+import { optionHandle, regionCodes } from "./center.map";
+import { ElMessage } from "element-plus";
+
+import type { MapdataType } from "./center.map";
+
+const option = ref({});
+const code = ref("china"); //china 代表中国 其他地市是行政编码
+
+withDefaults(
+  defineProps<{
+    // 结束数值
+    title: number | string;
+  }>(),
+  {
+    title: "地图",
+  }
+);
+
+const dataSetHandle = async (regionCode: string, list: object[]) => {
+  const geojson: any = await getGeojson(regionCode);
+  let cityCenter: any = {};
+  let mapData: MapdataType[] = [];
+  //获取当前地图每块行政区中心点
+  geojson.features.forEach((element: any) => {
+    cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
+  });
+  //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
+  list.forEach((item: any) => {
+    if (cityCenter[item.name]) {
+      mapData.push({
+        name: item.name,
+        value: cityCenter[item.name].concat(item.value),
+      });
+    }
+  });
+  await nextTick();
+
+  option.value = optionHandle(regionCode, list, mapData);
+};
+
+const getData = async (regionCode: string) => {
+  return
+  centerMap({ regionCode: regionCode })
+    .then((res) => {
+      console.log("中上--设备分布", res);
+      if (res.success) {
+        dataSetHandle(res.data.regionCode, res.data.dataList);
+      } else {
+        ElMessage.error(res.msg);
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+const getGeojson = (regionCode: string) => {
+  return new Promise<boolean>(async (resolve) => {
+    let mapjson = getMap(regionCode);
+    if (mapjson) {
+      mapjson = mapjson.geoJSON;
+      resolve(mapjson);
+    } else {
+      mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
+      code.value = regionCode;
+      registerMap(regionCode, {
+        geoJSON: mapjson as any,
+        specialAreas: {},
+      });
+      resolve(mapjson);
+    }
+  });
+};
+getData(code.value);
+
+const mapClick = (params: any) => {
+  // console.log(params);
+  let xzqData = regionCodes[params.name];
+  if (xzqData) {
+    getData(xzqData.adcode);
+  } else {
+    window["$message"].warning("暂无下级地市");
+  }
+};
+</script>
+
+<template>
+  <div class="mapwrap">
+    <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
+    <v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
+      v-if="JSON.stringify(option) != '{}'" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.mapwrap {
+  height: 780px;
+  width: 100%;
+  // padding: 0 0 10px 0;
+  box-sizing: border-box;
+  position: relative;
+  border: 1px solid #f00;
+
+  .quanguo {
+    position: absolute;
+    right: 20px;
+    top: -46px;
+    width: 80px;
+    height: 28px;
+    border: 1px solid #00eded;
+    border-radius: 10px;
+    color: #00f7f6;
+    text-align: center;
+    line-height: 26px;
+    letter-spacing: 6px;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
+    z-index: 10;
+  }
+}
+</style>
--- a/copy/center.map.ts
+++ b/copy/center.map.ts
@ -0,0 +1,399 @@
+
+
+//mapData数据结构
+export interface MapdataType {
+    name: string;
+    value: [number, number, number]; //x,y,value  第一个x 第二个y  第三个value
+}
+export const optionHandle = (regionCode: string,
+    list: object[],
+    mapData: MapdataType[]) => {
+    let top = 45;
+    let zoom = ["china"].includes(regionCode) ? 1.05 : 1;
+    return {
+        backgroundColor: "rgba(0,0,0,0)",
+        tooltip: {
+            show: false,
+        },
+        legend: {
+            show: false,
+        },
+        visualMap: {
+            seriesIndex:0,
+            left: 20,
+            bottom: 20,
+            pieces: [
+                { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
+                { gte: 600, lte: 999, label: "600-999个" },
+                { gte: 200, lte: 599, label: "200-599个" },
+                { gte: 50, lte: 199, label: "49-199个" },
+                { gte: 10, lte: 49, label: "10-49个" },
+                { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
+            ],
+            inRange: {
+                // 渐变颜色，从小到大
+                // FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
+                // 1781B5,
+                // 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
+                color: [
+                    // "#EDF7FD",
+                    "rgba(237,247,253,.8)",
+                    // "#B7E1F6",
+                    "rgba(183,225,246,.9)",
+                    // "#81CAEF",
+                    "rgba(129,202,239,.9)",
+                    // "#38ACE5",
+                    "rgba(56,172,229,.9)",
+                    // "#1781B5",
+                    "rgba(23,129,181,.9)",
+                    // "#105A7E",
+                    "rgba(16,90,126,0.9)"
+                ],
+            },
+            textStyle: {
+                color: "#fff",
+            },
+        },
+        geo: {
+            map: regionCode,
+            roam: false,
+            selectedMode: false, //是否允许选中多个区域
+            zoom: zoom,
+            top: top,
+            // aspectScale: 0.78,
+            show: false,
+        },
+        series: [
+            {
+                name: "MAP",
+                type: "map",
+                map: regionCode,
+                // aspectScale: 0.78,
+                data: list,
+                // data: [1,100],
+                selectedMode: false, //是否允许选中多个区域
+                zoom: zoom,
+                geoIndex: 1,
+                top: top,
+                tooltip: {
+                    show: true,
+                    formatter: function (params: any) {
+                        if (params.data) {
+                            return params.name + "：" + params.data["value"];
+                        } else {
+                            return params.name;
+                        }
+                    },
+                    backgroundColor: "rgba(0,0,0,.6)",
+                    borderColor: "rgba(147, 235, 248, .8)",
+                    textStyle: {
+                        color: "#FFF",
+                    },
+                },
+                label: {
+                    show: false,
+                    color: "#000",
+                    // position: [-10, 0],
+                    formatter: function (val: any) {
+                        // console.log(val)
+                        if (val.data !== undefined) {
+                            return val.name.slice(0, 2);
+                        } else {
+                            return "";
+                        }
+                    },
+                    rich: {},
+                },
+                emphasis: {
+                    label: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        // areaColor: "rgba(56,155,183,.7)",
+                        areaColor:{
+                            type: "radial",
+                            x: 0.5,
+                            y: 0.5,
+                            r: 0.8,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgba(56,155,183, .8)", // 100% 处的颜色
+                                },
+                            ],
+                            globalCoord: false, // 缺为 false
+                        },
+                        borderWidth: 1,
+                    },
+                },
+                itemStyle: {
+                    borderColor: "rgba(147, 235, 248, .8)",
+                    borderWidth: 1,
+                    areaColor: {
+                        type: "radial",
+                        x: 0.5,
+                        y: 0.5,
+                        r: 0.8,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
+                            },
+                        ],
+                        globalCoord: false, // 缺为 false
+                    },
+                    shadowColor: "rgba(128, 217, 248, .3)",
+                    shadowOffsetX: -2,
+                    shadowOffsetY: 2,
+                    shadowBlur: 10,
+                },
+            },
+            {
+                data: mapData,
+                type: "effectScatter",
+                coordinateSystem: "geo",
+                symbolSize: function (val: any) {
+                    return 4;
+                    // return val[2] / 50;
+                },
+                legendHoverLink: true,
+                showEffectOn: "render",
+                rippleEffect: {
+                    // period: 4,
+                    scale: 6,
+                    color: "rgba(255,255,255, 1)",
+                    brushType: "fill",
+                },
+                tooltip: {
+                    show: true,
+                    formatter: function (params: any) {
+                        if (params.data) {
+                            return params.name + "：" + params.data["value"][2];
+                        } else {
+                            return params.name;
+                        }
+                    },
+                    backgroundColor: "rgba(0,0,0,.6)",
+                    borderColor: "rgba(147, 235, 248, .8)",
+                    textStyle: {
+                        color: "#FFF",
+                    },
+                },
+                label: {
+                    formatter: (param: any) => {
+                        return param.name.slice(0, 2);
+                    },
+
+                    fontSize: 11,
+                    offset: [0, 2],
+                    position: "bottom",
+                    textBorderColor: "#fff",
+                    textShadowColor: "#000",
+                    textShadowBlur: 10,
+                    textBorderWidth: 0,
+                    color: "#FFF",
+                    show: true,
+                },
+                // colorBy: "data",
+                itemStyle: {
+                    color: "rgba(255,255,255,1)",
+                    borderColor: "rgba(2255,255,255,2)",
+                    borderWidth: 4,
+                    shadowColor: "#000",
+                    shadowBlur: 10,
+                },
+            },
+        ],
+        //动画效果
+        // animationDuration: 1000,
+        // animationEasing: 'linear',
+        // animationDurationUpdate: 1000
+    };
+}
+
+
+export const regionCodes: any = {
+    "中国": {
+        "adcode": "100000",
+        "level": "country",
+        "name": "中华人民共和国"
+    },
+    "新疆维吾尔自治区": {
+        "adcode": "650000",
+        "level": "province",
+        "name": "新疆维吾尔自治区"
+    },
+    "湖北省": {
+        "adcode": "420000",
+        "level": "province",
+        "name": "湖北省"
+    },
+    "辽宁省": {
+        "adcode": "210000",
+        "level": "province",
+        "name": "辽宁省"
+    },
+    "广东省": {
+        "adcode": "440000",
+        "level": "province",
+        "name": "广东省"
+    },
+    "内蒙古自治区": {
+        "adcode": "150000",
+        "level": "province",
+        "name": "内蒙古自治区"
+    },
+    "黑龙江省": {
+        "adcode": "230000",
+        "level": "province",
+        "name": "黑龙江省"
+    },
+    "河南省": {
+        "adcode": "410000",
+        "level": "province",
+        "name": "河南省"
+    },
+    "山东省": {
+        "adcode": "370000",
+        "level": "province",
+        "name": "山东省"
+    },
+    "陕西省": {
+        "adcode": "610000",
+        "level": "province",
+        "name": "陕西省"
+    },
+    "贵州省": {
+        "adcode": "520000",
+        "level": "province",
+        "name": "贵州省"
+    },
+    "上海市": {
+        "adcode": "310000",
+        "level": "province",
+        "name": "上海市"
+    },
+    "重庆市": {
+        "adcode": "500000",
+        "level": "province",
+        "name": "重庆市"
+    },
+    "西藏自治区": {
+        "adcode": "540000",
+        "level": "province",
+        "name": "西藏自治区"
+    },
+    "安徽省": {
+        "adcode": "340000",
+        "level": "province",
+        "name": "安徽省"
+    },
+    "福建省": {
+        "adcode": "350000",
+        "level": "province",
+        "name": "福建省"
+    },
+    "湖南省": {
+        "adcode": "430000",
+        "level": "province",
+        "name": "湖南省"
+    },
+    "海南省": {
+        "adcode": "460000",
+        "level": "province",
+        "name": "海南省"
+    },
+    "江苏省": {
+        "adcode": "320000",
+        "level": "province",
+        "name": "江苏省"
+    },
+    "青海省": {
+        "adcode": "630000",
+        "level": "province",
+        "name": "青海省"
+    },
+    "广西壮族自治区": {
+        "adcode": "450000",
+        "level": "province",
+        "name": "广西壮族自治区"
+    },
+    "宁夏回族自治区": {
+        "adcode": "640000",
+        "level": "province",
+        "name": "宁夏回族自治区"
+    },
+    "浙江省": {
+        "adcode": "330000",
+        "level": "province",
+        "name": "浙江省"
+    },
+    "河北省": {
+        "adcode": "130000",
+        "level": "province",
+        "name": "河北省"
+    },
+    "香港特别行政区": {
+        "adcode": "810000",
+        "level": "province",
+        "name": "香港特别行政区"
+    },
+    "台湾省": {
+        "adcode": "710000",
+        "level": "province",
+        "name": "台湾省"
+    },
+    "澳门特别行政区": {
+        "adcode": "820000",
+        "level": "province",
+        "name": "澳门特别行政区"
+    },
+    "甘肃省": {
+        "adcode": "620000",
+        "level": "province",
+        "name": "甘肃省"
+    },
+    "四川省": {
+        "adcode": "510000",
+        "level": "province",
+        "name": "四川省"
+    },
+    "天津市": {
+        "adcode": "120000",
+        "level": "province",
+        "name": "天津市"
+    },
+    "江西省": {
+        "adcode": "360000",
+        "level": "province",
+        "name": "江西省"
+    },
+    "云南省": {
+        "adcode": "530000",
+        "level": "province",
+        "name": "云南省"
+    },
+    "山西省": {
+        "adcode": "140000",
+        "level": "province",
+        "name": "山西省"
+    },
+    "北京市": {
+        "adcode": "110000",
+        "level": "province",
+        "name": "北京市"
+    },
+    "吉林省": {
+        "adcode": "220000",
+        "level": "province",
+        "name": "吉林省"
+    }
+}
--- a/src/views/index
+++ b/src/views/index
@ -0,0 +1,87 @@
+<script setup lang="ts">
+import ItemWrap from "@/components/item-wrap";
+import zkItem from "@/components/zk-item";
+import LeftTop from "./left-top.vue";
+import LeftCenter from "./left-center.vue";
+import LeftBottom from "./left-bottom.vue";
+import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
+</script>
+
+<template>
+  <div class="index-box">
+    <div class="contetn_left">
+      <zkItem class="contetn_left-top contetn_lr-item" title="设备总览">
+        <LeftTop />
+      </zkItem>
+      <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
+        <LeftCenter />
+      </ItemWrap>
+      <ItemWrap
+        class="contetn_left-bottom contetn_lr-item"
+        title="设备提醒"
+        style="padding: 0 10px 16px 10px"
+      >
+        <LeftBottom />
+      </ItemWrap>
+    </div>
+    <div class="contetn_center">
+      <CenterMap class="contetn_center_top" title="全国地图" />
+    </div>
+    <div class="contetn_right">
+      <zkItem class="contetn_left-bottom contetn_lr-item" title="报警次数">
+        <RightTop />
+      </zkItem>
+      <zkItem
+        class="contetn_left-bottom contetn_lr-item"
+        title="报警排名(TOP8)"
+        style="padding: 0 10px 16px 10px"
+      >
+        <RightCenter />
+      </zkItem>
+      <zkItem class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
+        <RightBottom />
+      </zkItem>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.index-box {
+  width: 100%;
+  display: flex;
+  min-height: calc(100% - 64px);
+  justify-content: space-between;
+}
+//左边 右边 结构一样
+.contetn_left,
+.contetn_right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  position: relative;
+  width: 540px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border: 2px solid transparent;
+  border-radius: 16px;                        
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
+}
+.contetn_center {
+  flex: 1;
+  // margin: 0 54px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+}
+
+.contetn_lr-item {
+  height: 310px;
+}
+</style>
--- a/copy/left-bottom.vue
+++ b/copy/left-bottom.vue
@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { leftBottom } from "@/api";
+import SeamlessScroll from "@/components/seamless-scroll";
+import { computed, onMounted, reactive } from "vue";
+import { useSettingStore } from "@/stores";
+import { storeToRefs } from "pinia";
+import EmptyCom from "@/components/empty-com";
+import { ElMessage } from "element-plus";
+
+const settingStore = useSettingStore();
+const { defaultOption, indexConfig } = storeToRefs(settingStore);
+const state = reactive<any>({
+  list: [],
+  defaultOption: {
+    ...defaultOption.value,
+    singleHeight: 256,
+    limitScrollNum: 4,
+  },
+  scroll: true,
+});
+
+const getData = () => {
+  return
+  leftBottom( { limitNum: 20 })
+    .then((res) => {
+      console.log("左下--设备提醒", res);
+      if (res.success) {
+        state.list = res.data.list;
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+const addressHandle = (item: any) => {
+  let name = item.provinceName;
+  if (item.cityName) {
+    name += "/" + item.cityName;
+    if (item.countyName) {
+      name += "/" + item.countyName;
+    }
+  }
+  return name;
+};
+const comName = computed(() => {
+  if (indexConfig.value.leftBottomSwiper) {
+    return SeamlessScroll;
+  } else {
+    return EmptyCom;
+  }
+});
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
+    <component
+      :is="comName"
+      :list="state.list"
+      v-model="state.scroll"
+      :singleHeight="state.defaultOption.singleHeight"
+      :step="state.defaultOption.step"
+      :limitScrollNum="state.defaultOption.limitScrollNum"
+      :hover="state.defaultOption.hover"
+      :singleWaitTime="state.defaultOption.singleWaitTime"
+      :wheel="state.defaultOption.wheel"
+    >
+      <ul class="left_boottom">
+        <li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
+          <span class="orderNum doudong">{{ i + 1 }}</span>
+          <div class="inner_right">
+            <div class="dibu"></div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">设备ID：</span>
+                <span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
+              </div>
+              <div class="info">
+                <span class="labels">时间：</span>
+                <span class="text-content" style="font-size: 12px"> {{ item.createTime }}</span>
+              </div>
+            </div>
+
+            <span
+              class="types doudong"
+              :class="{
+                typeRed: item.onlineState == 0,
+                typeGreen: item.onlineState == 1,
+              }"
+              >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
+            >
+
+            <div class="info addresswrap">
+              <span class="labels">地址：</span>
+              <span class="text-content ciyao" style="font-size: 12px"> {{ addressHandle(item) }}</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </component>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.left_boottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.doudong {
+  overflow: hidden;
+  backface-visibility: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.left_boottom {
+  width: 100%;
+  height: 100%;
+
+  .left_boottom_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 14px;
+    margin: 10px 0;
+    .orderNum {
+      margin: 0 16px 0 -20px;
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+
+      .labels {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .zhuyao {
+        color: $primary-color;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 380px;
+      flex-shrink: 0;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("@/assets/img/zuo_xuxian.png");
+        bottom: -10px;
+        left: -2%;
+        background-size: cover;
+      }
+      .addresswrap {
+        width: 100%;
+        display: flex;
+        margin-top: 8px;
+      }
+    }
+
+    .wangguan {
+      color: #1890ff;
+      font-weight: 900;
+      font-size: 15px;
+      width: 80px;
+      flex-shrink: 0;
+    }
+
+    .time {
+      font-size: 12px;
+      // color: rgba(211, 210, 210,.8);
+      color: #fff;
+    }
+
+    .address {
+      font-size: 12px;
+      cursor: pointer;
+      // @include text-overflow(1);
+    }
+
+    .types {
+      width: 30px;
+      flex-shrink: 0;
+    }
+
+    .typeRed {
+      color: #fc1a1a;
+    }
+
+    .typeGreen {
+      color: #29fc29;
+    }
+  }
+}
+</style>
--- a/copy/left-center.vue
+++ b/copy/left-center.vue
@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { graphic } from "echarts/core";
+import { countUserNum } from "@/api";
+import {ElMessage} from "element-plus"
+
+let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
+const option = ref({});
+const state = reactive({
+  lockNum: 0,
+  offlineNum: 0,
+  onlineNum: 0,
+  alarmNum: 0,
+  totalNum: 0,
+});
+const echartsGraphic = (colors: string[]) => {
+  return new graphic.LinearGradient(1, 0, 0, 0, [
+    { offset: 0, color: colors[0] },
+    { offset: 1, color: colors[1] },
+  ]);
+};
+const getData = () => {
+  return
+  countUserNum().then((res) => {
+    console.log("左中--用户总览",res);
+    if (res.success) {
+      state.lockNum = res.data.lockNum;
+      state.offlineNum = res.data.offlineNum;
+      state.onlineNum = res.data.onlineNum;
+      state.totalNum = res.data.totalNum;
+      state.alarmNum = res.data.alarmNum;
+      setOption();
+    }else{
+      ElMessage.error(res.msg)
+    }
+  }).catch(err=>{
+    ElMessage.error(err)
+  });
+};
+getData();
+const setOption = () => {
+  option.value = {
+    title: {
+      top: "center",
+      left: "center",
+      text: [`{value|${state.totalNum}}`, "{name|总数}"].join("\n"),
+      textStyle: {
+        rich: {
+          value: {
+            color: "#ffffff",
+            fontSize: 24,
+            fontWeight: "bold",
+            lineHeight: 20,
+            padding:[4,0,4,0]
+          },
+          name: {
+            color: "#ffffff",
+            lineHeight: 20,
+          },
+        },
+      },
+    },
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+    },
+    series: [
+      {
+        name: "用户总览",
+        type: "pie",
+        radius: ["40%", "70%"],
+        // avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 6,
+          borderColor: "rgba(255,255,255,0)",
+          borderWidth: 2,
+        },
+        color: colors,
+        label: {
+          show: true,
+          formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
+          //   position: "outside",
+          rich: {
+            b: {
+              color: "#fff",
+              fontSize: 12,
+              lineHeight: 26,
+            },
+            c: {
+              color: "#31ABE3",
+              fontSize: 14,
+            },
+            per: {
+              color: "#31ABE3",
+              fontSize: 14,
+            },
+          },
+        },
+        emphasis: {
+          show: false,
+        },
+        legend: {
+          show: false,
+        },
+        tooltip: { show: true },
+
+        labelLine: {
+          show: true,
+          length: 20, // 第一段线 长度
+          length2: 36, // 第二段线 长度
+          smooth: 0.2,
+          lineStyle: {},
+        },
+        data: [
+          {
+            value: state.onlineNum,
+            name: "在线",
+            itemStyle: {
+              color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
+            },
+          },
+          {
+            value: state.offlineNum,
+            name: "离线",
+            itemStyle: {
+              color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
+            },
+          },
+          {
+            value: state.lockNum,
+            name: "锁定",
+            itemStyle: {
+              color: echartsGraphic(["#F48C02", "#FDDB7D"]),
+            },
+          },
+          {
+            value: state.alarmNum,
+            name: "异常",
+            itemStyle: {
+              color: echartsGraphic(["#F4023C", "#FB6CB7"]),
+            },
+          },
+        ],
+      },
+    ],
+  };
+};
+</script>
+
+<template>
+  <v-chart class="chart" :option="option" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/copy/left-top.vue
+++ b/copy/left-top.vue
@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { countDeviceNum } from "@/api";
+import CountUp from "@/components/count-up";
+import {ElMessage} from "element-plus"
+
+const duration = ref(2);
+const state = reactive({
+  alarmNum: 0,
+  offlineNum: 0,
+  onlineNum: 0,
+  totalNum: 0,
+});
+
+
+const getData = () => {
+  return
+  countDeviceNum().then((res) => {
+    console.log("左上--设备总览",res);
+    if (res.success) {
+      state.alarmNum = res.data.alarmNum;
+      state.offlineNum = res.data.offlineNum;
+      state.onlineNum = res.data.onlineNum;
+      state.totalNum = res.data.totalNum;
+    }else{
+      ElMessage.error(res.msg)
+    }
+  }).catch(err=>{
+    ElMessage.error(err)
+  });;
+};
+getData();
+</script>
+
+<template>
+  <ul class="user_Overview flex">
+    <li class="user_Overview-item" style="color: #00fdfa">
+      <div class="user_Overview_nums allnum">
+        <CountUp :endVal="state.totalNum" :duration="duration" />
+      </div>
+      <p>总设备数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #07f7a8">
+      <div class="user_Overview_nums online">
+        <CountUp :endVal="state.onlineNum" :duration="duration" />
+      </div>
+      <p>在线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #e3b337">
+      <div class="user_Overview_nums offline">
+        <CountUp :endVal="state.offlineNum" :duration="duration" />
+      </div>
+      <p>掉线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #f5023d">
+      <div class="user_Overview_nums laramnum">
+        <CountUp :endVal="state.alarmNum" :duration="duration" />
+      </div>
+      <p>告警次数</p>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+.left-top {
+  width: 100%;
+  height: 100%;
+}
+
+.user_Overview {
+  li {
+    flex: 1;
+
+    p {
+      text-align: center;
+      height: 16px;
+      font-size: 16px;
+    }
+
+    .user_Overview_nums {
+      width: 100px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+      font-size: 22px;
+      margin: 50px auto 30px;
+      background-size: cover;
+      background-position: center center;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
+
+      &.bgdonghua::before {
+        animation: rotating 14s linear infinite;
+      }
+    }
+
+    .allnum {
+      &::before {
+        background-image: url("@/assets/img/left_top_lan.png");
+      }
+    }
+
+    .online {
+      &::before {
+        background-image: url("@/assets/img/left_top_lv.png");
+      }
+    }
+
+    .offline {
+      &::before {
+        background-image: url("@/assets/img/left_top_huang.png");
+      }
+    }
+
+    .laramnum {
+      &::before {
+        background-image: url("@/assets/img/left_top_hong.png");
+      }
+    }
+  }
+}
+</style>
--- a/copy/right-bottom.vue
+++ b/copy/right-bottom.vue
@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { rightBottom } from "@/api";
+import SeamlessScroll from "@/components/seamless-scroll";
+import { computed, onMounted, reactive } from "vue";
+import { useSettingStore } from "@/stores";
+import { storeToRefs } from "pinia";
+import EmptyCom from "@/components/empty-com";
+import { ElMessage } from "element-plus";
+
+const settingStore = useSettingStore();
+const { defaultOption, indexConfig } = storeToRefs(settingStore);
+const state = reactive<any>({
+  list: [],
+  defaultOption: {
+    ...defaultOption.value,
+    singleHeight: 252,
+    limitScrollNum: 3,
+    // step:3
+  },
+  scroll: true,
+});
+
+const getData = () => {
+  return
+  rightBottom({ limitNum: 20 })
+    .then((res) => {
+      console.log("右下", res);
+      if (res.success) {
+        state.list = res.data.list;
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+
+const comName = computed(() => {
+  if (indexConfig.value.rightBottomSwiper) {
+    return SeamlessScroll;
+  } else {
+    return EmptyCom;
+  }
+});
+function montionFilter(val: any) {
+  // console.log(val);
+  return val ? Number(val).toFixed(2) : "--";
+}
+const handleAddress = (item: any) => {
+  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
+    <component
+      :is="comName"
+      :list="state.list"
+      v-model="state.scroll"
+      :singleHeight="state.defaultOption.singleHeight"
+      :step="state.defaultOption.step"
+      :limitScrollNum="state.defaultOption.limitScrollNum"
+      :hover="state.defaultOption.hover"
+      :singleWaitTime="state.defaultOption.singleWaitTime"
+      :wheel="state.defaultOption.wheel"
+    >
+      <ul class="right_bottom">
+        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
+          <span class="orderNum">{{ i + 1 }}</span>
+          <div class="inner_right">
+            <div class="dibu"></div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">设备ID：</span>
+                <span class="text-content zhuyao"> {{ item.gatewayno }}</span>
+              </div>
+              <div class="info">
+                <span class="labels">型号：</span>
+                <span class="text-content"> {{ item.terminalno }}</span>
+              </div>
+              <div class="info">
+                <span class="labels">告警值：</span>
+                <span class="text-content warning"> {{ montionFilter(item.alertvalue) }}</span>
+              </div>
+            </div>
+
+            <div class="flex">
+              <div class="info">
+                <span class="labels shrink-0"> 地址：</span>
+                <span class="ciyao truncate" style="font-size: 12px; width: 220px" :title="handleAddress(item)">
+                  {{ handleAddress(item) }}</span
+                >
+              </div>
+              <div class="info time shrink-0">
+                <span class="labels">时间：</span>
+                <span class="text-content" style="font-size: 12px"> {{ item.createtime }}</span>
+              </div>
+            </div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">报警内容：</span>
+                <span class="text-content ciyao" :class="{ warning: item.alertdetail }">
+                  {{ item.alertdetail || "无" }}</span
+                >
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </component>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.right_bottom {
+  width: 100%;
+  height: 100%;
+
+  .right_center_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    padding: 10px;
+    font-size: 14px;
+    color: #fff;
+
+    .orderNum {
+      margin: 0 20px 0 -20px;
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 400px;
+      flex-shrink: 0;
+      line-height: 1.5;
+
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("@/assets/img/zuo_xuxian.png");
+        bottom: -12px;
+        left: -2%;
+        background-size: cover;
+      }
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+
+      .labels {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .zhuyao {
+        color: $primary-color;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+  }
+}
+
+.right_bottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: 252px;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+</style>
--- a/copy/right-center.vue
+++ b/copy/right-center.vue
@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import CapsuleChart from "@/components/datav/capsule-chart";
+import { ranking } from "@/api";
+import { ElMessage } from "element-plus";
+
+const config = ref({
+  showValue: true,
+  unit: "次",
+});
+const data = ref([]);
+const getData = () => {
+  return
+  ranking()
+    .then((res) => {
+      console.log("右中--报警排名", res);
+      if (res.success) {
+        data.value = res.data;
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+getData();
+</script>
+
+<template>
+  <div class="right_bottom">
+    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.right_bottom {
+  box-sizing: border-box;
+  padding: 0 16px;
+}
+</style>
--- a/copy/right-top.vue
+++ b/copy/right-top.vue
@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { alarmNum } from "@/api";
+import { graphic } from "echarts/core";
+import { ElMessage } from "element-plus";
+
+const option = ref({});
+const getData = () => {
+  return
+  alarmNum()
+    .then((res) => {
+      console.log("右上--报警次数 ", res);
+      if (res.success) {
+        setOption(res.data.dateList, res.data.numList, res.data.numList2);
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err);
+    });
+};
+const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
+  option.value = {
+    xAxis: {
+      type: "category",
+      data: xData,
+      boundaryGap: false, // 不留白，从原点开始
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(31,99,163,.2)",
+        },
+      },
+      axisLine: {
+        // show:false,
+        lineStyle: {
+          color: "rgba(31,99,163,.1)",
+        },
+      },
+      axisLabel: {
+        color: "#7EB7FD",
+        fontWeight: "500",
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(31,99,163,.2)",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: "rgba(31,99,163,.1)",
+        },
+      },
+      axisLabel: {
+        color: "#7EB7FD",
+        fontWeight: "500",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+    },
+    grid: {
+      //布局
+      show: true,
+      left: "10px",
+      right: "30px",
+      bottom: "10px",
+      top: "32px",
+      containLabel: true,
+      borderColor: "#1F63A3",
+    },
+    series: [
+      {
+        data: yData,
+        type: "line",
+        smooth: true,
+        symbol: "none", //去除点
+        name: "报警1次数",
+        color: "rgba(252,144,16,.7)",
+        areaStyle: {
+          //右，下，左，上
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(252,144,16,.7)",
+              },
+              {
+                offset: 1,
+                color: "rgba(252,144,16,.0)",
+              },
+            ],
+            false
+          ),
+        },
+        markPoint: {
+          data: [
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "rect",
+              symbolSize: [60, 26],
+              symbolOffset: [0, -20],
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+              },
+              label: {
+                color: "#FC9010",
+                backgroundColor: "rgba(252,144,16,0.1)",
+                borderRadius: 6,
+                padding: [7, 14],
+                borderWidth: 0.5,
+                borderColor: "rgba(252,144,16,.5)",
+                formatter: "报警1：{c}",
+              },
+            },
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: 6,
+              itemStyle: {
+                color: "#FC9010",
+                shadowColor: "#FC9010",
+                shadowBlur: 8,
+              },
+              label: {
+                formatter: "",
+              },
+            },
+          ],
+        },
+      },
+      {
+        data: yData2,
+        type: "line",
+        smooth: true,
+        symbol: "none", //去除点
+        name: "报警2次数",
+        color: "rgba(9,202,243,.7)",
+        areaStyle: {
+          //右，下，左，上
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(9,202,243,.7)",
+              },
+              {
+                offset: 1,
+                color: "rgba(9,202,243,.0)",
+              },
+            ],
+            false
+          ),
+        },
+        markPoint: {
+          data: [
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "rect",
+              symbolSize: [60, 26],
+              symbolOffset: [0, -20],
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+              },
+              label: {
+                color: "#09CAF3",
+                backgroundColor: "rgba(9,202,243,0.1)",
+
+                borderRadius: 6,
+                borderColor: "rgba(9,202,243,.5)",
+                padding: [7, 14],
+                formatter: "报警2：{c}",
+                borderWidth: 0.5,
+              },
+            },
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: 6,
+              itemStyle: {
+                color: "#09CAF3",
+                shadowColor: "#09CAF3",
+                shadowBlur: 8,
+              },
+              label: {
+                formatter: "",
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/views/index/center-map.vue
+++ b/src/views/index/center-map.vue
@ -3,7 +3,6 @@ import { ref, reactive, nextTick } from "vue";
 import { centerMap, GETNOBASE } from "@/api";
 import { registerMap, getMap } from "echarts/core";
 import { optionHandle, regionCodes } from "./center.map";
-import BorderBox13 from "@/components/datav/border-box-13";
 import { ElMessage } from "element-plus";

 import type { MapdataType } from "./center.map";
@ -89,71 +88,21 @@ const mapClick = (params: any) => {
 </script>

 <template>
-  <div class="centermap">
-    <div class="maptitle">
-      <div class="zuo"></div>
-      <span class="titletext">{{ title }}</span>
-      <div class="you"></div>
-    </div>
  <div class="mapwrap">
-      <BorderBox13>
    <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
-        <v-chart
-          class="chart"
-          :option="option"
-          ref="centerMapRef"
-          @click="mapClick"
-          v-if="JSON.stringify(option) != '{}'"
-        />
-      </BorderBox13>
-    </div>
+    <v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
+      v-if="JSON.stringify(option) != '{}'" />
  </div>
 </template>

 <style scoped lang="scss">
-.centermap {
-  margin-bottom: 30px;
-
-  .maptitle {
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    padding-top: 10px;
-    box-sizing: border-box;
-
-    .titletext {
-      font-size: 28px;
-      font-weight: 900;
-      letter-spacing: 6px;
-      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      margin: 0 10px;
-    }
-
-    .zuo,
-    .you {
-      background-size: 100% 100%;
-      width: 29px;
-      height: 20px;
-      margin-top: 8px;
-    }
-
-    .zuo {
-      background: url("@/assets/img/xiezuo.png") no-repeat;
-    }
-
-    .you {
-      background: url("@/assets/img/xieyou.png") no-repeat;
-    }
-  }
-
-  .mapwrap {
-    height: 580px;
+.mapwrap {
+  height: 780px;
  width: 100%;
  // padding: 0 0 10px 0;
  box-sizing: border-box;
  position: relative;
+  border: 1px solid #f00;

  .quanguo {
    position: absolute;
@ -171,6 +120,5 @@ const mapClick = (params: any) => {
    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
    z-index: 10;
  }
-  }
 }
 </style>
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ItemWrap from "@/components/item-wrap";
+import zkItem from "@/components/zk-item";
 import LeftTop from "./left-top.vue";
 import LeftCenter from "./left-center.vue";
 import LeftBottom from "./left-bottom.vue";
@ -13,44 +14,37 @@ import RightBottom from "./right-bottom.vue";
 <template>
  <div class="index-box">
    <div class="contetn_left">
-      <!-- <div class="pagetab">
-        <div class="item">实时监测</div>
-        <div class="item">统计分析</div>
-      </div> -->
-      <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
+      <zkItem class="contetn_left-top contetn_lr-item" title="迎新进度">
        <LeftTop />
-      </ItemWrap>
-      <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
+      </zkItem>
+      <zkItem class="contetn_left-center contetn_lr-item" title="">
        <LeftCenter />
-      </ItemWrap>
-      <ItemWrap
+      </zkItem>
+      <zkItem
        class="contetn_left-bottom contetn_lr-item"
-        title="设备提醒"
+        title=""
        style="padding: 0 10px 16px 10px"
      >
        <LeftBottom />
-      </ItemWrap>
+      </zkItem>
    </div>
    <div class="contetn_center">
-      <CenterMap class="contetn_center_top" title="设备分布图" />
-      <ItemWrap class="contetn_center-bottom" title="安装计划">
-        <CenterBottom />
-      </ItemWrap>
+      <CenterMap class="contetn_center_top" title="全国地图" />
    </div>
    <div class="contetn_right">
-      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">
+      <zkItem class="contetn_left-bottom contetn_lr-item" title="缴费人数">
        <RightTop />
-      </ItemWrap>
-      <ItemWrap
+      </zkItem>
+      <zkItem
        class="contetn_left-bottom contetn_lr-item"
-        title="报警排名(TOP8)"
+        title="当日缴费人数"
        style="padding: 0 10px 16px 10px"
      >
        <RightCenter />
-      </ItemWrap>
-      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
+      </zkItem>
+      <zkItem class="contetn_left-bottom contetn_lr-item" title="报道人数区域排名 ">
        <RightBottom />
-      </ItemWrap>
+      </zkItem>
    </div>
  </div>
 </template>
@ -72,16 +66,19 @@ import RightBottom from "./right-bottom.vue";
  width: 540px;
  box-sizing: border-box;
  flex-shrink: 0;
+  border: 2px solid transparent;
+  border-radius: 16px;                        
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
 }
 .contetn_center {
  flex: 1;
-  margin: 0 54px;
+  // margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
-  .contetn_center-bottom {
-    height: 315px;
-  }
+
 }

 .contetn_lr-item {
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@ -1,130 +1,13 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { countDeviceNum } from "@/api";
-import CountUp from "@/components/count-up";
-import {ElMessage} from "element-plus"
-
-const duration = ref(2);
-const state = reactive({
-  alarmNum: 0,
-  offlineNum: 0,
-  onlineNum: 0,
-  totalNum: 0,
-});


-const getData = () => {
-  return
-  countDeviceNum().then((res) => {
-    console.log("左上--设备总览",res);
-    if (res.success) {
-      state.alarmNum = res.data.alarmNum;
-      state.offlineNum = res.data.offlineNum;
-      state.onlineNum = res.data.onlineNum;
-      state.totalNum = res.data.totalNum;
-    }else{
-      ElMessage.error(res.msg)
-    }
-  }).catch(err=>{
-    ElMessage.error(err)
-  });;
-};
-getData();
+
 </script>

 <template>
-  <ul class="user_Overview flex">
-    <li class="user_Overview-item" style="color: #00fdfa">
-      <div class="user_Overview_nums allnum">
-        <CountUp :endVal="state.totalNum" :duration="duration" />
-      </div>
-      <p>总设备数</p>
-    </li>
-    <li class="user_Overview-item" style="color: #07f7a8">
-      <div class="user_Overview_nums online">
-        <CountUp :endVal="state.onlineNum" :duration="duration" />
-      </div>
-      <p>在线数</p>
-    </li>
-    <li class="user_Overview-item" style="color: #e3b337">
-      <div class="user_Overview_nums offline">
-        <CountUp :endVal="state.offlineNum" :duration="duration" />
-      </div>
-      <p>掉线数</p>
-    </li>
-    <li class="user_Overview-item" style="color: #f5023d">
-      <div class="user_Overview_nums laramnum">
-        <CountUp :endVal="state.alarmNum" :duration="duration" />
-      </div>
-      <p>告警次数</p>
-    </li>
-  </ul>
+
 </template>

 <style scoped lang="scss">
-.left-top {
-  width: 100%;
-  height: 100%;
-}

-.user_Overview {
-  li {
-    flex: 1;
-
-    p {
-      text-align: center;
-      height: 16px;
-      font-size: 16px;
-    }
-
-    .user_Overview_nums {
-      width: 100px;
-      height: 100px;
-      text-align: center;
-      line-height: 100px;
-      font-size: 22px;
-      margin: 50px auto 30px;
-      background-size: cover;
-      background-position: center center;
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-      }
-
-      &.bgdonghua::before {
-        animation: rotating 14s linear infinite;
-      }
-    }
-
-    .allnum {
-      &::before {
-        background-image: url("@/assets/img/left_top_lan.png");
-      }
-    }
-
-    .online {
-      &::before {
-        background-image: url("@/assets/img/left_top_lv.png");
-      }
-    }
-
-    .offline {
-      &::before {
-        background-image: url("@/assets/img/left_top_huang.png");
-      }
-    }
-
-    .laramnum {
-      &::before {
-        background-image: url("@/assets/img/left_top_hong.png");
-      }
-    }
-  }
-}
 </style>
--- a/vite.config.ts.timestamp-1716358568047-0c177ece8a04d.mjs
+++ b/vite.config.ts.timestamp-1716358568047-0c177ece8a04d.mjs
				`@ -0,0 +1 @@`
				`VITE_API_BASEURL = http://api.nclg.yx.zheke.com`