新增晴雨台

src/components/global-register/title-c/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="title-bg bg">
+    <img class="title_img" src="@/assets/images/title/icon.png" alt="" />
     <span class="title">{{ title }}</span>
     <slot></slot>
-    <div v-if="swshow">
+    <!-- <div v-if="swshow">
       <span class="sw-tip">点位</span>
       <el-switch v-model="status" @change="changeStatus" />
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -40,17 +41,21 @@ const changeStatus = (e: Boolean) => {
 .title-bg {
   position: relative;
   overflow: hidden;
-  height: 53px;
+  height: 36px;
   display: flex;
   flex-direction: row;
   align-items: center;
+  padding-left: 10px;
 
   .title {
     flex: 1;
-    font-size: 20px;
     color: #ffffff;
-    margin-left: 10%;
+    margin-left: 12px;
-    font-family: YouSheBiaoTiHei;
+    font-size: 16px;
+    line-height: 16px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 500;
+    color: #f3f9ff;
   }
 
   .sw-tip {
@@ -66,4 +71,8 @@ const changeStatus = (e: Boolean) => {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
+.title_img {
+  width: 20px;
+  height: 20px;
+}
 </style>

src/components/global-register/title-d/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="title-bg" :style="'width:' + props.width + '%'">
+    <span class="title_icon"></span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "TitleD",
+});
+</script>
+
+<script lang='ts' setup>
+const emits = defineEmits(["switch:change"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+
+  swshow: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: "100",
+  },
+});
+
+const status = ref(true);
+const changeStatus = (e: Boolean) => {
+  emits("switch:change", e);
+};
+</script>
+
+<style lang="scss" scoped>
+.title-bg {
+  position: relative;
+  overflow: hidden;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: rgba(72, 77, 86, 0.66);
+  margin: 5px 0;
+}
+.title_icon {
+  width: 4px;
+  height: 2px;
+  background: #ff6200;
+  opacity: 1;
+  margin-right: 10px;
+}
+</style>

src/layout/components/TopNav/index.vue

@@ -22,7 +22,7 @@ const onClickOutside = () => {
     <h1 class="top-title">{{ title }}</h1>
     <div class="top_option">
       <!-- 图层控制 -->
-      <!-- <TopOption></TopOption> -->
+      <TopOption></TopOption>
     </div>
   </header>
 </template>
@@ -35,21 +35,20 @@ const onClickOutside = () => {
   background-size: 100% 100%;
   background-repeat: no-repeat;
   z-index: 3;
+  display: flex;
 
   .top-title {
-    position: relative;
+    width: 30%;
-    margin-block: 0;
+    font-size: 27px;
-    color: #fff;
+    font-family: Source Han Sans CN, Source Han Sans CN;
-    letter-spacing: 4px;
+    font-weight: bold;
-    font-size: 18px;
-    top: 40%;
-    transform: translateY(-50%);
     text-align: center;
+    color: #cfe6ff;
   }
 }
 .top_option {
-  margin-top: 15px;
+  // margin-top: 15px;
-  padding-left: 25px;
+  // padding-left: 25px;
 }
 </style>
 

src/styles/element-plus.scss

@@ -49,8 +49,8 @@
   --el-table-bg-color: transparent;
   --el-table-current-row-background-color: transparent;
   --el-table-header-bg-color: transparent;
-  // --el-border-color-lighter: #0080b200;
+  --el-border-color-lighter: #0080b200;
-  --el-border-color-lighter: #0081b2;
+  // --el-border-color-lighter: #0081b2;
   --el-fill-color-lighter: #00c0ff44;
   --el-table-header-text-color: #00ffff !important;
 
@@ -100,16 +100,19 @@
     color: #08dcf0;
   }
 
+  //table头部背景颜色
   .el-table__header-wrapper {
-    background-color: rgba(21, 47, 97, 1);
+    background-color: rgba(2, 49, 100, 1);
     border-radius: 4px 4px 0 0;
     height: 35px;
     margin-top: -3px;
   }
 }
 
