xins
/
highwaysaas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改图片

Browse Source
master
夜笙歌 2 years ago
parent 900932e87f
commit b91318c737
7 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-ui/src/assets/board/equipment/aee9a893a43f8c60167ef6dd07230a6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
ruoyi-ui/src/assets/board/equipment/icon2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
ruoyi-ui/src/assets/board/equipment/icon222.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

59
ruoyi-ui/src/views/board/equipment/index.vue
Unescape Escape View File

@ -33,7 +33,9 @@
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeName }}</span> <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeName }}</span>
</p> </p>
</div> </div>
<div v-if="show" class="img"></div> <div v-if="show"
:style="'background-image: url('+(MonitorInfo.monitorPic ? MonitorInfo.monitorPic :defaultImg)+');'"
class="img"></div>
<div class="terminal"> <div class="terminal">
<!--el-form :model="form" class="demo-form-inline"> <!--el-form :model="form" class="demo-form-inline">
<el-form-item label="传感器名称："> <el-form-item label="传感器名称：">
@ -42,19 +44,22 @@
</el-form--> </el-form-->
<div class="terminalList"> <div class="terminalList">
<div v-for="(i,k) in controlList" class="item"> <div v-for="(i,k) in controlList" class="item">
<div class="icon"></div> <div :style="'background-image: url('+(i.devicePic ? i.devicePic :defaultImg1)+');'" class="icon"></div>
<div class="title">{{ i.deviceName + ' - ' + i.deviceModeFunction.functionName }}</div> <div class="title">{{ i.deviceName + ' - ' + i.deviceModeFunction.functionName }}</div>
<div class="switch"> <div class="switch">
<el-button <el-button
@click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)" type="primary" size="mini">执行 size="mini"
type="primary"
@click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">
执行
</el-button> </el-button>
<!-- <el-switch--> <!-- <el-switch-->
<!-- v-model="i.deviceType==='1'"--> <!-- v-model="i.deviceType==='1'"-->
<!-- active-color="#1165a1"--> <!-- active-color="#1165a1"-->
<!-- inactive-color="#1facf4"--> <!-- inactive-color="#1facf4"-->
<!-- @change="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">--> <!-- @change="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">-->
<!-- </el-switch>--> <!-- </el-switch>-->
</div> </div>
</div> </div>
</div> </div>
@ -63,14 +68,14 @@
<div v-for="i in acquisitionList" class="item"> <div v-for="i in acquisitionList" class="item">
<div class="iconBg"></div> <div class="iconBg"></div>
<div <div
:style="'background-image: url('+i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]+')'" :style="'background-image: url('+i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))] ? i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]:''+')'"
class="icon"></div> class="icon"></div>
<div class="rightBg"> <div class="rightBg">
<div class="title">{{ i.deviceName }}</div> <div class="title">{{ i.deviceName }}</div>
<div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;"> <div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;">
<div <div
v-for="val in Object.keys(i.deviceDataMap).slice(0,6).filter(e=> !(i.deviceDataMap[e].toString().includes('http')))" v-for="val in Object.keys(i.deviceDataMap).slice(0,6).filter(e=> !(i.deviceDataMap[e].toString().includes('http')))"
class="infoItem" :style="'height:'+(Object.keys(i.deviceDataMap).length<4 ? '100%':'50%')"> :style="'height:'+(Object.keys(i.deviceDataMap).length<4 ? '100%':'50%')" class="infoItem">
<div class="span">{{ val }}:</div> <div class="span">{{ val }}:</div>
<div class="spanBg"></div> <div class="spanBg"></div>
<div class="num">{{ i.deviceDataMap[val] }}</div> <div class="num">{{ i.deviceDataMap[val] }}</div>
@ -95,6 +100,8 @@ import {
getMonitorById, getMonitorById,
publishControlCommand publishControlCommand
} from '@/api/board/equipment' } from '@/api/board/equipment'
import defaultImg from '@/assets/board/equipment/icon.png'
import defaultImg1 from '@/assets/board/equipment/icon2.png'
let getDeviceInterval = null let getDeviceInterval = null
@ -102,6 +109,8 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
defaultImg,
defaultImg1,
show: false, show: false,
monitorUnitId: '', monitorUnitId: '',
data1: true, data1: true,
@ -128,7 +137,7 @@ export default {
async getData() { async getData() {
await this.getTree() await this.getTree()
}, },
switchChange(functionIdentifier, deviceId, deviceCode,modeFunctionId) { switchChange(functionIdentifier, deviceId, deviceCode, modeFunctionId) {
console.log(this.controlList) console.log(this.controlList)
console.log(this.controlList) console.log(this.controlList)
this.$confirm('确定执行么？', '提示', { this.$confirm('确定执行么？', '提示', {
@ -137,10 +146,10 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
publishControlCommand({ publishControlCommand({
deviceId:deviceId, deviceId: deviceId,
modeFunctionId:modeFunctionId, modeFunctionId: modeFunctionId,
deviceCode:deviceCode, deviceCode: deviceCode,
type:functionIdentifier, type: functionIdentifier,
}).then(e => { }).then(e => {
if (e.code === 200) { if (e.code === 200) {
this.$message({ this.$message({
@ -148,7 +157,7 @@ export default {
message: '成功!' message: '成功!'
}); });
this.controlList.find(e => e.deviceId === deviceId).deviceType === '1' ? this.controlList.find(e => e.deviceId === deviceId).deviceType = '0' : this.controlList.find(e => e.deviceId === deviceId).deviceType = '1' this.controlList.find(e => e.deviceId === deviceId).deviceType === '1' ? this.controlList.find(e => e.deviceId === deviceId).deviceType = '0' : this.controlList.find(e => e.deviceId === deviceId).deviceType = '1'
}else{ } else {
this.$message({ this.$message({
type: 'info', type: 'info',
message: '网络错误' message: '网络错误'
@ -163,7 +172,7 @@ export default {
}); });
}, },
async getTree() { async getTree() {
if(this.$store.getters.sceneId){ if (this.$store.getters.sceneId) {
const {data} = await treeList(this.$store.getters.sceneId) const {data} = await treeList(this.$store.getters.sceneId)
this.treeData = data this.treeData = data
} }
@ -192,9 +201,9 @@ export default {
const {data} = await getMonitorById(e.id) const {data} = await getMonitorById(e.id)
this.MonitorInfo = data this.MonitorInfo = data
}, },
toHistory(e,i) { toHistory(e, i) {
console.log(i) console.log(i)
this.$router.push({path: "/board/senso",query:{id:e,deviceModeId:i}}); this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}});
} }
}, },
beforeDestroy() { beforeDestroy() {
@ -276,7 +285,6 @@ export default {
} }
.img { .img {
background-image: url("~@/assets/board/equipment/icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
@ -334,10 +342,11 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
top: 13%;
left: 3.3%; top: 21%;
width: 19.5%; left: 5.8%;
height: 73%; width: 14.5%;
height: 57%;
} }
.title { .title {

6
ruoyi-ui/src/views/board/index/index.vue
Unescape Escape View File

@ -4,7 +4,7 @@
<div class="title">监控单元统计</div> <div class="title">监控单元统计</div>
<Chart ref="chart1" class="chart1"></Chart> <Chart ref="chart1" class="chart1"></Chart>
<div class="chart1Right"> <div class="chart1Right">
<p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'color:'+ chart1Color[k]">{{ i.name }}</p> <p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'margin:0.6vw;color:'+ chart1Color[k]">{{ i.name }}</p>
</div> </div>
<div class="chart1Table"> <div class="chart1Table">
<div style="background-color: #094170"> <div style="background-color: #094170">
@ -178,7 +178,7 @@ export default {
}, },
}, },
polar: { polar: {
center: ["40%", "50%"], center: ["30%", "50%"],
radius: "100%", //图形大小 radius: "100%", //图形大小
}, },
}, },
@ -526,7 +526,7 @@ export default {
padding: 0 12px; padding: 0 12px;
position: absolute; position: absolute;
top: 17%; top: 17%;
left: 18%; left: 15%;
} }
.chart1Table { .chart1Table {

54
ruoyi-ui/src/views/board/senso/index.vue
Unescape Escape View File

@ -11,17 +11,19 @@
<div class="icon1"></div> <div class="icon1"></div>
<div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div> <div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div>
<div class="title"> {{ topData.monitorUnitName }}</div> <div class="title"> {{ topData.monitorUnitName }}</div>
<div class="info"> <div class="infoDiv">
<div class="info1">设备编号:</div> <div class="info">
<div class="info2"> {{ topData.deviceCode }}</div> <div class="info1">设备编号:</div>
</div> <div class="info2"> {{ topData.deviceCode }}</div>
<div class="info" style="left: 70vh;"> </div>
<div class="info1">设备名称:</div> <div class="info" >
<div class="info2">{{ topData.deviceName }}</div> <div class="info1">设备名称:</div>
</div> <div class="info2">{{ topData.deviceName }}</div>
<div class="info" style="left: 80vh;"> </div>
<div class="info1">设备位置:</div> <div class="info" >
<div class="info2">{{ topData.deviceLocation }}</div> <div class="info1">设备位置:</div>
<div class="info2">{{ topData.deviceLocation }}</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -58,7 +60,7 @@
<el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey"> <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="5" :total="total" background <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
layout="prev, pager, next" @current-change="currentChange"> layout="prev, pager, next" @current-change="currentChange">
</el-pagination> </el-pagination>
</div> </div>
@ -161,6 +163,7 @@ export default {
map.setFitView() map.setFitView()
}, },
async currentChange(e) { async currentChange(e) {
console.log(e)
this.currentPage = e this.currentPage = e
await this.setHistoryData() await this.setHistoryData()
}, },
@ -215,7 +218,7 @@ export default {
} else { } else {
this.tableData = data.historyData?.dataList this.tableData = data.historyData?.dataList
this.total = data.historyData?.count this.total = data.historyData?.count
this.currentPage = 1 // this.currentPage = 1
this.deviceDataColumns = data.deviceDataColumns this.deviceDataColumns = data.deviceDataColumns
this.$nextTick(() => { this.$nextTick(() => {
this.show = true this.show = true
@ -344,22 +347,28 @@ export default {
} }
.info { .info {
position: absolute; position: relative;
left: 60vh;
color: #1fabf3; color: #1fabf3;
font-size: 1.5vh; font-size: 1.5vh;
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
display: inline-block;
height: 100%;
margin-right: 12px;
vertical-align: top;
.info1 { .info1 {
position: absolute; position: relative;
bottom: 55%; line-height: 8.5vh;
color: #fffc color: #fffc;
font-size: 15px;
font-weight: 600;
letter-spacing: 2px;
} }
.info2 { .info2 {
position: absolute; position: relative;
top: 55%; line-height: 8.5vh;
color: #fff color: #fff
} }
} }
@ -369,4 +378,9 @@ export default {
width: 100%; width: 100%;
height: 50vh; height: 50vh;
} }
.infoDiv{
position: absolute;
left: 60vh;
height: 100%;
}
</style> </style>

6
ruoyi-ui/src/views/board/smartScene/index.vue
Unescape Escape View File

@ -69,7 +69,7 @@
<span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span> <span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span>
<!-- <el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>--> <!-- <el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>-->
</div> </div>
<div class="img"></div> <div class="img" :style="'background-image: url('+(i.monitorPic ? i.monitorPic :defaultImg)+');'"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -81,9 +81,9 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
import defaultImg from '@/assets/board/smartScene/device.png'
import { import {
sceneAllNums, sceneAllNums,
getLimitSubMonitorUnit, getLimitSubMonitorUnit,
@ -97,6 +97,7 @@ export default {
}, },
data() { data() {
return { return {
defaultImg,
num1: 0, num1: 0,
num2: 0, num2: 0,
alarmCountGroupAlarmType: [], alarmCountGroupAlarmType: [],
@ -440,7 +441,6 @@ export default {
} }
.img { .img {
background-image: url("~@/assets/board/smartScene/device.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;

Write Preview
Loading…
Cancel
Save