KH/kh-device-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] PC端样式调整

Browse Source
This commit is contained in:
danshihao
2024-04-16 11:30:45 +08:00
parent 8105873219
commit 563d157144
46 changed files with 349 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/home/Home.vue
+7 -7
View File
@@ -80,14 +80,14 @@
</a-col>
<a-col flex="0.8rem">
<span class="search-operate-btns custom-btns-box">
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
<a-button class="btn-blue bottom-search-btn mb-8" type="primary">
<span class="btn-text">查询</span>
</a-button>
<div class="flex-between">
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
<a-button class="btn-blue btn-blue-small" type="primary">
<span class="btn-text"><a-icon type="left" /></span>
</a-button>
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
<a-button class="btn-blue btn-blue-small" type="primary">
<span class="btn-text"><a-icon type="right" /></span>
</a-button>
</div>
@@ -147,14 +147,14 @@
</a-col>
<a-col flex="0.8rem">
<span class="search-operate-btns custom-btns-box">
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
<a-button class="btn-blue bottom-search-btn mb-8" type="primary">
<span class="btn-text">查询</span>
</a-button>
<div class="flex-between">
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
<a-button class="btn-blue btn-blue-small" type="primary">
<span class="btn-text"><a-icon type="left" /></span>
</a-button>
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
<a-button class="btn-blue btn-blue-small" type="primary">
<span class="btn-text"><a-icon type="right" /></span>
</a-button>
</div>
@@ -403,7 +403,7 @@ export default {
name: legendData[1],
type: 'line',
stack: 'downStroke',
color: '#0094FF',
color: '#8FC7FF',
symbol: 'none',
smooth: true,
areaStyle: {
src/views/mobile/manage/Manage.vue
+7 -1
View File
@@ -367,7 +367,13 @@ export default {
},
// 切换展开折叠列表
toggleDeviceList () {
// 保留当前滚动高度
const scrollTop = document.documentElement.scrollTop
this.deviceData.showAll = !this.deviceData.showAll
// 数据更新后保持原来滚动高度
this.$nextTick(() => {
document.documentElement.scrollTop = scrollTop
})
},
// 添加设备
handleAddDevice () {
@@ -553,7 +559,7 @@ export default {
margin: 0.12rem auto 0;
font-family: Rubik, Rubik, sans-serif;
font-size: 0.12rem;
color: #A5B8CE;
color: #EFEFEF;
line-height: 0.14rem;
.list-toggle-arrow {
src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+11 -8
View File
@@ -25,7 +25,7 @@
<!-- 其他数据 -->
<template v-if="item.otherData">
<div v-for="it in item.otherData" :key="it.id || it.label">
{{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
{{it.label}}：{{sysDeviceOverviewData[it.valueField] || 0}}{{it.unit}}
</div>
</template>
</div>
@@ -41,23 +41,25 @@
ref="table"
size="middle"
bordered
rowKey="id"
:rowKey="(row, index) => row.id || index"
:loading="deviceData.loading"
:scroll="{x: true,y:206}"
:columns="deviceData.columns"
:dataSource="deviceData.dataSource"
:pagination="deviceData.ipagination"
@change="handleTableChange">
<template slot="text" slot-scope="text">
<template v-slot:text="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">
<template v-slot:action="text, record, index">
<span class="operation-btns">
<a class="primary" @click="handleChangeStatus(record, index)">{{record.changeDeviceStatus_dictText}}设备</a>
<a class="danger" @click="handleDelete(record, index)">删除</a>
</span>
</template>
</a-table>
</common-card>
</a-col>
@@ -75,7 +77,7 @@
:columns="sysMesData.columns"
:dataSource="sysMesData.dataSource"
:pagination="false">
<template slot="text" slot-scope="text">
<template v-slot:text="text">
<a-tooltip>
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
@@ -105,6 +107,7 @@
<a-form-item label="所属井口">
<a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear
placeholder="请选择所属井口">
<a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
<a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
</a-select>
</a-form-item>
@@ -118,11 +121,11 @@
</a-form-item>
</div>
<div class="flex-center custom-btns-box">
<a-button class="btn-blue" @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
<a-button type="primary" ghost @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">
<a-button type="primary" @click="handleAddDevice">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<span class="btn-text">添加</span>
</a-button>
@@ -160,7 +163,7 @@
</a-form-item>
</div>
<div class="flex-center custom-btns-box">
<a-button class="btn-cyan" @click="handleAddWellhead">
<a-button type="primary" @click="handleAddWellhead">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<span class="btn-text">添加</span>
</a-button>
src/views/systemOverview/systemSettings/SystemSettings.vue
+8 -8
View File
@@ -31,11 +31,11 @@
</a-form-item>
</div>
<div class="flex-center custom-btns-box">
<a-button class="btn-blue-long" @click="handleResetSysSettingForm" style="margin-right: 16px;">
<a-button type="primary" ghost @click="handleResetSysSettingForm" 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-medium" @click="handleSaveSysSetting">
<a-button type="primary" @click="handleSaveSysSetting">
<img :src="require('@assets/images/icon/save.png')" alt="保存设置" class="btn-icon">
<span class="btn-text">保存设置</span>
</a-button>
@@ -67,7 +67,7 @@
<div class="table-text"
:class="{
'tag-blue width-76': record.userType === userType.admin.value,
'tag-cyan width-76': record.userType === userType.common.value
'tag-green width-76': record.userType === userType.common.value
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
</a-tooltip>
</template>
@@ -128,8 +128,8 @@
</a-col>
</a-row>
<div class="flex-center custom-btns-box">
<a-button class="btn-cyan" @click="handleAddUser">
<img :src="require('@assets/images/icon/add.png')" alt="保存设置" class="btn-icon">
<a-button type="primary" @click="handleAddUser">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<span class="btn-text">添加</span>
</a-button>
</div>
@@ -161,7 +161,7 @@
<div class="table-text"
:class="{
'tag-blue width-118': text === msgType.hostToDevice.label,
'tag-cyan width-118': text === msgType.deviceToHost.label
'tag-green width-118': text === msgType.deviceToHost.label
}">{{ text || text === 0 ? text : global.emptyLine }}</div>
</a-tooltip>
</template>
@@ -533,9 +533,8 @@ export default {
position: relative;
width: calc(100% + 40px);
height: 168px;
margin: -13px -20px 0;
background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
background-size: 100%;
background-size: 124px 124px;
.upload-avatar {
width: 120px;
@@ -553,6 +552,7 @@ export default {
border: none;
width: 120px;
height: 120px;
padding: 1px;
}
/deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
/deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
src/views/systemOverview/systemSettings/modules/UserInfoModal.vue
+2 -2
View File
@@ -158,9 +158,8 @@ export default {
position: relative;
width: calc(100% + 40px);
height: 168px;
margin: -13px -20px 0;
background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
background-size: 100%;
background-size: 124px 124px;
.upload-avatar {
width: 120px;
@@ -178,6 +177,7 @@ export default {
border: none;
width: 120px;
height: 120px;
padding: 1px;
}
/deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
/deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+95 -78
View File
@@ -13,10 +13,11 @@
v-model="queryParam.wellheadArea"
placeholder="请选择所属井场"></j-dict-select-tag>
<a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井" allowClear>
<a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
<a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
</a-select>
<span class="search-operate-btns custom-btns-box">
<a-button class="btn-blue" type="primary" @click="searchQuery">
<a-button style="width: 88px;" type="primary" @click="searchQuery">
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
<span class="btn-text">查询</span>
</a-button>
@@ -24,8 +25,7 @@
</a-form-item>
</a-col>
<a-col flex="220px">
<!-- <a-input-search placeholder="请输入井口名称" v-model="queryParam.phone" class="search-input" />-->
<a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.phone">
<a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.wellheadName">
<span slot="suffix" class="input-search-suffix" @click="searchQuery">
<img :src="require('@assets/images/icon/search-primary.png')" alt="查询">
</span>
@@ -34,7 +34,7 @@
</a-row>
</a-form>
</div>
<template v-if="Object.keys('allData').length && dataSource.length">
<template v-if="hasData">
<a-row :gutter="20" type="flex">
<a-col :xl="12" :xxl="6" class="mb-20">
<div class="flex-column">
@@ -67,7 +67,9 @@
<common-card title="油井生产数据">
<!-- 泵型图 -->
<div class="pump-type mb-20">
<div class="pump-type-title">泵型：{{ allData.pumpType }}</div>
<div class="title-background pump-type-title">
<div class="title-background-text over-text">泵型：{{ allData.pumpType }}</div>
</div>
<div class="over-text pump-type-remarks" :title="allData.comment">备注：{{ allData.comment }}</div>
</div>
<common-card-info :data="allData"
@@ -85,14 +87,16 @@
</div>
</div>
<div class="working-status-container">
<div class="working-status-title">名称：{{ allData.wellName }}</div>
<div class="title-background working-status-title">
<div class="title-background-text over-text">名称：{{ allData.wellName }}</div>
</div>
<div class="working-status-img">
<img :src="workingStatus" alt="油井工作状态">
</div>
<div class="working-status-btns">
<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 class="working-status-btns custom-btns-box">
<a-button @click="handleChangeWorkingCondition(true)" type="primary">远程启井</a-button>
<a-button @click="handleChangeWorkingCondition(false)" ghost type="primary">远程停井</a-button>
<a-button @click="handleChangeWorkingCondition(true)" ghost type="primary">频率控制</a-button>
</div>
</div>
</common-card>
@@ -184,7 +188,7 @@
:dataSource="this.dataSource.length ? [{}]: []"
:pagination="false">
<div slot="actionBatch" class="action-batch">
<a href='javascript:' @click="handleAllAlarms" class='all-alarms'></a>
<a href='javascript:' @click="handleAllAlarms" class="all-alarms">全<br/>部<br/>报<br/>警</a>
</div>
</a-table>
</div>
@@ -200,7 +204,6 @@
import CommonCard from '@comp/CommonCard'
import CommonCardInfo from '@comp/CommonCardInfo'
import ResponsiveChart from '@comp/ResponsiveChart'
import * as echarts from 'echarts'
import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
import { wellheadType } from '@/enums/commonEnums'
import CommonEmpty from '@comp/CommonEmpty'
@@ -463,6 +466,7 @@ export default {
align: 'center'
}],
dataSource: [],
hasData: false, // 是否有数据
defaultId: 'default', // 默认数据的id
// 油井实时数据
oilWellRealTimeData: {},
@@ -531,31 +535,46 @@ export default {
}
}
},
watch: {
// 是否有数据状态改变
hasData () {
// 移除当前事件，然后绑定新事件
borderTable && borderTable.removeEventListener('scroll', borderTable)
leftTable && leftTable.removeEventListener('scroll', leftTable)
this.$nextTick(() => {
// 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件
borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body')
leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body')
borderTable.addEventListener('scroll', borderTableScroll)
leftTable.addEventListener('scroll', leftTableScroll)
})
}
},
mounted () {
this.searchQuery()
this.$nextTick(() => {
/* 处理左侧表格滚动两个表格滚动同步 begin */
// 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件
borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body')
leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body')
borderTable.addEventListener('scroll', borderTableScroll)
leftTable.addEventListener('scroll', leftTableScroll)
/* 处理左侧表格滚动两个表格滚动同步 end */
})
},
beforeDestroy () {
// 离开页面前清除定时器
clearInterval(this.timer)
// 离开时清除事件
borderTable.remove('scroll', borderTableScroll)
leftTable.remove('scroll', leftTableScroll)
borderTable && borderTable.removeEventListener('scroll', borderTableScroll)
leftTable && leftTable.removeEventListener('scroll', leftTableScroll)
},
methods: {
searchQuery () {
const params = Object.assign({}, this.queryParam)
// 没有条件恢复默认数据
if (Object.values(params).filter(item => item || item !== 0).length === 0) {
this.allData = staticData
console.log(params)
// if (!params.singleWell && !params.wellheadName) {
// this.$message.warning('请选择油井或输入井口名称查询')
// return
// }
// 选择单井查询
if (params.singleWell) {
const singleWell = this.singleWellList.find(item => item.id === params.singleWell)
this.hasData = true
this.allData = Object.assign({}, staticData, {
wellName: singleWell.wellheadName
})
this.dataSource = staticTableData
setTimeout(() => {
// 加载功图计产监控
@@ -570,6 +589,7 @@ export default {
return
}
// 置空数据，不请求实时数据
this.hasData = false
this.allData = {}
this.dataSource = []
clearInterval(this.timer)
@@ -608,7 +628,7 @@ export default {
const data = res.result || {}
this.oilWellRealTimeData = data
// 将油井实时参数放进全部数据中
this.allData = Object.assign({}, staticData, data['油井实时参数'])
this.allData = Object.assign({}, this.allData, data['油井实时参数'])
this.initIndicatorDiagram(data['实时示功图'])
this.initLoadDistribution(data['载荷分布图'])
} else {
@@ -642,27 +662,15 @@ export default {
color: '#FF5353',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255,83,83,0.2)' },
{ offset: 1, color: 'rgba(255,83,83,0)' }
])
},
data: data['上冲程']
},
{
name: legendData[1],
type: 'line',
stack: 'downStroke',
color: '#0094FF',
color: '#8FC7FF',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
{ offset: 1, color: 'rgba(0,148,255,0)' }
])
},
data: data['下冲程']
}
]
@@ -696,28 +704,16 @@ export default {
symbol: lineSymbolBase64,
symbolSize: 15,
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(46,228,253,0.2)' },
{ offset: 1, color: 'rgba(46,228,253,0)' }
])
},
data: data.oilProduction
},
{
name: legendData[1],
type: 'line',
stack: 'liquidProduction',
color: '#0094FF',
color: '#8FC7FF',
symbol: lineSymbolBase64,
symbolSize: 15,
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
{ offset: 1, color: 'rgba(0,148,255,0)' }
])
},
data: data.liquidProduction
}
]
@@ -817,14 +813,15 @@ export default {
}
.pump-type {
border: 1px solid @border-color-base;
position: relative;
background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: left;
height: 84px;
width: 364px;
margin: 0 auto 20px;
background-color: rgba(143,199,255,0.1);
background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type.png");
background-repeat: no-repeat;
background-size: 60px 60px;
background-position: 12px 12px;
width: 100%;
&-title {
position: absolute;
@@ -833,8 +830,17 @@ export default {
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
font-weight: 400;
font-size: 15px;
color: rgba(255,255,255,0.96);
color: @text-color;
line-height: 18px;
// 最大宽度 = 100% - 距离左侧 - 距离右侧
max-width: calc(100% - 88px - 12px);
z-index: 1;
&::before {
// 背景宽度 = 内容宽度 + 左侧4px 右侧4px
max-width: calc(100% + 8px);
min-width: 124px;
}
}
&-remarks {
position: absolute;
@@ -845,9 +851,7 @@ export default {
font-size: 12px;
color: #D0DEEE;
line-height: 14px;
width: 70%;
white-space: nowrap;
word-break: break-all;
max-width: calc(100% - 88px - 12px);
}
}
@@ -856,21 +860,25 @@ export default {
height: 100%;
.working-status-title {
background-size: 124px 16px;
background: url("~@/assets/images/text-bg.png") no-repeat 0 6px;
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
font-weight: 400;
font-size: 15px;
color: rgba(255,255,255,0.96);
color: @text-color;
line-height: 18px;
padding-left: 4px;
max-width: 100%;
margin-bottom: 18px;
// 背景宽度 = 内容宽度 + 左侧4px 右侧4px
&::before {
max-width: calc(100% + 8px);
min-width: 124px;
}
}
.working-status-img {
height: 178px;
font-size: 0;
text-align: center;
margin: 12px auto 18px;
margin: 0 auto 18px;
img {
height: 100%;
@@ -881,6 +889,10 @@ export default {
display: flex;
justify-content: center;
/deep/.ant-btn {
height: 32px;
}
button:not(:last-child) {
margin-right: 16px;
}
@@ -901,7 +913,7 @@ export default {
}
.info-row .info-value {
color: #2EE4FD;
color: @primary-color;
}
.divider-vertical {
width: 1px;
@@ -935,9 +947,16 @@ export default {
left: 50%;
transform: translate(-50%, calc(-50% + 20px));
display: inline-block;
width: 40px;
height: 100px;
background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
width: 36px;
height: 96px;
padding: 12px 0;
background: #8FC7FF;
border-radius: 2px;
font-family: Rubik, Rubik, sans-serif;
font-weight: 500;
font-size: 14px;
color: #1D2632;
line-height: 18px;
}
.left-table {
display: inline-block;
@@ -962,17 +981,15 @@ export default {
width: 100%;
// 屏幕高度 - 头部导航高度 - 搜索部分高度 - 距离底部
height: calc(100vh - 158px - 84px - 20px);
background: rgba(0,148,255,0.08);
border: 1px solid rgba(0,148,255,0.24);
border: 1px solid @border-color-base;
.empty {
position: absolute;
height: 45%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/deep/ .ant-empty-image {
height: 100%;
height: 140px;
}
/deep/ .empty-text {
font-size: 26px;
@@ -986,7 +1003,7 @@ export default {
right: 10px;
top: 40px;
bottom: 0;
width: 5px;
width: 6px;
overflow: hidden;
.border-table {
position: absolute;
src/views/user/Login.vue
+4 -4
View File
@@ -276,10 +276,10 @@ export default {
} else {
this.$router.push({ path: '/' }).catch((/* res */) => {})
}
this.$notification.success({
message: '欢迎',
description: `${timeFix()}，欢迎回来`
})
// this.$notification.success({
// message: '欢迎',
// description: `${timeFix()}，欢迎回来`
// })
},
cmsFailed (err) {
this.$notification.error({