lcw

src/views/home/index.vue

@@ -25,13 +25,13 @@
     <!-- 右边 -->
     <div class="home-aside asideR">
       <div class="commom-aside-big">
-        <SituationAssessment/>
+        <SituationAssessment />
       </div>
       <div class="commom-aside-big">
-<GroupWarning/>
+        <GroupWarning />
       </div>
       <div class="commom-aside-small">
-        <Experience/>
+        <Experience />
       </div>
     </div>
     <!-- 中间 -->
@@ -57,9 +57,27 @@
 
   <!-- 左边弹窗 -->
   <LeftDialog></LeftDialog>
+
+  <Fxq :initial-position="{ x: position.x, y: position.y }">
+    <el-badge value="0" class="item badge-top-left">
+      <div class='fxq fxq1'>
+        <div class="title" @click.stop="opneMsg('xtxx')"> <img src="@/assets/images/xtxx.png" /> 系统消息</div>
+      </div>
+    </el-badge>
+    <!-- <div class='fxq fxq2'>
+      <div class="title" @click.stop="opneMsg('tztg')"> <img src="@/assets/images/tztg.png" /> 通知通报</div>
+    </div>
+    <div class='fxq fxq3'>
+      <div class="title"> <img src="@/assets/images/xxxt.png" /> 消息协同</div>
+    </div> -->
+  </Fxq>
+  <Information v-model='showDialog' :title='title'>
+    <systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
+  </Information>
 </template>
 
 <script setup>
+import { ref, getCurrentInstance, reactive } from 'vue'
 import LeftDialog from './dialog/leftDialog'
 import GdMap from "@/components/GdMap/index.vue";
 import Head from './layout/head.vue'
@@ -70,17 +88,113 @@ import QblyType from './model/qblyType.vue'
 import Bkcz from './model/bkcz.vue'
 import ZdryWarning from './model/zdryWarning.vue'
 import GroupWarning from './model/groupWarning.vue'
-import Fjqk from './model/fjqk.vue'
 import Yszs from './model/yszs.vue'
 import DeployControl from './model/deployControl.vue';
 import SituationAssessment from './model/situationAssessment.vue'
 import Experience from './model/experience.vue'
+import Fxq from './model/fxq.vue'
+import Information from './model/information.vue'
+import systemMessages from './model/mesgSwitch/systemMessages.vue'
+import { getItem } from '@/utils/storage.js'
+import { queryXxTj} from '@/api/commit.js'
+const { proxy } = getCurrentInstance();
+const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典数据
+const idEntityCard = getItem('idEntityCard')
+const position = reactive({
+  x: window.innerWidth - 120,
+  y: window.innerHeight - 100
+})
+
+//消息
+const title = ref('系统消息')
+const showDialog = ref(false)
+const showMsgLx = ref('')
+const opneMsg = (val) => {
+  showDialog.value = true
+  showMsgLx.value = val
+  switch (val) {
+    case 'xtxx':
+      title.value = '系统消息'
+      break;
+    case 'tztg':
+      title.value = '通知通告'
+      break;
+    case 'xxxt':
+      title.value = '消息协同'
+      break;
+
+  }
+}
+const queryXxTjList = () => {
+  queryXxTj({}).then((res) => {
+console.log(res);
+
+  }).catch((err) => {
+
+  });
+}
+queryXxTjList()
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/css/homeScreen.scss";
 
-.transition {
-  transition: all 0.5s;
+.fxq {
+  border-radius: 35px;
+  width: 35px;
+  transition: transform 0.5s ease, width 0.5s ease;
+  background-color: rgb(1, 127, 245);
+  transform-origin: left center;
+  overflow: hidden;
+  margin-bottom: 10px;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    width: 35px;
+    height: 35px;
+    justify-content: center;
+    line-height: 35px;
+    font-size: 30px;
+  }
+
+  .title {
+    height: 35px;
+    line-height: 35px;
+
+    img {
+      margin-left: 9.5px;
+      width: 16px;
+      margin-right: 10px;
+      margin-top: -3px;
+      vertical-align: middle;
+      height: 16px;
+    }
+  }
+}
+
+.fxq2 {
+  background-color: #9d88f9;
+}
+
+.fxq1:hover {
+  width: 120px;
+}
+
+.fxq2:hover {
+  width: 120px;
+
+  // background-color: red;
+}
+
+.fxq3:hover {
+  width: 120px;
+}
+
+::v-deep .badge-top-left .el-badge__content {
+  top: 0;
+  right: auto;
+  left: -10px;
+  transform: translateY(-50%) translateX(-50%);
 }
 </style>