{{ item.deviceName }}
+{{ item.deviceSn }}
+{{ item.wellheadId_dictText }}
+
-
-
- {{ page.meta.title}}
-
-
-
-
-
+
+
+
diff --git a/src/views/mobile/manage/Manage.vue b/src/views/mobile/manage/Manage.vue
index ff1f3a0..a0acce9 100644
--- a/src/views/mobile/manage/Manage.vue
+++ b/src/views/mobile/manage/Manage.vue
@@ -1,13 +1,591 @@
-
+
-
diff --git a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
index bc4bc9e..8ca5768 100644
--- a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+++ b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
@@ -4,7 +4,7 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/vant/SelectPicker.vue b/src/components/vant/SelectPicker.vue
new file mode 100644
index 0000000..d606d61
--- /dev/null
+++ b/src/components/vant/SelectPicker.vue
@@ -0,0 +1,108 @@
+
+
+
+ {{item[labelKey]}}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/enums/commonEnums.js b/src/enums/commonEnums.js
index 9d6606f..4e75d45 100644
--- a/src/enums/commonEnums.js
+++ b/src/enums/commonEnums.js
@@ -33,3 +33,10 @@ export const msgType = {
hostToDevice: { label: 'Host-》Device', value: 'hostToDevice' },
deviceToHost: { label: 'Device-》Host', value: 'deviceToHost' }
}
+
+// 移动端设备类型字典
+export const deviceType = {
+ rtuController: { label: 'RTU控制器', value: '1' },
+ transmissionTerminal: { label: '天然气数据远传终端', value: '2' },
+ wellheadEquipment: { label: '井口设备', value: '3' }
+}
diff --git a/src/main.js b/src/main.js
index 769e70e..6b63df7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,8 @@ import '@/components/jero/JVxeTable/install'
import '@/components/JVxeCells/install'
// 表单验证
import { rules } from '@/utils/rules'
+// 导入vant
+import '@/components/lazy_vant'
require('@/components/onlineForm/onlineForm')
require('@/components/onlineForm/OnlineForm.css')
diff --git a/src/views/mobile/home/Home.vue b/src/views/mobile/home/Home.vue
index 80ee5c3..fa2174b 100644
--- a/src/views/mobile/home/Home.vue
+++ b/src/views/mobile/home/Home.vue
@@ -1,15 +1,551 @@
-
- Home
-
+
+
+
+
+
+
+
+
+
+
+ 检索设备
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ oilWellRealTimeData['实时示功图']['时间'] }}
+
+
+
+
+
+
+ 油
井 +
+
+
+
+
+ 查询
+
+
+
+
+
+
+
+
+
+ 井 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 场站
门站 +
+
+
+
+
+ 查询
+
+
+
+
+
+
+ 门站 +
+
+
+
+
+
+
+
+
+ manage
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+ ![]()
+
+
+
+
+ {{sysDeviceOverviewData[item.countField]}}台
+
+
+ 在线：{{ sysDeviceOverviewData[item.onLineField] }}台
+
+ 离线：{{ sysDeviceOverviewData[item.offLineField] }}台
+
+
+
+ {{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.deviceStatus_dictText }}
+
+
+
+ ![]()
+
+
+
+
+ {{ item.changeDeviceStatus_dictText }}
+ 删除
+
+
+ {{deviceData.showAll ? '收起' : '展开'}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![重置]()
+ 重置
+
+
+ ![添加]()
+ 添加
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![添加]()
+ 添加
+
+
+
-
+
@@ -405,7 +405,6 @@ export default {
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)
}
@@ -430,7 +429,6 @@ export default {
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)
}
@@ -572,49 +570,6 @@ export default {
'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;
diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
index a7266a0..124ee97 100644
--- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
@@ -58,7 +58,7 @@
-
@@ -554,7 +554,7 @@ export default {
searchQuery () {
const params = Object.assign({}, this.queryParam)
// 没有条件恢复默认数据
- if (Object.values(params).length === 0) {
+ if (Object.values(params).filter(item => item || item !== 0).length === 0) {
this.allData = staticData
this.dataSource = staticTableData
setTimeout(() => {
@@ -607,6 +607,8 @@ export default {
if (res.success) {
const data = res.result || {}
this.oilWellRealTimeData = data
+ // 将油井实时参数放进全部数据中
+ this.allData = Object.assign({}, staticData, data['油井实时参数'])
this.initIndicatorDiagram(data['实时示功图'])
this.initLoadDistribution(data['载荷分布图'])
} else {
@@ -617,19 +619,19 @@ export default {
// 初始化 实时示功图
initIndicatorDiagram (data) {
// 没有渲染出组件就不执行
- if (!this.$refs.productionMonitoring) {
+ if (!this.$refs.indicatorDiagram) {
return
}
// 置空数据
if (!data || Object.keys(data).length === 0) {
- this.$refs.productionMonitoring.updateMyChartOption()
+ this.$refs.indicatorDiagram.updateMyChartOption()
return
}
// 获取基础配置
const legendData = ['上冲程', '下冲程']
const option = generateBaseOption()
option.legend.data = legendData
- option.xAxis.data = data['X轴']
+ option.xAxis[0].data = data['X轴']
option.yAxis[0].name = '载荷(KN)'
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
option.series = [
@@ -682,7 +684,7 @@ export default {
const legendData = ['产油量(t/d)', '产液量(m³/d)']
const option = generateBaseOption()
option.legend.data = legendData
- option.xAxis.data = data['X轴']
+ option.xAxis[0].data = data['X轴']
option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
option.series = [
@@ -725,19 +727,19 @@ export default {
// 初始化 载荷分布图
initLoadDistribution (data) {
// 没有渲染出组件就不执行
- if (!this.$refs.productionMonitoring) {
+ if (!this.$refs.loadDistribution) {
return
}
// 置空数据
if (!data || Object.keys(data).length === 0) {
- this.$refs.productionMonitoring.updateMyChartOption()
+ this.$refs.loadDistribution.updateMyChartOption()
return
}
// 获取基础配置
const legendData = ['最大载荷(KN)', '最小载荷(KN)']
const option = generateBaseOption()
option.legend.data = legendData
- option.xAxis.data = data['X轴']
+ option.xAxis[0].data = data['X轴']
option.yAxis[0].name = '载荷(KN)'
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
option.series = [
@@ -984,7 +986,7 @@ export default {
right: 10px;
top: 40px;
bottom: 0;
- width: 6px;
+ width: 5px;
overflow: hidden;
.border-table {
position: absolute;
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 2207f73..957b728 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -549,9 +549,9 @@ function isMobile () {
top: 0;
display: block;
width: 100%;
- height: 4.8rem;
+ height: 2.4rem;
background: url("~@/assets/mobile-login-bg.png") no-repeat;
- background-position-y: -0.88rem;
+ background-position-y: -0.44rem;
background-size: cover;
}
@@ -559,8 +559,8 @@ function isMobile () {
user-select: none;
position: absolute;
left: 50%;
- top: 4rem;
- width: 3.84rem;
+ top: 2rem;
+ width: 1.92rem;
transform: translateX(-50%);
img {
@@ -570,32 +570,32 @@ function isMobile () {
// 移动端登录表单样式
.login-form {
- padding: 5.62rem 0.48rem 0;
+ padding: 2.81rem 0.24rem 0;
/deep/.ant-input-affix-wrapper .ant-input-prefix {
left: 0;
.prefix-icon {
- width: .48rem;
+ width: 0.24rem;
}
}
/deep/.ant-input {
border: none;
border-radius: 0;
background: none !important;
- border-bottom: 0.02rem solid rgba(0,148,255,0.4);
+ border-bottom: 0.01rem solid rgba(0,148,255,0.4);
box-shadow: none;
- height: .96rem;
- padding-left: .72rem;
+ height: 0.48rem;
+ padding-left: 0.36rem;
font-family: PingFang SC, PingFang SC, sans-serif;
font-weight: 400;
- font-size: 0.32rem;
- line-height: 0.48rem;
+ font-size: 0.16rem;
+ line-height: 0.24rem;
}
.login-btn {
.ant-btn {
background: url("~@assets/images/login-btn.png") no-repeat;
background-size: 100% 100%;
- height: 0.96rem;
+ height: 0.48rem;
}
}
}
{{ item.title }}