20240619

.env.development

@@ -10,5 +10,11 @@ VITE_OPEN = false
 # public path
 VITE_PUBLIC_PATH = /
 
+# VITE_SCREEN = /api
+VITE_SCREEN = /prod-api
+# 访问服务器文件地址
+VITE_UPLOAD_IMG_URL = /dev-img-api
 # Cross-domain proxy, you can configure multiple
-VITE_PROXY = [ ["/api", "http://127.0.0.1:3000" ] ]
+VITE_PROXY = [ ["/prod-api", "http://192.168.110.10:8017" ],["/dev-img-api", "http://42.193.40.239:8017" ] ]
+VITE_UPLOAD_URL = http://42.193.40.239:8888/
+# VITE_PROXY = [ ["/prod-api", "http://42.193.40.239:8017" ] ]

.env.production

@@ -7,4 +7,11 @@ VITE_PUBLIC_PATH = /
 # 是否在打包时生成 sourcemap
 VITE_BUILD_SOURCEMAP = false
 # 是否在打包时删除 console 代码
-VITE_BUILD_DROP_CONSOLE = true
+VITE_BUILD_DROP_CONSOLE = true
+
+# VITE_SCREEN = /api
+VITE_SCREEN = /prod-api
+# 访问服务器文件地址
+VITE_UPLOAD_IMG_URL = /dev-img-api
+# 服务器拼接地址
+VITE_UPLOAD_URL =  https://city.sczysoft.com/dffile/

public/json/daofu.json

@@ -406,7 +406,11 @@
         ]
       },
       "properties": {
-        "name": "鲜水镇"
+        "name": "鲜水镇",
+        "center": [
+          101.119413,
+          31.004894
+        ]
       },
       "id": "______.1"
     }

src/api/account.ts

@@ -0,0 +1,39 @@
+import request from "../utils/request";
+
+/**
+ *地区树形
+ */
+export function areaTree() {
+  return request({
+    url: `common/sysorg/areaTree`,
+    method: "GET",
+  });
+}
+ /**
+ *风险列表分页
+ */
+ export function riskTypeList() {
+  return request({
+    url: `/admin/risk/riskTypeList`,
+    method: "GET",
+  });
+}
+/**
+ *查询所有应急上报事件类型
+ */
+ export function emerEventType() {
+  return request({
+    url: `/admin/emerEvent/emerEventType`,
+    method: "GET",
+  });
+}
+
+/**
+ *获取用户信息
+ */
+ export function sysUserInfo() {
+  return request({
+    url: `/screen/index/getSysUserInfo`,
+    method: "GET",
+  });
+}

src/api/common.ts

@@ -1,8 +0,0 @@
-import request from "../utils/request";
-
-export function test() {
-  return request({
-    url: "",
-    method: "POST",
-  });
-}

src/api/file.ts

@@ -0,0 +1,81 @@
+// import request from "@/utils/request";
+import {fileRequest} from "@/utils/request";
+
+function getMethod(type: string) {
+  if (type.startsWith("/upload")) return "POST";
+  else return "GET";
+}
+// 获取文件
+/**
+ *
+ * @param userId 根据功能需求选择合适的ID
+ * @param fileType 文件类型
+ * @param type 接口类型, 使用@utils 下面提供common中的ApiFile
+ * @returns Promis
+ */
+export function apiFile(
+  userId: string,
+  deleteId: string,
+  fileType: string,
+  type: string,
+  data: { OTCId: string }
+) {
+  return fileRequest({
+    url: type,
+    method: getMethod(type),
+    params: {
+      OTCId: userId,
+      OTCType: fileType,
+      deletedId: deleteId,
+    },
+    data: data,
+  });
+}
+
+// 文件上传
+/**
+ *
+ * @param userId 当前登录操作人id
+ * @param uuid 文件生成uuid
+ * @param otcType 文件类型
+ * @param data 文件流
+ * @returns
+ */
+export function uploadFile(
+  userId: string,
+  uuid: string,
+  otcType: string,
+  data: object
+) {
+  return fileRequest({
+    url: "/common/upload/uploadFile",
+    method: "POST",
+    params: {
+      otcid: uuid,
+      otctype: otcType,
+      userId,
+    },
+    data: data,
+  });
+}
+  /**
+ *文件查询
+ */
+ export function getFile(otcid:string,otctype:string) {
+  
+  return fileRequest({
+    url: `/common/upload/getFile`,
+    method: "GET",
+    params:{ otcid,otctype }
+  });
+}
+  /**
+ *文件删除
+ */
+ export function delFile(documentId) {
+  return fileRequest({
+    url: `/common/upload/delFile`,
+    method: "GET",
+    params:{ documentId }
+  });
+}

src/api/homePage.ts

@@ -1,9 +1,102 @@
 import request from "../utils/request";
 
-export function test(data: any) {
+//基本信息统计
+export function personnelTypeStatistic() {
   return request({
-    url: "",
-    method: "POST",
-    data: data
+    url: `/screen/index/personnelTypeStatistic`,
+    method: "GET",
+  });
+}
+/**
+ * 工作开展情况
+ */
+
+//工作类型列表
+export function wkTypes(params) {
+  return request({
+    url: `/screen/index/wkTypes`,
+    method: "GET",
+    params:params,
+  });
+}
+//工作动态分类型开展情况-前五条
+export function workProgress(params) {
+  return request({
+    url: `/screen/index/workProgress/${params.typeId}`,
+    method: "GET",
+  });
+}
+/**
+ * 风险池
+ */
+
+//风险类型列表
+export function riskTypeList() {
+  return request({
+    url: `/screen/index/riskTypeList`,
+    method: "GET",
+  });
+}
+//风险列表分页
+export function riskPoolPage(params) {
+  return request({
+    url: `/screen/index/riskPoolPage`,
+    method: "GET",
+    params:params,
+  });
+}
+/**
+ * 应急指挥
+ */
+
+//应急队伍分页
+export function othteamPage(params) {
+  return request({
+    url: `/screen/index/getOthteamPage`,
+    method: "GET",
+    params:params
+  });
+}
+//应急仓库分页
+export function otheWareHousePage(params) {
+  return request({
+    url: `/screen/index/getOtheWareHousePage`,
+    method: "GET",
+    params:params
+  });
+}
+//应急通讯录体系
+export function performUserPage(params) {
+  return request({
+    url: `/screen/index/performUserPage`,
+    method: "GET",
+    params:params
+  });
+}
+//分页查看应急上报事件
+export function emerEventPage(params) {
+  return request({
+    url: `/screen/index/emerEventPage`,
+    method: "GET",
+    params:params
+  });
+}
+//值守人员
+export function dutyList(params) {
+  return request({
+    url: `/screen/index/dutyList`,
+    method: "GET",
+    params:params
+  });
+}
+/**
+ * 工作考核
+ */
+//履职情况列表
+export function workPerformProgress(params) {
+  return request({
+    url: `/screen/index/workPerformProgress`,
+    method: "GET",
+    params:params
   });
 }

src/api/map.ts

@@ -0,0 +1,67 @@
+import request from "../utils/request";
+
+/**
+ *地图信息：避难场所列表
+ */
+export function emerShelterList(params) {
+  return request({
+    url: `/screen/index/emerShelterList`,
+    method: "GET",
+    params:params
+  });
+}
+/**
+ *地图信息：避难场所详情
+ */
+export function emerShelterDetail(params) {
+  return request({
+    url: `/screen/index/emerShelterDetail/${params.id}`,
+    method: "GET",
+  });
+}
+/**
+ *地图信息：风险池列表
+ */
+export function emerRiskPoolList(params) {
+  return request({
+    url: `/screen/index/emerRiskPoolList`,
+    method: "GET",
+    params:params
+  });
+}
+/**
+ *地图信息：风险池详情
+ */
+export function emerRiskPoolDetail(params) {
+  return request({
+    url: `/screen/index/emerRiskPoolDetail/${params.id}`,
+    method: "GET",
+  });
+}
+/**
+ *地图信息：应急仓库列表
+ */
+export function emerWareHouseList(params) {
+  return request({
+    url: `/screen/index/emerWareHouseList`,
+    method: "GET",
+    params:params
+  });
+}
+/**
+ *地图信息：应急仓库详情
+ */
+export function emerWareHouseDetail(params) {
+  return request({
+    url: `/screen/index/emerWareHouseDetail/${params.id}`,
+    method: "GET",
+  });
+}
+// 地图信息：整体信息
+export function emerMapInfo(params) {
+  return request({
+    url: `/screen/index/emerMapInfo`,
+    method: "GET",
+    params:params
+  });
+}

src/api/statistics.ts

@@ -0,0 +1,123 @@
+import request from "../utils/request";
+
+//查看户籍统计
+export function domicileStatistic() {
+  return request({
+    url: `/screen/statistic/domicileStatistic`,
+    method: "GET",
+  });
+}
+/**
+ * 预警分析
+ */
+
+//预警类型列表
+export function riskTypeList() {
+  return request({
+    url: `/screen/index/riskTypeList`,
+    method: "GET",
+  });
+}
+//预警分析列表分页
+export function riskPoolPage(params) {
+  return request({
+    url: `/screen/index/riskPoolPage`,
+    method: "GET",
+    params:params,
+  });
+}
+/**
+ * 应急指挥
+ */
+
+//应急队伍分页
+export function othteamPage(params) {
+  return request({
+    url: `/screen/index/getOthteamPage`,
+    method: "GET",
+    params:params
+  });
+}
+//应急仓库分页
+export function otheWareHousePage(params) {
+  return request({
+    url: `/screen/index/getOtheWareHousePage`,
+    method: "GET",
+    params:params
+  });
+}
+//应急通讯录体系
+export function performUserPage(params) {
+  return request({
+    url: `/screen/index/performUserPage`,
+    method: "GET",
+    params:params
+  });
+}
+//分页查看应急上报事件
+export function emerEventPage(params) {
+  return request({
+    url: `/screen/index/emerEventPage`,
+    method: "GET",
+    params:params
+  });
+}
+/**
+ * 工作开展情况
+ */
+//最新工作管理信息
+export function latestWork(params) {
+  return request({
+    url: `/screen/statistic/latestWork`,
+    method: "GET",
+    params:params,
+  });
+}
+//工作类型分析
+export function workTypeStatistic(params) {
+  return request({
+    url: `/screen/statistic/workTypeStatistic`,
+    method: "GET",
+    params:params,
+  });
+}
+//村庄工作分析
+export function villageWorkStatistic(params) {
+  return request({
+    url: `/screen/statistic/villageWorkStatistic`,
+    method: "GET",
+    params:params,
+  });
+}
+//工作类型列表
+export function wkTypes(params) {
+  return request({
+    url: `/screen/statistic/wkTypes`,
+    method: "GET",
+    params:params,
+  });
+}
+//工作分类型统计分析
+export function workStatisticByType(params) {
+  return request({
+    url: `/screen/statistic/workStatisticByType`,
+    method: "GET",
+    params:params,
+  });
+}
+//风险池分类型统计
+export function rkStatByType(params) {
+  return request({
+    url: `/screen/statistic/rkStatByType`,
+    method: "GET",
+    params:params,
+  });
+}
+//应急数据统计
+export function emerStat(params) {
+  return request({
+    url: `/screen/statistic/emerStat`,
+    method: "GET",
+    params:params,
+  });
+}

src/components/global-register/BaseDialog/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog
+    v-model="props.dialogVisible"
+    class="custom-dialog"
+    :show-close="false"
+    @closed="handleClose"
+    :width="width"
+    :draggable="draggable"
+    :top="top"
+    :close-on-click-modal="false"
+  >
+    <!-- titleId, titleClass -->
+    <template #header="{ close }">
+      <div class="custom-dialog-title" v-if="titleType == '1'">
+        <TitleC :title="titleName"></TitleC>
+        <el-icon class="close" @click="close">
+          <Close />
+        </el-icon>
+      </div>
+      <div class="custom-dialog-title" v-else>
+        <span class="title" :style="{ color: props.titleColor }">{{
+          titleName
+        }}</span>
+        <el-icon class="close" @click="close"><Close /></el-icon>
+      </div>
+    </template>
+    <!-- 使用剧插槽插入类容 -->
+    <slot />
+    <!-- 聚名插槽使用v-show不会生效需要使用v-if -->
+    <template #footer v-if="props.diafooter">
+      <span class="dialog-footer">
+        <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
+        <!-- 如果需要可自行添加按钮 -->
+        <el-button
+          type="primary"
+          @click="onSubmit"
+          v-show="props.footerkeepnaem"
+          >{{ footerkeep }}</el-button
+        >
+        <el-button @click="handleClose" v-show="footerclosed">{{
+          footerclose
+        }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref, watchEffect } from "vue";
+export default defineComponent({
+  name: "BaseDialog",
+});
+</script>
+
+<script lang="ts" setup name="BaseDialog">
+// import {ref } from "vue";
+
+// const diafooter=ref(true)
+const props = defineProps({
+  // 关闭弹窗
+  dialogVisible: {
+    type: Boolean,
+    default: false,
+  },
+  // 弹窗名字
+  titleName: {
+    type: String,
+    default: "",
+  },
+  //根据业务显示是那个弹窗或者获取的表格列表需要的id
+  id: {
+    type: String,
+    default: "",
+  },
+  // 弹窗的宽度
+  width: {
+    type: String,
+    // default: '50%',
+  },
+  // 距顶部的位置
+  top: {
+    type: String,
+    //  default: '15%',
+  },
+  // 弹窗的页脚的展示
+  diafooter: {
+    type: Boolean,
+    default: true,
+  },
+  // 弹窗页脚保存名字
+  footerkeep: {
+    type: String,
+    default: "保存",
+  },
+  // 是否显示第一个按钮
+  footerkeepnaem: {
+    type: Boolean,
+    default: true,
+  },
+  // 弹窗页脚的关闭按钮名称
+  footerclose: {
+    type: String,
+    default: "关闭",
+  },
+  // 是否显示弹窗关闭按钮
+  footerclosed: {
+    type: Boolean,
+    default: false,
+  },
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  titleColor: {
+    type: String,
+    default: "#69768f",
+  },
+  // 使用那种头部
+  titleType: {
+    type: String,
+    default: "1",
+  },
+});
+const emits = defineEmits(["close", "onSubmit"]);
+const handleClose = () => emits("close");
+const onSubmit = () => emits("onSubmit");
+</script>
+<style lang="scss" scoped>
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  // color: #151933;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.el-dialog__footer {
+  padding-top: 0;
+  text-align: center;
+  .el-button {
+    margin: 0 16px;
+    width: 130px;
+  }
+}
+.title::before {
+  content: "";
+  width: 6px;
+  height: 19px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: var(--color-primary);
+  margin-right: 5px;
+  border-radius: 4px;
+}
+.close {
+  cursor: pointer;
+}
+.item {
+  padding: 16px;
+  padding-left: 60px;
+  border-radius: 10px;
+  background: #f3f3f3;
+  position: relative;
+  margin-bottom: 16px;
+  .tips {
+    position: absolute;
+    width: 23px;
+    height: 31px;
+    background: var(--color-primary);
+    left: 20px;
+    top: 0;
+    border-radius: 0 0 12px 12px;
+  }
+}
+.item:last-child {
+  margin-bottom: 0;
+}
+:deep(.icon-start) {
+  margin-left: 0 !important;
+}
+.title-bg {
+  height: 50px !important;
+}
+</style>

