feat: 应急救援指挥模块页面绘制

config/index.js

@@ -11,7 +11,7 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://192.168.0.35:8089/',
+        target: 'http://192.168.0.112:8085',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''

src/layout/components/AppMain.vue

@@ -26,6 +26,7 @@ export default {
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
+  // height: 100vh;
   width: 100%;
   position: relative;
   overflow: hidden;

src/views/emergen_cyrescue/emergency_map/components/baseTable.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="infomation_area">
+    <div class="infomation_title" @click="clickIntoDutyInfoDialog">{{ titleType }}</div>
+    <table v-if="!isReservePlan" class="infomation_table" cellspacing="0">
+      <thead class="infomation_table_thead">
+        <tr class="infomation_table_thead_tr">
+          <th class="infomation_table_th">岗位</th>
+          <th class="infomation_table_th">姓名</th>
+          <th class="infomation_table_th">{{ phoneType }}</th>
+        </tr>
+      </thead>
+      <tbody class="infomation_table_tbody">
+        <tr v-for="(item, index) in showInfomationType" :key="index" class="infomation_table_tbody_tr">
+          <td>{{ item.job }}</td>
+          <td>{{ item.name }}</td>
+          <td>{{ item.phone }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-if="isReservePlan" class="reserve_plan">
+      <div class="reserve_plan_title">应急预案名称: {{ infomations.reservePlan.应急预案名称 }}</div>
+      <div class="scroll-box">
+        <ul class="reserve_plan_ul">
+          <li>预案编号: {{ infomations.reservePlan.预案编号 }}</li>
+          <li>适用领域: {{ infomations.reservePlan.适用领域 }}</li>
+        </ul>
+        <ul class="reserve_plan_ul">
+          <li>预案类别: {{ infomations.reservePlan.预案类别 }}</li>
+          <li>预案级别: {{ infomations.reservePlan.预案级别 }}</li>
+        </ul>
+        <ul class="reserve_plan_ul">
+          <li>编制单位: {{ infomations.reservePlan.编制单位 }}</li>
+          <li>编制人: {{ infomations.reservePlan.编制人 }}</li>
+        </ul>
+        <ul class="reserve_plan_ul">
+          <li>发布日期: {{ formatTime }}</li>
+          <li>发布文号: {{ infomations.reservePlan.发布文号 }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <dialog-index :visible.sync="dutyInfoDialog.visible" />
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import DialogIndex from './dialog.vue'
+
+export default {
+  components: { DialogIndex },
+  props: {
+    useType: {
+      type: String,
+      required: true
+    },
+    isReservePlan: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    infomations: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dutyInfoDialog: {
+        visible: false,
+        id: ''
+      }
+    }
+  },
+  computed: {
+    titleType: {
+      get: function() {
+        switch (this.useType) {
+          case 'dutyInfo': {
+            return '值班信息'
+          }
+          case 'reservePlanInfo': {
+            return '预案信息'
+          }
+          case 'addressBook': {
+            return '通讯录'
+          }
+          default:
+            return '标题'
+        }
+      }
+    },
+    phoneType: {
+      get: function() {
+        return this.useType === 'dutyInfo' ? '电话' : '手机号'
+      }
+    },
+    showInfomationType: {
+      get: function() {
+        return this.useType === 'dutyInfo' ? this.infomations.dutyInfoData : this.infomations.addressBook
+      }
+    },
+    formatTime: {
+      get: function() {
+        return dayjs(this.infomations.reservePlan.发布日期).format('YYYY-MM-DD')
+      }
+    }
+  },
+  methods: {
+    clickIntoDutyInfoDialog() {
+      this.dutyInfoDialog.visible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.infomation_area {
+  box-sizing: border-box;
+  padding: 12px;
+
+  .infomation_title {
+    cursor: pointer;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 51px;
+    color: #ffffff;
+    font-weight: 600;
+    height: 45px;
+    background-image: url('../../../../assets/map/emergency_rescue/navbg.png');
+    background-repeat: no-repeat;
+  }
+
+  .infomation_table {
+    width: 100%;
+
+    .infomation_table_thead {
+      height: 32px;
+      color: #ffffff;
+      background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #0c305b, rgba(255, 0, 0, 0));
+
+      .infomation_table_thead_tr {
+        text-align: center;
+        padding: 10px 0;
+
+        &>th:nth-child(1) {
+          transform: translateX(-8px);
+        }
+
+        &>th:nth-child(3) {
+          transform: translateX(-15px);
+        }
+      }
+    }
+
+    .infomation_table_tbody {
+      height: 32px;
+      width: 100%;
+      color: #ffffff;
+      background: linear-gradient(90deg, rgba(44, 62, 80, 0) 20%, rgba(3, 39, 78, 0.75) 50%, rgba(3, 39, 78, 0) 80%);
+
+      .infomation_table_tbody_tr {
+        text-align: center;
+        height: 34px;
+        border-bottom: 1px solid rgba(3, 39, 78, 1);
+
+        &>td:nth-child(1) {
+          text-align: start;
+          transform: translateX(21px);
+        }
+
+        &>td:nth-child(3) {
+          transform: translateX(8px);
+        }
+      }
+    }
+  }
+
+  .infomation_table .infomation_table_tbody {
+    display: block;
+    height: 155px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .infomation_table .infomation_table_thead,
+  .infomation_table_tbody .infomation_table_tbody_tr {
+    text-align: center;
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  .reserve_plan {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 8px;
+    color: #ffffff;
+    font-size: 15px;
+
+    .reserve_plan_title {
+      font-size: 16px;
+      display: flex;
+      width: 100%;
+      height: 40px;
+      border-bottom: 1px solid #0c2d53;
+      justify-content: flex-start;
+      align-items: center
+    }
+
+    .scroll-box {
+      height: 145px;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .reserve_plan_ul {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 43px;
+        border-bottom: 1px solid #0c2d53;
+      }
+    }
+  }
+}
+</style>

src/views/emergen_cyrescue/emergency_map/components/dialog.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-dialog
+    :visible="visible"
+    :title="title"
+    :width="width"
+    append-to-body
+    custom-class="bi_enterprise_dialog"
+    top="5vh"
+    @close="handlerClose">
+    弹出框体内容
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '弹窗默认标题'
+    },
+    width: {
+      type: String,
+      default: '1350px'
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handlerClose() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.bi_enterprise_dialog {
+  background-color: #034cd473 !important;
+  border-radius: 8px !important;
+  width: 1600px;
+  min-height: 500px;
+  height: 600px;
+
+  .el-dialog__header {
+    border: none !important;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #cac7c7 !important;
+  }
+
+  .el-dialog__title {
+    color: #fff !important;
+  }
+
+  .el-table {
+    background-color: transparent !important;
+  }
+
+  .el-table tr {
+    background-color: #202e89 !important;
+    color: #fff !important;
+  }
+
+  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+    background-color: #202e89 !important;
+  }
+
+  .el-table th.el-table__cell.is-leaf,
+  .el-table td.el-table__cell {
+    border-bottom: 1px solid rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table--border .el-table__cell {
+    border-right: 1px solid rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table--group,
+  .el-table--border {
+    border-color: rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table::before,
+  .el-table--group::after,
+  .el-table--border::after {
+    background-color: rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table .el-table__header-wrapper tr th {
+    background-color: #1c2c96 !important;
+    color: #fff !important;
+  }
+
+  .pagination-container {
+    background-color: #202e89 !important;
+  }
+
+  .el-pagination {
+    color: #fff !important;
+  }
+
+  .el-pagination__total,
+  .el-pagination__jump {
+    color: #fff !important;
+  }
+
+  .el-input__inner {
+    background: #202e89;
+    color: #FFFFFF;
+    border: 1px solid #ffffff60 !important;
+  }
+
+  .el-pagination.is-background .btn-prev,
+  .el-pagination.is-background .btn-next,
+  .el-pagination.is-background .el-pager li {
+    margin: 0 5px;
+    background-color: #4174d1 !important;
+    color: #ffffff !important;
+    min-width: 30px;
+    border-radius: 2px;
+  }
+
+  .ui-foot {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 60px;
+    line-height: 60px;
+    background: none;
+    text-align: center;
+    z-index: 99;
+  }
+
+  .el-table--border th.el-table__cell {
+    border-bottom: 1px solid rgba(36, 81, 192, .48) !important;
+  }
+
+  .level-title {
+    color: #FFFFFF !important;
+  }
+
+  .el-dialog__body {
+    color: #fffdf4 !important;
+  }
+
+  .table-ui .tbg {
+    background: none;
+  }
+
+  .table-ui .tit {
+    background: none;
+    color: #FFFFFF;
+  }
+
+  .el-table__body tr.current-row>td.el-table__cell {
+    background: #1c2c96 !important;
+  }
+
+  .el-picker-panel {
+    color: #ffffff;
+    border: 1px solid #dfe4ed;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    background: #333aa8 !important;
+    border-radius: 4px;
+    line-height: 30px;
+    margin: 5px 0;
+  }
+
+  .el-card {
+    background: none !important;
+    color: #FFFFFF !important;
+  }
+
+  .el-card__header {
+    color: #FFFFFF !important;
+
+  }
+
+  .el-tree,
+  .el-tree-node:focus>.el-tree-node__content,
+  .el-tree-node__content:hover {
+    background-color: #202e89 !important;
+    color: #fff !important;
+  }
+
+  .bbg {
+    background: #202e89 !important;
+  }
+
+  .el-dialog__title {
+    font-size: 22px !important;
+  }
+
+  .el-table--small {
+    font-size: 20px !important;
+  }
+
+  .el-dialog__title {
+    font-size: 26px !important;
+  }
+
+  .el-button--mini {
+    font-size: 24px !important;
+  }
+
+  .el-table__cell {
+    font-size: 24px !important;
+  }
+
+  .table-ui td {
+    font-size: 24px !important;
+  }
+
+  .el-button--small {
+    font-size: 24px !important;
+  }
+
+  .el-card__header {
+    color: #fff !important;
+    font-size: 24px !important;
+  }
+
+  .app-container {
+    padding-bottom: 50px !important;
+  }
+
+  .level-title h1 {
+    font-size: 24px !important;
+  }
+
+  .el-pagination span:not([class*=suffix]),
+  .el-pagination button {
+    font-size: 24px;
+  }
+
+  .el-pagination__sizes .el-input .el-input__inner {
+    font-size: 24px;
+    padding-left: 8px;
+  }
+
+  .el-pagination .el-select .el-input {
+    width: 130px;
+    margin: 0 5px;
+  }
+
+  .el-input--small {
+    font-size: 24px;
+  }
+
+  .el-dialog__body {
+    font-size: 24px;
+  }
+
+  .el-table .cell {
+    line-height: 36px !important;
+  }
+
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+}
+</style>

src/views/emergen_cyrescue/emergency_map/components/sysChat.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="sys_chat_container">
+    <div v-for="(item, ind) in chatData" :key="ind">
+      <div v-for="(itemChild, index) in item" :key="index" class="chat_body">
+        <p class="chat_title">{{ itemChild.title }}</p>
+        <p :class="{ 'ready': itemChild.isRead }" class="chat_content">{{ itemChild.content }}</p>
+
+        <p v-for="(answer, indx) in itemChild.answers" :key="indx" :class="{ 'ready': answer.isReady}" class="chat_item">
+          <span class="chat_item_head">{{ answer.personnal }}回复: </span>
+          <span class="chat_item_content">{{ answer.content }}</span>
+          <span v-if="answer.isReady" class="chat_ready">已读</span>
+        </p>
+      </div>
+    </div>
+    <div class="order">
+      <button @click="sendOrderBtn">发送指令</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+  props: {
+    chatData: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    console.log(this.chatData, 'this.chatData')
+  },
+  methods: {
+    sendOrderBtn() {
+      this.$emit('orderMessage')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sys_chat_container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  color: #ffffff;
+  font-size: 15px;
+  position: relative;
+
+  & > h5, p, span {
+    padding: 0;
+    margin: 0;
+  }
+
+  .chat_body {
+    border-radius: 6px;
+    background: #0021649c;
+    width: 100%;
+    padding: 6px 0 0 18px;
+
+    .chat_title {
+      font-size: 16px;
+      padding: 8px 0;
+    }
+
+    .chat_content {
+      position: relative;
+      color: rgb(255, 255, 255);
+      // 小圆点伪类样式
+      &::before {
+        content: "";
+        display: block;
+        width: 8px;
+        height: 8px;
+        background-color: rgb(255, 0, 0);
+        position: absolute;
+        left: -12px;
+        top: 5px;
+        border-radius: 50%;
+      }
+    }
+
+    .chat_content.ready::before {
+      background-color: rgb(19, 223, 0);
+    }
+
+    .chat_item {
+      padding: 10px 0;
+      position: relative;
+      border-bottom: 1px solid rgb(15 57 123);
+
+      // 小圆点伪类样式
+      &::before {
+        content: "";
+        display: block;
+        width: 8px;
+        height: 8px;
+        background-color: rgb(255, 0, 0);
+        position: absolute;
+        left: -12px;
+        top: 14px;
+        border-radius: 50%;
+      }
+
+      .chat_item_head {
+        color: #1b6fae;
+      }
+
+      .chat_item_content {
+        font-size: 14px;
+      }
+
+      .chat_ready {
+        margin-left: 3px;
+        font-size: 12px;
+        background-color: #2b82cd;
+        color: #ffffff;
+        display: inline-block;
+        padding: 3px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+      }
+    }
+
+    .chat_item.ready::before {
+      background-color: rgb(19, 223, 0);
+    }
+
+    & > p:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .order {
+    position: fixed;
+    bottom: 25px;
+    right: 25px;
+
+     & > button {
+      transition: all ease-in-out .3s;
+      cursor: pointer;
+      padding: 7px;
+      border-radius: 3px;
+      border: none;
+      background-color: #5f78ff47;
+      color: #fff;
+      font-weight: 600;backdrop-filter: blur(16px);
+
+      &:hover {
+        background-color: #5f77ff75;
+      }
+     }
+  }
+}
+</style>

src/views/emergen_cyrescue/emergency_map/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <mapAssembly/>
+  <div class="emergency_map_container">
+    <mapAssembly />
   </div>
 </template>
 
@@ -15,5 +15,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.emergency_map_container {
+  box-sizing: border-box;
+  height: calc(100vh - 84px);
+}
 </style>