src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view/>
   </div>
 </template>
 
@@ -12,12 +12,20 @@ export default {
 </script>
 
 <style>
-.vue-treeselect__label {
+.vue-treeselect__placeholder{
+  color: #dcdfe6 !important;
+  font-size: 14px !important;
+}
+.vue-treeselect__single-value{
+  color: #cdcdcd !important;
+  font-size: 14px !important;
+}
+.vue-treeselect__label{
   color: #606266 !important;
   font-size: 14px !important;
   font-weight: 500;
 }
-.el-loading-mask {
+.el-loading-mask{
   z-index: 9999 !important;
 }
 </style>

src/views/emergen_cyrescue/emergency_information/emergency_address_book/components/grouplist.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;"/>
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;"/>
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/emergency_knowledge/case_library/components/casebasic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/emergency_knowledge/dangerous_goods/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/emergency_knowledge/hazardous_chemicals/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/emergency_knowledge/production_process/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/security_agency/institutional_management/components/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_information/security_agency/technical_management/components/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

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

@@ -124,6 +124,9 @@ export default {
       }
     }
   },
+  mounted() {
+    console.log('this.info :>>>>>>>>>>>>>>', this.info)
+  },
   methods: {
     clickIntoDutyInfoDialog() {
       this.$emit('goInfo', this.titleType)
@@ -211,7 +214,7 @@ export default {
 
   .infomation_table .infomation_table_tbody {
     display: block;
-    height: 155px;
+    height: 171px;
     overflow-y: scroll;
 
     &::-webkit-scrollbar {

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

@@ -0,0 +1,286 @@
+<template>
+  <div class="chat">
+    <div class="chat-title">
+      欢迎您,在这里可查看城市的重点隐患信息!
+    </div>
+
+    <div class="content">
+      <div class="item item-right">
+        <div class="bubble bubble-right">
+          刚刚不在，不好意思
+        </div>
+        <div class="avatar">
+          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.4XP3SrYigaDrlkbG_uFkzQAAAA?rs=1&pid=ImgDetMain">
+        </div>
+      </div>
+      <div class="item item-left">
+        <div class="avatar">
+          <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.-byzt1F3AA9UcVgO_DOIwQAAAA?rs=1&pid=ImgDetMain">
+        </div>
+        <div class="bubble bubble-left">
+          没事
+          <br>
+          你继续！
+        </div>
+      </div>
+
+      <!-- 服务端向客户端推送的消息队列 -->
+      <div v-for="(item, index) in receiveMessageList" :key="index" :class="item.className">
+        <div style="display: flex;" v-html="item.content" />
+      </div>
+
+      <!-- 客户端向服务端主动发送的消息队列 -->
+      <div v-for="(item, index) in sendMessageList" :key="index" :class="item.className">
+        <div style="display: flex;" v-html="item.content" />
+      </div>
+    </div>
+
+    <div class="input-area">
+      <textarea id="textarea" v-model="inputTextValue" class="input-text-area" name="text" />
+      <div class="button-area">
+        <button class="btnSend" @click="handleSendMessage"> 发送(S) </button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+let socketIOInstance
+
+export default {
+  name: 'Chat',
+  data() {
+    return {
+      websocketonline: '',
+      inputTextValue: '',
+      /** 发送消息列表 */
+      sendMessageList: [],
+      /** 接收消息列表 */
+      receiveMessageList: []
+    }
+  },
+  created() {
+    this.getWebsocketController()
+  },
+  beforeDestroy() {
+    socketIOInstance.close()
+  },
+  methods: {
+    // 启动 websocket 连接控制器
+    getWebsocketController() {
+      if (window.WebSocket) {
+        socketIOInstance = new WebSocket(encodeURI('ws://192.168.0.35:8089/getMapData/1'))
+        socketIOInstance.onopen = () => {
+          console.log('socket 连接成功!')
+        }
+        socketIOInstance.onerror = () => {
+          console.log('socket 连接失败!')
+        }
+        socketIOInstance.onclose = () => {
+          console.log('socket 连接断开!')
+        }
+        socketIOInstance.onmessage = (message) => {
+          this.handleReceiveMessage(message)
+        }
+      }
+    },
+    /** 处理服务端向客户端推送的消息并展示到消息列表内 */
+    handleReceiveMessage(val) {
+      this.sendMessageList.push({
+        className: 'item item-left',
+        content: `<div class="avatar"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.-byzt1F3AA9UcVgO_DOIwQAAAA?rs=1&pid=ImgDetMain"></div><div class="bubble bubble-left">${val.data}</div>`
+      })
+    },
+    // 处理客户端向服务端发送消息
+    handleSendMessage() {
+      if (this.inputTextValue === '') {
+        this.$message('消息不能为空!')
+        return
+      }
+      socketIOInstance.send(this.inputTextValue) // 向 websocket 服务发送消息
+
+      this.sendMessageList.push({
+        className: 'item item-right',
+        content: `<div class="bubble bubble-left">${this.inputTextValue}</div><div class="avatar"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.4XP3SrYigaDrlkbG_uFkzQAAAA?rs=1&pid=ImgDetMain" /></div>`
+      })
+
+      this.inputTextValue = ''
+      this.$nextTick(() => {
+        // 滚动条置底
+        const height = document.querySelector('.content').scrollHeight
+        document.querySelector('.content').scrollTop = height
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+* {
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+  font-family: '微软雅黑', "宋体", "Arial Narrow", Helvetica, sans-serif;
+}
+
+.chat {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  .chat-title {
+    font-size: 20px;
+    text-align: center;
+    color: #fff;
+    height: 35px;
+    border-bottom: 1px solid white
+  }
+
+  .content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 648px;
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    // 滚动条的滚动区域（轨道）
+    &::-webkit-scrollbar-track {
+      width: 8px;
+      border-radius: 18px;
+      background: transparent;
+    }
+
+    // 滚动条的可拖拽部分（滑块）
+    &::-webkit-scrollbar-thumb {
+      width: 8px;
+      border-radius: 18px;
+      background: rgba(20, 31, 168, .8);
+    }
+
+    .bubble {
+      max-width: 300px;
+      padding: 10px;
+      border-radius: 5px;
+      position: relative;
+      color: #000;
+      word-wrap: break-word;
+      word-break: normal;
+    }
+
+    .item-left .bubble {
+      margin-left: 15px;
+      background-color: #fff;
+    }
+
+    .item-left .bubble:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-right: 10px solid #fff;
+      border-bottom: 10px solid transparent;
+      left: -20px;
+    }
+
+    .item-right .bubble {
+      margin-right: 15px;
+      background-color: #9eea6a;
+    }
+
+    .item-right .bubble:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 10px solid #9eea6a;
+      border-top: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      right: -20px;
+    }
+
+    .item {
+      margin-top: 15px;
+      display: flex;
+      width: 100%;
+    }
+
+    .item.item-right {
+      justify-content: flex-end;
+    }
+
+    .avatar img {
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+    }
+  }
+
+  .input-area {
+    position: relative;
+    width: 100%;
+    height: 100px;
+
+    .input-text-area {
+      // 去除选中后的边框
+      outline: none;
+      resize: none;
+      background: none;
+      caret-color: #fff;
+      border: 1px solid #fff;
+      color: #fff;
+      width: 100%;
+      height: 100%;
+      border-radius: 6px;
+      padding: 10px;
+      overflow: auto;
+      line-height: 20px;
+
+      &::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      // 滚动条的滚动区域（轨道）
+      &::-webkit-scrollbar-track {
+        width: 8px;
+        border-radius: 18px;
+        background: transparent;
+      }
+
+      // 滚动条的可拖拽部分（滑块）
+      &::-webkit-scrollbar-thumb {
+        width: 8px;
+        border-radius: 18px;
+        background: rgba(20, 31, 168, .8);
+      }
+    }
+
+    .button-area {
+      margin-top: 5px;
+      text-align: right;
+
+      .btnSend {
+        width: 85px;
+        height: 37px;
+        background: none;
+        border: 1px solid #fff;
+        border-radius: 6px;
+        color: #fff;
+        cursor: pointer;
+        font-weight: 800;
+        transition: transform ease-in-out .2s;
+
+        &:active {
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -78,39 +78,114 @@ export default {
 </script>
 
 <style lang="scss">
-.el-dialog.bi_enterprise_dialog {
+.bi_enterprise_dialog {
   border-radius: 8px !important;
   background-color: #000d27f5 !important;
   border: 2px solid #034383;
 
-  // 控制弹窗的标题颜色
-  .el-dialog__title {
-    color: #cdcdcd !important;
-  }
-
-  // 控制 dialog 弹框 header 头部的下边线颜色
-  .el-dialog__header {
-    border-bottom: 1px solid #012b81 !important;
-  }
-
-  // 控制下拉框的背景颜色和边框样式
   .vue-treeselect__control {
     background: none !important;
     border: 1px solid #ffffff60 !important;
   }
 
-  // 树形选择器输入框内值的样式
+  .el-dialog__header {
-  .vue-treeselect__single-value {
+    border-bottom: 1px solid #012b81 !important;
-    color: #cdcdcd !important;
+  }
-    font-size: 14px !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: none;
-    color: #cdcdcd !important;
+    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 {
     padding: 0 !important;
     color: #ffffff !important;
@@ -137,14 +212,95 @@ export default {
     }
   }
 
-  .app-container {
+  .table-ui .tbg {
-    .table-ui .tbg {
+    background: none;
-      background: none;
+  }
-    }
 
-    .table-ui td {
+  .table-ui .tit {
-      border: 1px solid #043e99;
+    background: none;
-    }
+    color: #FFFFFF;
+  }
+
+  .table-ui td {
+    border: 1px solid #043e99 !important;
+  }
+
+  .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;
+  }
+
+  .el-table--small {
+    font-size: 20px !important;
+  }
+
+  .el-button--mini {
+    font-size: 24px !important;
+  }
+
+  .el-table__cell {
+    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-table .cell {
+    line-height: 36px !important;
+  }
+
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
   }
 }
 </style>

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

@@ -101,6 +101,5 @@ export default {
   }
 }
 </script>
-
 <style lang="scss" scoped>
 </style>

src/views/emergen_cyrescue/emergency_plan/company_plan-check/components/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_plan/company_plan/components/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>

src/views/emergen_cyrescue/emergency_team/expert_group/components/list.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form label-position="right" label-width="90px">
+      <el-form label-position="right" label-width="100px">
-        <el-row gutter="8">
+        <el-row>
           <el-col :span="6">
             <el-form-item label="组名称:">
-              <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" />
+              <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 250px" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="组类型:">
-              <el-select v-model="EXPERT_GROUP_TYPE" placeholder="请选择组类型...">
+              <el-select v-model="EXPERT_GROUP_TYPE" placeholder="请选择组类型..." style="width: 250px">
                 <el-option v-for="item in expertGroupType" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
               </el-select>
             </el-form-item>

src/views/emergen_cyrescue/emergency_team/rescue_expert/components/list.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-row gutter="8">
+      <el-row>
-        <el-form ref="form" label-width="90px">
+        <el-form ref="form" label-width="100px">
           <el-col :span="6">
             <el-form-item label="名称:" prop="KEYWORDS">
-              <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" />
+              <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 300px;" />
             </el-form-item>
           </el-col>
           <el-col :span="6">

src/views/emergen_cyrescue/emergency_team/rescue_team/components/list.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-row gutter="8">
+      <el-row>
-        <el-form label-width="90px">
+        <el-form label-width="100px">
           <el-col :span="6">
             <el-form-item label="机构名称：" prop="RESCUE_TEAM_NAME">
-              <el-input v-model="RESCUE_TEAM_NAME" placeholder="机构名称" class="filter-item" />
+              <el-input v-model="RESCUE_TEAM_NAME" placeholder="机构名称" class="filter-item" style="width: 300px"/>
             </el-form-item>
           </el-col>
           <el-col :span="6">

src/views/emergen_cyrescue/resource_management/emergency_shelter/components/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;margin-right: 10px;" />
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
         搜索
       </el-button>