[update] 设备管理
This commit is contained in:
danshihao
@@ -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,
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 B |
Binary file not shown.
|
After Width: | Height: | Size: 361 B |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
Binary file not shown.
|
After Width: | Height: | Size: 946 B |
Binary file not shown.
|
After Width: | Height: | Size: 947 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 MiB After Width: | Height: | Size: 14 MiB |
+156
-36
@@ -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-size: 110% calc(@btn-height-base + 2px) !important;
|
||||
//background: url("~@assets/images/componentImg/input.png") no-repeat center center !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 {
|
||||
border: none !important;
|
||||
width: 88px !important;
|
||||
background: url("~@assets/images/componentImg/btn.png") no-repeat center center !important;
|
||||
background-size: 100% @btn-height-base !important;
|
||||
font-size: 0;
|
||||
// 按钮样式
|
||||
.custom-btns-box {
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
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;
|
||||
margin-bottom: 3px;
|
||||
width: 14px;
|
||||
|
||||
.ant-btn.primary-btn,
|
||||
.ant-btn.primary-btn:hover,
|
||||
.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 {
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
.ant-btn.danger-btn,
|
||||
.ant-btn.danger-btn:hover,
|
||||
.ant-btn.danger-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
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,
|
||||
.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;
|
||||
// 特殊大数字
|
||||
.big-number {
|
||||
font-family: Audiowide, Audiowide, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-right: 8px;
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #96D0F9 100%);
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.ant-btn.danger-btn,
|
||||
.ant-btn.danger-btn:hover,
|
||||
.ant-btn.danger-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
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;
|
||||
|
||||
// 标题加渐变背景
|
||||
.title-background {
|
||||
margin-bottom: 14px;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
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;
|
||||
}
|
||||
@@ -23,5 +23,8 @@ module.exports = {
|
||||
|
||||
// 高度调整
|
||||
'btn-height-base': '36px',
|
||||
'input-height-base': '36px'
|
||||
'input-height-base': '36px',
|
||||
|
||||
// 其他
|
||||
'red-6': '#FF5353'
|
||||
}
|
||||
|
||||
@@ -23,4 +23,7 @@
|
||||
|
||||
/* 按钮 */
|
||||
@btn-height-base: 36px;
|
||||
@input-height-base: 36px;
|
||||
@input-height-base: 36px;
|
||||
|
||||
/* 其他 */
|
||||
@red-6: #FF5353;
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
// 设备状态
|
||||
export const deviceStatus = {
|
||||
offLine: { label: '离线', value: '0' },
|
||||
onLine: { label: '在线', value: '1' }
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
<a-button class="search-btn" type="primary" @click="searchQuery">
|
||||
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="search-btn-icon">
|
||||
<span class="search-btn-text">查询</span>
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue" type="primary" @click="searchQuery">
|
||||
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
|
||||
<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 class="danger-btn">远程停井</a-button>
|
||||
<a-button class="primary-btn">频率控制</a-button>
|
||||
<a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
|
||||
<a-button @click="handleChangeWorkingCondition(false)" class="danger-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 {
|
||||
|
||||
Reference in New Issue
Block a user