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.js

-window._iconfont_svg_string_4222008='<svg><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M469.333333 681.386667c-36.053333-2.432-71.253333-8.533333-104.96-17.92l-69.802666 149.674666a42.368 42.368 0 0 1-56.533334 20.266667 42.666667 42.666667 0 0 1-20.821333-56.32l66.986667-143.658667a451.712 451.712 0 0 1-148.906667-112.682666 388.693333 388.693333 0 0 1-70.570667-119.338667 42.666667 42.666667 0 1 1 80.128-29.354667 303.445333 303.445333 0 0 0 55.210667 93.098667C270.634667 547.413333 383.018667 597.333333 505.728 597.333333c122.752 0 235.136-49.962667 305.706667-132.181333a303.445333 303.445333 0 0 0 55.210666-93.098667 42.666667 42.666667 0 0 1 80.128 29.354667 388.693333 388.693333 0 0 1-70.570666 119.338667 423.68 423.68 0 0 1-18.773334 20.48l104.362667 104.362666a42.666667 42.666667 0 0 1-0.298667 60.032 42.368 42.368 0 0 1-60.032 0.298667l-109.653333-109.653333c-20.48 14.08-42.24 26.581333-65.024 37.418666l66.901333 143.36a42.666667 42.666667 0 0 1-20.821333 56.362667 42.368 42.368 0 0 1-56.533333-20.266667l-69.717334-149.546666a520.533333 520.533333 0 0 1-91.946666 16.810666v130.645334A42.666667 42.666667 0 0 1 512 853.333333c-23.722667 0-42.666667-18.944-42.666667-42.24v-129.706666z" fill="#3D3D3D" ></path><path d="M176.128 524.373333a42.368 42.368 0 0 1 60.032 0.256 42.666667 42.666667 0 0 1 0.298667 60.074667l-121.216 121.216a42.368 42.368 0 0 1-60.074667-0.298667 42.666667 42.666667 0 0 1-0.298667-60.032l121.258667-121.258666z" fill="#3D3D3D" ></path></symbol><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="" ></path></symbol><symbol id="icon-pwd" viewBox="0 0 1024 1024"><path d="M725.4 928.3H299.7c-88 0-159.6-71.6-159.6-159.6V555.8c0-88 71.6-159.6 159.6-159.6h425.7c88 0 159.6 71.6 159.6 159.6v212.8c0 88.1-71.6 159.7-159.6 159.7zM299.7 460c-52.8 0-95.8 43-95.8 95.8v212.8c0 52.8 43 95.8 95.8 95.8h425.7c52.8 0 95.8-43 95.8-95.8V555.8c0-52.8-43-95.8-95.8-95.8H299.7z" fill="#A1A0A5" ></path><path d="M778.6 406.8h-63.9c0-110.9-90.2-244.8-202.2-244.8S310.3 296 310.3 406.8h-63.9c0-142.7 116.2-308.6 266.1-308.6s266.1 165.9 266.1 308.6z" fill="#A1A0A5" ></path></symbol><symbol id="icon-show" viewBox="0 0 1024 1024"><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M512 266.112C229.248 266.112 0 586.24 0 586.24s229.248 320.128 512 320.128 512-320.128 512-320.128-229.248-320.128-512-320.128z m0 532.992c-117.568 0-212.864-95.296-212.864-212.864 0-117.568 95.296-212.864 212.864-212.864s212.864 95.296 212.864 212.864c0 117.568-95.296 212.864-212.864 212.864z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M602.08 960.576H423.488c-169.408 0-303.2 0-303.2-87.872v-17.568c0-164.672 136.032-298.624 303.2-298.624H602.08c167.168 0 303.2 133.952 303.2 298.624v17.568c-0.032 87.872-140.544 87.872-303.2 87.872zM423.456 609.184c-138.112 0-250.496 110.304-250.496 245.92v17.568c0 35.168 144.768 35.168 250.496 35.168h178.592c87.52 0 250.496 0 250.496-35.168v-17.568c0-135.616-112.384-245.92-250.496-245.92H423.456z m80.384-70.304c-132.736 0-240.672-106.4-240.672-237.184S371.104 64.544 503.84 64.544s240.672 106.368 240.672 237.152S636.544 538.88 503.84 538.88zM315.872 301.696c0 101.696 84.32 184.48 187.968 184.48s187.968-82.752 187.968-184.48-84.32-184.448-187.968-184.448S315.872 200 315.872 301.696z"  ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4222008,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,l=n.document,a=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,c())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_4222008='<svg><symbol id="icon-notice" viewBox="0 0 1024 1024"><path d="M192 736V416c0-154.816 109.952-283.936 256-313.6V64c0-35.36 28.64-64 64-64s64 28.64 64 64v38.4C722.048 132.064 832 261.184 832 416v320h32.096C899.392 736 928 764.416 928 800c0 35.36-28.64 64-63.904 64H159.904C124.608 864 96 835.584 96 800c0-35.36 28.64-64 63.904-64H192z m416 192c0 53.024-42.976 96-96 96s-96-42.976-96-96h192z" fill="#333333" ></path></symbol><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M469.333333 681.386667c-36.053333-2.432-71.253333-8.533333-104.96-17.92l-69.802666 149.674666a42.368 42.368 0 0 1-56.533334 20.266667 42.666667 42.666667 0 0 1-20.821333-56.32l66.986667-143.658667a451.712 451.712 0 0 1-148.906667-112.682666 388.693333 388.693333 0 0 1-70.570667-119.338667 42.666667 42.666667 0 1 1 80.128-29.354667 303.445333 303.445333 0 0 0 55.210667 93.098667C270.634667 547.413333 383.018667 597.333333 505.728 597.333333c122.752 0 235.136-49.962667 305.706667-132.181333a303.445333 303.445333 0 0 0 55.210666-93.098667 42.666667 42.666667 0 0 1 80.128 29.354667 388.693333 388.693333 0 0 1-70.570666 119.338667 423.68 423.68 0 0 1-18.773334 20.48l104.362667 104.362666a42.666667 42.666667 0 0 1-0.298667 60.032 42.368 42.368 0 0 1-60.032 0.298667l-109.653333-109.653333c-20.48 14.08-42.24 26.581333-65.024 37.418666l66.901333 143.36a42.666667 42.666667 0 0 1-20.821333 56.362667 42.368 42.368 0 0 1-56.533333-20.266667l-69.717334-149.546666a520.533333 520.533333 0 0 1-91.946666 16.810666v130.645334A42.666667 42.666667 0 0 1 512 853.333333c-23.722667 0-42.666667-18.944-42.666667-42.24v-129.706666z" fill="#3D3D3D" ></path><path d="M176.128 524.373333a42.368 42.368 0 0 1 60.032 0.256 42.666667 42.666667 0 0 1 0.298667 60.074667l-121.216 121.216a42.368 42.368 0 0 1-60.074667-0.298667 42.666667 42.666667 0 0 1-0.298667-60.032l121.258667-121.258666z" fill="#3D3D3D" ></path></symbol><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="" ></path></symbol><symbol id="icon-pwd" viewBox="0 0 1024 1024"><path d="M725.4 928.3H299.7c-88 0-159.6-71.6-159.6-159.6V555.8c0-88 71.6-159.6 159.6-159.6h425.7c88 0 159.6 71.6 159.6 159.6v212.8c0 88.1-71.6 159.7-159.6 159.7zM299.7 460c-52.8 0-95.8 43-95.8 95.8v212.8c0 52.8 43 95.8 95.8 95.8h425.7c52.8 0 95.8-43 95.8-95.8V555.8c0-52.8-43-95.8-95.8-95.8H299.7z" fill="#A1A0A5" ></path><path d="M778.6 406.8h-63.9c0-110.9-90.2-244.8-202.2-244.8S310.3 296 310.3 406.8h-63.9c0-142.7 116.2-308.6 266.1-308.6s266.1 165.9 266.1 308.6z" fill="#A1A0A5" ></path></symbol><symbol id="icon-show" viewBox="0 0 1024 1024"><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M512 266.112C229.248 266.112 0 586.24 0 586.24s229.248 320.128 512 320.128 512-320.128 512-320.128-229.248-320.128-512-320.128z m0 532.992c-117.568 0-212.864-95.296-212.864-212.864 0-117.568 95.296-212.864 212.864-212.864s212.864 95.296 212.864 212.864c0 117.568-95.296 212.864-212.864 212.864z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M602.08 960.576H423.488c-169.408 0-303.2 0-303.2-87.872v-17.568c0-164.672 136.032-298.624 303.2-298.624H602.08c167.168 0 303.2 133.952 303.2 298.624v17.568c-0.032 87.872-140.544 87.872-303.2 87.872zM423.456 609.184c-138.112 0-250.496 110.304-250.496 245.92v17.568c0 35.168 144.768 35.168 250.496 35.168h178.592c87.52 0 250.496 0 250.496-35.168v-17.568c0-135.616-112.384-245.92-250.496-245.92H423.456z m80.384-70.304c-132.736 0-240.672-106.4-240.672-237.184S371.104 64.544 503.84 64.544s240.672 106.368 240.672 237.152S636.544 538.88 503.84 538.88zM315.872 301.696c0 101.696 84.32 184.48 187.968 184.48s187.968-82.752 187.968-184.48-84.32-184.448-187.968-184.448S315.872 200 315.872 301.696z"  ></path></symbol></svg>',(i=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var c,n,o,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=i._iconfont_svg_string_4222008,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),c()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(o=c,l=i.document,a=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,o())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window);
\ No newline at end of file

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>