[update] 设备管理

src/api/systemOverview.js

@@ -0,0 +1,27 @@
+import { getAction, postAction } from '@api/manage'
+
+// 设备分页列表
+const getDevicePage = (params) => getAction('/device/page', params)
+// 添加设备
+const addDevice = (params) => postAction('/device/add', params)
+// 修改设备
+const editDevice = (params) => postAction('/device/edit', params)
+// 删除设备
+const delDevice = (params) => postAction('/device/delete', params)
+// 系统设备概况
+const getSysDeviceOverview = (params) => getAction('/device/statistics', params)
+
+// 井口列表
+const getWellheadList = (params) => getAction('/wellhead/list', params)
+// 添加井口
+const addWellhead = (params) => postAction('/wellhead/add', params)
+
+export {
+  getDevicePage,
+  addDevice,
+  editDevice,
+  delDevice,
+  getSysDeviceOverview,
+  getWellheadList,
+  addWellhead,
+}

src/assets/less/common.less

@@ -1,4 +1,7 @@
 @import "./modifyLessVars.less";
+@custom-cyan: #2EE4FD;
+@custom-red: #FF5353;
+
 /*列表上方操作按钮区域*/
 .ant-card-body .table-operator {
   //margin-bottom: 8px;
@@ -106,6 +109,21 @@
   border-radius: 0;
 }
 .ant-table td { white-space: nowrap; }
+// 表头边框错位
+.ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
+  margin-right: -11px;
+}
+// 表头字体
+.ant-table .ant-table-thead tr > th {
+  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+}
+.ant-table.ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child {
+  border-right-color: @primary-color;
+  border-radius: 0;
+}
 /* 表格样式end */
 
 /* 复选框begin */
@@ -200,28 +218,61 @@
 .ant-input,
 .ant-select-selection
 {
-  background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
+  //background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
-  background-size: 110% calc(@btn-height-base + 2px) !important;
+  //background-size: 110% calc(100% + 4px) !important;
+  background: linear-gradient(to bottom, rgba(0, 89, 153, 0) 0%, rgba(0, 148, 255, 0.2) 100%) !important;
 }