+//table内容背景颜色
 .el-table__row {
-  background-color: rgba(21, 48, 97, 0.407) !important;
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  font-size: 12px;
 }
 
 .el-table td {
@@ -178,15 +181,16 @@
 }
 
 table tr td {
-  border: 2px solid #152F61 !important;
+  // border: 2px solid #152F61 !important;
 }
 
+//table边框
 table tr td:not(:nth-last-child(1)) {
   border-right: none !important;
 }
 
 table tr td:not(:nth-child(1)) {
-  // border-left: none !important;
+  border-left: none !important;
 }
 
 table tr:not(:nth-child(1)) td {

src/styles/index.scss

@@ -115,14 +115,14 @@ ul {
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
-	padding: 0 10px 10px 10px;
+	// padding: 0 10px 10px 10px;
-	height: 260px;
+	// height: 260px;
-	border: 2px solid;
+	// border: 2px solid;
-	background: linear-gradient(0deg, #07193a 0%, rgba(9, 24, 56, 0.3) 100%);
+	// background: linear-gradient(0deg, #07193a 0%, rgba(9, 24, 56, 0.3) 100%);
 
-	border-image: linear-gradient(180deg,
+	// border-image: linear-gradient(180deg,
-			rgba(15, 37, 77, 0) 0%,
+	// 		rgba(15, 37, 77, 0) 0%,
-			rgba(64, 98, 165, 1) 100%) 2 2 2 2;
+	// 		rgba(64, 98, 165, 1) 100%) 2 2 2 2;
 	margin-bottom: 31px;
 	overflow: hidden;
 }

src/styles/variables.scss

@@ -4,7 +4,7 @@ $designWidth: 1920;
 $designHeight: 1080;
 
 //侧边菜单宽度
-$sideWidth: 25%;
+$sideWidth: 33%;
 
 @use "sass:math";
 
@@ -97,5 +97,10 @@ $sideWidth: 25%;
 
 //按钮
 .details {
-  color: #E19F35;
+  color: rgba(102, 225, 223, 1);
+}
+
+.conBox {
+  background-color: rgba(0, 61, 123, 0.5);
+  border-radius: 0px 0px 10px 10px;
 }

src/views/home-page/left-side/components/basicInformation.vue

@@ -0,0 +1,127 @@
+<!-- 晴雨台 -->
+<template>
+  <div class="side-bg">
+    <TitleC title="晴雨台" :swshow="false"></TitleC>
+    <div class="con_box conBox">
+      <div>
+        <div></div>
+      </div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "weather",
+});
+</script>
+<script setup lang='ts'>
+// import * as echarts from "echarts";
+// const airTenementRef = ref();
+// let airOption = {
+//   series: [
+//     {
+//       type: "gauge",
+//       startAngle: 180,
+//       endAngle: 0,
+//       center: ["50%", "75%"],
+//       radius: "90%",
+//       min: 0,
+//       max: 1,
+//       splitNumber: 8,
+//       axisLine: {
+//         lineStyle: {
+//           width: 6,
+//           color: [
+//             [0.25, "#FF6E76"],
+//             [0.5, "#FDDD60"],
+//             [0.75, "#58D9F9"],
+//             [1, "#7CFFB2"],
+//           ],
+//         },
+//       },
+//       pointer: {
+//         icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+//         length: "12%",
+//         width: 20,
+//         offsetCenter: [0, "-60%"],
+//         itemStyle: {
+//           color: "auto",
+//         },
+//       },
+//       axisTick: {
+//         length: 12,
+//         lineStyle: {
+//           color: "auto",
+//           width: 2,
+//         },
+//       },
+//       splitLine: {
+//         length: 20,
+//         lineStyle: {
+//           color: "auto",
+//           width: 5,
+//         },
+//       },
+//       axisLabel: {
+//         color: "#fff",
+//         fontSize: 20,
+//         distance: -60,
+//         rotate: "tangential",
+//         formatter: function (value: number) {
+//           if (value === 0.875) {
+//             return "差";
+//           } else if (value === 0.625) {
+//             return "合格";
+//           } else if (value === 0.375) {
+//             return "良";
+//           } else if (value === 0.125) {
+//             return "优";
+//           }
+//           return "";
+//         },
+//       },
+//       title: {
+//         offsetCenter: [0, "10%"],
+//         fontSize: 20,
+//         color: "yellow",
+//       },
+//       detail: {
+//         fontSize: 30,
+//         offsetCenter: [0, "-20%"],
+//         valueAnimation: true,
+//         formatter: function (value: number) {
+//           return Math.round(value * 100) + "";
+//         },
+//         color: "inherit",
+//       },
+//       data: [
+//         {
+//           value: 0.7,
+//           name: "良",
+//         },
+//       ],
+//     },
+//   ],
+// };
+// const getData = () => {
+//   //空气情况仪表盘
+//   const airTenementChart = echarts.init(airTenementRef.value);
+//   airTenementChart.setOption(airOption);
+// };
+// onMounted(() => {
+//   getData();
+// });
+</script>
+
+<style lang="scss" scoped>
+.side-bg {
+  // height: 45%;
+}
+.con_box {
+  height: 213px;
+  margin-top: 5px;
+}
+</style>

