bonus
/
bns_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

塔吊监测

This commit is contained in:
bb_pan 2025-04-24 15:23:21 +08:00
parent 66a279f899
commit fbcd295e18
7 changed files with 232 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/home-tower-crane.js Normal file
View File

@ -0,0 +1,31 @@
import request from '@/utils/request'
// 塔吊监测 ---- 设备列表接口 左1+2+中间
export function getConstDeviceListAPI(data = JSON.stringify({})) {
return request({
url: '/smart-site/towerCraneDetection/getConstDeviceList',
method: 'post',
data,
})
}
// 塔吊监测 ---- 设备统计接口 左3
export function getTowerCraneRunMsgByIdAPI(data) {
return request({
url: '/smart-site/towerCraneDetection/getTowerCraneRunMsgById',
method: 'post',
data,
})
}
// 塔吊监测 ---- 设备统计接口 右1
// 塔吊监测 ---- 设备统计接口 右2
export function getTowerCraneAlarmListAPI(data = {}) {
return request({
url: '/smart-site/towerCraneDetection/getTowerCraneAlarmList',
method: 'post',
data,
})
}

23
src/views/home-tower-crane/components/center-one-model.vue
View File

@ -8,14 +8,14 @@
<div class="box1">
<span>塔身高度</span>
<span>
10
{{ deviceInfo.towerHeight || '-' }}
<i>m</i>
</span>
</div>
<div class="box2">
<span>其中臂长度</span>
<span>
10
{{ deviceInfo.faceMachineNum || '-' }}
<i>m</i>
</span>
</div>
@ -29,9 +29,26 @@
<script>
import ChartsBox from '@/components/ChartsBox/index'
export default {
props: {
params: {
type: Object,
default: () => {},
},
},
components: { ChartsBox },
data() {
return {}
return {
deviceInfo: {},
}
},
watch: {
params: {
handler(val) {
// console.log('🚀 ~ watch ~ val:', val)
this.deviceInfo = val
},
immediate: true,
},
},
}
</script>

51
src/views/home-tower-crane/components/left-one-model.vue
View File

