diff --git a/src/api/homePage.ts b/src/api/homePage.ts
new file mode 100644
index 0000000..9651dae
--- /dev/null
+++ b/src/api/homePage.ts
@@ -0,0 +1,9 @@
+import request from "../utils/request";
+
+export function test(data: any) {
+  return request({
+    url: "",
+    method: "POST",
+    data: data
+  });
+}
diff --git a/src/assets/images/safe-production/left/inner-ring.png b/src/assets/images/home-page/left/inner-ring.png
similarity index 100%
rename from src/assets/images/safe-production/left/inner-ring.png
rename to src/assets/images/home-page/left/inner-ring.png
diff --git a/src/assets/images/home-page/left/leftArrow.png b/src/assets/images/home-page/left/leftArrow.png
new file mode 100644
index 0000000..54c573f
Binary files /dev/null and b/src/assets/images/home-page/left/leftArrow.png differ
diff --git a/src/assets/images/home-page/left/rightArrow.png b/src/assets/images/home-page/left/rightArrow.png
new file mode 100644
index 0000000..3406446
Binary files /dev/null and b/src/assets/images/home-page/left/rightArrow.png differ
diff --git a/src/assets/images/safe-production/left/outer-ring.png b/src/assets/images/safe-production/left/outer-ring.png
deleted file mode 100644
index 330169a..0000000
Binary files a/src/assets/images/safe-production/left/outer-ring.png and /dev/null differ
diff --git a/src/assets/images/safe-production/right/blue.png b/src/assets/images/safe-production/right/blue.png
deleted file mode 100644
index 96825b2..0000000
Binary files a/src/assets/images/safe-production/right/blue.png and /dev/null differ
diff --git a/src/assets/images/safe-production/right/orange.png b/src/assets/images/safe-production/right/orange.png
deleted file mode 100644
index 656f0d2..0000000
Binary files a/src/assets/images/safe-production/right/orange.png and /dev/null differ
diff --git a/src/assets/images/safe-production/right/red.png b/src/assets/images/safe-production/right/red.png
deleted file mode 100644
index 7530807..0000000
Binary files a/src/assets/images/safe-production/right/red.png and /dev/null differ
diff --git a/src/assets/images/safe-production/right/yellow.png b/src/assets/images/safe-production/right/yellow.png
deleted file mode 100644
index 8799013..0000000
Binary files a/src/assets/images/safe-production/right/yellow.png and /dev/null differ
diff --git a/src/assets/images/top/menuSelection.png b/src/assets/images/top/menuSelection.png
index a9f9e4f..f4222e7 100644
Binary files a/src/assets/images/top/menuSelection.png and b/src/assets/images/top/menuSelection.png differ
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index f7d1d88..0cb3ead 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -56,11 +56,12 @@
 
   table th,
   table td {
-    border-bottom: none !important;
+    // border-bottom: none !important;
   }
 
   td {
     border: none;
+    height: 34px;
   }
 
   // 滚动条的宽度
@@ -80,12 +81,12 @@
   }
 
   .cell {
-    // display: -webkit-box;
-    // -webkit-line-clamp: 1;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // -webkit-box-orient: vertical;
-    // word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
     color: #fff;
   }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 891dc73..237c8ff 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -123,6 +123,6 @@ ul {
 	// border-image: linear-gradient(180deg,
 	// 		rgba(15, 37, 77, 0) 0%,
 	// 		rgba(64, 98, 165, 1) 100%) 2 2 2 2;
-	margin-bottom: 31px;
+	margin-bottom: 16px;
 	overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c0e42e6..83cffc3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,7 +4,7 @@ $designWidth: 1920;
 $designHeight: 1080;
 
 //侧边菜单宽度
-$sideWidth: 33%;
+$sideWidth: 31%;
 
 @use "sass:math";
 
@@ -103,4 +103,30 @@ $sideWidth: 33%;
 .conBox {
   background-color: rgba(0, 61, 123, 0.5);
   border-radius: 0px 0px 10px 10px;
+}
+
+.module_top_title {
+  cursor: pointer;
+  width: 64px;
+  height: 22px;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 20px;
+  font-size: 12px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 500;
+  border-radius: 3px;
+  margin-left: 8px;
+}
+
+.module_menu_selected {
+  background-color: #486f6f;
+  border: 1px solid #66e1df;
+  color: #66e1df;
+}
+
+.module_menu_notSelected {
+  background-color: #294040;
+  border: 1px solid #a6c2e2;
+  color: #a7c5e8;
 }
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
index d51e90e..a0058ea 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -6,7 +6,8 @@ axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // 路由BaseUrl，防止跨域请求
-  baseURL: import.meta.env.VITE_PUBLIC_PATH,
+  // baseURL: import.meta.env.VITE_PUBLIC_PATH,
+  baseURL: 'http://42.193.40.239:8017',
   // 超时时间
   timeout: 20000,
 });
diff --git a/src/views/home-page/left-side/components/basicInformation.vue b/src/views/home-page/left-side/components/basicInformation.vue
index 6698dd4..038c59e 100644
--- a/src/views/home-page/left-side/components/basicInformation.vue
+++ b/src/views/home-page/left-side/components/basicInformation.vue
@@ -1,12 +1,29 @@
-<!-- 晴雨台 -->
+<!-- 基本信息统计 -->
 <template>
   <div class="side-bg">
-    <TitleC title="晴雨台" :swshow="false"></TitleC>
+    <TitleC title="基本信息统计" :swshow="false"></TitleC>
     <div class="con_box conBox">
-      <div>
-        <div></div>
+      <div class="chart-wrapper">
+        <div class="container" ref="populationtenementRef"></div>
+        <div>
+          <div>6980</div>
+          <div></div>
+          <div>人口总数</div>
+        </div>
+        <img src="@/assets/images/home-page/left/inner-ring.png" alt="" />
+      </div>
+      <div class="con_option">
+        <div
+          class="con_option_term"
+          v-for="(item, index) in populationList"
+          :key="index"
+        >
+          <div :style="'background-color:' + item.color"></div>
+          <div>{{ item.lable }}</div>
+          <div></div>
+          <div>{{ item.value }}</div>
+        </div>
       </div>
-      <div></div>
     </div>
   </div>
 </template>
@@ -18,102 +35,84 @@ export default defineComponent({
 });
 </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();