src/views/home-page/left-side/components/event-statistics.vue

@@ -1,181 +0,0 @@
-<!-- 应急事件统计 -->
-<template>
-  <div class="side-bg">
-    <div><TitleC title="应急事件统计   已处理：30，待处理：1"></TitleC></div>
-
-    <div class="manage_body">
-      <div class="input_div">
-        <span> 关键词 </span>
-        <el-input
-          class="custom-input inputDeep"
-          v-model="search"
-          placeholder="请输入关键词"
-        >
-        </el-input>
-      </div>
-
-      <div class="manage_table">
-        <el-table
-          :data="tableData"
-          max-height="32vh"
-          style="width: 100%"
-          show-overflow-tooltip
-        >
-          <el-table-column prop="date" label="事件名" align="center" />
-          <el-table-column prop="status" label="状态" align="center">
-            <template #default="scope">
-              <span v-if="scope.row.status == 0">已处理</span>
-              <span v-else style="color: red">待处理</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name" label="处理人" align="center" />
-          <el-table-column prop="address" label="联系地址" align="center" />
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="currentPage"
-          v-model:page-size="pageSize"
-          layout="total, prev, pager, next"
-          :total="total"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
-export default defineComponent({
-  name: "event-statistics",
-});
-</script>
-
-<script lang='ts' setup>
-const tableData = [
-  {
-    date: "某某事件",
-    name: "某某人",
-    status: 0,
-    address: "某某地址",
-  },
-  {
-    date: "某某事件",
-    name: "某某人",
-    status: 1,
-    address: "某某地址",
-  },
-  {
-    date: "某某事件",
-    name: "某某人",
-    status: 1,
-    address: "某某地址",
-  },
-  {
-    date: "某某事件",
-    name: "某某人",
-    status: 1,
-    address: "某某地址",
-  },
-  {
-    date: "某某事件",
-    name: "某某人",
-    status: 1,
-    address: "某某地址",
-  },
-];
-
-const currentPage = ref(1);
-const pageSize = ref(5);
-const total = ref(10);
-const search = ref("");
-const visible = ref(false);
-const clickvisible = () => {
-  visible.value = true;
-};
-const close = () => {
-  visible.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 37%;
-}
-.manage_body {
-  padding: 10px;
-}
-.manage_body_top_icon {
-  width: 50px;
-  height: 50px;
-  margin-top: 4px;
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  > img {
-    width: 25px;
-    height: 25px;
-  }
-}
-.manage_body_top_icon_left {
-  background-image: url("@/assets/images/emergency-map/left/cm_left_bg_1.png");
-}
-.manage_body_top_icon_right {
-  background-image: url("@/assets/images/emergency-map/left/cm_right_bg_1.png");
-}
-
-.demo-pagination-block + .demo-pagination-block {
-  margin-top: 10px;
-}
-.demo-pagination-block .demonstration {
-  margin-bottom: 16px;
-}
-.el-pagination {
-  margin-top: 10px;
-}
-
-::v-deep .el-input__inner {
-  border-radius: 0% !important;
-  border: 1px solid #2fdbff;
-  color: #2fdbff !important;
-}
-
-::v-deep .el-input__inner::selection {
-  color: #2fdbff !important;
-}
-
-::v-deep .el-input__inner::placeholder {
-  color: #2fdbff !important;
-}
-.manage_table {
-  margin-top: 10px;
-}
-.inputDeep {
-  :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
-      inset;
-    cursor: default;
-    .el-input__inner {
-      cursor: default !important;
-    }
-  }
-}
-.input_div {
-  width: 300px;
-  height: 30px;
-  display: flex;
-  align-content: center;
-  > span {
-    line-height: 30px;
-    padding: 0px 10px;
-    border: 1px solid #2fdbff;
-    color: #fff;
-    font-size: 15px;
-  }
-  > .el-input {
-    width: 60%;
-    margin-left: -13px;
-  }
-}
-</style>

