feat: 添加消息管理静态页面

portal-manager-ui/admin/src/assets/fonts/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">notice</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe901;</span>
                 <div class="name">闭眼睛</div>
@@ -102,9 +108,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1693536528455') format('woff2'),
-       url('iconfont.woff?t=1693536528455') format('woff'),
-       url('iconfont.ttf?t=1693536528455') format('truetype');
+  src: url('iconfont.woff2?t=1744101949457') format('woff2'),
+       url('iconfont.woff?t=1744101949457') format('woff'),
+       url('iconfont.ttf?t=1744101949457') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -130,6 +136,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-notice"></span>
+            <div class="name">
+              notice
+            </div>
+            <div class="code-name">.icon-notice
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-hidden"></span>
             <div class="name">
@@ -202,6 +217,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-notice"></use>
+                </svg>
+                <div class="name">notice</div>
+                <div class="code-name">#icon-notice</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-hidden"></use>

portal-manager-ui/admin/src/assets/fonts/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 4222008 */
-  src: url('iconfont.woff2?t=1693536528455') format('woff2'),
-       url('iconfont.woff?t=1693536528455') format('woff'),
-       url('iconfont.ttf?t=1693536528455') format('truetype');
+  src: url('iconfont.woff2?t=1744101949457') format('woff2'),
+       url('iconfont.woff?t=1744101949457') format('woff'),
+       url('iconfont.ttf?t=1744101949457') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-notice:before {
+  content: "\e617";
+}
+
 .icon-hidden:before {
   content: "\e901";
 }