-// 搜索按钮
+// 按钮样式
-.search-btn {
+.custom-btns-box {
-  border: none !important;
+
-  width: 88px !important;
+  .btn-icon {
-  background: url("~@assets/images/componentImg/btn.png") no-repeat center center !important;
+    margin-right: 3px;
-  background-size: 100% @btn-height-base !important;
+    margin-bottom: 3px;
-  font-size: 0;
+    width: 14px;
+  }
+  .btn-text {
+    font-family: PingFang SC, PingFang SC, sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 16px;
+  }
+  // 蓝色按钮
+  .btn-blue {
+    background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center !important;
+  }
+  // 青色按钮
+  .btn-cyan {
+    background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center !important;
+  }
+  // 按钮公共样式
+  .btn-blue,
+  .btn-cyan {
+    border: none !important;
+    width: 88px !important;
+    background-size: 100% @btn-height-base !important;
+  }
 }
-.search-btn-icon {
+
-  margin-right: 3px;
+.ant-btn.primary-btn,
-  margin-bottom: 3px;
+.ant-btn.primary-btn:hover,
-  width: 14px;
+.ant-btn.primary-btn:focus {
+  width: 88px;
+  height: 32px;
+  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #0094FF;
+  color: @text-color;
 }
-.search-btn-text {
+.ant-btn.danger-btn,
-  font-family: PingFang SC, PingFang SC, sans-serif;
+.ant-btn.danger-btn:hover,
-  font-weight: 500;
+.ant-btn.danger-btn:focus {
-  font-size: 14px;
+  width: 88px;
-  color: #FFFFFF;
+  height: 32px;
-  line-height: 16px;
+  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #FF5353;
+  color: @text-color;
 }
 /* 部分组件end */
 
@@ -301,23 +352,92 @@
   background-color: #FF5353;
 }
 
-.ant-btn.primary-btn,
+// 特殊大数字
-.ant-btn.primary-btn:hover,
+.big-number {
-.ant-btn.primary-btn:focus {
+  font-family: Audiowide, Audiowide, sans-serif;
-  width: 88px;
+  font-weight: 400;
-  height: 32px;
+  font-size: 24px;
-  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+  line-height: 32px;
-  border-radius: 2px 2px 2px 2px;
+  margin-right: 8px;
-  border: 1px solid #0094FF;
+  background: linear-gradient(90deg, #FFFFFF 0%, #96D0F9 100%);
-  color: @text-color;
+  -webkit-background-clip: text;
 }
-.ant-btn.danger-btn,
+
-.ant-btn.danger-btn:hover,
+// 标题加渐变背景
-.ant-btn.danger-btn:focus {
+.title-background {
-  width: 88px;
+  margin-bottom: 14px;
-  height: 32px;
+  font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
-  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+  font-weight: 400;
-  border-radius: 2px 2px 2px 2px;
+  font-size: 15px;
-  border: 1px solid #FF5353;
   color: @text-color;
+  line-height: 18px;
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
+  }
+
+  .title-background-text {
+    padding: 0 4px;
+    position: relative;
+    height: 22px;
+  }
+}
+
+// 青色
+.text-cyan { color: @custom-cyan; }
+
+// 红色
+.text-red { color: @custom-red; }
+
+/* a标签按钮样式 */
+.operation-btns {
+  .primary,
+  .primary:hover {
+    color: @custom-cyan;
+  }
+  .danger,
+  .danger:hover {
+    color: @custom-red
+  }
+  & > a:not(:last-child) {
+    margin-right: 10px;
+  }
+}
+
+/* 表单begin */
+.custom-vertical-form {
+  .ant-form-item-label {
+    line-height: 22px;
+    margin-bottom: 4px;
+  }
+  .ant-form-item {
+    margin-bottom: 18px;
+  }
+  .ant-form-item-label > label::after {
+    display: none;
+  }
+}
+/* 表单end */
+
+// flex居中
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// flex纵向
+.flex-column-between {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }

src/assets/less/modifyLessVars.js

@@ -23,5 +23,8 @@ module.exports = {
 
   // 高度调整
   'btn-height-base': '36px',
-  'input-height-base': '36px'
+  'input-height-base': '36px',
+
+  // 其他
+  'red-6': '#FF5353'
 }

src/assets/less/modifyLessVars.less

@@ -24,3 +24,6 @@
 /* 按钮 */
 @btn-height-base: 36px;
 @input-height-base: 36px;
+
+/* 其他 */
+@red-6: #FF5353;

src/components/CommonCard.vue

@@ -25,9 +25,29 @@ export default {
 <style lang="less" scoped>
 @import "~@assets/less/common.less";
 .common-card {
+  position: relative;
   height: 100%;
+  border: 1px solid rgba(0,148,255,0.24);
   border-bottom: 1px @primary-color solid;
 
+  // 左下右下高亮边框
+  &::before, &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 3%;
+    min-width: 16px;
+    height: 1px;
+    bottom: -1px;
+    background-color: #2EE4FD;
+  }
+  &::before {
+    left: 0;
+  }
+  &::after {
+    right: 0;
+  }
+
   /deep/ .ant-card-head {
     background-image: url("~@/assets/images/componentImg/header-bg-side.png"),
     url("~@/assets/images/componentImg/header-bg-center.png"),
@@ -59,6 +79,7 @@ export default {
   }
   /deep/ .ant-card-body {
     padding: 13px 20px 20px !important;
+    height: calc(100% - 42px);
   }
   /deep/ .ant-card-extra {
     padding: 0;

src/components/dict/JDictSelectTag.vue

@@ -7,7 +7,7 @@
     <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
   </a-radio-group>
 
-  <a-select v-else-if="tagType==='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
+  <a-select v-else-if="tagType==='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" v-bind="$attrs" @change="handleInput">
     <a-select-option :value="undefined">请选择</a-select-option>
     <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
       <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
@@ -77,9 +77,9 @@ export default {
         }
       })
     },
-    handleInput (e = '') {
+    handleInput (e) {
       let val
-      if (Object.keys(e).includes('target')) {
+      if (e !== undefined && Object.keys(e).includes('target')) {
         val = e.target.value
       } else {
         val = e

src/enums/commonEnums.js

@@ -0,0 +1,5 @@
+// 设备状态
+export const deviceStatus = {
+  offLine: { label: '离线', value: '0' },
+  onLine: { label: '在线', value: '1' }
+}

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -1,13 +1,633 @@
 <template>
-<div>1</div>
+  <a-spin :spinning="loading">
+    <a-row :gutter="20" type="flex" class="mb-20">
+      <a-col flex="545px">
+        <common-card title="系统设备概况">
+          <div class="overview-grid">
+            <div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
+              <div class="title-background">
+                <div class="title-background-text">{{ item.title }}</div>
+              </div>
+              <div class="overview-card-main">
+                <div class="overview-card-img">
+                  <img :src="item.icon" alt=''>
+                </div>
+                <div class="overview-card-content">
+                  <div class="first-content" v-if="sysDeviceOverviewData[item.countField] || sysDeviceOverviewData[item.countField] === 0">
+                    <span class="big-number">{{sysDeviceOverviewData[item.countField]}}</span>台
+                  </div>
+                  <!-- 在线 -->
+                  <div v-if="sysDeviceOverviewData[item.onLineField] || sysDeviceOverviewData[item.onLineField] === 0"
+                       class="working">在线：{{ sysDeviceOverviewData[item.onLineField] }}台</div>
+                  <!-- 离线 -->
+                  <div v-if="sysDeviceOverviewData[item.offLineField] || sysDeviceOverviewData[item.offLineField] === 0"
+                       class="cease">离线：{{ sysDeviceOverviewData[item.offLineField] }}台</div>
+                  <!-- 其他数据 -->
+                  <template v-if="item.otherData">
+                    <div v-for="it in item.otherData" :key="it.id || it.label">
+                      {{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+        </common-card>
+      </a-col>
+      <a-col flex="auto">
+        <common-card title="设备列表">
+          <a-table
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :scroll="{x: true,y:200}"
+            :columns="deviceData.columns"
+            :dataSource="deviceData.dataSource"
+            :pagination="deviceData.ipagination"
+            @change="handleTableChange">
+            <template slot="text" slot-scope="text">
+              <a-tooltip>
+                <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+                <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+              </a-tooltip>
+            </template>
+            <span slot="action" slot-scope="text, record, index" class="operation-btns">
+              <a class="primary" @click="handleChangeStatus(record, index)">{{record.changeDeviceStatus_dictText}}设备</a>
+              <a class="danger" @click="handleDelete(record, index)">删除</a>
+            </span>
+          </a-table>
+        </common-card>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="20" type="flex">
+      <a-col flex="545px">
+        <common-card title="系统消息">
+          <a-table
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :columns="sysMesData.columns"
+            :dataSource="sysMesData.dataSource"
+            :pagination="false">
+            <template slot="text" slot-scope="text">
+              <a-tooltip>
+                <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+                <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+              </a-tooltip>
+            </template>
+          </a-table>
+        </common-card>
+      </a-col>
+      <a-col flex="auto">
+        <a-row type="flex">
+          <a-col flex="1" style="margin-right: 20px">
+            <common-card title="添加设备">
+              <a-form :form="deviceForm" class="custom-vertical-form flex-column-between">
+                <div class="mb-20">
+                  <a-form-item label="设备名称">
+                    <a-input placeholder="请输入设备名称" :max-length="50"
+                             @change="event => event.target.value = event.target.value.trim()"
+                             v-decorator.trim="['deviceName', validatorRules.deviceName]"/>
+                  </a-form-item>
+                  <a-form-item label="设备类型">
+                    <j-dict-select-tag :triggerChange="true"
+                                       dictCode="device_type"
+                                       v-decorator="['deviceType', validatorRules.deviceType]"
+                                       placeholder="请选择设备类型">
+                    </j-dict-select-tag>
+                  </a-form-item>
+                  <a-form-item label="所属井口">
+                    <a-select v-decorator="['wellheadId', validatorRules.wellheadId]"
+                              placeholder="请选择所属井口">
+                      <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                  <a-form-item label="设备描述">
+                    <a-textarea
+                      placeholder="请输入设备描述"
+                      :rows="4"
+                      :max-length="500"
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
+                  </a-form-item>
+                </div>
+                <div class="flex-center custom-btns-box">
+                  <a-button class="btn-blue" @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
+                    <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
+                    <span class="btn-text">重置</span>
+                  </a-button>
+                  <a-button class="btn-cyan" @click="handleAddDevice">
+                    <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
+                    <span class="btn-text">添加</span>
+                  </a-button>
+                </div>
+              </a-form>
+            </common-card>
+          </a-col>
+          <a-col flex="1">
+            <common-card title="添加井口">
+              <a-form :form="wellheadForm" class="custom-vertical-form flex-column-between">
+                <div class="mb-20">
+                  <a-form-item label="所属作业区">
+                    <a-input placeholder="请输入所属作业区" :max-length="50"
+                             @change="event => event.target.value = event.target.value.trim()"
+                             v-decorator.trim="['operateArea', validatorRules.operateArea]"/>
+                  </a-form-item>
+                  <a-form-item label="所属井场">
+                    <j-dict-select-tag :triggerChange="true"
+                                       dictCode="wellhead_area"
+                                       v-decorator="['wellheadArea', validatorRules.wellheadArea]"
+                                       placeholder="请选择所属井场">
+                    </j-dict-select-tag>
+                  </a-form-item>
+                  <a-form-item label="井口类型">
+                    <j-dict-select-tag :triggerChange="true"
+                                       dictCode="wellhead_type"
+                                       v-decorator="['wellheadType', validatorRules.wellheadType]"
+                                       placeholder="请选择井口类型">
+                    </j-dict-select-tag>
+                  </a-form-item>
+                  <a-form-item label="井口名称">
+                    <a-input placeholder="请输入井口名称" :max-length="50"
+                             @change="event => event.target.value = event.target.value.trim()"
+                             v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
+                  </a-form-item>
+                </div>
+                <div class="flex-center custom-btns-box">
+                  <a-button class="btn-cyan" @click="handleAddWellhead">
+                    <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
+                    <span class="btn-text">添加</span>
+                  </a-button>
+                </div>
+              </a-form>
+            </common-card>
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+  </a-spin>
 </template>
 
 <script>
+import CommonCard from '@comp/CommonCard'
+import {
+  addDevice,
+  addWellhead, delDevice,
+  editDevice,
+  getDevicePage,
+  getSysDeviceOverview,
+  getWellheadList
+} from '@api/systemOverview'
+import { deviceStatus } from '@/enums/commonEnums'
+
 export default {
-  name: 'EquipmentManagement'
+  name: 'EquipmentManagement',
+  components: { CommonCard },
+  data () {
+    return {
+      loading: false,
+      /* 排序参数 */
+      isorter: {
+        column: 'createTime',
+        order: 'desc'
+      },
+      // 系统设备概况
+      deviceOverview: [
+        {
+          title: '设备总数',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/device.png'),
+          countField: 'deviceCount',
+          onLineField: 'onlineDeviceCount',
+          offLineField: 'offlineDeviceCount'
+        },
+        {
+          title: '井口数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/wellhead.png'),
+          otherData: [
+            { label: '总井数', unit: '口', valueField: 'wellCount' },
+            { label: '水井数', unit: '口', valueField: 'waterWellCount' },
+            { label: '油井数', unit: '口', valueField: 'oilWellCount' }
+          ]
+        },
+        {
+          title: 'RTU控制器数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/controller.png'),
+          countField: 'rtuCount',
+          onLineField: 'onlineRtuCount',
+          offLineField: 'offlineRtuCount'
+        },
+        {
+          title: '天然气数据远传终端数量',
+          icon: require('@/assets/images/systemOverview/equipmentManagement/terminal.png'),
+          countField: 'ngCount',
+          onLineField: 'onlineNgCount',
+          offLineField: 'offlineNgCount'
+        }
+      ],
+      // 系统设备概况数据
+      sysDeviceOverviewData: {},
+      // 设备列表相关
+      deviceData: {
+        loading: false,
+        columns: [
+          {
+            dataIndex: 'deviceStatus_dictText',
+            title: '设备状态',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'deviceName',
+            title: '设备名称',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'deviceSn',
+            title: '设备SN码',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'wellheadId_dictText',
+            title: '所属井口',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            scopedSlots: { customRender: 'action' },
+            align: 'center',
+            width: '20%'
+          }
+        ],
+        dataSource: [{}],
+        /* 分页参数 */
+        ipagination: {
+          current: 1,
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30'],
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          },
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0
+        }
+      },
+      // 系统消息相关
+      sysMesData: {
+        columns: [
+          {
+            dataIndex: 'triggerTime',
+            title: '触发时间',
+            align: 'center',
+            width: '10%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'messageType',
+            title: '消息类型',
+            align: 'center',
+            width: '10%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'messageContent',
+            title: '消息内容',
+            align: 'center',
+            width: '10%',
+            scopedSlots: { customRender: 'text' }
+          }
+        ],
+        dataSource: [
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '用户登录',
+            messageContent: '张三登录系统'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备上线',
+            messageContent: '树101-1RTU控制器上线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备下线',
+            messageContent: '树101-1RTU控制器上线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备上线',
+            messageContent: '树101-1RTU控制器上线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备上线',
+            messageContent: '树101-1RTU控制器上线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备上线',
+            messageContent: '树101-1RTU控制器上线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '设备下线',
+            messageContent: '树101-1RTU控制器下线'
+          },
+          {
+            triggerTime: '2024-3-15 13:55:26',
+            messageType: '用户退出',
+            messageContent: '张三退出系统'
+          }
+        ]
+      },
+      // 添加设备表单
+      deviceForm: this.$form.createForm(this),
+      // 添加井口表单
+      wellheadForm: this.$form.createForm(this),
+      // 表单校验
+      validatorRules: {
+        deviceName: { rules: [{ required: true, message: '请输入设备名称' }], validateTrigger: 'blur' },
+        deviceType: { rules: [{ required: true, message: '请选择设备类型' }], validateTrigger: 'change' },
+        wellheadId: { rules: [{ required: true, message: '请选择所属井口' }], validateTrigger: 'change' },
+        deviceDesc: { rules: [{ required: true, message: '请输入设备描述' }], validateTrigger: 'blur' },
+        operateArea: { rules: [{ required: true, message: '请输入所属作业区' }], validateTrigger: 'blur' },
+        wellheadArea: { rules: [{ required: true, message: '请选择所属井场' }], validateTrigger: 'change' },
+        wellheadType: { rules: [{ required: true, message: '请选择井口类型' }], validateTrigger: 'change' },
+        wellheadName: { rules: [{ required: true, message: '请输入井口名称' }], validateTrigger: 'blur' }
+      },
+      // 井口列表
+      wellheadList: []
+    }
+  },
+  created () {
+    this.loadPage()
+  },
+  methods: {
+    // 分页、排序、筛选变化时触发
+    handleTableChange (pagination, filters, sorter) {
+      this.deviceData.ipagination = pagination
+      // this.loadData()
+    },
+    // 设备状态改变
+    handleChangeStatus (record) {
+      const { id } = record
+      this.$confirm({
+        title: '确认' + record.changeDeviceStatus_dictText + '设备',
+        content: `确定要修改设备状态为${record.changeDeviceStatus_dictText}吗?`,
+        onOk: () => {
+          const params = { id, deviceStatus: record.changeDeviceStatus }
+          editDevice(params).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
+              if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
+                this.deviceData.ipagination.current -= 1
+              }
+              this.loadData()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.loadSysDeviceOverview()
+            this.loadDeviceList()
+          })
+        }
+      })
+    },
+    // 删除设备
+    handleDelete (record) {
+      const { id } = record
+      this.$confirm({
+        title: '确认删除',
+        content: '确定要删除此条数据吗?',
+        onOk: () => {
+          delDevice({ id }).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
+              if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
+                this.deviceData.ipagination.current -= 1
+              }
+              this.loadData()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.loadSysDeviceOverview()
+            this.loadDeviceList()
+          })
+        }
+      })
+    },
+    // 添加井口
+    handleAddWellhead () {
+      this.wellheadForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          addWellhead(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            // 重置表单
+            this.wellheadForm.resetFields()
+            // 更新系统设备概况
+            this.loadSysDeviceOverview()
+            // 更新井口下拉
+            this.loadWellheadList()
+          })
+        }
+      })
+    },
+    // 添加设备
+    handleAddDevice () {
+      this.deviceForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          addDevice(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            // 重置表单
+            this.deviceForm.resetFields()
+            // 更新系统设备概况和设备列表
+            this.loadSysDeviceOverview()
+            this.loadDeviceList()
+          })
+        }
+      })
+    },
+    // 获取井口下拉
+    loadWellheadList () {
+      getWellheadList().then(res => {
+        if (res.success) {
+          this.wellheadList = res.result || []
+        }
+      })
+    },
+    // 加载全部数据
+    loadPage () {
+      // 下拉菜单
+      this.loadWellheadList()
+      // 页面数据
+      this.loadSysDeviceOverview()
+      this.loadDeviceList()
+    },
+    // 加载系统设备概况数据
+    loadSysDeviceOverview () {
+      getSysDeviceOverview().then(res => {
+        if (res.success) {
+          this.sysDeviceOverviewData = res.result || {}
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 加载设备列表
+    loadDeviceList (arg) {
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.deviceData.ipagination.current = 1
+      }
+      this.deviceData.loading = true
+      const params = {
+        pageNo: this.deviceData.ipagination.current,
+        pageSize: this.deviceData.ipagination.pageSize,
+        ...this.isorter
+      }
+      getDevicePage(params).then((res) => {
+        if (res.success) {
+          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          const data = res.result.records || res.result || []
+          // 翻译设备状态，加修改设备状态的字段
+          this.deviceData.dataSource = data.map(item => {
+            if (item.deviceStatus === deviceStatus.onLine.value) {
+              item.deviceStatus_dictText = deviceStatus.onLine.label
+              item.changeDeviceStatus = deviceStatus.offLine.value
+              item.changeDeviceStatus_dictText = deviceStatus.offLine.label
+            } else if (item.deviceStatus === deviceStatus.offLine.value) {
+              item.deviceStatus_dictText = deviceStatus.offLine.label
+              item.changeDeviceStatus = deviceStatus.onLine.value
+              item.changeDeviceStatus_dictText = deviceStatus.onLine.label
+            }
+            return item
+          })
+          if (res.result.total) {
+            this.deviceData.ipagination.total = res.result.total
+          } else {
+            this.deviceData.ipagination.total = 0
+          }
+          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.deviceData.loading = false
+      })
+    },
+    // 重置表单
+    handleResetForm (form) {
+      form && form.resetFields && form.resetFields()
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+@import "~@/assets/less/modifyLessVars.less";
+// 系统设备概况
+.overview-grid {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'a b'
+                       'c d';
+}
+.overview-card {
+  padding: 12px;
+  position: relative;
+  border: 1px solid;
+  background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
+  border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
+  border-left: none;
+  border-right: none;
 
+  // 伪元素装饰
+  &::before,
+  &::after {
+    pointer-events: none;
+    user-select: none;
+    content: '';
+    display: block;
+    position: absolute;
+  }
+
+  // 四个角
+  &::before {
+    top: -2px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 4px);
+    background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
+    url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
+    background-repeat: no-repeat;
+    background-position: left top, left bottom, right top, right bottom;
+  }
+  // 两侧的边框
+  &::after {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid;
+    border-top: none;
+    border-bottom: none;
+    border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
+  }
+
+  .overview-card-main {
+    display: flex;
+    justify-content: space-between;
+
+    .overview-card-img {
+      flex: 0 0 72px;
+      margin-right: 36px;
+    }
+    .overview-card-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      flex: auto;
+      //text-align: center;
+      font-family: Rubik, Rubik, sans-serif;
+      font-weight: 400;
+      font-size: 13px;
+      color: @text-color;
+      line-height: 15px;
+
+      .first-content {
+        padding-left: 12px;
+      }
+    }
+  }
+}
 </style>

src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue

@@ -12,10 +12,10 @@
               <a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井">
                 <a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
               </a-select>
-              <span class="search-operate-btns">
+              <span class="search-operate-btns custom-btns-box">
-                <a-button class="search-btn" type="primary" @click="searchQuery">
+                <a-button class="btn-blue" type="primary" @click="searchQuery">
-                  <img :src="require('@assets/images/icon/search.png')" alt="查询" class="search-btn-icon">
+                  <img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
-                  <span class="search-btn-text">查询</span>
+                  <span class="btn-text">查询</span>
                 </a-button>
               </span>
             </a-form-item>
@@ -73,12 +73,12 @@
           <div class="working-status-container">
             <div class="working-status-title">名称：华h62-1</div>
             <div class="working-status-img">
-              <img :src="isWorking ? working : suspend" alt="油井工作状态">
+              <img :src="workingStatus" alt="油井工作状态">
             </div>
             <div class="working-status-btns">
-              <a-button class="primary-btn">远程启井</a-button>
+              <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
-              <a-button class="danger-btn">远程停井</a-button>
+              <a-button @click="handleChangeWorkingCondition(false)" class="danger-btn">远程停井</a-button>
-              <a-button class="primary-btn">频率控制</a-button>
+              <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">频率控制</a-button>
             </div>
           </div>
         </common-card>
@@ -137,8 +137,7 @@
 <!--        </span>-->
 <!--      </a-table>-->
 <!--    </div>-->
-    <div class='mb-20'>
+    <div>
-
       <a-table
         style='display: inline-block; width: calc(100% - 110px)'
         bordered
@@ -197,12 +196,12 @@ export default {
   components: { ResponsiveChart, CommonCardInfo, CommonCard },
   data () {
     return {
-      // 是否工作中
-      isWorking: true,
-      // 工作中图片
-      suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
       // 暂停中图片
-      working: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
+      // 工作中图片
+      working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      // 是否工作中
+      workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
       loading: false,
       queryParam: {},
       wellSiteList: [],
@@ -707,6 +706,14 @@ export default {
           }
         ]
       })
+    },
+    // 油井工作状态
+    handleChangeWorkingCondition (status) {
+      if (status === true) {
+        this.workingStatus = this.working
+      } else if (status === false) {
+        this.workingStatus = this.suspend
+      }
     }
   }
 }
@@ -825,19 +832,6 @@ export default {
   }
 }
 
-// 表格样式
-
-// 表头字体
-/deep/ .ant-table-thead tr > th {
-  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 20px;
-}
-// 表头边框错位
-/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
-  margin-right: -11px;
-}
 // 确认
 .confirm,
 .confirm:hover {