src/views/home-page/left-side/components/risk-pool.vue

@@ -1,241 +0,0 @@
-<!-- 风险池 -->
-<template>
-  <div class="side-bg">
-    <div>
-      <TitleC title="风险池" :swshow="false">
-        <el-radio-group
-          v-model="recordRadio"
-          size="large"
-          text-color="#00FFFF"
-          @change="recordChange"
-        >
-          <el-radio-button label="1">重点人员</el-radio-button>
-          <el-radio-button label="2">重点场所</el-radio-button>
-        </el-radio-group></TitleC
-      >
-    </div>
-    <div class="rP_body">
-      <div></div>
-      <div v-if="recordRadio == '1'">
-        <el-table
-          :data="personnelTableData"
-          max-height="32vh"
-          style="width: 100%"
-          show-overflow-tooltip
-        >
-          <el-table-column
-            prop="name"
-            label="姓名"
-            align="center"
-            width="100"
-          />
-          <el-table-column
-            prop="gender"
-            label="性别"
-            align="center"
-            width="70"
-          />
-          <el-table-column prop="typesOf" label="类型" align="center" />
-          <el-table-column prop="address" label="地址" align="center" />
-          <el-table-column label="操作" align="center" width="80">
-            <template #default="scope">
-              <span @click="clickvisible">
-                <span class="pointer details">预警</span>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="personnelCurrentPage"
-          v-model:page-size="personnelageSize"
-          layout="total, prev, pager, next"
-          :total="personnelTotal"
-        />
-      </div>
-      <div v-if="recordRadio == '2'">
-        <el-table
-          :data="placeTableData"
-          max-height="32vh"
-          style="width: 100%"
-          show-overflow-tooltip
-        >
-          <el-table-column
-            prop="place"
-            label="场所"
-            align="center"
-            width="100"
-          />
-          <el-table-column
-            prop="classification"
-            label="分类"
-            align="center"
-            width="100"
-          />
-          <el-table-column prop="address" label="地址" align="center" />
-          <el-table-column
-            prop="address"
-            label="操作"
-            align="center"
-            width="80"
-          >
-            <template #default="scope">
-              <span @click="clickvisible">
-                <span class="pointer details">预警</span>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="placeCurrentPage"
-          v-model:page-size="placePageSize"
-          layout="total, prev, pager, next"
-          :total="placeTotal"
-        />
-      </div>
-    </div>
-    <!-- 弹窗 -->
-    <RiskPool :visible="visible" @close="close"></RiskPool>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
-export default defineComponent({
-  name: "risk-pool",
-});
-</script>
-<script setup lang='ts'>
-import RiskPool from "../dialog/risk-pool.vue";
-
-const visible = ref(false);
-
-const recordRadio = ref("1");
-//重点人员
-const personnelCurrentPage = ref(1);
-const personnelageSize = ref(5);
-const personnelTotal = ref(10);
-
-const personnelTableData = [
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "防火“六类人员",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "防汛隐患点",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "重点关注人员",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "火灾隐患点",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "防汛隐患点",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "防汛隐患点",
-  },
-  {
-    name: "某某人",
-    address: "某某某地址",
-    gender: "男",
-    typesOf: "防汛隐患点",
-  },
-];
-//重点场所
-const placeCurrentPage = ref(1);
-const placePageSize = ref(5);
-const placeTotal = ref(10);
-const placeTableData = [
-  {
-    place: "某某场所",
-    classification: "火灾隐患点",
-    address: "99999999999",
-  },
-  {
-    place: "某某场所",
-    classification: "火灾隐患点",
-    address: "11111111111",
-  },
-  {
-    place: "某某场所",
-    classification: "火灾隐患点",
-    address: "11111111111",
-  },
-  {
-    place: "某某场所",
-    classification: "火灾隐患点",
-    address: "11111111111",
-  },
-  {
-    place: "某某场所",
-    classification: "火灾隐患点",
-    address: "11111111111",
-  },
-];
-//切换table
-const recordChange = () => {};
-const clickvisible = () => {
-  visible.value = true;
-};
-const close = () => {
-  visible.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 39%;
-}
-.rP_body {
-  > div:nth-child(1) {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-  }
-  > div:nth-child(2) {
-    margin-top: 20px;
-  }
-}
-
-//单选框样式
-
-::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
-  background: #031838;
-}
-
-::v-deep .el-radio-button:first-child .el-radio-button__inner {
-  background: #031838;
-  border-radius: 10px 0 0 10px !important;
-}
-
-::v-deep .el-radio-button__inner {
-  color: #ffffff;
-}
-
-::v-deep .el-radio-button:last-child .el-radio-button__inner {
-  background: #031838;
-  border-radius: 0 10px 10px 0 !important;
-}
-</style>

