工作台-增加组件
This commit is contained in:
parent
3ab53e4c65
commit
79a1148822
|
|
@ -0,0 +1,247 @@
|
|||
<template>
|
||||
<div class="edge-device-page">
|
||||
<div class="inner-tit">
|
||||
<img src="../../assets/img/lef-badge.png" alt="" />
|
||||
<div>施工环境</div>
|
||||
<div class="select">
|
||||
<el-select
|
||||
v-model="deviceVal"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
@change="deviceChange"
|
||||
style="border: none"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceRange"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-wrapper">
|
||||
<div class="single-icon">
|
||||
<span style="color: #42c8e3"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[8].jcValue
|
||||
: ''
|
||||
}}°C</span
|
||||
>
|
||||
<span>温度</span>
|
||||
<img src="../../assets/img/temp.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #fda496"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[7].jcValue
|
||||
: ''
|
||||
}}m/s</span
|
||||
>
|
||||
<span>风速</span>
|
||||
<img src="../../assets/img/wind.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #87d674"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[9].jcValue
|
||||
: ''
|
||||
}}%rh</span
|
||||
>
|
||||
<span>湿度</span>
|
||||
<img src="../../assets/img/wet.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #f2ad49"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[5].jcValue
|
||||
: ''
|
||||
}}db</span
|
||||
>
|
||||
<span>噪声</span>
|
||||
<img src="../../assets/img/loud.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #9634cc"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[3].jcValue
|
||||
: ''
|
||||
}}/ugm3</span
|
||||
>
|
||||
<span>PM2.5</span>
|
||||
<img src="../../assets/img/pm2.5.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #1db1c0"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[4].jcValue
|
||||
: ''
|
||||
}}/ugm3</span
|
||||
>
|
||||
<span>PM10</span>
|
||||
<img src="../../assets/img/pm10.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDeviceByProApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
queryChartsInfoByIdApi,
|
||||
queryWarnInfoByIdApi,
|
||||
} from '@/api/substation/substation'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
proId: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
name: 'leftFive',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
deviceVal: '',
|
||||
deviceRange: [],
|
||||
environmentInfoList: undefined,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
// 监听 proId 的变化, 当 proId 变化并且有值时, 获取设备数据
|
||||
watch: {
|
||||
proId: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.getDeviceData(val)
|
||||
} else {
|
||||
this.deviceVal = ''
|
||||
this.deviceRange = []
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
console.log('🚀 ~ getDeviceData-调用了 ~ proId:', proId)
|
||||
let res = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 116,
|
||||
})
|
||||
console.log('🚀 ~ getDeviceData ~ res:', res)
|
||||
if (res.data.data.length > 0) {
|
||||
this.deviceVal = res.data.data[0].devId
|
||||
this.deviceRange = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId,
|
||||
}
|
||||
})
|
||||
await this.getEnvironmentData(this.deviceVal)
|
||||
} else {
|
||||
this.deviceVal = ''
|
||||
this.deviceRange = []
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
async getEnvironmentData(devId) {
|
||||
console.log('🚀 ~ getEnvironmentData ~ devId:', devId)
|
||||
let res = await queryEnvironmentInfoByIdApi({
|
||||
devId,
|
||||
})
|
||||
console.log('res-->', res)
|
||||
if (res.data.data.length > 0) {
|
||||
this.environmentInfoList = res.data.data
|
||||
} else {
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
deviceChange(e) {
|
||||
console.log(e)
|
||||
this.getEnvironmentData(e)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@font-face {
|
||||
font-family: 'YouShe';
|
||||
src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
|
||||
}
|
||||
|
||||
.edge-device-page {
|
||||
height: 100%;
|
||||
background-color: #f3f7ff;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eff2fc;
|
||||
box-shadow: 2px 2px 2px #d9e0f3;
|
||||
|
||||
.inner-tit {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
background-color: #eff4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-family: 'YouShe', sans-serif;
|
||||
box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
|
||||
-2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.single-wrapper {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
|
||||
.single-icon {
|
||||
width: 12%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
span:first-child {
|
||||
font-size: 24px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<div class="edge-device-page">
|
||||
<div class="inner-tit">
|
||||
<img src="../../assets/img/lef-badge.png" alt="" />
|
||||
<div>基坑检测</div>
|
||||
<div class="select">
|
||||
<el-select
|
||||
v-model="pitVal"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
@change="pitChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in pitRange"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-icons">
|
||||
<div class="single-icon">
|
||||
<span style="color: #3bc7e3"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[0].jcValue
|
||||
: ''
|
||||
}}<span style="font-size: 18px">%VOL</span></span
|
||||
>
|
||||
<span>含氧量</span>
|
||||
<img src="../../assets/img/O2.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #7588ff"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[1].jcValue
|
||||
: ''
|
||||
}}<span style="font-size: 18px">%PPM</span></span
|
||||
>
|
||||
<span>一氧化碳</span>
|
||||
<img src="../../assets/img/CO.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #62c560"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[2].jcValue
|
||||
: ''
|
||||
}}<span style="font-size: 18px">%LEL</span></span
|
||||
>
|
||||
<span>可燃气体</span>
|
||||
<img src="../../assets/img/fire.png" alt="" />
|
||||
</div>
|
||||
<div class="single-icon">
|
||||
<span style="color: #f68f84"
|
||||
>{{
|
||||
environmentInfoList
|
||||
? environmentInfoList[3].jcValue
|
||||
: ''
|
||||
}}<span style="font-size: 18px">%PPM</span></span
|
||||
>
|
||||
<span>硫化氢</span>
|
||||
<img src="../../assets/img/H2S.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDeviceByProApi,
|
||||
queryPitDataApi,
|
||||
queryLimitSpaceApi,
|
||||
queryNewLimitSpaceApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
} from '@/api/substation/substation'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
proId: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
name: 'LeftSeven',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
environmentInfoList: undefined,
|
||||
currentPit: undefined,
|
||||
pitVal: undefined,
|
||||
pitRange: [],
|
||||
// 暂定 0离线 1报警 2在线
|
||||
pitList: [],
|
||||
todayRecordList: [],
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
watch: {
|
||||
proId: {
|
||||
handler: function (val) {
|
||||
console.log('🚀 ~ watch--子组件 val:', val)
|
||||
if (val) {
|
||||
this.getDeviceData(val)
|
||||
} else {
|
||||
this.pitVal = ''
|
||||
this.pitRange = []
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
let res = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 119,
|
||||
})
|
||||
if (res.data.data.length> 0) {
|
||||
this.pitVal = res.data.data[0].devId
|
||||
this.pitList = res.data.data
|
||||
this.pitRange = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId,
|
||||
}
|
||||
})
|
||||
await this.getEnvironmentData(this.pitVal)
|
||||
} else {
|
||||
this.pitVal = ''
|
||||
this.pitRange = []
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
async getEnvironmentData(devId) {
|
||||
let res = await queryEnvironmentInfoByIdApi({
|
||||
devId,
|
||||
})
|
||||
if (res.data.data.length > 0) {
|
||||
this.environmentInfoList = res.data.data
|
||||
} else {
|
||||
this.environmentInfoList = undefined
|
||||
}
|
||||
},
|
||||
pitChange(e) {
|
||||
console.log(e)
|
||||
this.getEnvironmentData(e)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@font-face {
|
||||
font-family: 'YouShe';
|
||||
src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
|
||||
}
|
||||
|
||||
.edge-device-page {
|
||||
height: 100%;
|
||||
background-color: #f3f7ff;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eff2fc;
|
||||
box-shadow: 2px 2px 2px #d9e0f3;
|
||||
|
||||
.inner-tit {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
background-color: #eff4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-family: 'YouShe', sans-serif;
|
||||
box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
|
||||
-2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.work-icons {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
|
||||
.single-icon {
|
||||
width: 12%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
span:first-child {
|
||||
font-size: 24px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,456 @@
|
|||
<template>
|
||||
<div class="edge-device-page">
|
||||
<div class="inner-tit">
|
||||
<img src="../../assets/img/lef-badge.png" alt="" />
|
||||
<div>组塔检测</div>
|
||||
</div>
|
||||
<div class="tower-info">
|
||||
<div class="tower-lef">
|
||||
<div class="lef-spin">
|
||||
<div>
|
||||
<h4 style="background-color: #d8d8d8"></h4>
|
||||
离线
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="background-color: #f31111"></h4>
|
||||
报警
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="background-color: #39ce10"></h4>
|
||||
在线
|
||||
</div>
|
||||
</div>
|
||||
<span>倾角监测设备</span>
|
||||
<div class="lef-tower-pic">
|
||||
<div
|
||||
:class="[
|
||||
'single-tower',
|
||||
{ isActive: currentAngleTower === item.devId },
|
||||
]"
|
||||
v-for="item in towerAngleList"
|
||||
:key="item.devId"
|
||||
@click="selTowerAngle(item)"
|
||||
>
|
||||
<img
|
||||
v-if="item.devStatus === 0"
|
||||
src="../../assets/img/offline.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.devWarn === 1"
|
||||
src="../../assets/img/alerting.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.devStatus === 1 && item.devWarn === 0"
|
||||
src="../../assets/img/inline.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span>拉力监测设备</span>
|
||||
<div class="lef-tower-pic">
|
||||
<div
|
||||
:class="[
|
||||
'single-tower',
|
||||
{ isActive: currentPullTower === item.devId },
|
||||
]"
|
||||
v-for="item in towerPullList"
|
||||
:key="item.devId"
|
||||
@click="selTowerPull(item)"
|
||||
>
|
||||
<img
|
||||
v-if="item.devStatus === 0"
|
||||
src="../../assets/img/offline.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.devWarn === 1"
|
||||
src="../../assets/img/alerting.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.devStatus === 1 && item.devWarn === 0"
|
||||
src="../../assets/img/inline.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tower-rig">
|
||||
<div class="dip-angle">
|
||||
<div
|
||||
class="upper-pic"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#eaefff,
|
||||
#e2e6fb,
|
||||
#dadcf5
|
||||
);
|
||||
border: 1px solid #9ebfdc;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/img/dip-angle.png" alt="" />
|
||||
<div>
|
||||
<span>倾角</span>
|
||||
<span style="color: #854dfa"
|
||||
>{{ angleFirst }}°</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lower-info">
|
||||
<div v-for="item in angleList" :key="item.jcName">
|
||||
<span>{{ item.jcTime }}</span>
|
||||
<span>{{ item.jcValue }}{{ item.jcUnit }}</span>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<span>2024.08.02 12:01</span>
|
||||
<span>30°</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>2024.08.02 12:01</span>
|
||||
<span>30°</span>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-force">
|
||||
<div
|
||||
class="upper-pic"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#eaefff,
|
||||
#dbecfd,
|
||||
#c8dffd
|
||||
);
|
||||
border: 1px solid #afcce9;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/img/pull.png" alt="" />
|
||||
<div>
|
||||
<span>拉力</span>
|
||||
<span style="color: #418cff">{{ pullFirst }}N</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lower-info">
|
||||
<div v-for="item in pullList" :key="item.jcName">
|
||||
<span>{{ item.jcTime }}</span>
|
||||
<span>{{ item.jcValue }}{{ item.jcUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDeviceByProApi,
|
||||
queryTowerTodayApi,
|
||||
queryTowerWarnApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
} from '@/api/substation/substation'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
proId: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
name: 'leftSix',
|
||||
data() {
|
||||
return {
|
||||
currentAngleTower: undefined,
|
||||
currentPullTower: undefined,
|
||||
// 暂定 0离线 1在线
|
||||
towerAngleList: [],
|
||||
towerPullList: [],
|
||||
angleFirst: undefined,
|
||||
pullFirst: undefined,
|
||||
angleList: [],
|
||||
pullList: [],
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted() {},
|
||||
watch: {
|
||||
proId: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.getDeviceData(val)
|
||||
} else {
|
||||
this.towerAngleList = []
|
||||
this.towerPullList = []
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// 监听 towerAngleList和towerPullList 的变化 当变化时, 清空angleFirst, pullFirst, angleList, pullList
|
||||
towerAngleList: {
|
||||
handler: function (val) {
|
||||
this.angleFirst = undefined
|
||||
this.angleList = []
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
towerPullList: {
|
||||
handler: function (val) {
|
||||
this.pullFirst = undefined
|
||||
this.pullList = []
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
let angleRes = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 117,
|
||||
})
|
||||
this.towerAngleList = angleRes.data.data
|
||||
let pullRes = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 118,
|
||||
})
|
||||
this.towerPullList = pullRes.data.data
|
||||
},
|
||||
async getEnvironmentData(devId, type) {
|
||||
let res = await queryEnvironmentInfoByIdApi({
|
||||
devId,
|
||||
})
|
||||
console.log('🚀 ~ getEnvironmentData ~ res:', res)
|
||||
if (type === '117') {
|
||||
if (res.data.data.length > 0) {
|
||||
this.angleFirst = res.data.data[0].jcValue
|
||||
this.angleList = res.data.data.filter(
|
||||
(item) => item.jcUnit === '°',
|
||||
)
|
||||
} else {
|
||||
this.angleFirst = ''
|
||||
this.angleList = []
|
||||
}
|
||||
} else if (type === '118') {
|
||||
if (res.data.data.length > 0) {
|
||||
this.pullFirst = res.data.data[0].jcValue
|
||||
this.pullList = res.data.data.filter(
|
||||
(item) => item.jcUnit === 'N',
|
||||
)
|
||||
} else {
|
||||
this.pullFirst = ''
|
||||
this.pullList = []
|
||||
}
|
||||
}
|
||||
},
|
||||
selTowerAngle(val) {
|
||||
console.log(val)
|
||||
this.currentAngleTower = val.devId
|
||||
this.getEnvironmentData(val.devId, val.devType)
|
||||
},
|
||||
selTowerPull(val) {
|
||||
this.currentPullTower = val.devId
|
||||
this.getEnvironmentData(val.devId, val.devType)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@font-face {
|
||||
font-family: 'YouShe';
|
||||
src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
|
||||
}
|
||||
|
||||
.edge-device-page {
|
||||
height: 100%;
|
||||
background-color: #f3f7ff;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eff2fc;
|
||||
box-shadow: 2px 2px 2px #d9e0f3;
|
||||
|
||||
.inner-tit {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
background-color: #eff4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-family: 'YouShe', sans-serif;
|
||||
box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
|
||||
-2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tower-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 90%;
|
||||
|
||||
.tower-lef {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.lef-spin {
|
||||
width: 100%;
|
||||
height: 4%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
|
||||
h4 {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 15px 0;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.lef-tower-pic {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
|
||||
.single-tower {
|
||||
width: 35%;
|
||||
height: 135px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.isActive {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#eef7ff,
|
||||
#ddedff,
|
||||
#c2dcff
|
||||
);
|
||||
border: 1px solid #b8d2ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tower-rig {
|
||||
flex: 1;
|
||||
background-color: #ebf2fc;
|
||||
border: 1px solid #cadff3;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.dip-angle,
|
||||
.pull-force {
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed #a3c2de;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.upper-pic {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 4% 18%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.lower-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
overflow-y: auto;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 50px;
|
||||
border-bottom: 1px dashed #cccfd4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span:first-child {
|
||||
font-size: 18px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -108,6 +108,9 @@ import VueGridLayout from 'vue-grid-layout'
|
|||
import LeftOne from '@/components/home/leftOne.vue'
|
||||
import LeftTwo from '@/components/home/leftTwo.vue'
|
||||
import LeftThree from '@/components/home/leftThree.vue'
|
||||
import LeftFive from '@/components/home/leftFive.vue'
|
||||
import LeftSix from '@/components/home/leftSix.vue'
|
||||
import LeftSeven from '@/components/home/leftSeven.vue'
|
||||
import RightOne from '@/components/home/rightOne.vue'
|
||||
import RightTwo from '@/components/home/rightTwo.vue'
|
||||
import CountryMap from '@/components/home/countryMap.vue'
|
||||
|
|
@ -124,7 +127,10 @@ export default {
|
|||
LeftThree,
|
||||
RightOne,
|
||||
RightTwo,
|
||||
CountryMap
|
||||
CountryMap,
|
||||
LeftFive,
|
||||
LeftSix,
|
||||
LeftSeven
|
||||
},
|
||||
computed: {
|
||||
searchComp() {
|
||||
|
|
@ -430,6 +436,33 @@ export default {
|
|||
isAccord: '1*1',
|
||||
rigCont: '2*2'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '环境检测',
|
||||
componentName: 'LeftFive',
|
||||
w: 3,
|
||||
h: 1,
|
||||
isAccord: '1*1',
|
||||
rigCont: '1*3'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '组塔检测',
|
||||
componentName: 'LeftSix',
|
||||
w: 2,
|
||||
h: 2,
|
||||
isAccord: '1*1',
|
||||
rigCont: '2*2'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '基坑检测',
|
||||
componentName: 'LeftSeven',
|
||||
w: 3,
|
||||
h: 1,
|
||||
isAccord: '1*1',
|
||||
rigCont: '1*3'
|
||||
}
|
||||
],
|
||||
rowHeight: 0,
|
||||
previewLayout: [],
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
>
|
||||
<div class="item-box">
|
||||
<component v-if="item.componentName === 'CountryMap'" :is="item.componentName" :send-geo="sendGeo"/>
|
||||
<component v-else :is="item.componentName" @openDialog="handleDialog"/>
|
||||
<component v-else :is="item.componentName" @openDialog="handleDialog" :proId="proId"/>
|
||||
</div>
|
||||
</GridItem>
|
||||
</GridLayout>
|
||||
|
|
@ -46,6 +46,9 @@ import ItemSix from './item-six.vue'
|
|||
import LeftOne from '@/components/home/leftOne.vue'
|
||||
import LeftTwo from '@/components/home/leftTwo.vue'
|
||||
import LeftThree from '@/components/home/leftThree.vue'
|
||||
import LeftFive from '@/components/home/leftFive.vue'
|
||||
import LeftSix from '@/components/home/leftSix.vue'
|
||||
import LeftSeven from '@/components/home/leftSeven.vue'
|
||||
import RightOne from '@/components/home/rightOne.vue'
|
||||
import RightTwo from '@/components/home/rightTwo.vue'
|
||||
import CountryMap from '@/components/home/countryMap.vue'
|
||||
|
|
@ -57,14 +60,18 @@ import {
|
|||
querySubProjInfoApi
|
||||
} from '@/api/substation/substation'
|
||||
export default {
|
||||
/* props: {
|
||||
layoutList: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
// 第一行
|
||||
],
|
||||
},
|
||||
}, */
|
||||
props: {
|
||||
// layoutList: {
|
||||
// type: Array,
|
||||
// default: () => [
|
||||
// // 第一行
|
||||
// ],
|
||||
// },
|
||||
proId: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GridLayout: VueGridLayout.GridLayout,
|
||||
GridItem: VueGridLayout.GridItem,
|
||||
|
|
@ -74,7 +81,10 @@ export default {
|
|||
RightOne,
|
||||
RightTwo,
|
||||
CountryMap,
|
||||
CommonDialog
|
||||
CommonDialog,
|
||||
LeftFive,
|
||||
LeftSix,
|
||||
LeftSeven
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -196,8 +206,20 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
console.log('created-->工程id', this.proId)
|
||||
}, 200)
|
||||
this.getGeoData()
|
||||
},
|
||||
// 监听工程id变化
|
||||
watch: {
|
||||
proId: {
|
||||
handler: function (val) {
|
||||
console.log('workbench--watch-->工程id', val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
this.rowHeight = (this.$refs['workbenchEditRef'].clientHeight - 65) / 12
|
||||
|
|
|
|||
|
|
@ -1,11 +1,26 @@
|
|||
<template>
|
||||
<!-- 工作台 -->
|
||||
<div class="workbench-container">
|
||||
<div class="select">
|
||||
<el-select
|
||||
v-model="proId"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
style="border: none"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in proOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button
|
||||
size="small"
|
||||
class="edit-btn"
|
||||
@click="handleEditWorkbench"
|
||||
v-if="!idEdit"
|
||||
size="small"
|
||||
class="edit-btn"
|
||||
@click="handleEditWorkbench"
|
||||
v-if="!idEdit"
|
||||
>编辑工作台</el-button
|
||||
>
|
||||
|
||||
|
|
@ -15,7 +30,7 @@
|
|||
@handleSubmit="handleSubmit"
|
||||
style="margin-top: 10px"
|
||||
/>
|
||||
<WorkbenchTemp v-else />
|
||||
<WorkbenchTemp v-else :proId="proId"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,6 +43,7 @@ import LeftThree from '@/components/home/leftThree.vue'
|
|||
import RightOne from '@/components/home/rightOne.vue'
|
||||
import RightTwo from '@/components/home/rightTwo.vue'
|
||||
import CountryMap from '@/components/home/countryMap.vue'
|
||||
import { queryProjListApi } from '@/api/tableApis'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -43,14 +59,14 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
idEdit: false,
|
||||
|
||||
proId: undefined,
|
||||
proOptions: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getTableData()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleEditWorkbench() {
|
||||
this.idEdit = true
|
||||
},
|
||||
|
|
@ -62,6 +78,24 @@ export default {
|
|||
// this.getTableData()
|
||||
this.idEdit = false
|
||||
},
|
||||
// 获取工程列表
|
||||
async getTableData() {
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
}
|
||||
let res = await queryProjListApi(params)
|
||||
console.log('🚀 ~ 获取工程列表 ~ res:', res)
|
||||
if (res.data.code === 200) {
|
||||
this.proOptions = res.data.rows.map((item) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.proName,
|
||||
}
|
||||
})
|
||||
this.proId = res.data.rows[0].id
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -79,5 +113,12 @@ export default {
|
|||
right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.select {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: 150px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue