From cf22b295bcafb138ea182866bdb36fb4071b0139 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Wed, 20 Nov 2024 14:46:20 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E5=A2=9E=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E9=80=9A=E7=9F=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue              |  21 +-
 src/views/big-screen/index.vue                | 407 ++++++++----------
 src/views/index.vue                           |   2 +-
 .../inspection-warn/warning-center/index.vue  | 296 +++++++++++++
 4 files changed, 485 insertions(+), 241 deletions(-)
 create mode 100644 src/views/xj/inspection-warn/warning-center/index.vue

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 5bb23ee..4003702 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -19,7 +19,6 @@
         <div class="menu-return">
           <i class="el-icon-data-analysis" @click="goBigScreen"></i>
         </div>
-        <div class="header-news"><i class="el-icon-bell"></i></div>
         <search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -96,8 +95,8 @@ export default {
   },
   methods: {
     /* 点击跳转大屏页面 */
-    goBigScreen() {
-      this.$router.push("/screen");
+    goBigScreen(){
+      this.$router.push("/screen")
     },
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
@@ -164,7 +163,7 @@ export default {
       outline: none;
     }
 
-    .header-news {
+    .menu-return {
       height: 100%;
       margin-right: 0.5rem;
 
@@ -172,19 +171,7 @@ export default {
         cursor: pointer;
         font-size: 1.4rem;
         line-height: 3.1rem;
-        font-weight: 400;
-      }
-    }
-
-    .menu-return {
-      height: 100%;
-      margin-right: 1rem;
-
-      i {
-        cursor: pointer;
-        font-size: 1.4rem;
-        line-height: 3.1rem;
-        font-weight: 400;
+        font-weight: bold;
       }
     }
 
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index 0549ecf..3a48173 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-19 14:16:56
+ * @LastEditTime: 2024-11-20 14:32:46
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -20,7 +20,72 @@
         ></iframe>
       </div>
       <div class="header-time">
-        <div class="header-news"><i class="el-icon-message-solid"></i></div>
+        <!-- 消息中心 -->
+        <div class="header-news">
+          <el-popover
+            placement="bottom-end"
+            width="400"
+            popper-class="screen-message-popover"
+            trigger="click"
+          >
+            <div class="screen-message-content">
+              <div class="message-content">
+                <fssm-scroll>
+                  <div
+                    class="message-item"
+                    v-for="(item, index) in messageList"
+                    :key="`message-item-${index}`"
+                  >
+                    <div class="item-top" @click="handleMessageItemClick(item.status)">
+                      <div class="index">
+                        <i
+                          v-if="item.status === '1'"
+                          style="color: #67c23a"
+                          class="el-icon-success"
+                        ></i>
+                        <i
+                          v-if="item.status === '2'"
+                          style="color: #e6a23c"
+                          class="el-icon-info"
+                        ></i>
+                        <i
+                          v-if="item.status === '3'"
+                          style="color: #909399"
+                          class="el-icon-warning"
+                        ></i>
+                        <i
+                          v-if="item.status === '4'"
+                          style="color: #f56c6c"
+                          class="el-icon-error"
+                        ></i>
+                      </div>
+                      <div class="time">
+                        <span>{{ item.time }}</span>
+                      </div>
+                      <div class="carNo">
+                        <span>{{ item.car }}</span>
+                      </div>
+                    </div>
+                    <div class="item-content">
+                      {{ item.content }}
+                    </div>
+                  </div>
+                </fssm-scroll>
+              </div>
+              <div class="message-footer">
+                <el-button
+                  @click="handleMessageClick"
+                  icon="el-icon-d-arrow-right"
+                  type="text"
+                  >查看更多</el-button
+                >
+              </div>
+            </div>
+            <i slot="reference" class="el-icon-message-solid">
+              <div class="num">48</div>
+            </i>
+          </el-popover>
+        </div>
         <div class="header-data">{{ dataTime }}</div>
         <div class="header-week">
           <span>{{ weekTime }}</span>
@@ -311,6 +376,10 @@ export default {
       weekTime: "",
       // 年
       yearTime: "",
+
+      // 预警中心消息数据
+      messageList: [],
+
       // 数据栏右上角选择框
       selectTypeArr: [],
       // 左侧切换模块
@@ -373,224 +442,7 @@ export default {
       // 图片背景下病害类型下拉选择绑定
       mapCareSelect: "",
       // 图片背景下病害类型下拉选择数据
-      dieaseOptions: [
-        {
-          value: "zhinan",
-          label: "指南",
-          children: [
-            {
-              value: "shejiyuanze",
-              label: "设计原则",
-            },
-            {
-              value: "daohang",
-              label: "导航",
-            },
-          ],
-        },
-        {
-          value: "zujian",
-          label: "组件",
-          children: [
-            {
-              value: "basic",
-              label: "Basic",
-            },
-            {
-              value: "form",
-              label: "Form",
-              children: [
-                {
-                  value: "radio",
-                  label: "Radio 单选框",
-                },
-                {
-                  value: "checkbox",
-                  label: "Checkbox 多选框",
-                },
-                {
-                  value: "input",
-                  label: "Input 输入框",
-                },
-                {
-                  value: "input-number",
-                  label: "InputNumber 计数器",
-                },
-                {
-                  value: "select",
-                  label: "Select 选择器",
-                },
-                {
-                  value: "cascader",
-                  label: "Cascader 级联选择器",
-                },
-                {
-                  value: "switch",
-                  label: "Switch 开关",
-                },
-                {
-                  value: "slider",
-                  label: "Slider 滑块",
-                },
-                {
-                  value: "time-picker",
-                  label: "TimePicker 时间选择器",
-                },
-                {
-                  value: "date-picker",
-                  label: "DatePicker 日期选择器",
-                },
-                {
-                  value: "datetime-picker",
-                  label: "DateTimePicker 日期时间选择器",
-                },
-                {
-                  value: "upload",
-                  label: "Upload 上传",
-                },
-                {
-                  value: "rate",
-                  label: "Rate 评分",
-                },
-                {
-                  value: "form",
-                  label: "Form 表单",
-                },
-              ],
-            },
-            {
-              value: "data",
-              label: "Data",
-              children: [
-                {
-                  value: "table",
-                  label: "Table 表格",
-                },
-                {
-                  value: "tag",
-                  label: "Tag 标签",
-                },
-                {
-                  value: "progress",
-                  label: "Progress 进度条",
-                },
-                {
-                  value: "tree",
-                  label: "Tree 树形控件",
-                },
-                {
-                  value: "pagination",
-                  label: "Pagination 分页",
-                },
-                {
-                  value: "badge",
-                  label: "Badge 标记",
-                },
-              ],
-            },
-            {
-              value: "notice",
-              label: "Notice",
-              children: [
-                {
-                  value: "alert",
-                  label: "Alert 警告",
-                },
-                {
-                  value: "loading",
-                  label: "Loading 加载",
-                },
-                {
-                  value: "message",
-                  label: "Message 消息提示",
-                },
-                {
-                  value: "message-box",
-                  label: "MessageBox 弹框",
-                },
-                {
-                  value: "notification",
-                  label: "Notification 通知",
-                },
-              ],
-            },
-            {
-              value: "navigation",
-              label: "Navigation",
-              children: [
-                {
-                  value: "menu",
-                  label: "NavMenu 导航菜单",
-                },
-                {
-                  value: "tabs",
-                  label: "Tabs 标签页",
-                },
-                {
-                  value: "breadcrumb",
-                  label: "Breadcrumb 面包屑",
-                },
-                {
-                  value: "dropdown",
-                  label: "Dropdown 下拉菜单",
-                },
-                {
-                  value: "steps",
-                  label: "Steps 步骤条",
-                },
-              ],
-            },
-            {
-              value: "others",
-              label: "Others",
-              children: [
-                {
-                  value: "dialog",
-                  label: "Dialog 对话框",
-                },
-                {
-                  value: "tooltip",
-                  label: "Tooltip 文字提示",
-                },
-                {
-                  value: "popover",
-                  label: "Popover 弹出框",
-                },
-                {
-                  value: "card",
-                  label: "Card 卡片",
-                },
-                {
-                  value: "carousel",
-                  label: "Carousel 走马灯",
-                },
-                {
-                  value: "collapse",
-                  label: "Collapse 折叠面板",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          value: "ziyuan",
-          label: "资源",
-          children: [
-            {
-              value: "axure",
-              label: "Axure Components",
-            },
-            {
-              value: "sketch",
-              label: "Sketch Templates",
-            },
-            {
-              value: "jiaohu",
-              label: "组件交互文档",
-            },
-          ],
-        },
-      ],
+      dieaseOptions: [],
       // 路段下拉绑定
       roadList: [],
       // 地图打点-路段绑定
@@ -651,6 +503,7 @@ export default {
     this.getMapCare();
     this.getRoadList();
     this.getDieaseTypeList();
+    this.getMessageList();
     // this.initWebSocket();
   },
   methods: {
@@ -687,6 +540,54 @@ export default {
       }, 1000);
     },
 
+    /* 获取消息中心数据 */
+    getMessageList() {
+      // getMessageList().then(({ code, data }) => {
+      //   if (code === 200) {
+      //     this.messageList = data;
+      //   }
+      // });
+      this.messageList = [
+        {
+          status: "1",
+          time: "2024/45/62",
+          car: "辽jskdn",
+          content: "骄傲的是否哈德half绝对符合卡的法拉第",
+        },
+        {
+          status: "2",
+          time: "2024/45/62",
+          car: "辽jskdn",
+          content: "骄傲的是否哈德half绝对符合卡的法拉第",
+        },
+        {
+          status: "3",
+          time: "2024/45/62",
+          car: "辽jskdn",
+          content: "骄傲的是否哈德half绝对符合卡的法拉第",
+        },
+      ];
+    },
+
+    /**
+     * @description: 消息中心点击具体数据事件
+     * @return {*}
+     */
+    handleMessageItemClick(value) {
+      this.$router.push({
+        name: "Warning-center",
+        params: { status: value },
+      });
+    },
+
+    /**
+     * @description: 消息中心查看更多事件
+     * @return {*}
+     */
+    handleMessageClick() {
+      this.$router.push("/inspection_warn/warning-center");
+    },
+
     /* 获取数据栏右上角选项数据 */
     getSelect() {
       selectTypeList().then(({ code, data }) => {
@@ -1526,10 +1427,25 @@ export default {
       align-items: flex-end;
     }
 
+    // 消息中心样式
     .header-news {
-      cursor: pointer;
-      font-size: 1.5rem;
-      color:red;
+      i {
+        position: relative;
+        cursor: pointer;
+        font-size: 1.5rem;
+
+        .num {
+          min-width: 0.9rem;
+          position: absolute;
+          top: -0.2rem;
+          right: -0.5rem;
+          padding: 0.2rem;
+          font-size: 0.6rem;
+          border-radius: 0.5rem;
+          color: #ffffff;
+          background-color: red;
+        }
+      }
     }
 
     .header-data {
@@ -1788,4 +1704,49 @@ input[aria-hidden="true"] {
 .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
   box-shadow: none;
 }
+
+// 大屏消息弹出框样式
+.screen-message-popover {
+  background-color: rgba(0, 0, 0, 0.8);
+  border: none;
+
+  .screen-message-content {
+    width: 100%;
+    color: #ffffff;
+
+    .message-content {
+      width: 100%;
+      height: 12rem;
+
+      .message-item {
+        padding: 0.5rem 0;
+        border-bottom: 1px dashed rgb(115, 115, 116);
+
+        .item-top {
+          width: 100%;
+          display: flex;
+
+          &:hover {
+            span {
+              color: rgb(113, 179, 255);
+            }
+          }
+
+          .time {
+            width: 40%;
+          }
+        }
+
+        .item-content {
+          padding-left: 1rem;
+        }
+      }
+    }
+
+    .message-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
 </style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 0af96cb..adc0007 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-18 15:06:35
+ * @LastEditTime: 2024-11-20 10:21:45
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
diff --git a/src/views/xj/inspection-warn/warning-center/index.vue b/src/views/xj/inspection-warn/warning-center/index.vue
new file mode 100644
index 0000000..2d336d2
--- /dev/null
+++ b/src/views/xj/inspection-warn/warning-center/index.vue
@@ -0,0 +1,296 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-20 11:58:33
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-20 14:33:22
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
+ * @Description: 巡检预警中心
+-->
+
+<template>
+  <div class="content">
+    <!-- 搜索表单 -->
+    <el-form
+      :model="warnForm"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="5rem"
+    >
+      <el-form-item label="车牌号" prop="carNo">
+        <el-input
+          v-model="warnForm.carNo"
+          placeholder="请输入车牌号"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="设备ID" prop="deviceId">
+        <el-select
+          v-model="warnForm.deviceId"
+          placeholder="请选择校验状态"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="item in deviceList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间" prop="dateTime">
+        <el-date-picker
+          v-model="dateTime"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="阅读状态" prop="readStatus">
+        <el-select
+          v-model="warnForm.readStatus"
+          placeholder="请选择阅读状态"
+          clearable
+        >
+          <el-option
+            v-for="item in readStatusList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane
+          v-for="(item, index) in editableTabs"
+          :key="`tabs-${index}`"
+          :label="item.title"
+          :name="item.value"
+        >
+          <!-- 标签页头 -->
+          <span slot="label"
+            ><i
+              v-if="item.status === '1'"
+              style="color: #67c23a"
+              class="el-icon-success"
+            ></i>
+            <i
+              v-if="item.status === '2'"
+              style="color: #e6a23c"
+              class="el-icon-info"
+            ></i>
+            <i
+              v-if="item.status === '3'"
+              style="color: #909399"
+              class="el-icon-warning"
+            ></i>
+            <i
+              v-if="item.status === '4'"
+              style="color: #f56c6c"
+              class="el-icon-error"
+            ></i
+            >{{ item.title }}({{ item.count }})</span
+          >
+          <!-- 标签内容 -->
+          <el-table
+            ref="warningTable"
+            :data="warningList"
+            v-loading="loading"
+            style="width: 100%"
+          >
+            <el-table-column label="时间" align="center" prop="segmentName" />
+            <el-table-column
+              label="消息内容"
+              align="center"
+              prop="stakeStart"
+            />
+            <el-table-column label="车牌号" align="center" prop="stakeEnd" />
+            <el-table-column label="设备id" align="center" prop="stakeEnd" />
+          </el-table>
+          <!-- 分页组件 -->
+          <div class="pagination-part">
+            <el-pagination
+              background
+              :current-page.sync="pagination.page"
+              @current-change="handleCurrentChange"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size.sync="pagination.size"
+              @size-change="handleSizeChange"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableTotal"
+            >
+            </el-pagination>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WarningCenter",
+  data() {
+    return {
+      // 查询表单绑定
+      warnForm: {
+        // 车牌号
+        carNo: "",
+        // 设备id
+        deviceId: "",
+        // 阅读状态
+        readStatus: "",
+      },
+      // 设备列表
+      deviceList: [],
+      // 时间
+      dateTime: [],
+      // 阅读状态列表
+      readStatusList: [
+        { label: "已读", value: "1" },
+        { label: "未读", value: "2" },
+      ],
+      // 导航栏选择绑定
+      activeName: "1",
+      // 导航栏列表
+      editableTabs: [
+        { title: "成功", value: "1", count: 10, status: "1" },
+        { title: "提醒", value: "2", count: 10, status: "2" },
+        { title: "告警", value: "3", count: 10, status: "3" },
+        { title: "错误", value: "4", count: 10, status: "4" },
+      ],
+      // 预警列表
+      warningList: [],
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 列表总条数
+      tableTotal: 0,
+      // 列表加载状态
+      loading: false,
+    };
+  },
+  watch: {
+    $route: {
+      handler(val) {
+        if (val.params.status) {
+          this.activeName = val.params.status;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /**
+     * @description: 点击搜索事件
+     * @return {*}
+     */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
+      this.getList();
+    },
+
+    /**
+     * @description: 重置查询
+     * @return {*}
+     */
+    resetQuery() {
+      this.warnForm = {
+        // 车牌号
+        carNo: "",
+        // 设备id
+        deviceId: "",
+        // 阅读状态
+        readStatus: "",
+      };
+      this.dateTime = [];
+      this.getList();
+    },
+
+    /**
+     * @description: 切换标签事件
+     * @return {*}
+     */
+    handleClick() {
+      this.pagination.page = 1;
+      this.getList();
+    },
+
+    /**
+     * @description: 获取列表数据
+     * @return {*}
+     */
+    getList() {
+      this.loading = true;
+      const data = {
+        ...this.pagination,
+        ...this.warnForm,
+        activeName: this.activeName,
+        startTime: this.dateTime ? this.dateTime[0] : "",
+        endTime: this.dateTime ? this.dateTime[1] : "",
+      };
+      setTimeout(() => {
+        this.loading = false;
+      }, 100);
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getList();
+    },
+
+    /**
+     * @description: 切换每页条数
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: calc(100vh - 5.4rem);
+  padding: 1rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file