src/views/home-page/left-side/components/weather.vue

@@ -2,27 +2,75 @@
 <template>
   <div class="side-bg">
     <div>
-      <TitleC title="晴雨台" :swshow="false">
+      <TitleC title="晴雨台" :swshow="false"></TitleC>
-        <div @click="visible = true" class="release_buttom">发布预警</div>
+      <div class="weather_data">
-      </TitleC>
+        <div>
-    </div>
+          <TitleD width="100">
-    <div class="weather_body">
+            <div class="weather_data_title">气象实时数据</div>
-      <div>
+          </TitleD>
-        <div><span>温度：</span><span>15°C</span></div>
+          <div class="weather_data_left">
-        <div><span>湿度：</span><span>55%</span></div>
+            <div>
-        <div><span>气压：</span><span>30P</span></div>
+              <div>
-        <div><span>降水量：</span><span>50ml</span></div>
+                <img
-        <div><span>天气状况：</span><span>多云</span></div>
+                  src="../../../../assets/images/home-page/left/lightRain.png"
-      </div>
+                  alt=""
-      <div>
+                />
-        <div v-for="(item, index) in 7" :key="index">
+                <span>15°</span>
-          <span>2023年12月15日</span>
+              </div>
-          <span>多云</span>
+              <div>
-          <span>1°C~11°C</span>
+                <div>雨 东南风：＜3级</div>
+                <div>10~17℃</div>
+              </div>
+            </div>
+            <div>
+              <div>
+                <div>湿度：48.0%</div>
+                <div>降雨量：240mm</div>
+              </div>
+              <div>
+                <div>空气质量：良</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <TitleD width="100">
+            <div class="weather_data_title">未来7天气象数据</div>
+          </TitleD>
+          <div class="weather_data_right conBox"></div>
         </div>
       </div>