@ -8,19 +8,20 @@
class="device-item"
v-for="(item, index) in deviceList"
:key="index"
@click="handleClickDevice(item)"
>
<img
:src="
item.onLine
item.isOnline
? `${require('@/assets/image/home-tower-crane/line_big.png')}`
: `${require('@/assets/image/home-tower-crane/offline_big.png')}`
"
alt=""
/>
<span :style="item.onLine ? 'color:#71C4FF' : ''">
<span :style="item.isOnline ? 'color:#71C4FF' : ''">
{{ item.name }}
</span>
<span :style="item.onLine ? 'color:#71C4FF' : ''">
<span :style="item.isOnline ? 'color:#71C4FF' : ''">
{{ item.code }}
</span>
</div>
@ -39,32 +40,39 @@
<script>
import ChartsBox from '@/components/ChartsBox/index'
import { getConstDeviceListAPI } from '@/api/home-tower-crane.js'
export default {
components: { ChartsBox },
data() {
return {
deviceList: [
{ name: '1号设备', code: 'YKD-231', onLine: true },
{ name: '2号设备', code: 'YKD-233', onLine: true },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
{ name: '3号设备', code: 'YKD-232', onLine: false },
// { name: '1号设备', code: 'YKD-231', onLine: true },
],
}
},
created() {
this.getConstDeviceList()
},
methods: {
async getConstDeviceList() {
try {
const { data } = await getConstDeviceListAPI()
// console.log('🚀 ~ getConstDeviceList ~ data:', data)
this.deviceList = data
if (data.length > 0 && data[0].towerCraneInfo) {
this.$emit('getDeviceInfo', data[0])
}
} catch (error) {
console.log('🚀 ~ getConstDeviceList ~ error:', error)
}
},
// 点击设备
handleClickDevice(item) {
// console.log('🚀 ~ handleClickDevice ~ item:', item)
this.$emit('getDeviceInfo', item)
},
},
}
</script>
@ -89,6 +97,7 @@ export default {
flex-wrap: wrap;
color: #fff;
font-size: 12px;
cursor: pointer;
/* Webkit浏览器滚动条样式 */
&::-webkit-scrollbar {

73
src/views/home-tower-crane/components/left-three-model.vue
View File

@ -20,62 +20,119 @@
<script>
import ChartsBox from '@/components/ChartsBox/index'
import { getTowerCraneRunMsgByIdAPI } from '@/api/home-tower-crane'
export default {
props: {
deviceId: {
type: String || Number,
default: '',
},
},
components: { ChartsBox },
data() {
return {
craneList: [
{
name: '塔吊风速',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneA.png'),
unit: 'm/s',
},
{
name: '起吊高度',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneB.png'),
unit: 'm',
},
{
name: '小车幅度',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneC.png'),
unit: 'm',
},
{
name: '大臂回环',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneD.png'),
unit: '°',
},
{
name: '起重力矩',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneE.png'),
unit: '%',
},
{
name: '吊起重量',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneF.png'),
unit: 'T',
},
{
name: '倾角X',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneG.png'),
unit: '°',
},
{
name: '倾角Y',
count: 30,
count: 0,
iconPath: require('@/assets/image/home-tower-crane/craneH.png'),
unit: '°',
},
],
}
},
watch: {
deviceId: {
handler(val) {
// console.log('🚀 ~ handler ~ val:', val)
this.getTowerCraneRunMsgById(val)
},
},
},
created() {},
methods: {
async getTowerCraneRunMsgById(id) {
try {
const res = await getTowerCraneRunMsgByIdAPI({ id })
// console.log('🚀 ~ getTowerCraneRunMsgById ~ res:', res)
if (res.data && res.data.length > 0) {
res.data.forEach((item) => {
switch (item.name) {
case '塔吊风速':
this.craneList[0].count = item.value
break
case '起吊高度':
this.craneList[1].count = item.value
break
case '小车幅度':
this.craneList[2].count = item.value
break
case '大臂回环':
this.craneList[3].count = item.value
break
case '起重力矩':
this.craneList[4].count = item.value
break
case '吊起重量':
this.craneList[5].count = item.value
break
case '倾角X':
this.craneList[6].count = item.value
break
case '倾角Y':
this.craneList[7].count = item.value
break
}
})
}
} catch (error) {
console.log('🚀 ~ getTowerCraneRunMsgById ~ error:', error)
}
},
},
}
</script>

35
src/views/home-tower-crane/components/left-two-model.vue
View File

@ -15,7 +15,7 @@
<div v-for="(item, index) in personInfoList" :key="index">
<span></span>
<span>{{ item.name }}</span>
<span>{{ item.type }}</span>
<span>{{ deviceInfo[item.type] || '-' }}</span>
</div>
</div>
</div>
@ -26,23 +26,36 @@
<script>
import ChartsBox from '@/components/ChartsBox/index'
export default {
props: {
params: {
type: Object,
default: () => {},
},
},
components: { ChartsBox },
data() {
return {
personInfoList: [
{ name: '设备名称', type: '中国重工机械起重机' },
{ name: '设备编号', type: '中国重工机械起重机' },
{ name: '规格型号', type: '中国重工机械起重机' },
{
name: '设备厂家',
type: '中国重工机械起重机机械起重机机械起重机机械起重机机械起重机',
},
{ name: '安装单位', type: '中国重工机械起重机' },
{ name: '所在班组', type: '中国重工机械起重机' },
{ name: '安装时间', type: '中国重工机械起重机' },
{ name: '设备名称', type: 'name' },
{ name: '设备编号', type: 'num' },
{ name: '规格型号', type: 'model' },
{ name: '设备厂家', type: 'manufacturer'},
{ name: '安装单位', type: 'installationUnit' },
{ name: '所在班组', type: 'team' },
{ name: '安装时间', type: 'installDate' },
],
deviceInfo: {},
}
},
watch: {
params: {
handler(val) {
// console.log('🚀 ~ watch ~ val:', val)
this.deviceInfo = val
},
immediate: true,
},
},
}
</script>

123
src/views/home-tower-crane/components/right-two-model.vue
View File

@ -11,6 +11,8 @@
<script>
import ChartsBox from '@/components/ChartsBox/index'
import { getTowerCraneAlarmListAPI } from '@/api/home-tower-crane.js'
import blueImg from '@/assets/image/pro-view/blue.png'
export default {
components: { ChartsBox },
@ -18,84 +20,22 @@ export default {
return {
config: {
data: [
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<div class='img-box'><img src='" +
require('@/assets/image/pro-view/red.png') +
"' class='table-img red-img'><img src='" +
require('@/assets/image/pro-view/three.png') +
"' class='three-img'></div>",
"<span class='colorRed'>设备故障已离线</span>",
"<span class='colorRed'>测试设备3</span>",
"<span class='time-box colorRed'>2025-03-06 18:20:36</span>",
],
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<div class='img-box'><img src='" +
require('@/assets/image/pro-view/red.png') +
"' class='table-img red-img'><img src='" +
require('@/assets/image/pro-view/three.png') +
"' class='three-img'></div>",
"<span class='colorRed'>设备故障已离线</span>",
"<span class='colorRed'>测试设备3</span>",
"<span class='time-box colorRed'>2025-03-06 18:20:36</span>",
],
[
"<img src='" +
require('@/assets/image/pro-view/blue.png') +
"' class='table-img'>",
"<span class='colorBlue'>设备已离线</span>",
"<span class='colorBlue'>测试设备3</span>",
"<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
],
[
"<div class='img-box'><img src='" +
require('@/assets/image/pro-view/red.png') +
"' class='table-img red-img'><img src='" +
require('@/assets/image/pro-view/three.png') +
"' class='three-img'></div>",
"<span class='colorRed'>设备故障已离线</span>",
"<span class='colorRed'>测试设备3</span>",
"<span class='time-box colorRed'>2025-03-06 18:20:36</span>",
],
// [
// "<img src='" + blueImg + "' class='table-img'>",
// "<span class='colorBlue'>设备已离线</span>",
// "<span class='colorBlue'>测试设备3</span>",
// "<span class='time-box colorBlue'>2025-03-06 18:20:36</span>",
// ],
// [
// "<div class='img-box'><img src='" +
// require('@/assets/image/pro-view/red.png') +
// "' class='table-img red-img'><img src='" +
// require('@/assets/image/pro-view/three.png') +
// "' class='three-img'></div>",
// "<span class='colorRed'>设备故障已离线</span>",
// "<span class='colorRed'>测试设备3</span>",
// "<span class='time-box colorRed'>2025-03-06 18:20:36</span>",
// ],
],
rowNum: 4, //表格行数
// headerHeight: 35,
@ -110,6 +50,33 @@ export default {
},
}
},
created() {
this.getTowerCraneAlarmList()
},
mounted() {},
methods: {
// 获取设备列表
async getTowerCraneAlarmList() {
try {
const res = await getTowerCraneAlarmListAPI()
// console.log('🚀 ~ getTowerCraneAlarmList ~ res:', res)
if (res.data && res.data.length > 0) {
const newData = res.data.map((item) => [
`<img src="${blueImg}" class='table-img'>`,
`<span class='colorBlue'>${item.devName}</span>`,
`<span class='colorBlue'>${item.remark}</span>`,
`<span class='time-box colorBlue'>${item.createTime}</span>`,
])
this.config = {
...this.config,
data: newData,
}
}
} catch (error) {
console.log('🚀 ~ getTowerCraneAlarmList ~ error:', error)
}
},
},
}
</script>

21
src/views/home-tower-crane/index.vue
View File

@ -2,14 +2,14 @@
<!-- 塔吊监测-->
<div class="home-tower-crane">
<div class="env-1">
<LeftOneModel />
<LeftOneModel @getDeviceInfo="getDeviceInfo" />
</div>
<div class="env-2">
<CenterOneModel />
<CenterOneModel :params="deviceInfo" />
</div>
<div class="env-3"> <RightOneModel /> </div>
<div class="env-4"> <LeftTwoModel /> </div>
<div class="env-5"> <LeftThreeModel /> </div>
<div class="env-4"> <LeftTwoModel :params="deviceInfo" /> </div>
<div class="env-5"> <LeftThreeModel :deviceId="deviceId" /> </div>
<div class="env-6"> <RightTwoModel /> </div>
</div>
</template>
@ -30,6 +30,19 @@ export default {
RightOneModel,
RightTwoModel,
},
data() {
return {
deviceId: '',
deviceInfo: {},
}
},
methods: {
getDeviceInfo(data) {
// console.log('🚀 ~ getDeviceInfo ~ data:', data)
this.deviceInfo = data.towerCraneInfo
this.deviceId = data.id
},
},
}
</script>