[update] 设备管理
This commit is contained in:
danshihao
@@ -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