portal-manager-ui/admin/src/assets/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "13071212",
+      "name": "notice",
+      "font_class": "notice",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
     {
       "icon_id": "4354835",
       "name": "闭眼睛",

portal-manager-ui/admin/src/components/MessageInfo.vue

+<template>
+  <div>
+    <a-drawer
+      :zIndex="2000"
+      title="消息详情"
+      placement="right"
+      width="500px"
+      :visible="Visible"
+      @close="onClose"
+    >
+      <a-descriptions :column="1">
+        <a-descriptions-item label="消息类型"> 预警消息 </a-descriptions-item>
+        <a-descriptions-item label="消息内容"> 等待超时 </a-descriptions-item>
+        <a-descriptions-item label="消息来源"> 排队系统 </a-descriptions-item>
+        <a-descriptions-item label="系统提醒时间">
+          2022-11-07 16:00:00
+        </a-descriptions-item>
+        <a-descriptions-item label="是否短线提醒"> 是 </a-descriptions-item>
+        <a-descriptions-item label="接收人"> 张三 </a-descriptions-item>
+        <a-descriptions-item label="短线提醒时间">
+          2022-11-07 16:00:00
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    detailsInfo: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+  methods: {
+    onClose() {
+      this.Visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

portal-manager-ui/admin/src/components/YSwitch.vue

+<template>
+  <div>
+    <!-- <a-checkbox @change="onChange" :checked="value"> Checkbox </a-checkbox> -->
+    <a-switch
+      :checked-children="checkedChildren"
+      :un-checked-children="unCheckedChildren"
+      :disabled="disabled"
+      :checked="value"
+      @change="onChange"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "checked",
+    event: "change",
+  },
+  props: {
+    checkedChildren: {
+      default: "",
+    },
+    unCheckedChildren: {
+      default: "",
+    },
+    checked: {
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    value() {
+      return this.checked === 1 || this.checked === "1";
+    },
+  },
+  methods: {
+    onChange(checked) {
+      this.$emit("change", checked ? 1 : 0);
+      this.$emit("onChange", checked ? 1 : 0);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

portal-manager-ui/admin/src/router/routes.js

@@ -366,7 +366,6 @@ const routes = [
                 },
               },
 
-              
               {
                 path: "windowLeft",
                 name: "windowLeft",
@@ -832,6 +831,36 @@ const routes = [
               },
             ],
           },
+          {
+            path: "messageManage",
+            name: "messageManage",
+            redirect: "/home/thePlatformIsSet/messageManage/messageList",
+            component: () =>
+              import(
+                /* webpackChunkName: "menuManagement" */ "@/views/thePlatformIsSet/components/messageManage/MessageManage.vue"
+              ),
+            meta: { title: "消息服务" },
+            children: [
+              {
+                path: "messageList",
+                name: "messageList",
+                component: () =>
+                  import(
+                    /* webpackChunkName: "menuMgmt" */ "@/views/thePlatformIsSet/components/messageManage/MessageList.vue"
+                  ),
+                meta: { title: "消息列表" },
+              },
+              {
+                path: "messageSet",
+                name: "messageSet",
+                component: () =>
+                  import(
+                    /* webpackChunkName: "menuMgmt" */ "@/views/thePlatformIsSet/components/messageManage/MessageSet.vue"
+                  ),
+                meta: { title: "消息配置" },
+              },
+            ],
+          },
           {
             path: "logService",
             name: "logService",

portal-manager-ui/admin/src/views/home/home.vue

@@ -74,6 +74,61 @@
             </a-menu>
           </a-dropdown>
         </div>
+        <div class="line"></div>
+        <a-popover
+          arrowPointAtCenter
+          trigger="click"
+          :overlayStyle="{ width: '300px' }"
+          overlayClassName="message-popover"
+          placement="bottomRight"
+        >
+          <div slot="title" class="text-[16px]">999条消息</div>
+          <div slot="content" class="message-content">
+            <div class="message-list">
+              <template v-if="messageList.length">
+                <div
+                  v-for="(v, i) in messageList"
+                  :key="v.id"
+                  @click="changeMessageInfo(v)"
+                >
+                  <div class="flex justify-between items-start">
+                    <div class="flex gap-[6px]">
+                      <div
+                        class="w-[50px] h-[50px] rounded-full flex justify-center items-center text-white hint"
+                      >
+                        预警
+                      </div>
+                      <div class="flex flex-col justify-between">
+                        <div>{{ v.message }}</div>
+                        <div>{{ v.time }}</div>
+                      </div>
+                    </div>
+                    <a-tag color="blue"> 排队系统 </a-tag>
+                  </div>
+                  <a-divider dashed v-if="i < 4" />
+                </div>
+              </template>
+              <a-empty
+                v-else
+                :image="require('@/assets/images/no_data.png')"
+                :image-style="{
+                  height: '100px',
+                }"
+              >
+                <span slot="description"> 暂无数据 </span>
+              </a-empty>
+              <MessageInfo
+                :show.sync="showMessageInfo"
+                :detailsInfo="messageInfo"
+              ></MessageInfo>
+            </div>
+
+            <div class="message-footer">查看更多 ></div>
+          </div>
+          <a-badge :count="10" :overflow-count="999">
+            <i class="iconfont icon-notice cursor-pointer"></i>
+          </a-badge>
+        </a-popover>
       </div>
       <changePassword :visibleEditPwd.sync="visibleEditPwd"></changePassword>
     </div>
@@ -86,11 +141,13 @@ import { mapState, mapMutations, mapGetters } from "vuex";
 import { LogoutInterface } from "@/api/user";
 import changePassword from "./components/changePassword.vue";
 import HeaderSite from "./components/HeaderSite.vue";
+import MessageInfo from "@/components/MessageInfo.vue";
 import storage from "@/utils/js/Storage";
 export default {
   components: {
     changePassword,
     HeaderSite,
+    MessageInfo,
   },
   data() {
     return {
@@ -102,12 +159,42 @@ export default {
       nowDay: "",
       nowWeek: "",
       visibleEditPwd: false,
+      showMessageInfo: false,
+      messageInfo: {},
       homePage: [
         "/home/dataManagement",
         "/home/siteArrange",
         "/home/dataActuary",
         "/home/thePlatformIsSet/setPlatformes",
       ],
+      // 消息列表
+      messageList: [
+        {
+          id: 1,
+          message: "等待时长超时",
+          time: "04.08 09:00:00",
+        },
+        {
+          id: 2,
+          message: "等待时长超时",
+          time: "04.08 09:00:00",
+        },
+        {
+          id: 3,
+          message: "等待时长超时",
+          time: "04.08 09:00:00",
+        },
+        {
+          id: 4,
+          message: "等待时长超时",
+          time: "04.08 09:00:00",
+        },
+        {
+          id: 5,
+          message: "等待时长超时",
+          time: "04.08 09:00:00",
+        },
+      ],
     };
   },
   computed: {
@@ -184,15 +271,27 @@ export default {
       storage.set(1, "routeInfo", route.key);
       this.$router.push(route.key);
     },
+    changeMessageInfo(row) {
+      this.messageInfo = row;
+      this.showMessageInfo = true;
+    },
   },
   beforeDestroy() {
     clearInterval(this.timer);
   },
 };
 </script>
+<style lang="less">
+.message-popover {
+  .ant-popover-inner-content {
+    padding: 0px;
+  }
+}
+</style>
 
 <style lang="less" scoped>
 @headerHeight: 72px;
+
 .route-view {
   position: relative;
 }
@@ -293,4 +392,22 @@ export default {
 .inside {
   background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%) !important;
 }
+:deep(.ant-badge-count) {
+  box-shadow: none;
+}
+.icon-notice {
+  font-size: 24px;
+}
+.hint {
+  background: linear-gradient(to right, #68a1fc 0%, #387dfd 100%);
+}
+.message-list {
+  padding: 12px 16px;
+}
+.message-footer {
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  text-align: center;
+  cursor: pointer;
+}
 </style>

portal-manager-ui/admin/src/views/thePlatformIsSet/components/messageManage/MessageList.vue

+<template>
+  <div>
+    <div class="flex items-center justify-between mb-[20px]">
+      <div>
+        发送消息总量：<span class="primary font-bold">4545645646条</span>
+      </div>
+      <a-space>
+        <a-select>
+          <a-select-option value=""> 全部内容 </a-select-option>
+        </a-select>
+        <a-select>
+          <a-select-option value=""> 全部来源 </a-select-option>
+        </a-select>
+        <a-range-picker v-model="BegindAndEndTime" />
+        <a-button type="primary">搜索</a-button>
+        <a-button>重置</a-button>
+      </a-space>
+    </div>
+    <a-table
+      size="small"
+      bordered
+      :scroll="{ y: 590 }"
+      :row-key="(record) => record.id"
+      :pagination="{
+        showTotal: (total) => `共 ${total} 条`,
+        current: current,
+        total: total,
+        pageSize: size,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions: pageSizeOptions,
+        onChange: changePagination,
+        onShowSizeChange: showSizeChange,
+      }"
+      :columns="columns"
+      :data-source="tableData"
+      :loading="loading"
+    >
+    </a-table>
+  </div>
+</template>
+
+<script>
+import Storage from "@/utils/js/Storage";
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          width: "60px",
+          title: "序号",
+          align: "center",
+          customRender: (text, record, index) => {
+            return (this.current - 1) * this.size + index + 1;
+          },
+        },
+        {
+          title: "消息类型",
+          align: "center",
+          dataIndex: "name",
+          width: 200,
+        },
+        {
+          title: "消息内容",
+          align: "center",
+          dataIndex: "age",
+          width: 200,
+        },
+        {
+          title: "消息来源",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+        {
+          title: "系统提醒时间",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+        {
+          title: "是否短信提醒",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+        {
+          title: "接收人",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+        {
+          title: "短信提醒时间",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+        {
+          title: "操作",
+          align: "center",
+          dataIndex: "address",
+          width: 200,
+        },
+      ],
+      tableData: [],
+      siteId: Storage.get(2, "siteId") ? Storage.get(2, "siteId") : "",
+      searchName: "",
+      BegindAndEndTime: [
+        this.$moment().format("YYYY-MM-DD"),
+        this.$moment().format("YYYY-MM-DD"),
+      ],
+      pageSizeOptions: ["10", "30", "50", "100"],
+      current: 1,
+      size: 10,
+      total: 0,
+      dict: {}, // 日志字典
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-spin-container {
+  display: block;
+}
+</style>

portal-manager-ui/admin/src/views/thePlatformIsSet/components/messageManage/MessageManage.vue

+<template>
+  <div class="Container">
+    <div class="main">
+      <a-tabs v-model="tabsActive" @change="tabsChange" :forceRender="false">
+        <a-button
+          style="margin-right: 16px"
+          slot="tabBarExtraContent"
+          @click="$router.push('/home/thePlatformIsSet/setPlatformes')"
+          >返回上一级</a-button
+        >
+        <a-tab-pane
+          :key="item.path"
+          v-for="item of tabsList['children']"
+          :tab="item['meta']['title']"
+        >
+        </a-tab-pane>
+      </a-tabs>
+      <router-view style="padding: 0 1rem" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getItemData } from "@/utils/js/common.js";
+import common from "@/mixins/common";
+export default {
+  name: "PortalAdminVueMessageManagement",
+  mixins: [common],
+  data() {
+    return {
+      tabsActive: undefined,
+    };
+  },
+  computed: {
+    tabsList() {
+      return getItemData(this.$router.options.routes, "name", "messageManage");
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tabsActive = this.$route.path.substr(
+        this.$route.path.lastIndexOf("/") + 1
+      );
+    });
+  },
+  methods: {
+    tabsChange(val) {
+      this.$router.push({
+        path: `/home/thePlatformIsSet/messageManage/${val}`,
+        // query: { testoption: "test001" },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@headerH: 4.5rem;
+.Container {
+  width: 100%;
+  height: 100% !important;
+  // background: #fac;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  .main {
+    // background: #afc;
+    background: #ffffff;
+    border-radius: 6px;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 1.2rem 2rem;
+  }
+  &::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: @headerH;
+    background: rgb(59, 135, 255);
+    background: -moz-linear-gradient(
+      174deg,
+      rgba(59, 135, 255, 1) 24%,
+      rgba(108, 53, 247, 1) 85%
+    );
+    background: -webkit-linear-gradient(
+      174deg,
+      rgba(59, 135, 255, 1) 24%,
+      rgba(108, 53, 247, 1) 85%
+    );
+    background: linear-gradient(
+      174deg,
+      rgba(59, 135, 255, 1) 24%,
+      rgba(108, 53, 247, 1) 85%
+    );
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
+  }
+
+  .ant-tabs-nav {
+    .ant-tabs-tab {
+      margin: 0 !important;
+    }
+  }
+  .ant-tabs-tab {
+    font-size: 1rem !important;
+    & + .ant-tabs-tab {
+      margin: 0 !important;
+      margin-left: 0.7rem !important;
+    }
+  }
+}
+</style>

portal-manager-ui/admin/src/views/thePlatformIsSet/components/messageManage/MessageSet.vue

+<template>
+  <div class="flex items-center gap-6">
+    <a-card :title="title" style="width: 300px">
+      <YSwitch slot="extra" v-model="value" @onChange="handleSwitch"></YSwitch>
+      <div class="flex items-center justify-between mb-4">
+        <div>消息内容：</div>
+        <div class="primary">等待时长超时</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>消息来源：</div>
+        <div class="primary">排队系统</div>
+      </div>
+      <a-divider dashed />
+      <div class="flex items-center justify-between mb-4">
+        <div>接收人：</div>
+        <div class="primary">张三</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>手机号码：</div>
+        <div class="primary">16608319500</div>
+      </div>
+    </a-card>
+    <a-card :title="title" style="width: 300px">
+      <YSwitch slot="extra" v-model="value"></YSwitch>
+      <div class="flex items-center justify-between mb-4">
+        <div>消息内容：</div>
+        <div class="primary">办理时长超时</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>消息来源：</div>
+        <div class="primary">排队系统</div>
+      </div>
+      <a-divider dashed />
+      <div class="flex items-center justify-between mb-4">
+        <div>接收人：</div>
+        <div class="primary">张三</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>手机号码：</div>
+        <div class="primary">16608319500</div>
+      </div>
+    </a-card>
+    <a-card :title="title" style="width: 300px">
+      <YSwitch slot="extra" v-model="value"></YSwitch>
+      <div class="flex items-center justify-between mb-4">
+        <div>消息内容：</div>
+        <div class="primary">差评</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>消息来源：</div>
+        <div class="primary">评价系统</div>
+      </div>
+      <a-divider dashed />
+      <div class="flex items-center justify-between mb-4">
+        <div>接收人：</div>
+        <div class="primary">张三</div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div>手机号码：</div>
+        <div class="primary">16608319500</div>
+      </div>
+    </a-card>
+    <AddReceive :show.sync="show"></AddReceive>
+  </div>
+</template>
+
+<script>
+import YSwitch from "@/components/YSwitch.vue";
+import AddReceive from "./components/AddReceive.vue";
+export default {
+  components: {
+    YSwitch,
+    AddReceive,
+  },
+  data() {
+    return {
+      title: "预警消息",
+      value: 1,
+      show: false,
+    };
+  },
+  created() {},
+  methods: {
+    handleSwitch() {
+      this.show = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-spin-container {
+  display: block;
+}
+</style>

portal-manager-ui/admin/src/views/thePlatformIsSet/components/messageManage/components/AddReceive.vue

+<template>
+  <div class="roleEditModal_box" ref="roleEditModal_box">
+    <a-modal
+      title="短信提醒"
+      :visible="Visible"
+      @cancel="handleCancel"
+      width="30%"
+    >
+      <a-form-model
+        :label-col="{
+          span: 4,
+        }"
+        :wrapper-col="{
+          span: 20,
+        }"
+        ref="form"
+        :model="form"
+      >
+        <a-form-model-item label="接收人" prop="name">
+          <a-input
+            placeholder="请输入接收人姓名"
+            allowClear
+            v-model="form.name"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="手机号码" prop="remark">
+          <a-input
+            placeholder="请输入手机号码"
+            allowClear
+            v-model="form.name"
+          />
+        </a-form-model-item>
+      </a-form-model>
+      <template slot="footer">
+        <a-button @click="resetForm">重置</a-button>
+        <a-button type="primary" class="addclass" @click="handleOk"
+          >确定</a-button
+        >
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      required: true,
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        name: "", //姓名
+        remark: "", //描述
+      }, //页面表单信息
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+  methods: {
+    onAdd() {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.id && this.$delete(this.form, "id");
+    },
+    onEdit(row) {
+      setTimeout(() => {
+        this.form = { ...row };
+      }, 10);
+    },
+    handleCancel() {
+      this.resetForm();
+      this.Visible = false;
+    },
+    resetForm() {
+      this.$refs.form.resetFields();
+    },
+    handleOk() {},
+  },
+};
+</script>
+
+<style lang="less" scoped></style>