From d781bff12abb075ba3f3cdbbe8a4b0be00eb3e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 23 Jul 2024 15:12:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=AD=A6=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NavigationBar/warningCentre.vue           | 575 +++++++++++++++++-
 1 file changed, 572 insertions(+), 3 deletions(-)

diff --git a/src/components/NavigationBar/warningCentre.vue b/src/components/NavigationBar/warningCentre.vue
index d6115ee..dd284c8 100644
--- a/src/components/NavigationBar/warningCentre.vue
+++ b/src/components/NavigationBar/warningCentre.vue
@@ -1,9 +1,578 @@
 <template>
-  <div>预警</div>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
+        <el-option
+          v-for="item in netList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
+        <el-option
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-radio v-model="queryParams.mark" label="">全部</el-radio>
+      <el-radio v-model="queryParams.mark" label="ninety">3个月</el-radio>
+      <el-radio v-model="queryParams.mark" label="eighty">半年</el-radio>
+
+      <el-button type="text" @click="handleSearch()">搜索</el-button>
+      <el-button type="text" @click="handleReset()">重置</el-button>
+      <el-button type="text">导出</el-button>
+
+      <!-- <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group> -->
+    </div>
+    <!-- <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text">导出</el-button>
+      </div>
+    </div> -->
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">搜索结果列表</div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">所属网格</div>
+          <div class="table-cell1">楼幢号</div>
+          <div class="table-cell1">户名称</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell2">证件号</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell1">分色</div>
+          <div class="table-cell1">未更新天数</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.parentname }}</div>
+            <div class="table-cell1">
+              {{ item.deptname }}{{ item.buildingname }}
+            </div>
+            <div class="table-cell1">{{ item.housename }}</div>
+            <div class="table-cell1">
+              {{ item.pname }}
+            </div>
+            <div class="table-cell2">{{ item.credentialNo }}</div>
+            <div class="table-cell1">{{ item.phone }}</div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+            <div class="table-cell1">{{ item.daycount }}天</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import { getWarningList } from "@/api/home/index.js"; //预警
+import { getNetWorkId, inputSearch } from "@/api/home/index.js";
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+export default {
+  dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor"]),
+  },
+  data() {
+    return {
+      input3: "",
+      currentIndex: 0,
+      credentialnoType: 0,
+      tabList: [
+        { name: "身份证", value: 0 },
+        { name: "手机号", value: 1 },
+        { name: "姓名", value: 2 },
+      ],
+      optionList: [
+        { name: "完整身份证号", value: 0 },
+        { name: "省级(前2位)", value: 1 },
+        { name: "市级(前4位)", value: 2 },
+        { name: "县级(前6位)", value: 3 },
+      ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+      radio: "",
+      value: "",
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        // isd: undefined, //党员
+        // isk: undefined, //帮扶
+        // isj: undefined, //退伍
+        // isx: undefined, //重点
+        // credentialno: undefined, //身份证(全)
+        // cre1: undefined, //身份证(2)
+        // cre2: undefined, //身份证(4)
+        // cre3: undefined, //身份证(6)
+        // phone: undefined,
+        // name: undefined,
+        color: undefined,
+        // type: undefined,
+        mark: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
+    };
+  },
+  mounted() {
+    this.getDeptList();
+  },
+  methods: {
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+      this[key] = handleTreeId(e, this.deptList);
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      console.log(this.queryParams.color);
+      //处理四个is
+      // this.isCheck.forEach((item) => {
+      //   let index = this.isList.findIndex((it) => it.name == item);
+      //   if (index > -1) {
+      //     this.queryParams[this.isList[index].key] = 1;
+      //   }
+      // });
+      //三个tab搜索
+      // if (this.currentIndex == 0) {
+      //   if (this.credentialnoType == 0) {
+      //     this.queryParams.credentialno = this.keyWord;
+      //   } else {
+      //     this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+      //   }
+      // }
+      // if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      // if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.queryParams.mark = "";
+      // this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      // this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      let result = await getWarningList(this.queryParams);
+      let handleColor = this.handleColor(result.rows);
+      this.list = [...this.list, ...handleColor];
+      this.total = result.total;
+      this.queryParams.pageNum++;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      list.map((item) => {
+        if (!item.color) {
+          item.leftColor = "#7b75ff";
+          item.rightTopColor = "#7b75ff";
+          return;
+        }
+        for (let key in this.leftColor) {
+          if (item.color == key) {
+            item.leftColor = this.leftColor[key];
+            item.rightTopColor = this.rightTopColor[key];
+          }
+        }
+      });
+      return list;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      // this.queryParams.isd = undefined; //党员
+      // this.queryParams.isk = undefined; //帮扶
+      // this.queryParams.isj = undefined; //退伍
+      // this.queryParams.isx = undefined; //重点
+      // this.queryParams.credentialno = undefined; //身份证(全)
+      // this.queryParams.cre1 = undefined; //身份证(2)
+      // this.queryParams.cre2 = undefined; //身份证(4)
+      // this.queryParams.cre3 = undefined; //身份证(6)
+      // this.queryParams.phone = undefined;
+      // this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.search-container {
+  margin-top: 10px;
+  flex: 1;
+  ::v-deep .option-rows {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #003869;
+    padding: 15px 0;
+    .el-select {
+      margin-right: 10px;
+      width: 150px;
+    }
+    .el-radio-group {
+      margin: 0 30px 0 10px;
+    }
+    .el-checkbox__label,
+    .el-radio__label {
+      font-size: 16px;
+      color: #aabace;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+  }
+  .three-option {
+    margin-top: 15px;
+
+    .option-list {
+      position: relative;
+      top: 2px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      & > div {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        margin-right: 8px;
+        background: #0059a2;
+        border-radius: 4px 4px 0px 0px;
+        font-size: 16px;
+        color: #aee0ff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .option-input {
+      height: 80px;
+      background: #042854;
+      border: 1px solid #006cc5;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      .input-general-width {
+        margin-right: 10px;
+      }
+      .input-big-width {
+        width: 300px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .result-list {
+    margin-top: 15px;
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      .header-left-total {
+        color: #ffa11b;
+        font-weight: 500;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+      .header-rigth-total {
+        color: #aacfff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .list-table {
+      margin-top: 10px;
+      .table-header {
+        padding: 5px 0;
+        font-size: 16px;
+        color: #eff8ff;
+        background: linear-gradient(90deg, #007b9f, #0066d8);
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+      .table-body {
+        height: 350px;
+
+        .body-rows {
+          padding: 7px 0;
+          font-size: 14px;
+          color: #ffffff;
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+        }
+        & > .body-rows:nth-child(even) {
+          background: #033159;
+        }
+      }
+      .table-header,
+      .body-rows {
+        display: flex;
+        align-items: center;
+        & > div {
+          text-align: center;
+        }
+        .table-cell0 {
+          width: 50px;
+        }
+        .table-cell1 {
+          flex: 1;
+        }
+        .table-cell2 {
+          flex: 2;
+        }
+        .cell-flex {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    background-size: 100% 100%;
+    padding: 12px 20px 14px 20px;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+.activeItme {
+  color: #ffffff !important;
+  border: 1px solid #006cc5 !important;
+  border-bottom: 0 !important;
+  background: #042854 !important;
+}
+</style>