+      <TitleD width="100">
+        <div class="weather_data_title">气象预警信息</div>
+      </TitleD>
+      <el-table :data="tableData" height="180" style="width: 100%">
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column
+          prop="type"
+          label="预警类型"
+          align="center"
+          width="120"
+        />
+        <el-table-column prop="info" label="预警信息" align="center" />
+        <el-table-column
+          prop="time"
+          label="预警时间"
+          align="center"
+          width="140"
+        >
+          <template #default="scope">
+            <span class="time">{{ scope.row.time }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="60">
+          <template #default="scope">
+            <span @click="clickDetails">
+              <span class="pointer details">详情</span>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-    <RiskPool :visible="visible" @close="visible = false"></RiskPool>
   </div>
 </template>
 
@@ -33,71 +81,99 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
-import RiskPool from "../dialog/risk-pool.vue";
 const visible = ref(false);
+const tableData = [
+  {
+    type: "暴雨黄色预警",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+  },
+  {
+    type: "暴雨黄色预警",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+  },
+  {
+    type: "暴雨黄色预警",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+  },
+];
+const clickDetails = () => {};
 </script>
 
 <style lang="scss" scoped>
 .side-bg {
-  height: 45%;
+  // height: 45%;
 }
-.weather_body {
+.weather_data {
-  padding-top: 5px;
+  display: flex;
-  padding-left: 10px;
+  justify-content: space-between;
+  > div:nth-child(1) {
+    width: 40%;
+  }
+  > div:nth-child(2) {
+    width: 59%;
+  }
+}
+.weather_data_title {
+  font-size: 16px;
+  font-family: Source Han Sans SC, Source Han Sans SC;
+  font-weight: 400;
+  color: #ffe7cd;
+}
+.weather_data_left {
+  width: 100%;
+  height: 120px;
+  background-image: url("../../../../assets/images/home-page/left/barometer.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  padding: 12px;
   > div:nth-child(1) {
     display: flex;
-    flex-wrap: wrap;
+    justify-content: space-between;
-    > div {
+    > div:nth-child(1) {
-      width: 190px;
+      font-size: 27px;
-      color: white;
+      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-size: 20px;
+      font-weight: bold;
-      margin-right: 20px;
+      display: flex;
-      > span:nth-child(1) {
+      align-items: center;
-        font-family: YouSheBiaoTiHei;
+      color: #ffffff;
+      > img {
+        width: 24px;
+        height: 24px;
       }
     }
+    > div:nth-child(2) {
+      font-size: 14px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 500;
+      color: #ffffff;
+    }
   }
   > div:nth-child(2) {
-    padding-left: 10px;
-    margin-top: 20px;
-    overflow-y: scroll;
-    height: 200px;
-    background-color: #153062;
     > div {
-      color: #86b6f0;
+      font-size: 13px;
-
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #d0deee;
+    }
+    > div:nth-child(1) {
+      display: flex;
+      justify-content: space-between;
       margin-top: 10px;
-      > span {
+      margin-bottom: 5px;
-        margin-right: 20px;
-      }
-      > span:nth-child(2) {
-        display: inline-block;
-        width: 80px;
-        text-align: center;
-      }
-      > span:nth-child(3) {
-        display: inline-block;
-        width: 100px;
-        text-align: center;
-      }
-      > span:nth-child(4) {
-        color: #e19f35;
-      }
     }
   }
-  > div:nth-child(2)::-webkit-scrollbar {
-    display: none;
-  }
 }
-
+.weather_data_right {
-.release_buttom {
+  width: 100%;
-  cursor: pointer;
+  height: 120px;
-  color: red;
+}
-  font-weight: bold;
+.time {
-  font-size: 18px;
+  font-size: 12px;
-  border: 1px solid red;
+  font-family: Source Han Sans SC, Source Han Sans SC;
-  padding: 0 10px;
+  font-weight: 400;
-  border-radius: 5px;
+  color: #159aff;
-  text-align: center;
 }
 </style>

src/views/home-page/left-side/index.vue

@@ -2,25 +2,22 @@
   <div class="left-side">
     <!-- 晴雨台 -->
     <Weather></Weather>
-    <!-- 风险池 -->
+    <!-- 基本信息统计 -->
-    <RiskPool></RiskPool>
+    <BasicInformation></BasicInformation>
-    <!-- 应急事件统计 -->
-    <EventStatistics></EventStatistics>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Weather, RiskPool, EventStatistics },
+  components: { Weather, BasicInformation },
   name: "LeftSide",
 });
 </script>
 
 <script lang='ts' setup>
+import BasicInformation from "./components/basicInformation.vue";
 import Weather from "./components/weather.vue";
-import RiskPool from "./components/risk-pool.vue";
-import EventStatistics from "./components/event-statistics.vue";
 </script>
 
 <style lang="scss" scoped>

src/views/top-menu/top-option.vue

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
-  <div>
+  <div class="top_menu">
-    <div class="top_option" ref="buttonRef" v-click-outside="onClickOutside">
+    <!-- <div class="top_option" ref="buttonRef" v-click-outside="onClickOutside">
       <img src="@/assets/images/top/top-option-layer.png" alt="" />
       <span>图层控制</span>
-    </div>
+    </div> -->
-    <el-popover
+    <!-- <el-popover
       ref="popoverRef"
       :virtual-ref="buttonRef"
       trigger="click"
@@ -60,7 +60,17 @@
           </div>
         </div>
       </template>
-    </el-popover>
+    </el-popover> -->
+
+    <div
+      class="top_title"
+      v-for="(item, index) in label"
+      :key="index"
+      @click="clickMenuOption(item.id)"
+      :class="item.check == true ? 'menu_selected' : 'menu_notSelected'"
+    >
+      {{ item.title }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -70,30 +80,71 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
-import { ClickOutside as vClickOutside } from "element-plus";
+import { menuStore } from "@/store/menu";
-const buttonRef = ref();
+const label = ref([
-const popoverRef = ref();
+  { title: "大屏首页", check: true, id: 0 },
-const onClickOutside = () => {
+  { title: "大数据分析", check: false, id: 1 },
-  unref(popoverRef).popperRef?.delayHide?.();
-};
-const data = reactive([
-  { name: "应急物资", state: true, eName: "emergency-supplies" },
-  { name: "避难场所", state: true, eName: "shelter" },
-  { name: "城市内涝点", state: true, eName: "waterlogging-point" },
-  { name: "视频监控", state: true, eName: "video-monitoring" },
-  { name: "救援队伍", state: false, eName: "rescue-team" },
-  { name: "学校", state: false, eName: "school" },
-  { name: "微型消防站", state: false, eName: "micro-fire-station" },
-  { name: "消防站", state: false, eName: "fire-station" },
-  { name: "医疗队伍", state: false, eName: "medical-team" },
 ]);
-
+const clickMenuOption = (id: any) => {
-const modifySelected = (item: any) => {
+  label.value.forEach((item) => {
-  item.state = !item.state;
+    item.check = false;
+  });
+  label.value[id].check = true;
 };
-</script>
+// import { ClickOutside as vClickOutside } from "element-plus";
+// const buttonRef = ref();
+// const popoverRef = ref();
+// const onClickOutside = () => {
+//   unref(popoverRef).popperRef?.delayHide?.();
+// };
+// const data = reactive([
+//   { name: "应急物资", state: true, eName: "emergency-supplies" },
+//   { name: "避难场所", state: true, eName: "shelter" },
+//   { name: "城市内涝点", state: true, eName: "waterlogging-point" },
+//   { name: "视频监控", state: true, eName: "video-monitoring" },
+//   { name: "救援队伍", state: false, eName: "rescue-team" },
+//   { name: "学校", state: false, eName: "school" },
+//   { name: "微型消防站", state: false, eName: "micro-fire-station" },
+//   { name: "消防站", state: false, eName: "fire-station" },
+//   { name: "医疗队伍", state: false, eName: "medical-team" },
+// ]);
 
+// const modifySelected = (item: any) => {
+//   item.state = !item.state;
+// };
+</script>
 <style lang="scss" scoped>
+.top_menu {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.top_title {
+  cursor: pointer;
+  width: 112px;
+  height: 40px;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 40px;
+  margin-left: 32px;
+  background-image: url();
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFangSC-Medium;
+  font-weight: normal;
+  color: #f4faff;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.menu_selected {
+  background-image: url("@/assets/images/top/menuSelection.png");
+}
+.menu_notSelected {
+  background-image: url("@/assets/images/top/menuNotSelected.png");
+}
+</style>
+
+
+<!-- <style lang="scss" scoped>
 .top_option {
   width: 131px;
   height: 31px;
@@ -164,4 +215,4 @@ const modifySelected = (item: any) => {
     color: #edd351 !important;
   }
 }
-</style>
+</style> -->