-// });
+import * as echarts from "echarts";
+const populationtenementRef = ref();
+let populationList = ref([
+  { lable: "常驻人口", value: "379", color: "#4CC6C1" },
+  { lable: "党员", value: "022", color: "#05D48A" },
+  { lable: "村干部", value: "147", color: "#E6B900" },
+  { lable: "脱贫户", value: "354", color: "#DE8059" },
+  { lable: "新生儿", value: "379", color: "#D98200" },
+  { lable: "在校生", value: "379", color: "#BF43B2" },
+  { lable: "残疾人", value: "379", color: "#D43C33" },
+  { lable: "低保户", value: "379", color: "#6658E3" },
+  { lable: "五保户", value: "022", color: "#A1CDE6" },
+  { lable: "务工人员", value: "147", color: "#3DABCC" },
+]);
+const option = {
+  tooltip: {
+    trigger: "item",
+  },
+  // legend: {
+  //   top: "5%",
+  //   left: "center",
+  // },
+  series: [
+    {
+      color: [
+        // "#D33B33",
+        // "transparent",
+      ],
+      // name: "Access From",
+      type: "pie",
+      radius: ["75%", "85%"],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 5,
+      },
+      label: {
+        show: false,
+        position: "center",
+      },
+      // emphasis: {
+      //   label: {
+      //     show: true,
+      //     fontSize: 40,
+      //     fontWeight: "bold",
+      //   },
+      // },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        // { value: 1048, name: "" },
+      ],
+    },
+  ],
+};
+const getData = () => {
+  let state = false;
+  for (let index = 0; index < populationList.value.length; index++) {
+    let data = [
+      {
+        value: populationList.value[index].value,
+        name: populationList.value[index].lable,
+      },
+      {
+        value: "10",
+        name: "",
+      },
+    ];
+    let color = [populationList.value[index].color, "transparent"];
+    option.series[0].color.push(...color);
+    option.series[0].data.push(...data);
+  }
+  const airTenementChart = echarts.init(populationtenementRef.value);
+  airTenementChart.setOption(option);
+};
+onMounted(() => {
+  getData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -123,5 +122,94 @@ export default defineComponent({
 .con_box {
   height: 213px;
   margin-top: 5px;
+  display: flex;
+}
+.chart-wrapper {
+  margin-top: 10px;
+  flex: 1;
+  height: 180px;
+  position: relative;
+  .container {
+    flex: 1;
+    width: 170px;
+    margin-top: -10px;
+    height: 200px;
+  }
+  > div:nth-child(2) {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    top: 62px;
+    left: 48px;
+    > div:nth-child(1) {
+      font-size: 20px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 500;
+      color: #d0deee;
+    }
+    > div:nth-child(2) {
+      width: 70px;
+      height: 2px;
+      background-color: #63717b;
+    }
+    > div:nth-child(3) {
+      font-size: 10px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      color: #d0deee;
+    }
+  }
+  > img:nth-of-type(1) {
+    position: absolute;
+    left: 29px;
+    top: 35px;
+    width: 112px;
+    height: 112px;
+  }
+  > img:nth-of-type(2) {
+    position: absolute;
+    left: 2px;
+    top: 7px;
+    width: 165px;
+    height: 165px;
+  }
+}
+.con_option {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 10px 0px;
+}
+.con_option_term {
+  display: flex;
+  align-items: center;
+  height: 27px;
+  width: 45%;
+  > div:nth-child(1) {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    margin-right: 5px;
+  }
+  > div:nth-child(2) {
+    font-size: 14px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    color: #a4a6ab;
+    flex: 1;
+  }
+  > div:nth-child(3) {
+    border-top: 1px #707070 dashed;
+    width: 50px;
+    margin-right: 5px;
+  }
+  > div:nth-child(4) {
+    font-size: 14px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 500;
+    color: #ffc97a;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/home-page/left-side/components/weather.vue b/src/views/home-page/left-side/components/weather.vue
index 3cb0737..1eb9b33 100644
--- a/src/views/home-page/left-side/components/weather.vue
+++ b/src/views/home-page/left-side/components/weather.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="side-bg">
     <div>
-      <TitleC title="晴雨台" :swshow="false"></TitleC>
+      <TitleC title="晴雨台"></TitleC>
       <div class="weather_data">
         <div>
           <TitleD width="100">
@@ -37,7 +37,21 @@
           <TitleD width="100">
             <div class="weather_data_title">未来7天气象数据</div>
           </TitleD>
-          <div class="weather_data_right conBox"></div>
+          <div class="weather_data_right conBox chart-wrapper">
+            <div ref="tenementRef" class="container"></div>
+            <div>
+              <img
+                src="../../../../assets/images/home-page/left/leftArrow.png"
+                alt=""
+              />
+            </div>
+            <div>
+              <img
+                src="../../../../assets/images/home-page/left/rightArrow.png"
+                alt=""
+              />
+            </div>
+          </div>
         </div>
       </div>
       <TitleD width="100">
@@ -51,7 +65,20 @@
           align="center"
           width="120"
         />
-        <el-table-column prop="info" label="预警信息" align="center" />
+        <el-table-column prop="info" label="预警信息" align="center">
+          <template #default="scope">
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              :content="scope.row.info"
+              placement="top-start"
+              popper-class="weather_tip"
+            >
+              <span>{{ scope.row.info }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <!-- show-overflow-tooltip -->
         <el-table-column
           prop="time"
           label="预警时间"
@@ -75,6 +102,7 @@
 </template>
 
 <script lang="ts">
+import * as echarts from "echarts";
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
   name: "weather",
@@ -98,8 +126,114 @@ const tableData = [
     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 = () => {};
+
+const tenementRef = ref();
+let option = {
+  color: ["#66E1DF"],
+  tooltip: {
+    show: false,
+    trigger: "axis",
+    axisPointer: {
+      // 坐标轴指示器，坐标轴触发有效
+      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+    },
+  },
+  grid: {
+    left: "0%",
+    right: "5%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
+      boundaryGap: false,
+      axisTick: {
+        show: false, // 不显示坐标轴刻度线
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        color: "#D0DEEE",
+        fontSize: 12,
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        // 网格线
+        show: true,
+        lineStyle: {
+          //分割线
+          color: "#99999955",
+          width: 1,
+          type: "dashed", //dotted：虚线 solid:实线
+        },
+      },
+      axisLabel: {
+        formatter: "{value} °C",
+      },
+    },
+  ],
+  series: [
+    {
+      name: "",
+      type: "line",
+      smooth: true,
+      symbol: "none", // 不显示连接点
+      tooltip: {
+        trigger: "axis",
+      },
+      lineStyle: {
+        width: 2,
+        shadowColor: "#165DFF",
+        shadowBlur: 20,
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#0F476B",
+            },
+            {
+              offset: 1,
+              color: "#002A56",
+            },
+          ],
+        },
+      },
+      data: [2, 4, 9, 12, 15, 48, 2],
+    },
+  ],
+};
+const getData = () => {
+  const airTenementChart = echarts.init(tenementRef.value);
+  airTenementChart.setOption(option);
+};
+onMounted(() => {
+  getData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -168,7 +302,26 @@ const clickDetails = () => {};
 }
 .weather_data_right {
   width: 100%;
-  height: 120px;
+  > div:nth-child(2) {
+    margin-top: -17px;
+    margin-left: 28px;
+    text-align: left;
+    cursor: pointer;
+    img {
+      width: 15px;
+      height: 15px;
+    }
+  }
+  > div:nth-child(3) {
+    margin-top: -23px;
+    text-align: right;
+    margin-right: 10px;
+    cursor: pointer;
+    img {
+      width: 15px;
+      height: 15px;
+    }
+  }
 }
 .time {
   font-size: 12px;
@@ -176,4 +329,20 @@ const clickDetails = () => {};
   font-weight: 400;
   color: #159aff;
 }
+.chart-wrapper {
+  height: 120px;
+  position: relative;
+  overflow: hidden;
+  .container {
+    width: 86%;
+    height: 160px;
+    margin-top: -45px;
+    margin-left: 20px;
+  }
+}
+</style>
+<style>
+.weather_tip {
+  max-width: 200px !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/home-page/left-side/components/workSituation.vue b/src/views/home-page/left-side/components/workSituation.vue
new file mode 100644
index 0000000..e4236ec
--- /dev/null
+++ b/src/views/home-page/left-side/components/workSituation.vue
@@ -0,0 +1,149 @@
+<!-- 工作开展情况 -->
+<template>
+  <div class="side-bg">
+    <TitleC title="工作开展情况"></TitleC>
+    <TitleD width="100">
+      <!-- <div class="work_title">气象预警信息</div> -->
+      <div
+        class="module_top_title"
+        v-for="(item, index) in label"
+        :key="index"
+        @click="clickMenuOption(item.id)"
+        :class="
+          item.check == true
+            ? 'module_menu_selected'
+            : 'module_menu_notSelected'
+        "
+      >
+        {{ item.title }}
+      </div>
+    </TitleD>
+    <div class="work_con conBox">
+      <div v-for="(item, index) in data" :key="index">
+        <div>{{ item.index }}</div>
+        <img
+          src="../../../../assets/images/home-page/left/barometer.png"
+          alt=""
+        />
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="item.con"
+          placement="top-start"
+          popper-class="work_tip"
+        >
+          <div>{{ item.con }}</div>
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "WorkSituation",
+});
+</script>
+<script setup lang='ts'>
+const visible = ref(false);
+const label = ref([
+  { title: "党建统领", check: true, id: 0 },
+  { title: "平安法治", check: false, id: 1 },
+  { title: "经济生态", check: false, id: 2 },
+  { title: "公共服务", check: false, id: 3 },
+]);
+const data = [
+  {
+    index: 1,
+    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
+  },
+  {
+    index: 2,
+    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
+  },
+  {
+    index: 3,
+    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
+  },
+  {
+    index: 4,
+    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
+  },
+];
+const clickMenuOption = (id: any) => {
+  label.value.forEach((item) => {
+    item.check = false;
+  });
+  label.value[id].check = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.side-bg {
+  // height: 45%;
+}
+.work_title {
+  font-size: 16px;
+  font-family: Source Han Sans SC, Source Han Sans SC;
+  font-weight: 400;
+  color: #ffe7cd;
+}
+.work_con {
+  width: 100%;
+  height: 244px;
+  padding: 12px 8px;
+  overflow-y: scroll;
+  > div:not(:nth-child(1)) {
+    // margin-top: ;
+  }
+  > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 68px;
+    padding: 10px 13px;
+    > div:nth-of-type(1) {
+      width: 24px;
+      height: 16px;
+      box-sizing: border-box;
+      border: 1px solid #ff7734;
+      background-color: #ff7734 10%;
+      line-height: 14px;
+      text-align: center;
+      font-size: 12px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      color: #ff7734;
+    }
+    > img {
+      width: 70px;
+      height: 48px;
+    }
+    > div:nth-of-type(2) {
+      width: 408px;
+      height: 48px;
+      font-size: 12px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      color: #d0deee;
+      //超出两行省略号
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+.work_con::-webkit-scrollbar {
+  display: none;
+}
+</style>
+<style>
+.work_tip {
+  max-width: 408px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home-page/left-side/dialog/risk-pool.vue b/src/views/home-page/left-side/dialog/risk-pool.vue
deleted file mode 100644
index 055e2da..0000000
--- a/src/views/home-page/left-side/dialog/risk-pool.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--  -->
-
-
-<template>
-  <el-dialog
-    class="dialog"
-    width="40%"
-    v-model="dialogVisible"
-    :title="'发布预警'"
-    center
-    close-on-click-modal="false"
-    :show-close="false"
-    @close="emit('close')"
-  >
-    <div class="dialog_body">
-      <el-form label-width="150px" :model="form" class="center-form">
-        <el-form-item label="预警内容" style="width: 94%">
-          <el-input v-model="form.name" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="人员" style="width: 94%">
-          <el-select v-model="form.region" placeholder="请选择人员">
-            <el-option label="某某人1" value="shanghai" />
-            <el-option label="某某人2" value="beijing" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="close"> 确定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang='ts'>
-import { reactive, ref, watch } from "vue";
-const props = defineProps({
-  visible: Boolean,
-});
-const dialogVisible = ref(false);
-const emit = defineEmits(["close"]);
-const close = () => {
-  emit("close");
-};
-
-const dialogTableVisible = ref(false);
-const dialogFormVisible = ref(false);
-const formLabelWidth = "140px";
-
-const form = reactive({
-  con: "",
-});
-
-const gridData = [
-  {
-    date: "2016-05-02",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-04",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-01",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-03",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-];
-
-watch(
-  () => props.visible,
-  (val) => {
-    dialogVisible.value = val;
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.el-button--text {
-  margin-right: 15px;
-}
-log-footer button:first-child {
-  margin-right: 10px;
-}
-
-.dialog-footer button {
-  margin-bottom: 20px;
-}
-.dia log {
-  z-index: 9;
-  position: fixed;
-}
-
-.dialog_body {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 50px;
-  margin-top: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/home-page/left-side/index.vue b/src/views/home-page/left-side/index.vue
index 9087e81..b70797d 100644
--- a/src/views/home-page/left-side/index.vue
+++ b/src/views/home-page/left-side/index.vue
@@ -4,13 +4,15 @@
     <Weather></Weather>
     <!-- 基本信息统计 -->
     <BasicInformation></BasicInformation>
+    <!-- 工作开展情况 -->
+    <WorkSituation></WorkSituation>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Weather, BasicInformation },
+  components: { Weather, BasicInformation, WorkSituation },
   name: "LeftSide",
 });
 </script>
@@ -18,6 +20,7 @@ export default defineComponent({
 <script lang='ts' setup>
 import BasicInformation from "./components/basicInformation.vue";
 import Weather from "./components/weather.vue";
+import WorkSituation from "./components/workSituation.vue";
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home-page/right-side/components/command.vue b/src/views/home-page/right-side/components/command.vue
new file mode 100644
index 0000000..5892e1d
--- /dev/null
+++ b/src/views/home-page/right-side/components/command.vue
@@ -0,0 +1,188 @@
+<!-- 应急指挥 -->
+<template>
+  <div class="side-bg">
+    <TitleC title="应急指挥"></TitleC>
+    <TitleD width="100">
+      <div
+        class="module_top_title"
+        v-for="(item, index) in label"
+        :key="index"
+        @click="clickMenuOption(item.id)"
+        :class="
+          item.check == true
+            ? 'module_menu_selected'
+            : 'module_menu_notSelected'
+        "
+      >
+        {{ item.title }}
+      </div>
+    </TitleD>
+    <div class="command_data conBox">
+      <div class="command_search">
+        <div>
+          <el-input
+            size="small"
+            v-model="commandSearch"
+            placeholder="请输入..."
+            clearable
+          />
+        </div>
+        <span>搜索</span>
+      </div>
+      <el-table :data="tableData" height="150" style="width: 100%">
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column
+          prop="address"
+          label="所属镇/村(社区)"
+          align="center"
+        />
+        <el-table-column
+          prop="numberOfPeople"
+          label="应急队伍人数"
+          align="center"
+          width="110"
+        />
+        <el-table-column
+          prop="contacts"
+          label="联系人"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="phone"
+          label="值班电话"
+          align="center"
+          width="110"
+        />
+        <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>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "WorkSituation",
+});
+</script>
+<script setup lang='ts'>
+const label = ref([
+  { title: "应急队伍", check: true, id: 0 },
+  { title: "应急物资", check: false, id: 1 },
+  { title: "应急体系", check: false, id: 2 },
+  { title: "应急发布", check: false, id: 3 },
+  { title: "应急事件", check: false, id: 4 },
+]);
+const clickMenuOption = (id: any) => {
+  label.value.forEach((item) => {
+    item.check = false;
+  });
+  label.value[id].check = true;
+};
+const tableData = [
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+  {
+    address: "某某某某某某某名称",
+    numberOfPeople: 20,
+    contacts: "某某某",
+    phone: "18094760684",
+  },
+];
+const commandSearch = ref("");
+const clickDetails = () => {};
+</script>
+
+<style lang="scss" scoped>
+.time {
+  font-size: 12px;
+  font-family: Source Han Sans SC, Source Han Sans SC;
+  font-weight: 400;
+  color: #159aff;
+}
+// ::v-deep .el-table .cell {
+//   -webkit-line-clamp: 2;
+// }
+.command_data {
+  height: 195px;
+  background-color: rgba(0, 61, 123, 0) !important;
+}
+.command_search {
+  display: flex;
+  align-items: center;
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  padding: 10px 0px;
+  > div {
+    width: 258px;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin-left: 25px;
+  }
+  > span {
+    width: 64px;
+    height: 25px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px 3px 3px 3px;
+    opacity: 1;
+    border: 1px solid #66e1df;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 500;
+    color: #66e1df;
+    text-align: center;
+    box-sizing: border-box;
+    line-height: 23px;
+    margin-left: 2px;
+  }
+}
+::v-deep .el-input--small .el-input__wrapper {
+  box-shadow: none;
+  border: 1px solid rgba(108, 128, 151, 1) !important;
+}
+</style>
+<style>
+.command_tip {
+  max-width: 200px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/components/goods-materials.vue b/src/views/home-page/right-side/components/goods-materials.vue
deleted file mode 100644
index 012a496..0000000
--- a/src/views/home-page/right-side/components/goods-materials.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<!-- 应急物资 -->
-<template>
-  <div class="side-bg">
-    <div><TitleC title="应急物资"></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="date" label="物资类型" align="center" />
-          <el-table-column prop="house" label="存放仓库" align="center" />
-          <el-table-column
-            prop="name"
-            label="负责人"
-            align="center"
-            width="80"
-          />
-          <el-table-column
-            prop="address"
-            label="查看"
-            align="center"
-            width="80"
-          >
-            <template #default="scope">
-              <span @click="visible = true">
-                <span class="pointer details">详情</span>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="currentPage"
-          v-model:page-size="pageSize"
-          layout="total, prev, pager, next"
-          :total="total"
-        />
-      </div>
-    </div>
-    <Detail :visible="visible" @click="visible = false" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
-export default defineComponent({
-  name: "goods-materials",
-});
-</script>
-
-<script lang='ts' setup>
-import Detail from "../dialog/material.vue";
-const visible = ref(false);
-
-const tableData = [
-  {
-    date: "应急物资",
-    name: "某某人",
-    house: "xxx仓库",
-    address: "999999999999999999",
-  },
-  {
-    date: "应急物资",
-    name: "某某人",
-    house: "xxx仓库",
-    address: "11111111111",
-  },
-  {
-    date: "应急物资",
-    name: "某某人",
-    house: "xxx仓库",
-    address: "11111111111",
-  },
-  {
-    date: "应急物资",
-    name: "某某人",
-    house: "xxx仓库",
-    address: "11111111111",
-  },
-  {
-    date: "应急物资",
-    name: "某某人",
-    house: "xxx仓库",
-    address: "11111111111",
-  },
-];
-
-const currentPage = ref(1);
-const pageSize = ref(5);
-const total = ref(10);
-const search = ref("");
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 36%;
-}
-.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>
diff --git a/src/views/home-page/right-side/components/portrait.vue b/src/views/home-page/right-side/components/portrait.vue
new file mode 100644
index 0000000..24c486e
--- /dev/null
+++ b/src/views/home-page/right-side/components/portrait.vue
@@ -0,0 +1,134 @@
+<!-- 工作考核 -->
+<template>
+  <div class="side-bg">
+    <TitleC title="工作考核"></TitleC>
+    <TitleD width="100">
+      <div
+        class="module_top_title"
+        v-for="(item, index) in label"
+        :key="index"
+        @click="clickMenuOption(item.id)"
+        :class="
+          item.check == true
+            ? 'module_menu_selected'
+            : 'module_menu_notSelected'
+        "
+      >
+        {{ item.title }}
+      </div>
+    </TitleD>
+    <div class="portrait_con conBox">
+      <div
+        class="portrait_con_options"
+        v-for="(item, index) in portraitList"
+        :key="index"
+      >
+        <div>
+          <div>
+            <span>{{ index + 1 }}</span>
+            <span>{{ item.label }}</span>
+          </div>
+          <div>{{ item.value }}/50</div>
+        </div>
+        <div><el-slider disabled v-model="item.value" max="50" /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "WorkSituation",
+});
+</script>
+<script setup lang='ts'>
+const label = ref([
+  { title: "各干部", check: true, id: 0 },
+  { title: "村(社区)", check: false, id: 1 },
+]);
+const clickMenuOption = (id: any) => {
+  label.value.forEach((item) => {
+    item.check = false;
+  });
+  label.value[id].check = true;
+};
+const portraitList = ref([
+  { label: "某某人-职位", value: 48 },
+  { label: "某某人-职位", value: 40 },
+  { label: "某某人-职位", value: 38 },
+  { label: "某某人-职位", value: 18 },
+  { label: "某某人-职位", value: 48 },
+]);
+</script>
+
+<style lang="scss" scoped>
+.portrait_con {
+  width: 100%;
+  height: 214px;
+  padding: 10px 21px;
+  overflow-y: scroll;
+}
+.portrait_con::-webkit-scrollbar {
+  display: none;
+}
+.portrait_con_options {
+  margin-top: 2px;
+  > div:nth-child(1) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    > div:nth-child(1) {
+      > span:nth-child(1) {
+        display: inline-block;
+        width: 24px;
+        height: 16px;
+        border: 1px solid #ff7734;
+        line-height: 14px;
+        text-align: center;
+        background-color: rgba(255, 119, 52, 0.3);
+        font-size: 12px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        color: #ff7734;
+      }
+      > span:nth-child(2) {
+        font-size: 14px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-left: 9px;
+      }
+    }
+    > div:nth-child(2) {
+      font-size: 14px;
+      font-family: Furore, Furore;
+      font-weight: normal;
+      color: #ffffff;
+    }
+  }
+  > div:nth-child(2) {
+    margin-top: -5px;
+  }
+}
+::v-deep .el-slider__bar {
+  background: linear-gradient(270deg, #00c7e6 0%, #0088ff 100%);
+  height: 6px;
+  margin: 2px 0px;
+  border-radius: 0%;
+}
+::v-deep .el-slider__button {
+  margin-top: 4px;
+  border-radius: 3px;
+  width: 2px;
+  height: 10px;
+  border: 0px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+::v-deep .el-slider__runway {
+  border-radius: 0%;
+  height: 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/components/ranks.vue b/src/views/home-page/right-side/components/ranks.vue
deleted file mode 100644
index 3ba4e8c..0000000
--- a/src/views/home-page/right-side/components/ranks.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<!-- 应急队伍 -->
-<template>
-  <div class="side-bg">
-    <div><TitleC title="应急队伍"></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="name"
-            label="负责人"
-            align="center"
-            width="80"
-          />
-          <el-table-column
-            prop="num"
-            label="队伍人数"
-            align="center"
-            width="130"
-          />
-          <el-table-column
-            prop="address"
-            label="查看"
-            align="center"
-            width="80"
-          >
-            <template #default="scope">
-              <span @click="visible = true">
-                <span class="pointer details">详情</span>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="currentPage"
-          v-model:page-size="pageSize"
-          layout="total, prev, pager, next"
-          :total="total"
-        />
-      </div>
-    </div>
-    <Detail :visible="visible" @click="visible = false" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
-export default defineComponent({
-  name: "ranks",
-});
-</script>
-
-<script lang='ts' setup>
-import Detail from "../dialog/team.vue";
-const visible = ref(false);
-
-const tableData = [
-  {
-    date: "应急队伍",
-    name: "某某人",
-    num: 10,
-    address: "99999999999",
-  },
-  {
-    date: "应急队伍",
-    name: "某某人",
-    num: 10,
-    address: "11111111111",
-  },
-  {
-    date: "应急队伍",
-    name: "某某人",
-    num: 10,
-    address: "11111111111",
-  },
-  {
-    date: "应急队伍",
-    name: "某某人",
-    num: 10,
-    address: "11111111111",
-  },
-  {
-    date: "应急队伍",
-    name: "某某人",
-    num: 10,
-    address: "11111111111",
-  },
-];
-
-const currentPage = ref(1);
-const pageSize = ref(5);
-const total = ref(10);
-const search = ref("");
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 36%;
-}
-.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;
-  }
-}
-.inputDeep {
-  :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
-      inset;
-    cursor: default;
-    border: 1px solid rgba(0, 0, 255, 0) !important;
-
-    .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>
diff --git a/src/views/home-page/right-side/components/release.vue b/src/views/home-page/right-side/components/release.vue
deleted file mode 100644
index 91533fb..0000000
--- a/src/views/home-page/right-side/components/release.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<!-- 应急发布 -->
-<template>
-  <div class="side-bg">
-    <div><TitleC title="应急发布"></TitleC></div>
-
-    <div class="release_body">
-      <div class="release_table">
-        <el-table
-          :data="tableData"
-          max-height="32vh"
-          style="width: 100%"
-          show-overflow-tooltip
-        >
-          <el-table-column prop="name" label="事件名" align="center" />
-          <el-table-column prop="status" label="状态" align="center" />
-          <el-table-column prop="address" label="发生地" align="center" />
-          <el-table-column
-            prop="address"
-            label="操作"
-            align="center"
-            width="100"
-          >
-            <template #default="scope">
-              <span @click="visible = true">
-                <span class="pointer details">应急发布</span>
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          background
-          small
-          v-model:currentPage="currentPage"
-          v-model:page-size="pageSize"
-          layout="total, prev, pager, next"
-          :total="total"
-        />
-      </div>
-    </div>
-    <Detail :visible="visible" @close="visible = false"></Detail>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
-export default defineComponent({
-  name: "release",
-});
-</script>
-
-<script lang='ts' setup>
-import Detail from "../dialog/events.vue";
-const visible = ref(false);
-
-const tableData = [
-  {
-    name: "事件",
-    status: "已处理",
-    address: "99999999999",
-  },
-  {
-    name: "事件",
-    status: "已处理",
-    address: "11111111111",
-  },
-  {
-    name: "事件",
-    status: "已处理",
-    address: "11111111111",
-  },
-  {
-    name: "事件",
-    status: "已处理",
-    address: "11111111111",
-  },
-  {
-    name: "事件",
-    status: "已处理",
-    address: "11111111111",
-  },
-];
-
-const currentPage = ref(1);
-const pageSize = ref(5);
-const total = ref(10);
-const search = ref("");
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 36%;
-  position: relative;
-}
-.release_body {
-  padding: 10px;
-}
-.release_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;
-  }
-}
-.release_body_top_icon_left {
-  background-image: url("@/assets/images/emergency-map/left/cm_left_bg_1.png");
-}
-.release_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;
-}
-.release_table {
-}
-.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;
-  }
-}
-.inputDeep {
-  :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
-      inset;
-    cursor: default;
-    border: 1px solid rgba(0, 0, 255, 0) !important;
-
-    .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;
-  }
-}
-.release_buttom {
-  cursor: pointer;
-  color: red;
-  font-weight: bold;
-  font-size: 20px;
-  border: 1px solid red;
-  width: 60px;
-  text-align: center;
-  position: absolute;
-  top: 10px;
-  right: 30px;
-}
-</style>
diff --git a/src/views/home-page/right-side/components/riskPool.vue b/src/views/home-page/right-side/components/riskPool.vue
new file mode 100644
index 0000000..79fc78c
--- /dev/null
+++ b/src/views/home-page/right-side/components/riskPool.vue
@@ -0,0 +1,121 @@
+<!-- 风险池 -->
+<template>
+  <div class="side-bg">
+    <TitleC title="风险池"></TitleC>
+    <TitleD width="100">
+      <div
+        class="module_top_title"
+        v-for="(item, index) in label"
+        :key="index"
+        @click="clickMenuOption(item.id)"
+        :class="
+          item.check == true
+            ? 'module_menu_selected'
+            : 'module_menu_notSelected'
+        "
+      >
+        {{ item.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="80" />
+      <el-table-column prop="info" label="预警信息" align="center">
+        <template #default="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="scope.row.info"
+            placement="top-start"
+            popper-class="riskPool_tip"
+          >
+            <span>{{ scope.row.info }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <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
+        prop="recipient"
+        label="接收人"
+        align="center"
+        width="70"
+      >
+        <template #default="scope">
+          <span class="time">{{ scope.row.recipient }}</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>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "WorkSituation",
+});
+</script>
+<script setup lang='ts'>
+const label = ref([
+  { title: "防火", check: true, id: 0 },
+  { title: "防汛", check: false, id: 1 },
+  { title: "治安", check: false, id: 2 },
+]);
+const clickMenuOption = (id: any) => {
+  label.value.forEach((item) => {
+    item.check = false;
+  });
+  label.value[id].check = true;
+};
+const tableData = [
+  {
+    type: "防火",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+    recipient: "某某某",
+  },
+  {
+    type: "防火",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+    recipient: "某某某",
+  },
+  {
+    type: "防火",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+    recipient: "某某某",
+  },
+  {
+    type: "防火",
+    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
+    time: "2024/1/22 12:20:13",
+    recipient: "某某某",
+  },
+];
+const clickDetails = () => {};
+</script>
+
+<style lang="scss" scoped>
+.time {
+  font-size: 12px;
+  font-family: Source Han Sans SC, Source Han Sans SC;
+  font-weight: 400;
+  color: #159aff;
+}
+</style>
+<style>
+.riskPool_tip {
+  max-width: 200px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/components/system.vue b/src/views/home-page/right-side/components/system.vue
deleted file mode 100644
index b0bbe92..0000000
--- a/src/views/home-page/right-side/components/system.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<!-- 应急体系 -->
-<template>
-  <div class="side-bg">
-    <div><TitleC title="应急体系"></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="address"
-            label="查看"
-            align="center"
-            width="80"
-          >
-            <template #default="scope">
-              <span @click="toDetail">
-                <span class="pointer details">详情</span>
-              </span>
-            </template>
-          </el-table-column>
-        </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: "system",
-});
-</script>
-
-<script lang='ts' setup>
-const tableData = [
-  {
-    date: "预案名",
-    name: "某某人",
-    address: "99999999999",
-  },
-  {
-    date: "预案名",
-    name: "某某人",
-    address: "11111111111",
-  },
-  {
-    date: "预案名",
-    name: "某某人",
-    address: "11111111111",
-  },
-  {
-    date: "预案名",
-    name: "某某人",
-    address: "11111111111",
-  },
-  {
-    date: "预案名",
-    name: "某某人",
-    address: "11111111111",
-  },
-];
-
-const currentPage = ref(1);
-const pageSize = ref(5);
-const total = ref(10);
-const search = ref("");
-
-const toDetail = () => {
-  window.open(
-    "http://42.193.40.239:8888/resource/hy/%E6%B6%88%E9%98%B2%E5%BA%94%E6%80%A5%E9%A2%84%E6%A1%88.pdf"
-  );
-};
-</script>
-
-<style lang="scss" scoped>
-.side-bg {
-  height: 36%;
-}
-.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>
diff --git a/src/views/home-page/right-side/dialog/events.vue b/src/views/home-page/right-side/dialog/events.vue
deleted file mode 100644
index 9e40bfb..0000000
--- a/src/views/home-page/right-side/dialog/events.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<!--  -->
-<template>
-  <el-dialog
-    class="dialog"
-    width="40%"
-    v-model="dialogVisible"
-    title="应急发布"
-    center
-    :show-close="false"
-    @close="emit('close')"
-  >
-    <div class="dialog_body">
-      <el-form label-width="150px" :model="form" class="center-form">
-        <el-form-item label="事件内容" style="width: 94%">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="发生地点" style="width: 94%">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="责任人" style="width: 94%">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="解决建议" style="width: 94%">
-          <el-input v-model="form.name" />
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="close"> 确定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang='ts'>
-import { reactive, ref, watch } from "vue";
-const props = defineProps({
-  visible: Boolean,
-});
-const dialogVisible = ref(false);
-const emit = defineEmits(["close"]);
-const close = () => {
-  emit("close");
-};
-
-const dialogTableVisible = ref(false);
-const dialogFormVisible = ref(false);
-const formLabelWidth = "140px";
-
-const form = reactive({
-  con: "",
-});
-
-const gridData = [
-  {
-    date: "2016-05-02",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-04",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-01",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-03",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-];
-
-const tableData = [{ name: "张三" }];
-
-watch(
-  () => props.visible,
-  (val) => {
-    dialogVisible.value = val;
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.title-t {
-  font-size: 20px;
-  color: white;
-  margin-left: 10px;
-}
-
-.el-button--text {
-  margin-right: 15px;
-}
-log-footer button:first-child {
-  margin-right: 10px;
-}
-
-.dialog-footer button {
-  margin-bottom: 20px;
-}
-.dia log {
-  z-index: 9;
-  position: fixed;
-}
-
-.dialog_body {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 50px;
-  margin-top: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/dialog/material.vue b/src/views/home-page/right-side/dialog/material.vue
deleted file mode 100644
index 3c61d65..0000000
--- a/src/views/home-page/right-side/dialog/material.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--  -->
-<template>
-  <el-dialog
-    class="dialog"
-    width="40%"
-    v-model="dialogVisible"
-    :title="'物资详情'"
-    center
-    :show-close="false"
-    @close="emit('close')"
-  >
-    <div class="dialog_body">
-      <el-form label-width="150px" :model="form" class="center-form">
-        <el-form-item label="物资名称">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="存放仓库">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="物资类型">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="负责人">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="联系电话">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="详细地址">
-          <el-input v-model="form.name" />
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="close"> 确定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang='ts'>
-import { reactive, ref, watch } from "vue";
-const props = defineProps({
-  visible: Boolean,
-});
-const dialogVisible = ref(false);
-const emit = defineEmits(["close"]);
-const close = () => {
-  emit("close");
-};
-
-const dialogTableVisible = ref(false);
-const dialogFormVisible = ref(false);
-const formLabelWidth = "140px";
-
-const form = reactive({
-  con: "",
-});
-
-const gridData = [
-  {
-    date: "2016-05-02",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-04",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-01",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-03",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-];
-
-const tableData = [{ name: "张三" }];
-
-watch(
-  () => props.visible,
-  (val) => {
-    dialogVisible.value = val;
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.title-t {
-  font-size: 20px;
-  color: white;
-  margin-left: 10px;
-}
-
-.el-button--text {
-  margin-right: 15px;
-}
-log-footer button:first-child {
-  margin-right: 10px;
-}
-
-.dialog-footer button {
-  margin-bottom: 20px;
-}
-.dia log {
-  z-index: 9;
-  position: fixed;
-}
-
-.dialog_body {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 50px;
-  margin-top: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/dialog/team.vue b/src/views/home-page/right-side/dialog/team.vue
deleted file mode 100644
index 129a8e2..0000000
--- a/src/views/home-page/right-side/dialog/team.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<!--  -->
-<template>
-  <el-dialog
-    class="dialog"
-    width="40%"
-    v-model="dialogVisible"
-    :title="'队伍详情'"
-    center
-    :show-close="false"
-    @close="emit('close')"
-  >
-    <div class="dialog_body">
-      <el-form label-width="150px" :model="form" class="center-form">
-        <el-form-item label="队伍名称">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="所属地区">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="人数">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="负责人">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="联系电话">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="联系电话">
-          <el-input v-model="form.name" />
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <span class="title-t">队伍成员</span>
-    <el-table
-      :data="tableData"
-      max-height="32vh"
-      style="width: 100%; margin: 10px 0"
-      show-overflow-tooltip
-    >
-      <el-table-column prop="name" label="姓名" align="center" />
-      <el-table-column prop="sex" label="性别" align="center" />
-      <el-table-column prop="mz" label="民族" align="center" width="80" />
-      <el-table-column prop="age" label="年龄" align="center" />
-      <el-table-column prop="mm" 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"
-    />
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="close"> 确定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang='ts'>
-import { reactive, ref, watch } from "vue";
-const props = defineProps({
-  visible: Boolean,
-});
-const dialogVisible = ref(false);
-const emit = defineEmits(["close"]);
-const close = () => {
-  emit("close");
-};
-
-const dialogTableVisible = ref(false);
-const dialogFormVisible = ref(false);
-const formLabelWidth = "140px";
-
-const form = reactive({
-  con: "",
-});
-
-const gridData = [
-  {
-    date: "2016-05-02",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-04",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-01",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-  {
-    date: "2016-05-03",
-    name: "John Smith",
-    address: "No.1518,  Jinshajiang Road, Putuo District",
-  },
-];
-
-const tableData = [{ name: "张三" }];
-
-watch(
-  () => props.visible,
-  (val) => {
-    dialogVisible.value = val;
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.title-t {
-  font-size: 20px;
-  color: white;
-  margin-left: 10px;
-}
-
-.el-button--text {
-  margin-right: 15px;
-}
-log-footer button:first-child {
-  margin-right: 10px;
-}
-
-.dialog-footer button {
-  margin-bottom: 20px;
-}
-.dia log {
-  z-index: 9;
-  position: fixed;
-}
-
-.dialog_body {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 50px;
-  margin-top: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/home-page/right-side/index.vue b/src/views/home-page/right-side/index.vue
index 08dce26..5a9fb99 100644
--- a/src/views/home-page/right-side/index.vue
+++ b/src/views/home-page/right-side/index.vue
@@ -1,26 +1,23 @@
 <template>
   <div class="right-side">
-    <!-- 应急队伍 -->
-    <Ranks></Ranks>
-    <!-- 应急物资 -->
-    <GoodsMaterials></GoodsMaterials>
-    <!-- 应急体系 -->
-    <System></System>
-    <!-- 应急发布 -->
-    <Release></Release>
+    <!-- 工作考核 -->
+    <Portrait></Portrait>
+    <!-- 风险池 -->
+    <RiskPool></RiskPool>
+    <!-- 应急指挥 -->
+    <Command></Command>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Ranks, GoodsMaterials, System, Release },
+  components: { Portrait, RiskPool, Command },
   name: "RightSide",
 });
-import Ranks from "./components/ranks.vue";
-import GoodsMaterials from "./components/goods-materials.vue";
-import System from "./components/system.vue";
-import Release from "./components/release.vue";
+import Portrait from "./components/portrait.vue";
+import RiskPool from "./components/riskPool.vue";
+import Command from "./components/command.vue";
 </script>
 
 <script lang='ts' setup>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 4012eed..3cc21ef 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -11,7 +11,7 @@
       <component :is="rightComponent" />
     </transition>
     <!-- 底部菜单 -->
-    <BottomMenu></BottomMenu>
+    <!-- <BottomMenu></BottomMenu> -->
     <!-- 顶部菜单 -->
     <transition name="fade" mode="out-in">
       <component :is="topComponent" />
@@ -30,7 +30,7 @@ import DataLeftSide from "../data-statistics/left-side/index.vue";
 import HomeRightSide from "../home-page/right-side/index.vue";
 import HomeLeftSide from "../home-page/left-side/index.vue";
 // 底部菜单
-import BottomMenu from "../bottom-menu/index.vue";
+// import BottomMenu from "../bottom-menu/index.vue";
 // 顶部菜单
 import TopMenu from "../top-menu/index.vue";
 
diff --git a/src/views/top-menu/index.vue b/src/views/top-menu/index.vue
index f66d805..b86dd08 100644
--- a/src/views/top-menu/index.vue
+++ b/src/views/top-menu/index.vue
@@ -1,39 +1,59 @@
 <template>
   <div class="top-menu">
-    <!-- <div class="item" v-for="(item, index) in menu" :key="index">
-      <div class="item-ext" v-if="item.ext">
-        <div class="item-in">
-          <span class="lab">{{ item.name }}</span>
-          <span class="val">{{ item.val }}</span>
-        </div>
-        <div class="item-in">
-          <span class="lab">{{ item.ext.name }}</span>
-          <span class="legend"></span>
-        </div>
+    <div class="time">
+      <div>{{ datetime }}</div>
+      <div>
+        <span>{{ specificDate }}</span>
+        <span>{{ nowWeek }}</span>
       </div>
-      <div class="item-normal" v-else>
-        <span class="val">{{ item.val }}</span>
-        <span class="lab">{{ item.name }}</span>
-      </div>
-    </div> -->
+    </div>
+    <div class="weather">
+      <img src="@/assets/images/home-page/left/lightRain.png" alt="" />
+      <span>雨 15℃</span>
+    </div>
   </div>
 </template>
 
 <script setup lang='ts'>
 import { onMounted, ref } from "vue";
-
-const menu = ref([
-  {
-    name: "天府新区街道总数：",
-    val: 13,
-    color: "#FF5B36",
-    ext: { name: "总体风险等级：", val: 0 },
-  },
-  { name: "天府新区社区总数", val: 13, color: "#FF5B36" },
-  { name: "监管企业总数", val: 7334, color: "#FF9131" },
-]);
-
-onMounted(() => {});
+//时间
+const datetime = ref("");
+//日期
+const specificDate = ref("");
+//星期
+const nowWeek = ref("");
+//获取时间：时分秒
+const getData = () => {
+  let date = new Date();
+  // 获取时间：时分秒
+  const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  const minute =
+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  const secound =
+    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+  datetime.value = hour + ":" + minute + ":" + secound;
+  // 获取日期：年月日
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  specificDate.value = year + "-" + month + "-" + day;
+  // 获取星期几
+  const weeks = new Array(
+    "星期日",
+    "星期一",
+    "星期二",
+    "星期三",
+    "星期四",
+    "星期五",
+    "星期六"
+  );
+  nowWeek.value = weeks[new Date().getDay()];
+};
+onMounted(() => {
+  setInterval(() => {
+    getData();
+  }, 1000);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -45,63 +65,41 @@ onMounted(() => {});
   margin: 0 1%;
   display: flex;
   flex-direction: row;
-  justify-content: center;
-
-  .item {
-    font-size: 18px;
-    color: #acc0d8;
-    padding: 10px 20px;
-    min-width: 223px;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    background-image: url("@/assets/images/menu/menu-top-bg.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    margin: 2%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .val {
-      font-size: 20px;
-      font-family: YouSheBiaoTiHei;
-      color: #ff9131;
-    }
-
-    .lab {
-      font-size: 14px;
-      color: #acc0d8;
-    }
-
-    .item-normal {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .item-ext {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .item-in {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .legend {
-          width: 15px;
-          height: 15px;
-          background: #2281e3;
-          border-radius: 1px;
-        }
-      }
-
-      .item-in span:last-child {
-        margin-left: 10px;
-      }
+  justify-content: end;
+  color: #ffffff;
+}
+.time {
+  font-size: 12px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  > div:nth-child(1) {
+    text-align: right;
+  }
+  > div:nth-child(2) {
+    > span:nth-child(2) {
+      margin-left: 5px;
     }
   }
 }
+.weather {
+  margin-left: 15px;
+  width: 112px;
+  height: 33px;
+  border: 1px solid #159aff;
+  border-radius: 16.5px;
+  margin-right: 10px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > span {
+    margin-left: 10px;
+  }
+  > img {
+    margin-top: -10px;
+    width: 23px;
+    height: 23px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/top-menu/top-option.vue b/src/views/top-menu/top-option.vue
index 400dfb2..c167a51 100644
--- a/src/views/top-menu/top-option.vue
+++ b/src/views/top-menu/top-option.vue
@@ -81,6 +81,7 @@ export default defineComponent({
 </script>
 <script setup lang='ts'>
 import { menuStore } from "@/store/menu";
+const userMenu = menuStore();
 const label = ref([
   { title: "大屏首页", check: true, id: 0 },
   { title: "大数据分析", check: false, id: 1 },
@@ -90,6 +91,7 @@ const clickMenuOption = (id: any) => {
     item.check = false;
   });
   label.value[id].check = true;
+  userMenu.setMenuType(id);
 };
 // import { ClickOutside as vClickOutside } from "element-plus";
 // const buttonRef = ref();