src/components/global-register/map/Mars3D.vue

@@ -10,6 +10,16 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
+import {
+  emerShelterList,
+  emerRiskPoolList,
+  emerWareHouseList,
+  emerShelterDetail,
+  emerWareHouseDetail,
+  emerRiskPoolDetail,
+  emerMapInfo,
+} from "@/api/map";
+
 import * as mars3d from "mars3d";
 
 const props = defineProps<{
@@ -96,9 +106,61 @@ const initMars3d = (option: any) => {
   map.on(mars3d.EventType.renderError, async () => {
     window.location.reload();
   });
+  map.on(mars3d.EventType.click, map_clickHandler, this);
   loadLayer(geoJsonAreaUrl, geoJsonUrl.value);
 };
 
+//点击获取经纬度
+
+let clickTimeId: any;
+const map_clickHandler = (event: any) => {
+  clearTimeout(clickTimeId);
+  clickTimeId = setTimeout(function () {
+    // console.log("鼠标单击", event);
+    // 获取当前鼠标点击位置坐标信息
+    coordinate(event);
+  }, 100);
+};
+
+function coordinate(event: any) {
+  let cartesian = event.cartesian;
+  let point = mars3d.LngLatPoint.fromCartesian(cartesian);
+  point.format(); //经度、纬度、高度
+  // console.log("---------- 当前坐标位置信息 ----------");
+  // console.log("当前经度：" + point.lng);
+  // console.log("当前纬度：" + point.lat);
+  // console.log("当前高度：" + point.alt);
+  // console.log("当前经纬度：" + point.lng + "," + point.lat);
+}
+
+//获取地图信息：避难场所列表
+const getEmerShelterList = () => {
+  emerShelterList({}).then((res: any) => {
+    res.data.forEach((item) => {
+      // console.log(item, "item===>");
+      addMark(item.lng, item.lat, "icon-bncs", 1, item.othrefugeid);
+    });
+  });
+};
+//地图信息：风险池列表
+const getEmerRiskPoolList = () => {
+  emerRiskPoolList({}).then((res: any) => {
+    res.data.forEach((item) => {
+      // console.log(item, "item===>");
+      addMark(item.lon, item.lat, "icon-wl", 2, item.poolId);
+    });
+  });
+};
+//地图信息：应急仓库列表
+const getEmerWareHouseList = () => {
+  emerWareHouseList({}).then((res: any) => {
+    res.data.forEach((item) => {
+      // console.log(item, "item===>");
+      addMark(item.lon, item.lat, "icon-hj", 3, item.houseId);
+    });
+  });
+};
+
 /**
  * 加载图层
  */
@@ -110,6 +172,13 @@ const loadLayer = (insideJson: string, outJson: string) => {
 
   getOutArea(outJson);
   loadInArea(insideJson);
+
+  // 避难场所列表
+  getEmerShelterList();
+  // 风险池列表
+  getEmerRiskPoolList();
+  // 应急仓库列表
+  getEmerWareHouseList();
 };
 
 /**
@@ -195,12 +264,12 @@ const addCenterGraphi = (attr: any, graphicLayer: any) => {
   const circleGraphic = new mars3d.graphic.CircleEntity({
     position: new mars3d.LngLatPoint(attr.center[0], attr.center[1], 100),
     style: {
-      radius: 2000,
+      radius: 700,
       materialType: mars3d.MaterialType.CircleWave,
       materialOptions: {
         color: "#0b88e3",
         count: 2,
-        speed: 10,
+        speed: 5,
       },
     },
     attr,
@@ -289,102 +358,141 @@ const initListener = () => {
  * 获取点击区域边界
  */
 const getAreaBound = (attr: any) => {
-  map.removeLayer(graphicLayer.value);
+  // map.removeLayer(graphicLayer.value);
 
   loadAreaChild(attr);
 };
 
+const datatext1 = ref("户籍");
+const datatext2 = ref("张三");
+const datatext3 = ref("18325456265");
+const datatext4 = ref("xxxxxxx地址");
 /**
  * 加载点击区域
  */
 const loadAreaChild = (attrTemp: any) => {
-  graphicLayer.value = new mars3d.layer.GraphicLayer();
-  map.addLayer(graphicLayer.value);
-
+  // graphicLayer.value = new mars3d.layer.GraphicLayer();
+  // map.addLayer(graphicLayer.value);
   graphicLayer.value.bindPopup((event: any) => {
+    // console.log(event, "event====>");
+
     let attr = event.graphic.attr || {};
+    // console.log(attr, "attr==>");
+    console.log(
+      event.graphic.objectsToExclude?.id,
+      "event.graphic.objectsToExclude?.id===>"
+    );
     let title = "点位";
     switch (event.graphic.objectsToExclude?.type || -1) {
       case 1:
-        title = "户籍";
-        attr["姓名："] = "张三";
-        attr["联系电话："] = "18325456265";
-        attr["现居地址："] = "xxxxxxx地址";
+        title = "避难场所";
+        emerShelterDetail({
+          id: event.graphic.objectsToExclude?.id,
+        }).then((res: any) => {
+          attr["场所名称："] = res.data.name;
+          attr["占地面积："] = res.data.space;
+          attr["地址："] = res.data.address;
+          attr["跳转："] = `<button
+                onclick="
+                window.open('https://dfxs.sczysoft.com/#/emer/shelter', '_blank');
+                "
+              >详情</button>`;
+        });
+        // getemerShelterDetail(id);
         break;
       case 2:
-        title = "特殊人群";
-        attr["姓名："] = "王五";
-        attr["居民类型"] = "低保户";
-        attr["联系电话："] = "18325456265";
-        attr["现居地址："] = "xxxxxxx地址";
+        title = "风险池";
+        emerRiskPoolDetail({ id: event.graphic.objectsToExclude?.id }).then(
+          (res: any) => {
+            attr["风险地址："] = res.data.address;
+            attr["风险类型："] = res.data.typeName;
+            attr["跳转："] = `<button
+                onclick="
+                window.open('https://dfxs.sczysoft.com/#/emer/point', '_blank');
+                "
+              >详情</button>`;
+          }
+        );
         break;
       case 3:
-        title = "外来人群";
-        attr["姓名："] = "李四";
-        attr["户籍"] = "四川成都";
-        attr["联系电话："] = "18325456265";
-        attr["现居地址："] = "xxxxxxx地址";
-        break;
-      case 4:
-        title = "避难场所";
-        attr["场所名称："] = "xxxxx避难场所";
-        attr["占地面积："] = "3000㎡";
-        attr["容纳人数："] = "2000人";
-        break;
-      case 5:
-        title = "应急事件";
-        attr["事件名称："] = "xxxxx事件";
-        attr["事发时间："] = "2023-12-15";
-        attr["事发地点："] = "xxxxxxx地址";
-        attr["处理人员："] = "张三丰";
-        attr["处理时间："] = "2023-12-15";
-        attr["处理结果："] = "已处理";
+        title = "应急仓库";
+        emerWareHouseDetail({ id: event.graphic.objectsToExclude?.id }).then(
+          (res: any) => {
+            attr["地址："] = res.data.address;
+            attr["管理员："] = res.data.nameId;
+            attr["联系电话："] = res.data.telephone;
+            attr["跳转："] = `<button
+                onclick="
+                window.open('https://dfxs.sczysoft.com/#/emer/house', '_blank');
+                "
+              >详情</button>`;
+          }
+        );
         break;
+
       default:
         title = "道孚县鲜水镇";
         attr = [];
-        attr["外来人群："] = "200人";
-        attr["特殊人群："] = "100人";
-        attr["避难场所："] = "500处";
+        attr["风险池："] = wholeNumber.value.emerRiskPoolNum;
+        attr["避难场所："] = wholeNumber.value.emerShelterNum;
+        attr["应急仓库："] = wholeNumber.value.emerWareHouseNum;
         break;
     }
+    // return mars3d.Util.getTemplateHtml({
+    //   title,
+    //   template: "all",
+    //   attr,
+    // });
     return mars3d.Util.getTemplateHtml({
       title,
       template: "all",
       attr,
     });
   });
+  // const getemerShelterDetail = (id) => {
+  //   emerShelterDetail({ id: id }).then((res: any) => {
+  //     attr["场所名称："] = res.data.name;
+  //     attr["占地面积："] = res.data.space;
+  //     attr["地址："] = res.data.address;
+  //   });
+  // };
 
-  mars3d.Util.fetchJson({
-    url: geoJsonAreaUrl,
-  }).then(function (geojson) {
-    const arr = mars3d.Util.geoJsonToGraphics(geojson); // 解析geojson
-    for (let i = 0; i < arr.length; i++) {
-      const item = arr[i];
-      const attr = item.attr; // 属性信息
+  // mars3d.Util.fetchJson({
+  //   url: geoJsonAreaUrl,
+  // }).then(function (geojson) {
+  //   const arr = mars3d.Util.geoJsonToGraphics(geojson); // 解析geojson
+  //   for (let i = 0; i < arr.length; i++) {
+  //     const item = arr[i];
+  //     const attr = item.attr; // 属性信息
 
-      if (attrTemp.name == attr.name) {
-        addCenterGraphi(attr, graphicLayer.value);
-        outsideMask(item.positions, 1000);
-        break;
-      }
-    }
-    if (attrTemp.name == "道孚县") {
-      addMark(101.169992, 30.883604, "icon-hj", 1);
-      addMark(101.238141, 30.95709, "icon-db", 2);
-      addMark(101.107507, 30.906878, "icon-wl", 3);
-      addMark(101.090856, 30.969749, "icon-bncs", 4);
-      addMark(101.178403, 30.851335, "icon-yjsj", 5);
-    }
-  });
+  //     if (attrTemp.name == attr.name) {
+  //       addCenterGraphi(attr, graphicLayer.value);
+  //       outsideMask(item.positions, 1000);
+  //       break;
+  //     }
+  //   }
+  //   if (attrTemp.name == "道孚县") {
+  //     addMark(101.169992, 30.883604, "icon-hj", 1);
+  //     addMark(101.238141, 30.95709, "icon-db", 2);
+  //     addMark(101.107507, 30.906878, "icon-wl", 3);
+  //     addMark(101.090856, 30.969749, "icon-bncs", 4);
+  //     addMark(101.178403, 30.851335, "icon-yjsj", 5);
+  //   }
+  // });
 };
 
 /**
  * 添加标点
  */
-const addMark = (lng: number, lat: number, imgName: string, type: number) => {
+const addMark = (
+  lng: number,
+  lat: number,
+  imgName: string,
+  type: number,
+  id: string
+) => {
   const graphic = new mars3d.graphic.BillboardEntity({
-    objectsToExclude: { type },
+    objectsToExclude: { type, id },
     position: new mars3d.LngLatPoint(lng, lat),
     style: {
       image: getImageUrl(imgName),
@@ -398,7 +506,6 @@ const addMark = (lng: number, lat: number, imgName: string, type: number) => {
   });
   graphicLayer.value.addGraphic(graphic);
 };
-
 /**
  * 加载弹窗
  */
@@ -419,8 +526,17 @@ const getImageUrl = (name: string) => {
   const modules = import.meta.globEager("/src/assets/images/marks/*.png");
   return modules[path].default;
 };
+//地图整体数量
+const wholeNumber = ref({});
 
 onMounted(() => {
+  emerMapInfo({}).then((res: any) => {
+    // console.log(res, "res===>");
+    wholeNumber.value = res.data;
+  });
+  // getEmerShelterList();
+  // getEmerRiskPoolList();
+  // getEmerWareHouseList();
   initConfig();
 });
 </script>

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

@@ -49,13 +49,12 @@ const changeStatus = (e: Boolean) => {
 
   .title {
     flex: 1;
-    color: #ffffff;
     margin-left: 12px;
-    font-size: 16px;
+    font-size: 19px;
     line-height: 16px;
     font-family: Source Han Sans SC, Source Han Sans SC;
-    font-weight: 500;
-    color: #f3f9ff;
+    font-weight: 600;
+    color: #3be8ff;
   }
 
   .sw-tip {

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

@@ -40,7 +40,8 @@ const changeStatus = (e: Boolean) => {
 .title-bg {
   position: relative;
   overflow: hidden;
-  height: 36px;
+  // padding-top: 10px;
+  // padding-bottom: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;

src/store/user.ts

@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+export const userUSerStore = defineStore({
+  id: "user",
+  state: () => ({
+    user_df: localStorage.user_df || '',
+  }),
+  getters: {
+    getUser_df(): number {
+      return this.user_df;
+    },
+  },
+
+  actions: {
+    setUser_df(user_df: object ) {
+      // console.log(user_df,'user_df=====》');
+      this.user_df = user_df ;
+    },
+  },
+});

src/styles/element-plus.scss

@@ -1,46 +1,3 @@
-.el-dialog {
-  --el-dialog-background-color: linear-gradient(180deg, #003d60 0%, rgba(0, 118, 157, 0.8) 100%);
-  --el-dialog-bg-color: linear-gradient(180deg, #003d60 0%, rgba(0, 118, 157, 0.8) 100%) !important;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-
-  .el-dialog__header {
-    margin-right: 0vw;
-    height: 50px;
-    line-height: 50px;
-    font-weight: bold;
-    padding: 0vw !important;
-    --el-text-color-primary: #fff;
-    --el-message-close-size: 0.8vw;
-    background: linear-gradient(90deg, rgba(1, 111, 174, 0.75) 0%, rgba(3, 181, 225, 0.45) 100%);
-
-    .el-dialog__title {
-      padding: 0.5vw;
-      font-size: vw(30);
-      line-height: 0;
-    }
-  }
-
-  .el-dialog__headerbtn .el-dialog__close {
-    color: white;
-  }
-
-  .el-dialog__body {
-    padding: 0 !important;
-
-    .custom-content {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .el-dialog__footer {
-    padding: 0 vw(42);
-  }
-}
-
 .el-table {
   color: #fff;
   --el-bg-color: transparent;
@@ -293,10 +250,6 @@ table {
     margin: 1% 3%;
   }
 
-  .el-form-item__label {
-    color: #00ffff !important;
-  }
-
   .inline-block {
     width: 94%;
   }
@@ -333,10 +286,81 @@ table {
 }
 
 
-.el-form-item__label {
-  color: black !important;
-}
+
 
 .el-input__inner {
   color: black !important;
+}
+
+
+.el-dialog {
+  --el-dialog-background-color: linear-gradient(180deg, #003d60 0%, rgba(0, 118, 157, 0.8) 100%);
+  --el-dialog-bg-color: linear-gradient(180deg, #003d60 0%, rgba(0, 118, 157, 0.8) 100%) !important;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+
+  .el-dialog__header {
+    margin-right: 0vw;
+    height: 50px;
+    line-height: 50px;
+    font-weight: bold;
+    padding: 0vw !important;
+    --el-text-color-primary: #fff;
+    --el-message-close-size: 0.8vw;
+    background: linear-gradient(90deg, rgba(1, 111, 174, 0.75) 0%, rgba(3, 181, 225, 0.45) 100%);
+
+    .el-dialog__title {
+      padding: 0.5vw;
+      font-size: vw(30);
+      line-height: 0;
+    }
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: white;
+  }
+
+  .el-dialog__body {
+    // padding: 0 !important;
+
+    .custom-content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .el-dialog__footer {
+    // padding: 0 vw(42);
+    text-align: center;
+  }
+
+  .el-input__wrapper {
+    // background-color: red !important;
+  }
+
+  .el-form-item__label {
+    width: 150px !important;
+    color: black !important;
+    font-size: 17px !important;
+  }
+
+}
+
+.center-form {
+  display: flow-root;
+  width: 100%;
+  margin: 0 auto;
+
+  .el-form-item {
+    width: 44%;
+    float: left;
+    margin: 0 3%;
+    margin-bottom: 22px;
+  }
+
+  .inline-block {
+    width: 94%;
+  }
 }

src/styles/variables.scss

@@ -105,6 +105,13 @@ $sideWidth: 31%;
   border-radius: 0px 0px 10px 10px;
 }
 
+.module_top_title_con {
+  display: flex;
+  flex-wrap: wrap;
+  // margin: 10px 0;
+  margin-bottom: 10px;
+}
+
 .module_top_title {
   cursor: pointer;
   // width: 64px;
@@ -119,6 +126,7 @@ $sideWidth: 31%;
   border-radius: 3px;
   margin-left: 8px;
   padding: 0px 7px;
+  margin-top: 10px;
 }
 
 .module_menu_selected {
@@ -135,6 +143,7 @@ $sideWidth: 31%;
 
 .weather_data_div {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   flex: 1;
 }
@@ -159,6 +168,9 @@ $sideWidth: 31%;
 }
 
 .weather_data_title {
+  display: flex;
+  align-items: center;
+  height: 30px;
   font-size: 16px;
   font-family: Source Han Sans SC, Source Han Sans SC;
   font-weight: 400;

src/utils/color.ts

@@ -0,0 +1,10 @@
+
+export function color(){
+  var str = "#";
+  var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
+  for (var i = 0; i < 6; i++) {
+    var num = parseInt(Math.random() * 16);
+    str += arr[num];
+  }
+  return str;
+}

src/utils/common.ts

@@ -8,4 +8,9 @@ const install = (app: App) => {
   );
 };
 
+// 文件类型
+export enum FileType {
+  resumptionAcs = 'WorkFile', // 工作动态/履职附件
+}
+
 export default install;

src/utils/request.ts

@@ -3,11 +3,24 @@ import { getToken, removeToken } from "./auth";
 
 axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
 
+
+// // 创建file服务器实例
+const fileService = axios.create({
+  // 路由BaseUrl，防止跨域请求
+  baseURL: import.meta.env.VITE_UPLOAD_IMG_URL,
+  // 超时时间
+  timeout: 10000,
+});
+configRequest(fileService);
+export const fileRequest = fileService;
+
 // 创建axios实例
 const service = axios.create({
   // 路由BaseUrl，防止跨域请求
-  // baseURL: import.meta.env.VITE_PUBLIC_PATH,
-  baseURL: 'http://42.193.40.239:8017',
+  baseURL: import.meta.env.VITE_SCREEN,
+  // baseURL: 'http://42.193.40.239:8017',
+  // baseURL: 'http://192.168.110.10:8017',
+  
   // 超时时间
   timeout: 20000,
 });
@@ -30,8 +43,11 @@ function configRequest(service: {
   // 配置请求前拦截器
   service.interceptors.request.use(
     (config: { headers: { [x: string]: string } }) => {
+      const token = localStorage.getItem("token");
+      config.headers["Satokenadmindf"] = token || "";
       if (getToken()) {
         config.headers["userToken"] = getToken() || "";
+        
       }
       return config;
     },
@@ -56,7 +72,7 @@ function configRequest(service: {
         return Promise.reject("error");
       } else if (code == 28) {
         alert("登录状态已过期,请重新登录!");
-        removeToken();
+        // removeToken();
         location.reload();
       } else {
         return res.data;

src/views/bottom-menu/index-1.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="bottom-menu">
+    <div
+      class="item"
+      @click="changeMenu(index)"
+      :style="{
+        'background-image':
+          'url(' +
+          (currentIndex == index
+            ? getImage('icon-menu-checked')
+            : getImage('icon-menu')) +
+          ')',
+      }"
+      v-for="(item, index) in menu"
+      :key="index"
+    >
+      <img />
+      <span>{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { menuStore } from "@/store/menu";
+import { EventEnum } from "@/utils/eventEnum";
+import { onMounted, ref } from "vue";
+
+const userMenu = menuStore();
+
+const currentIndex = ref(0);
+const menu = ref([
+  { name: "首页", icon: "" },
+  { name: "数据统计", icon: "" },
+]);
+
+/**
+ * 切换菜单
+ */
+const changeMenu = (index: number) => {
+  currentIndex.value = index;
+  userMenu.setMenuType(index);
+};
+
+/**
+ * 获取图片
+ */
+const getImage = (name: string) => {
+  const path = `/src/assets/images/menu/${name}.png`;
+  const modules = import.meta.globEager("/src/assets/images/menu/*.png");
+  return modules[path].default;
+};
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.bottom-menu {
+  position: fixed;
+  bottom: 20px;
+  left: $sideWidth;
+  right: $sideWidth;
+  margin: 0 1%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  .item {
+    font-size: 18px;
+    font-family: PingFang-SC, PingFang-SC;
+    color: #ffffff;
+    padding: 10px 60px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+}
+</style>

src/views/bottom-menu/index.vue

@@ -1,56 +1,85 @@
 <template>
   <div class="bottom-menu">
-    <div
-      class="item"
-      @click="changeMenu(index)"
-      :style="{
-        'background-image':
-          'url(' +
-          (currentIndex == index
-            ? getImage('icon-menu-checked')
-            : getImage('icon-menu')) +
-          ')',
-      }"
-      v-for="(item, index) in menu"
-      :key="index"
-    >
-      <img />
-      <span>{{ item.name }}</span>
+    <div class="bottom_body body_body">
+      <TitleC title="应急值守"></TitleC>
+      <el-table
+        :data="tableData"
+        max-height="180"
+        style="width: 100%"
+        show-overflow-tooltip
+      >
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column prop="areaName" label="值班地点" align="center">
+          <template #default="scope">
+            <span> {{ scope.row.areaName }}-{{ scope.row.postName }} </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="值班人员" align="center" />
+        <el-table-column prop="mobile" label="值班电话" align="center" />
+        <el-table-column prop="dutyTime" label="值班时间" align="center" />
+
+        <!-- <el-table-column label="操作" align="center" width="60">
+          <template #default="scope">
+            <span
+              @click="
+                (dialogVisible = true), (form = scope.row), (readonly = true)
+              "
+            >
+              <span class="pointer details">详情</span>
+            </span>
+          </template>
+        </el-table-column> -->
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination
+        class="pagination"
+        @size-change="getDutyList"
+        @current-change="getDutyList"
+        v-model:current-page.sync="currentPage"
+        v-model:page-size.sync="pageSize"
+        :page-sizes="[10, 15, 20, 30]"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        background
+        small
+      >
+      </el-pagination>
     </div>
   </div>
 </template>
 
 <script lang='ts' setup>
-import { menuStore } from "@/store/menu";
-import { EventEnum } from "@/utils/eventEnum";
 import { onMounted, ref } from "vue";
+import { dutyList } from "@/api/homePage";
+import { userUSerStore } from "@/store/user";
+const userStore = userUSerStore();
+const user = ref(JSON.parse(userStore.user_df));
+const userId = ref(user.value.userId);
 
-const userMenu = menuStore();
+//列表
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
 
-const currentIndex = ref(0);
-const menu = ref([
-  { name: "首页", icon: "" },
-  { name: "数据统计", icon: "" },
-]);
+//获取应急值守list
+const getDutyList = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    userId: userId.value,
+  };
+  dutyList(params).then((res: any) => {
+    console.log(res.data);
 
-/**
- * 切换菜单
- */
-const changeMenu = (index: number) => {
-  currentIndex.value = index;
-  userMenu.setMenuType(index);
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
 };
 
-/**
- * 获取图片
- */
-const getImage = (name: string) => {
-  const path = `/src/assets/images/menu/${name}.png`;
-  const modules = import.meta.globEager("/src/assets/images/menu/*.png");
-  return modules[path].default;
-};
-
-onMounted(() => {});
+onMounted(() => {
+  getDutyList();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -63,7 +92,6 @@ onMounted(() => {});
   display: flex;
   flex-direction: row;
   justify-content: center;
-
   .item {
     font-size: 18px;
     font-family: PingFang-SC, PingFang-SC;
@@ -74,4 +102,14 @@ onMounted(() => {});
     cursor: pointer;
   }
 }
+.bottom_body {
+  width: 90%;
+}
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.body_body {
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  border-radius: 0 0 10px 10px;
+}
 </style>

src/views/data-statistics/left-side/components/domicile.vue

@@ -6,7 +6,7 @@
       <div class="chart-wrapper">
         <div class="container" ref="populationtenementRef"></div>
         <div>
-          <div>6980</div>
+          <div>{{ population }}</div>
           <div></div>
           <div>人口总数</div>
         </div>
@@ -36,22 +36,11 @@ export default defineComponent({
 </script>
 <script setup lang='ts'>
 import * as echarts from "echarts";
+import { domicileStatistic } from "@/api/statistics";
+import { color } from "@/utils/color";
 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" },
-  { lable: "五类人员", value: "147", color: "#872F0A" },
-  { lable: "外出务工人员", value: "147", color: "#8AD900" },
-  { lable: "重点关注人员", value: "147", color: "#BD1BEC" },
-]);
+const populationList = ref([]);
+const population = ref(0);
 let option = {
   tooltip: {
     trigger: "item",
@@ -93,7 +82,7 @@ let option = {
     },
   ],
 };
-const getData = () => {
+const setData = () => {
   for (let index = 0; index < populationList.value.length; index++) {
     let data = [
       {
@@ -101,7 +90,7 @@ const getData = () => {
         name: populationList.value[index].lable,
       },
       {
-        value: "10",
+        value: "00",
         name: "",
       },
     ];
@@ -112,8 +101,27 @@ const getData = () => {
   const airTenementChart = echarts.init(populationtenementRef.value);
   airTenementChart.setOption(option);
 };
+const getDomicileStatistic = () => {
+  domicileStatistic().then((res: any) => {
+    // console.log(res, "res==>");
+    // populationList.value.push({
+    //   lable: item.typeName,
+    //   value: item.typeNum,
+    //   color: color(),
+    // });
+    // population.value += item.typeNum;
+    populationList.value = [
+      { lable: "流动人口", value: res.data[0].flowingNum, color: color() },
+      { lable: "本地户籍人口", value: res.data[0].localNum, color: color() },
+      { lable: "常住人口", value: res.data[0].permanentNum, color: color() },
+    ];
+    population.value =
+      res.data[0].flowingNum + res.data[0].localNum + res.data[0].permanentNum;
+    setData();
+  });
+};
 onMounted(() => {
-  getData();
+  getDomicileStatistic();
 });
 </script>
 
@@ -188,7 +196,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   height: 27px;
-  width: 45%;
+  width: 80%;
   > div:nth-child(1) {
     width: 8px;
     height: 8px;
@@ -208,6 +216,7 @@ onMounted(() => {
     margin-right: 5px;
   }
   > div:nth-child(4) {
+    width: 80px;
     font-size: 14px;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 500;

src/views/data-statistics/left-side/components/portrait.vue

@@ -1,20 +1,22 @@
-<!-- 工作考核 -->
+<!-- 精准画像 -->
 <template>
   <div class="side-bg">
-    <TitleC title="工作考核"></TitleC>
+    <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 class="module_top_title_con">
+        <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>
       </div>
     </TitleD>
     <div class="portrait_con conBox">
@@ -26,11 +28,23 @@
         <div>
           <div>
             <span>{{ index + 1 }}</span>
-            <span>{{ item.label }}</span>
+            <span v-if="labelId == 1" @click="toBackgroundManage()"
+              >{{ item.chinaName }}-{{ item.postName }}</span
+            >
+            <span v-else>{{ item.orgName }}</span>
+          </div>
+          <div>
+            <span>{{ item.percentage }}</span>
+            <span>{{ item.completedNum }}/{{ item.totalNum }}</span>
           </div>
-          <div>{{ item.value }}/50</div>
         </div>
-        <div><el-slider disabled v-model="item.value" max="50" /></div>
+        <div>
+          <el-slider
+            disabled
+            v-model="item.completedNum"
+            :max="item.totalNum"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -43,15 +57,22 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
+import { workPerformProgress } from "@/api/homePage";
+const labelId = ref(1);
 const label = ref([
-  { title: "各干部", check: true, id: 0 },
-  { title: "村(社区)", check: false, id: 1 },
+  { title: "镇干部", check: true, id: 1 },
+  { title: "村(社区)干部", check: false, id: 2 },
+  { title: "党员", check: false, id: 3 },
 ]);
 const clickMenuOption = (id: any) => {
+  labelId.value = id;
   label.value.forEach((item) => {
     item.check = false;
+    if (item.id == id) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
+  getWorkPerformProgress();
 };
 const portraitList = ref([
   { label: "某某人-职位", value: 48 },
@@ -60,6 +81,33 @@ const portraitList = ref([
   { label: "某某人-职位", value: 18 },
   { label: "某某人-职位", value: 48 },
 ]);
+//获取应急队伍list
+const getWorkPerformProgress = () => {
+  let params = {
+    sysYear: null,
+    typeId: labelId.value,
+  };
+  workPerformProgress(params).then((res: any) => {
+    portraitList.value = res.data;
+    portraitList.value.forEach((item) => {
+      item.percentage =
+        Math.round((item.completedNum / item.totalNum).toFixed(2) * 10000) /
+          100.0 +
+        "%";
+    });
+  });
+};
+//跳转后台
+const toBackgroundManage = () => {
+  window.open(
+    "https://dfxs.sczysoft.com/#/system/base/servicerating",
+    "_blank"
+  );
+};
+
+onMounted(() => {
+  getWorkPerformProgress();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -105,6 +153,10 @@ const portraitList = ref([
       font-family: Furore, Furore;
       font-weight: normal;
       color: #ffffff;
+      > span {
+        display: inline-block;
+        width: 60px;
+      }
     }
   }
   > div:nth-child(2) {

src/views/data-statistics/left-side/components/workSituation.vue

@@ -1,68 +1,72 @@
-<!-- 工作开展情况 -->
+<!-- 工作动态 -->
 <template>
   <div class="side-bg">
-    <TitleC title="工作开展情况"></TitleC>
+    <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 class="module_top_title_con">
+        <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>
       </div>
     </TitleD>
     <div class="work_con conBox">
-      <div v-show="labelId == 0">
-        <div class="tabsOne" 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 v-show="labelId == 2">
+        <ul
+          v-infinite-scroll="load"
+          :infinite-scroll-immediate="false"
+          class="infinite-list gundong"
+          style="overflow: auto"
+        >
+          <div
+            class="tabsOne"
+            v-for="(item, index) in latestWorkData"
+            :key="index"
           >
-            <div>{{ item.con }}</div>
-          </el-tooltip>
-        </div>
+            <div>{{ index + 1 }}</div>
+            <!-- <img
+              src="../../../../assets/images/home-page/left/barometer.png"
+              alt=""
+            /> -->
+            <div>
+              <div>发布人:</div>
+              <div>{{ item.chinaName }}</div>
+            </div>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              :content="item.title"
+              placement="top-start"
+              popper-class="work_tip"
+            >
+              <div>
+                {{ item.title }}
+              </div>
+            </el-tooltip>
+          </div>
+        </ul>
       </div>
-      <div v-show="labelId !== 0" class="chartBody">
+      <div v-show="labelId !== 2" class="chartBody">
         <div class="chart-wrapper">
           <div class="container" ref="tenementRef"></div>
         </div>
-        <div class="screenTime">
+        <!-- <div class="screenTime">
           <span>时间筛选</span>
           <img
             src="@/assets/images/data-statistics/left/screenIcon.png"
             alt=""
           />
-        </div>
+        </div> -->
       </div>
-      <!-- <div v-show="labelId == 2" class="chartBody">
-        <div class="chart-wrapper">
-          <div class="container" ref="villageWorkTenementRef"></div>
-        </div>
-      </div>
-      <div v-show="labelId == 3" class="chartBody">
-        <div class="chart-wrapper">
-          <div class="container" ref="supervisionWorkTenementRef"></div>
-        </div>
-      </div>
-      <div v-show="labelId == 4" class="chartBody">
-        <div class="chart-wrapper">
-          <div class="container" ref="mediateTenementRef"></div>
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
@@ -75,57 +79,63 @@ export default defineComponent({
 </script>
 <script setup lang='ts'>
 import * as echarts from "echarts";
-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 },
-  { title: "调解分析", check: false, id: 4 },
-]);
-const data = [
-  {
-    index: 1,
-    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
-  },
-  {
-    index: 2,
-    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
-  },
-  {
-    index: 3,
-    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
-  },
-  {
-    index: 4,
-    con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
-  },
-];
+import {
+  latestWork,
+  workTypeStatistic,
+  villageWorkStatistic,
+  wkTypes,
+  workStatisticByType,
+} from "@/api/statistics";
 //头部选择id
-const labelId = ref(0);
+//头部选项
+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 labelId = ref(1);
 const clickMenuOption = (id: any) => {
   label.value.forEach((item) => {
     item.check = false;
+    if (item.id == id) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
   labelId.value = id;
   switch (labelId.value) {
-    case 1:
+    case 0:
       getjobType();
       break;
-    case 2:
+    case 1:
       getvillageWork();
       break;
-    case 3:
-      getsupervisionWork();
-      break;
-    case 4:
-      getmediate();
+    case 2:
+      getLatestWork();
       break;
     default:
+      getWorkStatisticByType(labelId.value);
       break;
   }
 };
+//最新工作
+const currentPage = ref(1);
+const pageSize = ref(10);
+const latestWorkData = ref<any>([]);
+const getLatestWork = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+  };
+  latestWork(params).then((res: any) => {
+    latestWorkData.value = [...latestWorkData.value, ...res.data.list];
+  });
+};
+const load = () => {
+  currentPage.value = currentPage.value + 1;
+  getLatestWork();
+};
 //工作类型折线图
 const tenementRef = ref();
 let jobTypeOption = {
@@ -157,22 +167,7 @@ let jobTypeOption = {
   xAxis: {
     type: "category",
     // boundaryGap: false,
-    data: [
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-      "某某工作类型",
-    ],
+    data: [],
   },
   yAxis: [
     {
@@ -210,7 +205,7 @@ let jobTypeOption = {
     {
       name: "待完成",
       type: "line",
-      data: [1, 4, 7, 4, 0, 4, 3, 1, 4, 7, 4, 0, 4, 3],
+      data: [],
       symbolSize: 10,
       itemStyle: {
         color: "#FFFFFF", // 折线点的颜色
@@ -222,7 +217,7 @@ let jobTypeOption = {
     {
       name: "已完成",
       type: "line",
-      data: [0, 3, 4, 1, 7, 0, 1, 0, 3, 4, 1, 7, 2, 1],
+      data: [],
       symbolSize: 10,
       itemStyle: {
         color: "#66E1DF", // 折线点的颜色
@@ -230,30 +225,35 @@ let jobTypeOption = {
         shadowBlur: 15,
         borderColor: "#66E1DF",
       },
-      // itemStyle: {
-      //   color: "#66E1DF",
-      //   borderColor: "red",
-      //   borderWidth: 5,
-      //   shadowColor: "red",
-      //   shadowBlur: 10,
-      //   shadowOffsetY: 0,
-      //   shadowOffsetX: 0,
-      // },
     },
   ],
 };
 //工作类型折线图数据处理
 const getjobType = () => {
-  const tenementChart = echarts.init(tenementRef.value);
-  tenementChart.setOption(jobTypeOption, true);
+  let params = {
+    startTime: "",
+    endTime: "",
+  };
+  workTypeStatistic(params).then((res: any) => {
+    jobTypeOption.xAxis.data = [];
+    jobTypeOption.series[0].data = [];
+    jobTypeOption.series[1].data = [];
+    res.data.forEach((item) => {
+      jobTypeOption.xAxis.data.push(item.typeName);
+      jobTypeOption.series[0].data.push(item.ongoing);
+      jobTypeOption.series[1].data.push(item.completed);
+    });
+    const tenementChart = echarts.init(tenementRef.value);
+    tenementChart.setOption(jobTypeOption, true);
+  });
 };
-// 村庄工作分析折线图
-let villageWorkOption = {
+// 村庄工作分析
+let workOption = {
   tooltip: {
     trigger: "axis",
   },
   legend: {
-    data: [],
+    data: ["待完成", "已完成"],
     top: "top",
     left: "center",
     orient: "horizontal",
@@ -264,32 +264,34 @@ let villageWorkOption = {
     textStyle: {
       color: "#D0DEEE",
       fontFamily: "Source Han Sans CN, Source Han Sans CN",
-      fontSize: 12,
+      fontSize: 15,
       fontWeight: 400,
     },
   },
   grid: {
     left: "3%",
     right: "4%",
-    bottom: "0%",
-    top: "20%",
+    bottom: "3%",
     containLabel: true,
   },
   xAxis: {
     type: "category",
     // boundaryGap: false,
-    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
+    data: [],
   },
   yAxis: [
     {
       type: "value",
-      name: " 已办工作(个)",
+      name: "数量",
       nameTextStyle: {
         //y轴上方单位的颜色
-        color: "#A4A6ABFF",
+        color: "#6C8097",
       },
       axisLine: {
-        show: false,
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+        },
       },
       splitLine: {
         show: true,
@@ -312,244 +314,189 @@ let villageWorkOption = {
   series: [
     {
       name: "待完成",
-      type: "bar",
-      data: [1, 4, 7, 4, 0, 4],
+      type: "line",
+      data: [],
       symbolSize: 10,
-      barWidth: 35,
       itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#003AFF00" },
-          { offset: 1, color: "#159AFF" },
-        ]),
+        color: "#FFFFFF", // 折线点的颜色
+        shadowColor: "#fff",
+        shadowBlur: 15,
+        borderColor: "#aaa",
       },
-      label: {
-        show: true,
-        position: "top",
-        color: "#1799FC",
+    },
+    {
+      name: "已完成",
+      type: "line",
+      data: [],
+      symbolSize: 10,
+      itemStyle: {
+        color: "#66E1DF", // 折线点的颜色
+        shadowColor: "#66E1DF",
+        shadowBlur: 15,
+        borderColor: "#66E1DF",
       },
     },
   ],
 };
+// let workOption = {
+//   tooltip: {
+//     trigger: "axis",
+//   },
+//   legend: {
+//     data: [],
+//     top: "top",
+//     left: "center",
+//     orient: "horizontal",
+//     itemWidth: 15,
+//     itemHeight: 15,
+//     itemGap: 15,
+//     borderRadius: 0,
+//     textStyle: {
+//       color: "#D0DEEE",
+//       fontFamily: "Source Han Sans CN, Source Han Sans CN",
+//       fontSize: 12,
+//       fontWeight: 400,
+//     },
+//   },
+//   grid: {
+//     left: "3%",
+//     right: "4%",
+//     bottom: "0%",
+//     top: "20%",
+//     containLabel: true,
+//   },
+//   xAxis: {
+//     type: "category",
+//     // boundaryGap: false,
+//     data: [],
+//   },
+//   yAxis: [
+//     {
+//       type: "value",
+//       name: " 工作",
+//       nameTextStyle: {
+//         //y轴上方单位的颜色
+//         color: "#A4A6ABFF",
+//       },
+//       axisLine: {
+//         show: false,
+//       },
+//       splitLine: {
+//         show: true,
+//         lineStyle: {
+//           color: "#6C8097",
+//           type: "dashed",
+//         },
+//       },
+//       axisLabel: {
+//         color: "rgb(139, 143, 147)",
+//         textStyle: {
+//           fontSize: 14,
+//         },
+//       },
+//       axisTick: {
+//         show: false,
+//       },
+//     },
+//   ],
+//   series: [
+//     {
+//       name: "已完成",
+//       type: "bar",
+//       data: [],
+//       symbolSize: 10,
+//       barWidth: 25,
+//       itemStyle: {
+//         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//           { offset: 0, color: "#003AFF00" },
+//           { offset: 1, color: "#159AFF" },
+//         ]),
+//       },
+//       label: {
+//         show: true,
+//         position: "top",
+//         color: "#1799FC",
+//       },
+//     },
+//     {
+//       name: "待完成",
+//       type: "bar",
+//       data: [],
+//       symbolSize: 10,
+//       barWidth: 25,
+//       itemStyle: {
+//         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//           { offset: 0, color: "#CFCFCF00" },
+//           { offset: 1, color: "#8A8A8AFF" },
+//         ]),
+//       },
+//       label: {
+//         show: true,
+//         position: "top",
+//         color: "#1799FC",
+//       },
+//     },
+//   ],
+// };
 //村庄工作分析折线图数据处理
 const getvillageWork = () => {
-  const tenementChart = echarts.init(tenementRef.value);
-  tenementChart.setOption(villageWorkOption, true);
+  let params = {
+    startTime: "",
+    endTime: "",
+  };
+  villageWorkStatistic(params).then((res: any) => {
+    console.log(res, "res=====>");
+
+    workOption.xAxis.data = [];
+    workOption.series[0].data = [];
+    workOption.series[1].data = [];
+    res.data.forEach((item) => {
+      workOption.xAxis.data.push(item.orgName);
+      workOption.series[0].data.push(item.completed);
+      workOption.series[1].data.push(item.ongoing);
+    });
+    const tenementChart = echarts.init(tenementRef.value);
+    tenementChart.setOption(workOption, true);
+  });
 };
-//督办工作统计分析
-let supervisionWorkOption = {
-  tooltip: {
-    trigger: "axis",
-  },
-  legend: {
-    data: [],
-    top: "top",
-    left: "center",
-    orient: "horizontal",
-    itemWidth: 15,
-    itemHeight: 15,
-    itemGap: 15,
-    borderRadius: 0,
-    textStyle: {
-      color: "#D0DEEE",
-      fontFamily: "Source Han Sans CN, Source Han Sans CN",
-      fontSize: 12,
-      fontWeight: 400,
-    },
-  },
-  grid: {
-    left: "3%",
-    right: "4%",
-    bottom: "0%",
-    top: "20%",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "category",
-    // boundaryGap: false,
-    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
-  },
-  yAxis: [
-    {
-      type: "value",
-      name: " 已办工作(个)",
-      nameTextStyle: {
-        //y轴上方单位的颜色
-        color: "#A4A6ABFF",
-      },
-      axisLine: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#6C8097",
-          type: "dashed",
-        },
-      },
-      axisLabel: {
-        color: "rgb(139, 143, 147)",
-        textStyle: {
-          fontSize: 14,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "待完成",
-      type: "bar",
-      data: [10, 25, 30, 20, 10, 30],
-      symbolSize: 10,
-      barWidth: 25,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#003AFF00" },
-          { offset: 1, color: "#159AFF" },
-        ]),
-      },
-      label: {
-        show: true,
-        position: "top",
-        color: "#1799FC",
-      },
-    },
-    {
-      name: "待完成",
-      type: "bar",
-      data: [5, 5, 5, 5, 5, 10],
-      symbolSize: 10,
-      barWidth: 25,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#CFCFCF00" },
-          { offset: 1, color: "#8A8A8AFF" },
-        ]),
-      },
-      label: {
-        show: true,
-        position: "top",
-        color: "#1799FC",
-      },
-    },
-  ],
+//剩余动态工作图标
+const getWorkStatisticByType = (id) => {
+  let params = {
+    startTime: "",
+    endTime: "",
+    wkTypeId: id,
+  };
+  workStatisticByType(params).then((res: any) => {
+    workOption.xAxis.data = [];
+    workOption.series[0].data = [];
+    workOption.series[1].data = [];
+    res.data.forEach((item) => {
+      workOption.xAxis.data.push(item.orgName);
+      workOption.series[0].data.push(item.completed);
+      workOption.series[1].data.push(item.ongoing);
+    });
+  });
+  console.log(workOption, "workOption===>");
+  setTimeout(() => {
+    const tenementChart = echarts.init(tenementRef.value);
+    tenementChart.setOption(workOption, true);
+  }, 300);
 };
-//督办工作统计分析折线图数据处理
-const getsupervisionWork = () => {
-  const tenementChart = echarts.init(tenementRef.value);
-  tenementChart.setOption(supervisionWorkOption, true);
+const getWkTypes = () => {
+  let params = {
+    classify: 1,
+  };
+  wkTypes(params).then((res: any) => {
+    res.data.forEach((item) => {
+      label.value.push({ title: item.typeName, check: false, id: item.typeId });
+    });
+  });
 };
-//调解分析
-let mediateOption = {
-  tooltip: {
-    trigger: "axis",
-  },
-  legend: {
-    data: [],
-    top: "top",
-    left: "center",
-    orient: "horizontal",
-    itemWidth: 15,
-    itemHeight: 15,
-    itemGap: 15,
-    borderRadius: 0,
-    textStyle: {
-      color: "#D0DEEE",
-      fontFamily: "Source Han Sans CN, Source Han Sans CN",
-      fontSize: 12,
-      fontWeight: 400,
-    },
-  },
-  grid: {
-    left: "3%",
-    right: "4%",
-    bottom: "0%",
-    top: "20%",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "category",
-    // boundaryGap: false,
-    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
-  },
-  yAxis: [
-    {
-      type: "value",
-      name: " 已办工作(个)",
-      nameTextStyle: {
-        //y轴上方单位的颜色
-        color: "#A4A6ABFF",
-      },
-      axisLine: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#6C8097",
-          type: "dashed",
-        },
-      },
-      axisLabel: {
-        color: "rgb(139, 143, 147)",
-        textStyle: {
-          fontSize: 14,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "待完成",
-      type: "bar",
-      data: [10, 25, 30, 20, 10, 30],
-      symbolSize: 10,
-      barWidth: 25,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#003AFF00" },
-          { offset: 1, color: "#159AFF" },
-        ]),
-      },
-      label: {
-        show: true,
-        position: "top",
-        color: "#1799FC",
-      },
-    },
-    {
-      name: "待完成",
-      type: "bar",
-      data: [5, 5, 5, 5, 5, 30],
-      symbolSize: 10,
-      barWidth: 25,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#DBDBDBFF" },
-          { offset: 0.01, color: "#DBDBDBFF" },
-          { offset: 0.01, color: "#CFCFCF00" },
-          { offset: 1, color: "#8A8A8AFF" },
-        ]),
-      },
-      label: {
-        show: true,
-        position: "top",
-        color: "#1799FC",
-      },
-    },
-  ],
-};
-//调解分析折线图数据处理
-const getmediate = () => {
-  const tenementChart = echarts.init(tenementRef.value);
-  tenementChart.setOption(mediateOption, true);
-};
-onMounted(() => {});
+onMounted(() => {
+  // getLatestWork();
+  getjobType();
+  getWkTypes();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -586,11 +533,20 @@ onMounted(() => {});
       font-weight: 400;
       color: #ff7734;
     }
-    > img {
-      width: 70px;
-      height: 48px;
+    > div:nth-child(2) {
+      width: 100px;
+      height: 100%;
+      background-color: rgba(72, 77, 86, 0.6);
+      font-size: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      > div {
+        color: #ffe7cd;
+      }
     }
-    > div:nth-of-type(2) {
+    > div:nth-of-type(3) {
       width: 408px;
       height: 48px;
       font-size: 12px;
@@ -685,6 +641,37 @@ onMounted(() => {});
     margin-left: 6px;
   }
 }
+//下滑加载
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.infinite-list .infinite-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: var(--el-color-primary-light-9);
+  margin: 10px;
+  color: var(--el-color-primary);
+}
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
+.infinite-list::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none !important;
+}
+.module_top_title_con {
+  overflow: hidden;
+  max-height: 70px;
+  overflow-y: scroll;
+}
+.module_top_title_con::-webkit-scrollbar {
+  display: none;
+}
 </style>
 <style>
 .work_tip {

src/views/data-statistics/left-side/index.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="left-side">
-    <!-- 晴雨台 -->
-    <Weather></Weather>
     <!-- 户籍统计 -->
     <Domicile></Domicile>
     <!-- 工作开展情况 -->
     <WorkSituation></WorkSituation>
+    <!-- 工作考核 -->
+    <Portrait></Portrait>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Weather, Domicile, WorkSituation },
+  components: { Portrait, Domicile, WorkSituation },
   name: "LeftSide",
 });
 </script>
 
 <script lang='ts' setup>
 import Domicile from "./components/domicile.vue";
-import Weather from "./components/weather.vue";
 import WorkSituation from "./components/workSituation.vue";
+import Portrait from "./components/portrait.vue";
 </script>
 
 <style lang="scss" scoped>

src/views/data-statistics/right-side/components/command.vue

@@ -1,67 +1,15 @@
 <!-- 应急指挥 -->
 <template>
-  <div class="side-bg">
+  <div class="side-bg zhihui">
     <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 class="chartBody">
+      <div class="chart-wrapper">
+        <div class="container" ref="tenementRef"></div>
       </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 class="screenTime">
+        <span>时间筛选</span>
+        <img src="@/assets/images/data-statistics/left/screenIcon.png" alt="" />
+      </div> -->
     </div>
   </div>
 </template>
@@ -73,65 +21,110 @@ export default defineComponent({
 });
 </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;
+import * as echarts from "echarts";
+import { emerStat } from "@/api/statistics";
+//工作类型折线图
+const tenementRef = ref();
+let jobTypeOption = {
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    data: ["待完成", "已完成"],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 15,
+      fontWeight: 400,
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: [],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "数量",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#6C8097",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "数量",
+      type: "line",
+      data: [],
+      symbolSize: 10,
+      itemStyle: {
+        color: "#FFFFFF", // 折线点的颜色
+        shadowColor: "#fff",
+        shadowBlur: 15,
+        borderColor: "#aaa",
+      },
+    },
+  ],
 };
-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 = () => {};
+//工作类型折线图数据处理
+const getemerStat = () => {
+  let params = {
+    startTime: "",
+    endTime: "",
+  };
+  emerStat(params).then((res: any) => {
+    console.log(res, "res");
+
+    jobTypeOption.xAxis.data = [];
+    jobTypeOption.series[0].data = [];
+    res.data.forEach((item) => {
+      jobTypeOption.xAxis.data.push(item.typeName);
+      jobTypeOption.series[0].data.push(item.typeNum);
+    });
+    const tenementChart = echarts.init(tenementRef.value);
+    tenementChart.setOption(jobTypeOption, true);
+  });
+};
+onMounted(() => {
+  getemerStat();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -145,7 +138,8 @@ const clickDetails = () => {};
 //   -webkit-line-clamp: 2;
 // }
 .command_data {
-  height: 195px;
+  // height: 195px;
+  // height: 250px;
   background-color: rgba(0, 61, 123, 0) !important;
 }
 .command_search {
@@ -176,9 +170,92 @@ const clickDetails = () => {};
     margin-left: 2px;
   }
 }
-::v-deep .el-input--small .el-input__wrapper {
-  box-shadow: none;
-  border: 1px solid rgba(108, 128, 151, 1) !important;
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.body_body {
+  background-color: rgba(0, 61, 123, 0.353) !important;
+}
+.flowChart {
+  width: 80px !important;
+}
+.chart-wrapper {
+  margin-top: 10px;
+  flex: 1;
+  height: 180px;
+  position: relative;
+
+  .container {
+    flex: 1;
+    width: 600px;
+    margin-top: -10px;
+    height: 230px;
+  }
+  > 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;
+  }
+}
+.chartBody {
+  margin-top: 10px;
+  position: relative;
+}
+.screenTime {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  font-size: 15px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #d0deee;
+  display: flex;
+  align-items: center;
+  > img {
+    width: 15px;
+    height: 14px;
+    margin-left: 6px;
+  }
+}
+.zhihui {
+  height: 320px;
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  border-radius: 0 0 10px 10px;
 }
 </style>
 <style>

src/views/data-statistics/right-side/components/early-warning.vue

@@ -1,61 +1,16 @@
 <!-- 预警分析 -->
 <template>
-  <div class="side-bg">
+  <div class="side-bg body_body">
     <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 class="chartBody">
+      <div class="chart-wrapper">
+        <div class="container" ref="tenementRef"></div>
       </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 class="screenTime">
+        <span>时间筛选</span>
+        <img src="@/assets/images/data-statistics/left/screenIcon.png" alt="" />
+      </div> -->
+    </div>
   </div>
 </template>
 
@@ -66,44 +21,108 @@ export default defineComponent({
 });
 </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;
+import * as echarts from "echarts";
+import { rkStatByType } from "@/api/statistics";
+//工作类型折线图
+const tenementRef = ref();
+let jobTypeOption = {
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    data: ["待完成", "已完成"],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 15,
+      fontWeight: 400,
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: [],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "数量",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#6C8097",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "数量",
+      type: "line",
+      data: [],
+      symbolSize: 10,
+      itemStyle: {
+        color: "#FFFFFF", // 折线点的颜色
+        shadowColor: "#fff",
+        shadowBlur: 15,
+        borderColor: "#aaa",
+      },
+    },
+  ],
 };
-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 = () => {};
+//工作类型折线图数据处理
+const getrkStatByType = () => {
+  let params = {
+    startTime: "",
+    endTime: "",
+  };
+  rkStatByType(params).then((res: any) => {
+    jobTypeOption.xAxis.data = [];
+    jobTypeOption.series[0].data = [];
+    res.data.forEach((item) => {
+      jobTypeOption.xAxis.data.push(item.typeName);
+      jobTypeOption.series[0].data.push(item.typeCount);
+    });
+    const tenementChart = echarts.init(tenementRef.value);
+    tenementChart.setOption(jobTypeOption, true);
+  });
+};
+onMounted(() => {
+  getrkStatByType();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -113,6 +132,95 @@ const clickDetails = () => {};
   font-weight: 400;
   color: #159aff;
 }
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.module_top_title_con {
+  overflow: hidden;
+  max-height: 70px;
+  overflow-y: scroll;
+}
+.module_top_title_con::-webkit-scrollbar {
+  display: none;
+}
+.body_body {
+  height: 320px;
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  border-radius: 0 0 10px 10px;
+}
+.chart-wrapper {
+  margin-top: 10px;
+  flex: 1;
+  height: 180px;
+  position: relative;
+
+  .container {
+    flex: 1;
+    width: 600px;
+    margin-top: -10px;
+    height: 230px;
+  }
+  > 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;
+  }
+}
+.chartBody {
+  margin-top: 10px;
+  position: relative;
+}
+.screenTime {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  font-size: 15px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #d0deee;
+  display: flex;
+  align-items: center;
+  > img {
+    width: 15px;
+    height: 14px;
+    margin-left: 6px;
+  }
+}
 </style>
 <style>
 .riskPool_tip {

src/views/data-statistics/right-side/components/weather.vue

@@ -71,10 +71,14 @@
           </div>
         </div>
       </div>
-      <TitleD width="100">
+      <!-- <TitleD width="100">
         <div class="weather_data_title">气象预警信息</div>
       </TitleD>
-      <el-table :data="tableData" height="180" style="width: 100%">
+      <el-table
+        :data="tableData"
+        height="180"
+        style="width: 100%; border-radius: 0 0 10px 10px"
+      >
         <el-table-column type="index" label="序号" align="center" width="60" />
         <el-table-column
           prop="type"
@@ -95,7 +99,6 @@
             </el-tooltip>
           </template>
         </el-table-column>
-        <!-- show-overflow-tooltip -->
         <el-table-column
           prop="time"
           label="预警时间"
@@ -113,7 +116,7 @@
             </span>
           </template>
         </el-table-column>
-      </el-table>
+      </el-table> -->
     </div>
   </div>
 </template>

src/views/data-statistics/right-side/dialog/emeEventDetalis.vue

@@ -0,0 +1,110 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="	标题：" prop="title">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入标题"
+          v-model="form.title"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="事件类型：" prop="emerTypeId">
+        <el-select v-model="form.emerTypeId" clearable placeholder="请选择">
+          <el-option
+            v-for="item in option"
+            :key="item.emerTypeId"
+            :label="item.emerTypeName"
+            :value="item.emerTypeId"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间：" prop="createTimeString">
+        <el-date-picker
+          v-model="form.createTimeString"
+          type="date"
+          placeholder="请选择时间"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+        />
+      </el-form-item>
+      <el-form-item label="内容：" prop="content" style="width: 94%">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入内容"
+          type="textarea"
+          :rows="4"
+          v-model="form.content"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { emerEventType } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+const option = ref([]);
+
+// 查询所有应急上报事件类型
+const getEmerEventType = () => {
+  emerEventType().then((res: any) => {
+    option.value = res.data;
+  });
+};
+onMounted(() => {
+  getEmerEventType();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/data-statistics/right-side/dialog/emeMaterialsDetails.vue

@@ -0,0 +1,144 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="仓库名称：" prop="houseName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入仓库名称"
+          v-model="form.houseName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="管理员：" prop="nameId">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入管理员"
+          v-model="form.nameId"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式：" prop="telephone">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入联系电话"
+          v-model="form.telephone"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属地区：" prop="areaCode">
+        <el-cascader
+          v-model="form.areaCode"
+          placeholder="请选择所属地区"
+          @change="handleAreaChange"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="经度：" prop="lon">
+        <el-input
+          :readonly="true"
+          placeholder="请输入经度"
+          v-model="form.lon"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="纬度：" prop="lat">
+        <el-input
+          :readonly="true"
+          placeholder="请输入维度"
+          v-model="form.lat"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属单位：" prop="possession">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入所属单位"
+          v-model="form.possession"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="地址：" prop="address">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入详细地址"
+          v-model="form.address"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/data-statistics/right-side/dialog/emeRanksDetails.vue

@@ -0,0 +1,137 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="队伍名称" prop="teamname">
+        <el-input :readonly="!readonly" v-model="form.teamname"></el-input>
+      </el-form-item>
+      <el-form-item label="所属区域" prop="orgcode">
+        <el-cascader
+          ref="cascader"
+          v-model="form.orgcode"
+          placeholder="请选择地区"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          @change="orgcodechange"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="负责人">
+        <el-input :readonly="!readonly" v-model="form.principal"></el-input>
+      </el-form-item>
+      <el-form-item label="负责人电话">
+        <el-input :readonly="!readonly" v-model="form.principaltel"></el-input>
+      </el-form-item>
+      <el-form-item label="经度" prop="lon">
+        <el-input
+          placeholder="请输入"
+          :readonly="!readonly"
+          type="input"
+          v-model="form.lon"
+        />
+      </el-form-item>
+      <el-form-item label="纬度" prop="lat">
+        <el-input
+          placeholder="请输入"
+          :readonly="!readonly"
+          type="input"
+          v-model="form.lat"
+        />
+      </el-form-item>
+      <el-form-item label="人数" prop="personnum">
+        <el-input
+          type="number"
+          min="0"
+          :readonly="!readonly"
+          v-model="form.personnum"
+          onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="队伍简介" style="width: 94%">
+        <el-input
+          :readonly="!readonly"
+          type="textarea"
+          rows="8"
+          v-model="form.introduction"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/data-statistics/right-side/dialog/emeSystemDetails.vue

@@ -0,0 +1,115 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="姓名：" prop="chinaname">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入姓名"
+          v-model="form.chinaname"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="部门名称：" prop="unitName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入部门名称"
+          v-model="form.unitName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="职务名：" prop="performName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入职务名"
+          v-model="form.performName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式：" prop="mobiletel">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入联系方式"
+          v-model="form.mobiletel"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入角色名称"
+          v-model="form.roleName"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/data-statistics/right-side/dialog/riskPoolDetails.vue

@@ -0,0 +1,131 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="风险池详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <!-- readonly
+        ? '公开内容详情'
+        : props.form.publicContentId
+        ? '编辑公开内容'
+        : '新增公开内容' -->
+    <!-- <div class="detailForm-content"> -->
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="风险名" prop="name">
+        <el-input placeholder="请输入风险名" type="input" v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="风险类型" prop="typeId">
+        <el-select v-model="form.typeId" clearable placeholder="请选择风险类型">
+          <el-option
+            v-for="item in types"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="address">
+        <el-input placeholder="请输入" type="input" v-model="form.address" />
+      </el-form-item>
+      <el-form-item prop="areaCode" label="所属区域">
+        <el-cascader
+          ref="cascader"
+          v-model="form.areaCode"
+          placeholder="请选择地区"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="经度" prop="lon">
+        <el-input placeholder="请输入" type="input" v-model="form.lon" />
+      </el-form-item>
+      <el-form-item label="纬度" prop="lat">
+        <el-input placeholder="请输入" type="input" v-model="form.lat" />
+      </el-form-item>
+      <el-form-item label="风险描述" prop="poolDesc" style="width: 94%">
+        <el-input
+          placeholder="请输入风险描述"
+          :rows="4"
+          type="textarea"
+          v-model="form.poolDesc"
+      /></el-form-item>
+    </el-form>
+    <!-- </div> -->
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/data-statistics/right-side/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-side">
-    <!-- 工作考核 -->
-    <Portrait></Portrait>
+    <!-- 晴雨台 -->
+    <Weather></Weather>
     <!-- 预警分析 -->
     <EarlyWarning></EarlyWarning>
     <!-- 应急指挥 -->
@@ -12,12 +12,13 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Portrait, EarlyWarning, Command },
+  components: { Weather, EarlyWarning, Command },
   name: "RightSide",
 });
-import Portrait from "./components/portrait.vue";
+
 import EarlyWarning from "./components/early-warning.vue";
 import Command from "./components/command.vue";
+import Weather from "./components/weather.vue";
 </script>
 
 <script lang='ts' setup>

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

@@ -1,12 +1,12 @@
 <!-- 基本信息统计 -->
 <template>
   <div class="side-bg">
-    <TitleC title="基本信息统计" :swshow="false"></TitleC>
+    <TitleC title="数据库" :swshow="false"></TitleC>
     <div class="con_box conBox">
       <div class="chart-wrapper">
         <div class="container" ref="populationtenementRef"></div>
         <div>
-          <div>6980</div>
+          <div>{{ population }}</div>
           <div></div>
           <div>人口总数</div>
         </div>
@@ -36,34 +36,18 @@ export default defineComponent({
 </script>
 <script setup lang='ts'>
 import * as echarts from "echarts";
+import { personnelTypeStatistic } from "@/api/homePage";
+import { color } from "@/utils/color";
 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 populationList = ref([]);
+const population = ref(0);
 const option = {
   tooltip: {
     trigger: "item",
   },
-  // legend: {
-  //   top: "5%",
-  //   left: "center",
-  // },
   series: [
     {
-      color: [
-        // "#D33B33",
-        // "transparent",
-      ],
-      // name: "Access From",
+      color: [],
       type: "pie",
       radius: ["75%", "85%"],
       avoidLabelOverlap: false,
@@ -74,23 +58,14 @@ const option = {
         show: false,
         position: "center",
       },
-      // emphasis: {
-      //   label: {
-      //     show: true,
-      //     fontSize: 40,
-      //     fontWeight: "bold",
-      //   },
-      // },
       labelLine: {
         show: false,
       },
-      data: [
-        // { value: 1048, name: "" },
-      ],
+      data: [],
     },
   ],
 };
-const getData = () => {
+const setData = () => {
   let state = false;
   for (let index = 0; index < populationList.value.length; index++) {
     let data = [
@@ -99,7 +74,7 @@ const getData = () => {
         name: populationList.value[index].lable,
       },
       {
-        value: "10",
+        value: "0",
         name: "",
       },
     ];
@@ -110,8 +85,21 @@ const getData = () => {
   const airTenementChart = echarts.init(populationtenementRef.value);
   airTenementChart.setOption(option);
 };
+const getPersonnelTypeStatistic = () => {
+  personnelTypeStatistic().then((res: any) => {
+    res.data[0].typeList.forEach((item) => {
+      populationList.value.push({
+        lable: item.typeName,
+        value: item.typeNum,
+        color: color(),
+      });
+      population.value += item.typeNum;
+    });
+    setData();
+  });
+};
 onMounted(() => {
-  getData();
+  getPersonnelTypeStatistic();
 });
 </script>
 
@@ -178,9 +166,19 @@ onMounted(() => {
 .con_option {
   width: 400px;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   flex-wrap: wrap;
   padding: 10px 0px;
+
+  overflow: hidden;
+  max-height: 200px;
+  overflow-y: scroll;
+  > .con_option_term {
+    margin-right: 10px;
+  }
+}
+.con_option::-webkit-scrollbar {
+  display: none;
 }
 .con_option_term {
   display: flex;
@@ -206,6 +204,7 @@ onMounted(() => {
     margin-right: 5px;
   }
   > div:nth-child(4) {
+    width: 50px;
     font-size: 14px;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 500;

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

@@ -1,20 +1,22 @@
-<!-- 工作考核 -->
+<!-- 精准画像 -->
 <template>
   <div class="side-bg">
-    <TitleC title="工作考核"></TitleC>
+    <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 class="module_top_title_con">
+        <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>
       </div>
     </TitleD>
     <div class="portrait_con conBox">
@@ -26,11 +28,26 @@
         <div>
           <div>
             <span>{{ index + 1 }}</span>
-            <span>{{ item.label }}</span>
+            <span v-if="labelId == 1" @click="toBackgroundManage()"
+              >{{ item.chinaName }}-{{ item.postName }}</span
+            >
+            <span v-if="labelId == 2">{{ item.orgName }}</span>
+            <span v-if="labelId == 3"
+              >{{ item.chinaName }}-{{ item.postName }}</span
+            >
+          </div>
+          <div>
+            <span>{{ item.percentage }}</span>
+            <span>{{ item.completedNum }}/{{ item.totalNum }}</span>
           </div>
-          <div>{{ item.value }}/50</div>
         </div>
-        <div><el-slider disabled v-model="item.value" max="50" /></div>
+        <div>
+          <el-slider
+            disabled
+            v-model="item.completedNum"
+            :max="item.totalNum"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -43,23 +60,51 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
+import { workPerformProgress } from "@/api/homePage";
+const labelId = ref(1);
 const label = ref([
-  { title: "各干部", check: true, id: 0 },
-  { title: "村(社区)", check: false, id: 1 },
+  { title: "政府人员", check: true, id: 1 },
+  { title: "村(社区)干部", check: false, id: 2 },
+  { title: "党员", check: false, id: 3 },
 ]);
 const clickMenuOption = (id: any) => {
+  labelId.value = id;
   label.value.forEach((item) => {
     item.check = false;
+    if (item.id == id) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
+  getWorkPerformProgress();
 };
-const portraitList = ref([
-  { label: "某某人-职位", value: 48 },
-  { label: "某某人-职位", value: 40 },
-  { label: "某某人-职位", value: 38 },
-  { label: "某某人-职位", value: 18 },
-  { label: "某某人-职位", value: 48 },
-]);
+const portraitList = ref([]);
+//获取应急队伍list
+const getWorkPerformProgress = () => {
+  let params = {
+    sysYear: null,
+    typeId: labelId.value,
+  };
+  workPerformProgress(params).then((res: any) => {
+    portraitList.value = res.data;
+    portraitList.value.forEach((item) => {
+      item.percentage =
+        Math.round((item.completedNum / item.totalNum).toFixed(2) * 10000) /
+          100.0 +
+        "%";
+    });
+  });
+};
+//跳转后台
+const toBackgroundManage = () => {
+  window.open(
+    "https://dfxs.sczysoft.com/#/system/base/servicerating",
+    "_blank"
+  );
+};
+
+onMounted(() => {
+  getWorkPerformProgress();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -105,6 +150,10 @@ const portraitList = ref([
       font-family: Furore, Furore;
       font-weight: normal;
       color: #ffffff;
+      > span {
+        display: inline-block;
+        width: 60px;
+      }
     }
   }
   > div:nth-child(2) {

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

@@ -1,81 +1,139 @@
-<!-- 工作开展情况 -->
+<!-- 工作动态 -->
 <template>
-  <div class="side-bg">
-    <TitleC title="工作开展情况"></TitleC>
+  <div class="side-bg body_body">
+    <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 class="module_top_title_con">
+        <div
+          class="module_top_title"
+          v-for="(item, index) in label"
+          :key="index"
+          @click="clickMenuOption(item.typeId)"
+          :class="
+            item.check == true
+              ? 'module_menu_selected'
+              : 'module_menu_notSelected'
+          "
+        >
+          {{ item.typeName }}
+        </div>
       </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 class="_1">
+      <div
+        v-if="tableData.length != 0"
+        class="block text-center"
+        style="height: 300px"
+      >
+        <el-carousel height="156px" indicator-position="none">
+          <el-carousel-item
+            v-for="item in tableData"
+            :key="item"
+            style="height: 156px"
+          >
+            <img
+              class="trends_img"
+              :src="baseImgUrl + item.filePath"
+              alt=""
+              srcset=""
+            />
+            <div class="trends_title">{{ item.title }}</div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div v-else class="block_1" style="height: 300px">
+        <img src="@/assets/images/home-page/left/none.png" alt="" srcset="" />
       </div>
     </div>
+    <!-- 工作开展情况详情 -->
+    <WorkSituationDetails
+      :visible="dialogVisible"
+      :form="form"
+      :readonly="readonly"
+      @close="onclone"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  onBeforeMount,
+  ref,
+  watchEffect,
+} from "vue";
+import WorkSituationDetails from "../dialog/workSituationDetails.vue";
 export default defineComponent({
   name: "WorkSituation",
 });
 </script>
 <script setup lang='ts'>
+import { wkTypes, workProgress } from "@/api/homePage";
+//文件显示
+const baseImgUrl = ref(import.meta.env.VITE_UPLOAD_URL);
 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) => {
+const label = ref([]);
+//列表
+const tableData = ref([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const dataList = ref<any>([]);
+const labelTypeId = ref("");
+const clickMenuOption = (typeId: any) => {
+  labelTypeId.value = typeId;
+  currentPage.value = 1;
+  dataList.value = [];
   label.value.forEach((item) => {
     item.check = false;
+    if (item.typeId == typeId) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
+  getWorkProgress(labelTypeId.value);
 };
+
+const getWkTypes = () => {
+  let params = {
+    classify: 2,
+  };
+  wkTypes(params).then((res: any) => {
+    label.value = res.data;
+    label.value.forEach((item) => {
+      item.check = false;
+    });
+    label.value[0].check = true;
+
+    getWorkProgress(label.value[0].typeId);
+  });
+};
+const getWorkProgress = (typeId: any) => {
+  let params = {
+    typeId: typeId,
+  };
+  workProgress(params).then((res: any) => {
+    console.log(res, "res===>");
+    console.log(111111111);
+
+    tableData.value = res.data;
+    total.value = res.data.total;
+  });
+};
+//弹窗 应急队伍
+const dialogVisible = ref(false);
+const form = ref({});
+const readonly = ref(false);
+//关闭应急队伍
+const onclone = () => {
+  dialogVisible.value = false;
+  form.value = {};
+};
+
+onMounted(() => {});
+onBeforeMount(() => {
+  getWkTypes();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -93,10 +151,7 @@ const clickMenuOption = (id: any) => {
   height: 244px;
   padding: 12px 8px;
   overflow-y: scroll;
-  > div:not(:nth-child(1)) {
-    // margin-top: ;
-  }
-  > div {
+  .tabsOne {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -115,11 +170,20 @@ const clickMenuOption = (id: any) => {
       font-weight: 400;
       color: #ff7734;
     }
-    > img {
-      width: 70px;
-      height: 48px;
+    > div:nth-child(2) {
+      width: 100px;
+      height: 100%;
+      background-color: rgba(72, 77, 86, 0.6);
+      font-size: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      > div {
+        color: #ffe7cd;
+      }
     }
-    > div:nth-of-type(2) {
+    > div:nth-of-type(3) {
       width: 408px;
       height: 48px;
       font-size: 12px;
@@ -136,10 +200,97 @@ const clickMenuOption = (id: any) => {
       -webkit-box-orient: vertical;
     }
   }
+  .tabsTwo {
+  }
 }
 .work_con::-webkit-scrollbar {
   display: none;
 }
+//下滑加载
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.infinite-list .infinite-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: var(--el-color-primary-light-9);
+  margin: 10px;
+  color: var(--el-color-primary);
+}
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
+.infinite-list::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none !important;
+}
+.module_top_title_con {
+  overflow: hidden;
+  max-height: 70px;
+  overflow-y: scroll;
+}
+.module_top_title_con::-webkit-scrollbar {
+  display: none;
+}
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.body_body {
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  border-radius: 0 0 10px 10px;
+}
+._1 {
+  padding: 20px;
+  height: 200px;
+}
+.carousel-item {
+  color: #475669;
+  opacity: 0.75;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  text-align: center;
+  height: 100%;
+}
+
+.trends_img {
+  width: 100%;
+  height: 100%;
+}
+.trends_title {
+  width: 100%;
+  height: 32px;
+  background: #000000a2;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  color: #d0deee;
+  line-height: 32px;
+}
+.block_1 {
+  display: flex;
+  justify-content: center;
+  > img {
+    width: 200px;
+    height: 100px;
+  }
+}
 </style>
 <style>
 .work_tip {

src/views/home-page/left-side/dialog/workSituationDetails.vue

@@ -0,0 +1,227 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="工作动态"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="动态标题" prop="title">
+        <el-input :readonly="!readonly" v-model="form.title"></el-input>
+      </el-form-item>
+      <el-form-item label="动态内容" prop="detail" style="width: 94%">
+        <el-input
+          :readonly="!readonly"
+          type="textarea"
+          rows="8"
+          v-model="form.detail"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="工作附件：" style="width: 100%">
+        <el-upload
+          class="avatar-uploader"
+          ref="uploadAfter"
+          action="#"
+          list-type="upload-demo"
+          :file-list="afterList"
+          :http-request="handleUploadAfter"
+        >
+          <el-icon class="avatar-uploader-icon" :size="40">
+            <Plus />
+          </el-icon>
+          <template #file="{ file }">
+            <div>
+              <span
+                class="el-upload-list__item-actions"
+                @click="handleDownload(file)"
+              >
+                <span class="el-upload-list__item-preview">
+                  <el-icon> </el-icon>
+                  <span>{{ file.realfilename }}</span>
+                </span>
+                <!-- <span
+                  class="el-upload-list__item-preview"
+                  @click="handleDownload(file)"
+                >
+                  <el-icon>
+                    <Download />
+                  </el-icon>
+                </span> -->
+              </span>
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+import { uploadFile, getFile, delFile } from "@/api/file";
+import { FileType } from "@/utils/common";
+import type { UploadUserFile } from "element-plus";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+// 文件上传
+const afterList = ref<UploadUserFile[]>([]);
+const handleUploadAfter = (file: any) => {
+  // if (afterList.value.length != 0) {
+  //   ElMessage.error("只能上传一份文件！");
+  //   getCheckDangers(form.value.dynamicsId || uuid.value);
+  // } else {
+  // }
+  const newFile = new FormData();
+  newFile.append("file", file.file);
+  uploadFile(
+    userId.value,
+    form.value.dynamicsId || uuid.value,
+    FileType.resumptionAcs,
+    newFile
+  ).then((res) => {
+    if (res) {
+      ElMessage.success("上传成功！");
+      getCheckDangers(form.value.dynamicsId || uuid.value);
+    }
+  });
+};
+//文件显示
+const baseImgUrl = ref(import.meta.env.VITE_UPLOAD_URL);
+const getCheckDangers = (id) => {
+  getFile(id, FileType.resumptionAcs).then((res: any) => {
+    afterList.value = res.data.map((item) => {
+      let arr = item;
+      let index = item.filepath.indexOf("."); //获取第一个"_"的位置
+      let after1 = item.filepath.substring(index + 1);
+      switch (after1) {
+        case "xlsx":
+          arr.url = "src/assets/images/exl.png";
+          break;
+        case "exl":
+          arr.url = "src/assets/images/exl.png";
+          break;
+        case "pdf":
+          arr.url = "src/assets/images/pdf.png";
+          break;
+        case "word":
+          arr.url = "src/assets/images/word.png";
+          break;
+        default:
+          arr.url = baseImgUrl.value + item.filepath;
+          break;
+      }
+      return arr;
+    });
+  });
+};
+//下载附件
+const handleDownload = (file) => {
+  function text() {
+    const x = new XMLHttpRequest();
+    x.open("GET", baseImgUrl.value + file.filepath, true);
+    x.responseType = "blob";
+    x.onload = function () {
+      const url = window.URL.createObjectURL(x.response);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = file.name;
+      a.click();
+    };
+    x.send();
+  }
+  let index = file.filepath.indexOf("."); //获取第一个"_"的位置
+  let after1 = file.filepath.substring(index + 1);
+  switch (after1) {
+    case "xlsx":
+      text();
+      break;
+    case "exl":
+      text();
+      break;
+    case "pdf":
+      text();
+      break;
+    case "word":
+      text();
+      break;
+    default:
+      window.open(baseImgUrl.value + file.filepath, "_blank");
+      break;
+  }
+};
+const upVisible = ref(false);
+const upImageUrl = ref("");
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+    console.log(form.value, "form.value===>");
+    getCheckDangers(form.value.dynamicsId);
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-upload--upload-demo) {
+  display: none;
+}
+.el-upload-list__item-actions {
+  background: #fff;
+  padding: 0px 20px;
+  border-radius: 5px;
+}
+</style>

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

@@ -1,26 +1,26 @@
 <template>
   <div class="left-side">
-    <!-- 晴雨台 -->
-    <Weather></Weather>
     <!-- 基本信息统计 -->
     <BasicInformation></BasicInformation>
     <!-- 工作开展情况 -->
     <WorkSituation></WorkSituation>
+    <!-- 工作考核 -->
+    <Portrait></Portrait>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Weather, BasicInformation, WorkSituation },
+  components: { BasicInformation, WorkSituation, Portrait },
   name: "LeftSide",
 });
 </script>
 
 <script lang='ts' setup>
 import BasicInformation from "./components/basicInformation.vue";
-import Weather from "./components/weather.vue";
 import WorkSituation from "./components/workSituation.vue";
+import Portrait from "./components/portrait.vue";
 </script>
 
 <style lang="scss" scoped>

src/views/home-page/right-side/components/command.vue

@@ -1,68 +1,231 @@
 <!-- 应急指挥 -->
 <template>
-  <div class="side-bg">
+  <div class="side-bg zhihui">
     <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 class="module_top_title_con">
+        <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>
       </div>
     </TitleD>
-    <div class="command_data conBox">
+    <div class="command_data conBox body_body">
       <div class="command_search">
         <div>
           <el-input
             size="small"
-            v-model="commandSearch"
+            v-model="search"
             placeholder="请输入..."
+            @change="getList()"
             clearable
           />
         </div>
-        <span>搜索</span>
+        <span @click="getList()">搜索</span>
+        <span class="flowChart" @click="goFlowChart()">指挥体系</span>
       </div>
-      <el-table :data="tableData" height="150" style="width: 100%">
+      <!-- 应急队伍 -->
+      <el-table
+        v-if="type == 0"
+        :data="tableData"
+        max-height="180"
+        style="width: 100%"
+        show-overflow-tooltip
+      >
         <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"
+          prop="principal"
           label="联系人"
           align="center"
           width="70"
         />
         <el-table-column
-          prop="phone"
+          prop="principaltel"
           label="值班电话"
           align="center"
           width="110"
         />
+        <el-table-column
+          prop="areaName"
+          label="所属镇/村(社区)"
+          align="center"
+        />
+        <el-table-column
+          prop="personnum"
+          label="应急队伍人数"
+          align="center"
+          width="110"
+        />
         <el-table-column label="操作" align="center" width="60">
           <template #default="scope">
-            <span @click="clickDetails">
+            <span
+              @click="
+                (dialogVisible = true), (form = scope.row), (readonly = true)
+              "
+            >
               <span class="pointer details">详情</span>
             </span>
           </template>
         </el-table-column>
       </el-table>
+      <!-- 应急物资 -->
+      <el-table
+        v-if="type == 1"
+        :data="tableData"
+        max-height="180"
+        style="width: 100%"
+        show-overflow-tooltip
+      >
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column
+          prop="houseName"
+          label="仓库名称"
+          align="center"
+          width="110"
+        />
+        <el-table-column prop="areaName" label="地址" align="center" />
+        <el-table-column
+          prop="nameId"
+          label="管理员"
+          align="center"
+          width="100"
+        />
+        <el-table-column
+          prop="telephone"
+          label="联系方式"
+          align="center"
+          width="110"
+        />
+        <el-table-column label="操作" align="center" width="60">
+          <template #default="scope">
+            <span
+              @click="
+                (emeMaterialsdialogVisible = true),
+                  (emeMaterialsForm = scope.row),
+                  (emeMaterialsReadonly = true)
+              "
+            >
+              <span class="pointer details">详情</span>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 应急体系 -->
+      <el-table
+        v-if="type == 2"
+        :data="tableData"
+        max-height="180"
+        style="width: 100%"
+        show-overflow-tooltip
+      >
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column prop="unitName" label="部门名称" align="center" />
+        <el-table-column prop="performName" label="职务名" align="center" />
+        <el-table-column prop="chinaname" label="姓名" align="center" />
+        <el-table-column prop="mobiletel" label="联系方式" align="center" />
+        <el-table-column label="操作" align="center" width="60">
+          <template #default="scope">
+            <span
+              @click="
+                (emeSystemDetailsDialogVisible = true),
+                  (emeSystemDetailsForm = scope.row),
+                  (emeSystemDetailsReadonly = true)
+              "
+            >
+              <span class="pointer details">详情</span>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 应急事件 -->
+      <el-table
+        v-if="type == 3"
+        :data="tableData"
+        max-height="180"
+        style="width: 100%"
+        show-overflow-tooltip
+      >
+        <el-table-column type="index" label="序号" align="center" width="60" />
+        <el-table-column prop="title" label="标题" align="center" width="110" />
+        <el-table-column prop="content" label="内容" align="center" />
+        <el-table-column
+          prop="emerTypeName"
+          label="类型"
+          align="center"
+          width="100"
+        />
+        <el-table-column
+          prop="createTimeString"
+          label="上报时间"
+          align="center"
+          width="100"
+        />
+        <el-table-column label="操作" align="center" width="60">
+          <template #default="scope">
+            <span
+              @click="
+                (emeEventDetalisDialogVisible = true),
+                  (emeEventDetalisForm = scope.row),
+                  (emeEventDetalisReadonly = true)
+              "
+            >
+              <span class="pointer details">详情</span>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination
+        class="pagination"
+        @size-change="getList"
+        @current-change="getList"
+        v-model:current-page.sync="currentPage"
+        v-model:page-size.sync="pageSize"
+        :page-sizes="[10, 15, 20, 30]"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        background
+        small
+      >
+      </el-pagination>
     </div>
+    <!-- 应急队伍 -->
+    <EmeRanksDetails
+      :visible="dialogVisible"
+      :form="form"
+      :readonly="readonly"
+      @close="onclone"
+    />
+    <!-- 应急物资 -->
+    <EmeMaterialsDetails
+      :visible="emeMaterialsdialogVisible"
+      :form="emeMaterialsForm"
+      :readonly="emeMaterialsReadonly"
+      @close="emeMaterialsOnclone"
+    />
+    <!-- 应急体系 -->
+    <EmeSystemDetails
+      :visible="emeSystemDetailsDialogVisible"
+      :form="emeSystemDetailsForm"
+      :readonly="emeSystemDetailsReadonly"
+      @close="emeSystemDetailsOnclone"
+    />
+    <!-- 应急事件 -->
+    <EmeEventDetalis
+      :visible="emeEventDetalisDialogVisible"
+      :form="emeEventDetalisForm"
+      :readonly="emeEventDetalisReadonly"
+      @close="emeEventDetalisOnclone"
+    />
   </div>
 </template>
 
@@ -73,65 +236,154 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
+import {
+  othteamPage,
+  otheWareHousePage,
+  performUserPage,
+  emerEventPage,
+  dutyList,
+} from "@/api/homePage";
+import EmeRanksDetails from "../dialog/emeRanksDetails.vue";
+import EmeMaterialsDetails from "../dialog/emeMaterialsDetails.vue";
+import EmeSystemDetails from "../dialog/emeSystemDetails.vue";
+import EmeEventDetalis from "../dialog/emeEventDetalis.vue";
+
+//列表
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const search = ref("");
+//弹窗 应急队伍
+const dialogVisible = ref(false);
+const form = ref({});
+const readonly = ref(false);
+//关闭应急队伍
+const onclone = () => {
+  dialogVisible.value = false;
+  form.value = {};
+};
+//  弹窗应急物资
+const emeMaterialsdialogVisible = ref(false);
+const emeMaterialsForm = ref({});
+const emeMaterialsReadonly = ref(false);
+//关闭应急物资
+const emeMaterialsOnclone = () => {
+  emeMaterialsdialogVisible.value = false;
+  emeMaterialsForm.value = {};
+};
+//  弹窗应急体系
+const emeSystemDetailsDialogVisible = ref(false);
+const emeSystemDetailsForm = ref({});
+const emeSystemDetailsReadonly = ref(false);
+//关闭应急体系
+const emeSystemDetailsOnclone = () => {
+  emeSystemDetailsDialogVisible.value = false;
+  emeSystemDetailsForm.value = {};
+};
+//  弹窗应急事件
+const emeEventDetalisDialogVisible = ref(false);
+const emeEventDetalisForm = ref({});
+const emeEventDetalisReadonly = ref(false);
+//关闭应急事件
+const emeEventDetalisOnclone = () => {
+  emeEventDetalisDialogVisible.value = false;
+  emeEventDetalisForm.value = {};
+};
+
+//选项列表
 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 },
+  { title: "应急事件", check: false, id: 3 },
 ]);
+const type = ref(0);
+//头部选项点击事件
 const clickMenuOption = (id: any) => {
   label.value.forEach((item) => {
     item.check = false;
+    if (item.id == id) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
+  type.value = id;
+  getList();
 };
-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 = () => {};
+//匹配接口获取list
+const getList = () => {
+  switch (type.value) {
+    case 0:
+      getOthteamPage();
+      break;
+    case 1:
+      getOtheWareHousePage();
+      break;
+    case 2:
+      getPerformUserPage();
+      break;
+    case 3:
+      getEmerEventPage();
+      break;
+    default:
+      break;
+  }
+};
+//获取应急队伍list
+const getOthteamPage = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    teamname: search.value,
+  };
+  othteamPage(params).then((res: any) => {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
+};
+//获取应急物资list
+const getOtheWareHousePage = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    houseName: search.value,
+  };
+  otheWareHousePage(params).then((res: any) => {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
+};
+//获取应急体系list
+const getPerformUserPage = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    condition: search.value,
+  };
+  performUserPage(params).then((res: any) => {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
+};
+//获取应急事件list
+const getEmerEventPage = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    condition: search.value,
+  };
+  emerEventPage(params).then((res: any) => {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
+};
+//跳转管理端流程图
+const goFlowChart = () => {
+  window.open("https://dfxs.sczysoft.com/#/emer/address", "_blank");
+};
+onMounted(() => {
+  getOthteamPage();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -145,7 +397,8 @@ const clickDetails = () => {};
 //   -webkit-line-clamp: 2;
 // }
 .command_data {
-  height: 195px;
+  // height: 195px;
+  // height: 250px;
   background-color: rgba(0, 61, 123, 0) !important;
 }
 .command_search {
@@ -176,9 +429,14 @@ const clickDetails = () => {};
     margin-left: 2px;
   }
 }
-::v-deep .el-input--small .el-input__wrapper {
-  box-shadow: none;
-  border: 1px solid rgba(108, 128, 151, 1) !important;
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.body_body {
+  background-color: rgba(0, 61, 123, 0.353) !important;
+}
+.flowChart {
+  width: 80px !important;
 }
 </style>
 <style>

src/views/home-page/right-side/components/riskPool.vue

@@ -1,61 +1,110 @@
 <!-- 风险池 -->
 <template>
-  <div class="side-bg">
+  <div class="side-bg body_body">
     <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 class="module_top_title_con">
+        <div
+          class="module_top_title"
+          v-for="(item, index) in label"
+          :key="index"
+          @click="clickMenuOption(item.typeId)"
+          :class="
+            item.check == true
+              ? 'module_menu_selected'
+              : 'module_menu_notSelected'
+          "
+        >
+          {{ item.typeName }}
+        </div>
       </div>
     </TitleD>
-    <el-table :data="tableData" height="180" style="width: 100%">
+    <el-table
+      :data="tableData"
+      max-height="180"
+      style="width: 100%"
+      show-overflow-tooltip
+    >
       <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">
+      <el-table-column
+        prop="typeName"
+        label="预警类型"
+        align="center"
+        width="80"
+      />
+      <el-table-column prop="poolDesc" label="预警信息" align="center">
         <template #default="scope">
-          <el-tooltip
+          <!-- <el-tooltip
             class="box-item"
             effect="dark"
-            :content="scope.row.info"
+            :content="scope.row.poolDesc"
             placement="top-start"
             popper-class="riskPool_tip"
-          >
-            <span>{{ scope.row.info }}</span>
-          </el-tooltip>
+          > -->
+          <span>{{ scope.row.poolDesc }}</span>
+          <!-- </el-tooltip> -->
         </template>
       </el-table-column>
-      <el-table-column prop="time" label="预警时间" align="center" width="140">
+      <el-table-column prop="nextTime" label="预警时间" align="center">
         <template #default="scope">
-          <span class="time">{{ scope.row.time }}</span>
+          <span class="time">{{ scope.row.nextTime }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        prop="recipient"
-        label="接收人"
+        prop="checkUser"
+        label="检查人"
         align="center"
         width="70"
       >
         <template #default="scope">
-          <span class="time">{{ scope.row.recipient }}</span>
+          <span class="time">{{ scope.row.checkUser }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="isTimeout"
+        label="是否检查"
+        align="center"
+        width="100"
+      >
+        <template #default="scope">
+          <span class="time">{{
+            scope.row.isTimeout == true ? "是" : "否"
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="60">
         <template #default="scope">
-          <span @click="clickDetails">
+          <span
+            @click="
+              (dialogVisible = true), (form = scope.row), (readonly = true)
+            "
+          >
             <span class="pointer details">详情</span>
           </span>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="pagination"
+      @size-change="getList"
+      @current-change="getList"
+      v-model:current-page.sync="currentPage"
+      v-model:page-size.sync="pageSize"
+      :page-sizes="[10, 15, 20, 30]"
+      layout="total, prev, pager, next, jumper"
+      :total="total"
+      background
+      small
+    >
+    </el-pagination>
+    <!-- <Events :visible="dialogVisible"></Events> -->
+    <RiskPoolDetails
+      :visible="dialogVisible"
+      :form="form"
+      :readonly="readonly"
+      @close="onclone"
+    />
   </div>
 </template>
 
@@ -66,44 +115,63 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
-const label = ref([
-  { title: "防火", check: true, id: 0 },
-  { title: "防汛", check: false, id: 1 },
-  { title: "治安", check: false, id: 2 },
-]);
+import { riskTypeList, riskPoolPage } from "@/api/homePage";
+import RiskPoolDetails from "../dialog/riskPoolDetails.vue";
+// 列表
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+//弹窗
+const dialogVisible = ref(false);
+const form = ref({});
+const readonly = ref(false);
+//关闭新增弹窗
+const onclone = () => {
+  dialogVisible.value = false;
+  form.value = {};
+};
+//选项列表
+const label = ref([]);
+const typeId = ref("");
+//获取头部选项列表
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    label.value = res.data;
+    label.value.forEach((item) => {
+      item.check = false;
+    });
+    label.value[0].check = true;
+    typeId.value = label.value[0].typeId;
+    getRiskPoolPage();
+  });
+};
+//头部选项点击事件
 const clickMenuOption = (id: any) => {
   label.value.forEach((item) => {
     item.check = false;
+    if (item.typeId == id) {
+      item.check = true;
+    }
   });
-  label.value[id].check = true;
+  typeId.value = id;
+  getRiskPoolPage();
 };
-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 = () => {};
+const getRiskPoolPage = () => {
+  let params = {
+    limit: pageSize.value,
+    page: currentPage.value,
+    userId: "",
+    typeId: typeId.value,
+  };
+  riskPoolPage(params).then((res: any) => {
+    tableData.value = res.data.list;
+    total.value = res.data.total;
+  });
+};
+onMounted(() => {
+  getRiskTypeList();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -113,6 +181,21 @@ const clickDetails = () => {};
   font-weight: 400;
   color: #159aff;
 }
+::v-deep .el-input__inner {
+  color: white !important;
+}
+.module_top_title_con {
+  overflow: hidden;
+  max-height: 70px;
+  overflow-y: scroll;
+}
+.module_top_title_con::-webkit-scrollbar {
+  display: none;
+}
+.body_body {
+  background-color: rgba(0, 61, 123, 0.353) !important;
+  border-radius: 0 0 10px 10px;
+}
 </style>
 <style>
 .riskPool_tip {

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

@@ -70,10 +70,14 @@
           </div>
         </div>
       </div>
-      <TitleD width="100">
+      <!-- <TitleD width="100">
         <div class="weather_data_title">气象预警信息</div>
       </TitleD>
-      <el-table :data="tableData" height="180" style="width: 100%">
+      <el-table
+        :data="tableData"
+        height="180"
+        style="width: 100%; border-radius: 0 0 10px 10px"
+      >
         <el-table-column type="index" label="序号" align="center" width="60" />
         <el-table-column
           prop="type"
@@ -94,7 +98,6 @@
             </el-tooltip>
           </template>
         </el-table-column>
-        <!-- show-overflow-tooltip -->
         <el-table-column
           prop="time"
           label="预警时间"
@@ -112,7 +115,7 @@
             </span>
           </template>
         </el-table-column>
-      </el-table>
+      </el-table> -->
     </div>
   </div>
 </template>

src/views/home-page/right-side/dialog/emeEventDetalis.vue

@@ -0,0 +1,110 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="	标题：" prop="title">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入标题"
+          v-model="form.title"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="事件类型：" prop="emerTypeId">
+        <el-select v-model="form.emerTypeId" clearable placeholder="请选择">
+          <el-option
+            v-for="item in option"
+            :key="item.emerTypeId"
+            :label="item.emerTypeName"
+            :value="item.emerTypeId"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间：" prop="createTimeString">
+        <el-date-picker
+          v-model="form.createTimeString"
+          type="date"
+          placeholder="请选择时间"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+        />
+      </el-form-item>
+      <el-form-item label="内容：" prop="content" style="width: 94%">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入内容"
+          type="textarea"
+          :rows="4"
+          v-model="form.content"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { emerEventType } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+const option = ref([]);
+
+// 查询所有应急上报事件类型
+const getEmerEventType = () => {
+  emerEventType().then((res: any) => {
+    option.value = res.data;
+  });
+};
+onMounted(() => {
+  getEmerEventType();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/home-page/right-side/dialog/emeMaterialsDetails.vue

@@ -0,0 +1,144 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="仓库名称：" prop="houseName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入仓库名称"
+          v-model="form.houseName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="管理员：" prop="nameId">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入管理员"
+          v-model="form.nameId"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式：" prop="telephone">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入联系电话"
+          v-model="form.telephone"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属地区：" prop="areaCode">
+        <el-cascader
+          v-model="form.areaCode"
+          placeholder="请选择所属地区"
+          @change="handleAreaChange"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="经度：" prop="lon">
+        <el-input
+          :readonly="true"
+          placeholder="请输入经度"
+          v-model="form.lon"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="纬度：" prop="lat">
+        <el-input
+          :readonly="true"
+          placeholder="请输入维度"
+          v-model="form.lat"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属单位：" prop="possession">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入所属单位"
+          v-model="form.possession"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="地址：" prop="address">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入详细地址"
+          v-model="form.address"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/home-page/right-side/dialog/emeRanksDetails.vue

@@ -0,0 +1,137 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="队伍名称" prop="teamname">
+        <el-input :readonly="!readonly" v-model="form.teamname"></el-input>
+      </el-form-item>
+      <el-form-item label="所属区域" prop="orgcode">
+        <el-cascader
+          ref="cascader"
+          v-model="form.orgcode"
+          placeholder="请选择地区"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          @change="orgcodechange"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="负责人">
+        <el-input :readonly="!readonly" v-model="form.principal"></el-input>
+      </el-form-item>
+      <el-form-item label="负责人电话">
+        <el-input :readonly="!readonly" v-model="form.principaltel"></el-input>
+      </el-form-item>
+      <el-form-item label="经度" prop="lon">
+        <el-input
+          placeholder="请输入"
+          :readonly="!readonly"
+          type="input"
+          v-model="form.lon"
+        />
+      </el-form-item>
+      <el-form-item label="纬度" prop="lat">
+        <el-input
+          placeholder="请输入"
+          :readonly="!readonly"
+          type="input"
+          v-model="form.lat"
+        />
+      </el-form-item>
+      <el-form-item label="人数" prop="personnum">
+        <el-input
+          type="number"
+          min="0"
+          :readonly="!readonly"
+          v-model="form.personnum"
+          onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="队伍简介" style="width: 94%">
+        <el-input
+          :readonly="!readonly"
+          type="textarea"
+          rows="8"
+          v-model="form.introduction"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/home-page/right-side/dialog/emeSystemDetails.vue

@@ -0,0 +1,115 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="应急队伍详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="姓名：" prop="chinaname">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入姓名"
+          v-model="form.chinaname"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="部门名称：" prop="unitName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入部门名称"
+          v-model="form.unitName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="职务名：" prop="performName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入职务名"
+          v-model="form.performName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式：" prop="mobiletel">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入联系方式"
+          v-model="form.mobiletel"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input
+          :readonly="props.readonly"
+          placeholder="请输入角色名称"
+          v-model="form.roleName"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/home-page/right-side/dialog/riskPoolDetails.vue

@@ -0,0 +1,131 @@
+
+<template>
+  <BaseDialog
+    :dialogVisible="props.visible"
+    @close="onclone"
+    titleName="风险池详情"
+    width="50%"
+    @onSubmit="handleSubmit"
+    :footerclosed="true"
+    :diafooter="true"
+    :footerkeepnaem="props.readonly ? false : true"
+  >
+    <!-- readonly
+        ? '公开内容详情'
+        : props.form.publicContentId
+        ? '编辑公开内容'
+        : '新增公开内容' -->
+    <!-- <div class="detailForm-content"> -->
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="100"
+      :disabled="readonly"
+      :rules="ruleForm"
+      :model="form"
+      class="center-form"
+    >
+      <el-form-item label="风险名" prop="name">
+        <el-input placeholder="请输入风险名" type="input" v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="风险类型" prop="typeId">
+        <el-select v-model="form.typeId" clearable placeholder="请选择风险类型">
+          <el-option
+            v-for="item in types"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="address">
+        <el-input placeholder="请输入" type="input" v-model="form.address" />
+      </el-form-item>
+      <el-form-item prop="areaCode" label="所属区域">
+        <el-cascader
+          ref="cascader"
+          v-model="form.areaCode"
+          placeholder="请选择地区"
+          :options="orgList"
+          :props="{
+            checkStrictly: true,
+            label: 'orgname',
+            value: 'orgcode',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="经度" prop="lon">
+        <el-input placeholder="请输入" type="input" v-model="form.lon" />
+      </el-form-item>
+      <el-form-item label="纬度" prop="lat">
+        <el-input placeholder="请输入" type="input" v-model="form.lat" />
+      </el-form-item>
+      <el-form-item label="风险描述" prop="poolDesc" style="width: 94%">
+        <el-input
+          placeholder="请输入风险描述"
+          :rows="4"
+          type="textarea"
+          v-model="form.poolDesc"
+      /></el-form-item>
+    </el-form>
+    <!-- </div> -->
+  </BaseDialog>
+</template>
+
+<script setup lang="ts" >
+import { reactive, ref, onMounted, watch } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { areaTree, riskTypeList } from "@/api/account";
+const formRef = ref<FormInstance>();
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  form: Object,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  id: String,
+});
+const form = ref<any>({ content: "" });
+const emits = defineEmits(["close", "onSubmit"]);
+const handleSubmit = () => {
+  onclone();
+};
+//关闭弹窗
+const onclone = () => {
+  emits("close");
+};
+//获取地区
+const orgList = ref([]);
+const getareaTree = () => {
+  areaTree().then((res: any) => {
+    orgList.value = res.data;
+  });
+};
+//点位类型
+const types = ref([]);
+const getRiskTypeList = () => {
+  riskTypeList().then((res: any) => {
+    types.value = res.data;
+  });
+};
+onMounted(() => {
+  getareaTree();
+  getRiskTypeList();
+});
+
+watch(
+  () => props.visible,
+  () => {
+    form.value = props.form;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="right-side">
-    <!-- 工作考核 -->
-    <Portrait></Portrait>
+    <!-- 晴雨台 -->
+    <Weather></Weather>
     <!-- 风险池 -->
     <RiskPool></RiskPool>
     <!-- 应急指挥 -->
@@ -12,12 +12,13 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 export default defineComponent({
-  components: { Portrait, RiskPool, Command },
+  components: { Weather, RiskPool, Command },
   name: "RightSide",
 });
-import Portrait from "./components/portrait.vue";
+
 import RiskPool from "./components/riskPool.vue";
 import Command from "./components/command.vue";
+import Weather from "./components/weather.vue";
 </script>
 
 <script lang='ts' setup>
@@ -29,7 +30,8 @@ import Command from "./components/command.vue";
   position: fixed;
   top: $TopHeight;
   right: 1%;
-  bottom: 0;
+  bottom: 20px;
+  width: 25%;
   width: $sideWidth;
   overflow-y: scroll;
 }

src/views/index/index.vue

@@ -11,7 +11,9 @@
       <component :is="rightComponent" />
     </transition>
     <!-- 底部菜单 -->
-    <!-- <BottomMenu></BottomMenu> -->
+    <transition mode="out-in">
+      <component :is="BottomMenu" />
+    </transition>
     <!-- 顶部菜单 -->
     <transition name="fade" mode="out-in">
       <component :is="topComponent" />
@@ -20,7 +22,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+//获取token
+import { useRouter } from "vue-router";
+import { setToken } from "@/utils/auth";
+
+import { userUSerStore } from "@/store/user";
+const user = userUSerStore();
+
+const { currentRoute } = useRouter();
+const route = currentRoute.value;
+let token = route.query.token;
+localStorage.setItem("token", token);
+//获取用户信息
+import { sysUserInfo } from "../../api/account";
+const getSysUserInfo = () => {
+  console.log(localStorage.getItem("token"));
+  sysUserInfo().then((res: any) => {
+    // localStorage.setItem("user_df", JSON.stringify(res.data));
+    user.setUser_df(res.data);
+    localStorage.setItem("user_df", JSON.stringify(res.data));
+  });
+};
+
+import { computed, ref, watch, onMounted, onBeforeMount } from "vue";
 const geoJsonUrl = `${process.env.BASE_URL}json/daofu.json`;
 
 //数据统计
@@ -30,7 +54,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";
 
@@ -42,6 +66,7 @@ const menuType = computed(() => userMenu.getMenuType);
 const leftComponent = ref(HomeLeftSide);
 const rightComponent = ref(HomeRightSide);
 const topComponent = ref(TopMenu);
+const bottomComponent = ref(BottomMenu);
 
 /**
  * 切换菜单视图
@@ -63,7 +88,9 @@ const changeSide = (type: number) => {
       break;
   }
 };
-
+onBeforeMount(() => {
+  getSysUserInfo();
+});
 watch(menuType, (val) => {
   changeSide(val);
 });