535 lines
14 KiB
Vue
535 lines
14 KiB
Vue
<template>
|
||
<!-- 运行数据 -->
|
||
<vue-scroll style="height: 100%">
|
||
<div class="operationInfo">
|
||
<div class="content">
|
||
<div class="title whiteBlock" style="margin-bottom: 12px">
|
||
<el-form :inline="true" size="medium" class="demo-form-inline">
|
||
<el-form-item :label="$t('message.lifter.devName')">
|
||
<el-select
|
||
v-model="devSn"
|
||
:placeholder="
|
||
$t('message.lifter.pleaseSelect') +
|
||
$t('message.lifter.devName')
|
||
"
|
||
@change="getListData"
|
||
>
|
||
<el-option
|
||
:label="item.devName"
|
||
v-for="(item, index) in unloadList"
|
||
:key="index"
|
||
:value="item.devSn"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<!-- <el-button type="primary" @click="getListData" plain>{{
|
||
$t("message.lifter.demand")
|
||
}}</el-button> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="direction_data_wrap flex">
|
||
<div class="data_wrap whiteBlock">
|
||
<div class="state_title pageTitle">
|
||
{{ $t("message.lifter.realTimeData") }}
|
||
</div>
|
||
<div class="flex">
|
||
<div class="data_type">
|
||
<div class="type bg1 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata1.png"
|
||
/>
|
||
<!-- 载重 -->
|
||
<div>{{$t('message.unload.load')}}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.loading?realTimeDevData.loading:0 }} t</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg2 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata2.png"
|
||
/>
|
||
<!-- 位移 -->
|
||
<div>{{$t('message.unload.displacement')}}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.displacement?realTimeDevData.displacement:0 }} m</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg3 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata4.png"
|
||
/>
|
||
<!-- X倾角 -->
|
||
<div>{{$t('message.unload.XDip')}}</div>
|
||
</div>
|
||
<div class="value">
|
||
{{
|
||
realTimeDevData.xdipAngle ? realTimeDevData.xdipAngle : 0
|
||
}}°
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg4 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata4.png"
|
||
/>
|
||
<!-- Y倾角 -->
|
||
<div>{{$t('message.unload.YDip')}}</div>
|
||
</div>
|
||
<div class="value">
|
||
{{
|
||
realTimeDevData.ydipAngle ? realTimeDevData.ydipAngle : 0
|
||
}}°
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_info flex">
|
||
<div class="trajectory whiteBlock flex" style="width: 50%">
|
||
<img
|
||
src="@/assets/images/unload.png"
|
||
alt=""
|
||
ref="towerBG"
|
||
style="width:100%"
|
||
/>
|
||
<div class="mod_info_wrap ">
|
||
<div class="mod_info">
|
||
<!-- 载重 -->
|
||
{{$t('message.unload.load')}}：{{ realTimeDevData.loading?realTimeDevData.loading:0 }}t
|
||
</div>
|
||
<div class="mod_info">
|
||
<!-- 设备状态 '在线':'不在线'-->
|
||
{{$t('message.unload.devStatus')}}：{{ devonline==1?$t('message.unload.online'):$t('message.unload.offline') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="data_wrap whiteBlock"
|
||
style="width: 50%; padding: 12px 20px; box-sizing: border-box"
|
||
>
|
||
<!-- 近期数据跟踪 -->
|
||
<div class="state_title pageTitle">{{$t('message.unload.echartTitle')}}</div>
|
||
<div style="height: 85%; width: 100%" ref="load"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||
import {
|
||
getUnloadListApi,
|
||
getUnloadCurrentDataApi,
|
||
getTodayUnloadDataApi
|
||
} from "@/assets/js/api/unloadManage";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: "",
|
||
unloadList: [], //设备列表
|
||
checkedIndex: 0, //选中的设备
|
||
devSn: "", //选中的设备的sn
|
||
interval: null,
|
||
realTimeDevData: {
|
||
loading: "",
|
||
displacement: "",
|
||
xdipAngle: "",
|
||
ydipAngle: "",
|
||
},
|
||
echartsData: [],
|
||
|
||
workingPlan: "",
|
||
imgWidth: 0,
|
||
imgHeight: 0,
|
||
warningText: "",
|
||
devList: [],
|
||
devonline:0,
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
this.workingPlan =
|
||
this.$store.state.currentProDetail.constructionMapUrl &&
|
||
this.$store.state.currentProDetail.constructionMapUrl;
|
||
},
|
||
mounted() {
|
||
this.getUnloadList();
|
||
},
|
||
|
||
beforeDestroy() {
|
||
clearInterval(this.interval);
|
||
clearTimeout();
|
||
},
|
||
|
||
methods: {
|
||
//获取所有的设备列表
|
||
getUnloadList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getUnloadListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result.length > 0) {
|
||
this.unloadList = res.result;
|
||
this.checkedIndex = res.result[0].id;
|
||
this.devSn = res.result[0].devSn;
|
||
this.devonline = res.result[0].devonline;
|
||
this.createdEcharts();
|
||
this.getRealTimeData(res.result[0].devSn);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
//查询按钮
|
||
getListData(e) {
|
||
this.devSn = e;
|
||
this.unloadList.forEach((item,index)=>{
|
||
if(item.devSn = e){
|
||
this.devonline = item.devonline
|
||
}
|
||
})
|
||
this.getRealTimeData(e);
|
||
this.createdEcharts();
|
||
},
|
||
|
||
//获取实时数据
|
||
getRealTimeData(devSn) {
|
||
let data = {
|
||
devSn: devSn ? devSn : this.devSn,
|
||
};
|
||
getUnloadCurrentDataApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result) {
|
||
if (devSn) {
|
||
setTimeout(() => {
|
||
this.getRealTimeData(this.devSn);
|
||
}, 6000);
|
||
this.realTimeDevData = res.result
|
||
? res.result
|
||
: this.realTimeDevData;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
//创建图表
|
||
createdEcharts() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
};
|
||
getTodayUnloadDataApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.echartsData = res.result;
|
||
// loading
|
||
var chart1 = echarts.init(this.$refs.load);
|
||
chart1.clear();
|
||
chart1.setOption(this.getOption());
|
||
}
|
||
});
|
||
},
|
||
//图表
|
||
getOption() {
|
||
let xData = [];
|
||
let loadingData = []; //吊重
|
||
let rangerData = []; //幅度
|
||
if (this.echartsData.length > 0) {
|
||
for (let i = 0; i < this.echartsData.length; i++) {
|
||
let time = this.echartsData[i].reciveTime.substring(11);
|
||
xData.push(time);
|
||
loadingData.push(this.echartsData[i].loading);
|
||
rangerData.push(this.echartsData[i].displacement);
|
||
}
|
||
}
|
||
let opt = {
|
||
color: ["#FD3A88", "#47F9FD"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
// 载重 位移
|
||
data: [this.$t('message.unload.load'), this.$t('message.unload.displacement')],
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
// realtime: true,
|
||
start: 0,
|
||
end: 80,
|
||
height: 8,
|
||
borderColor: "transparent",
|
||
backgroundColor: "#e8e8e8",
|
||
filterColor: "#999999",
|
||
bottom: 0,
|
||
},
|
||
],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 25,
|
||
left: 35,
|
||
right: 0,
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
axisLabel: {
|
||
//X轴刻度配置
|
||
interval: "auto", //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#eee",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: this.$t('message.unload.load'),
|
||
type: "line",
|
||
data: loadingData,
|
||
smooth: true,
|
||
},
|
||
{
|
||
name: this.$t('message.unload.displacement'),
|
||
type: "line",
|
||
data: rangerData,
|
||
// symbol: "none",
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: "#47F9FD",
|
||
},
|
||
areaStyle: {
|
||
color: "#47F9FD",
|
||
opacity: 0.3,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
return opt;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.operationInfo {
|
||
width: 100%;
|
||
// height: 100%;
|
||
.title {
|
||
padding: 0 20px;
|
||
padding-top: 17px;
|
||
height: 70px;
|
||
box-sizing: border-box;
|
||
}
|
||
.content {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
// height: 720px;
|
||
.pageTitle {
|
||
line-height: 20px;
|
||
}
|
||
.direction_data_wrap {
|
||
box-sizing: border-box;
|
||
height: 150px;
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
.data_wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
padding: 12px 20px;
|
||
box-sizing: border-box;
|
||
.data_type {
|
||
width: 19%;
|
||
margin-right: 12px;
|
||
.type {
|
||
width: 100%;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
.left {
|
||
width: 45%;
|
||
}
|
||
}
|
||
.value {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.marg_t {
|
||
margin-top: 12px;
|
||
}
|
||
}
|
||
}
|
||
.realTimeData_info {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
.trajectory {
|
||
width: 50%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
box-sizing: border-box;
|
||
margin-right: 12px;
|
||
padding: 12px 20px;
|
||
.towerRunBox {
|
||
width: 50%;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
display: inline-block;
|
||
// text-align: center;
|
||
}
|
||
|
||
.moveBox,
|
||
.xMove,
|
||
.lines {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
transition: all 1s;
|
||
// display: none;
|
||
}
|
||
.lines,
|
||
.xMove {
|
||
top: 82px;
|
||
}
|
||
.lines {
|
||
width: 10px;
|
||
}
|
||
}
|
||
.T_H_wrap {
|
||
width: 28%;
|
||
box-sizing: border-box;
|
||
.load {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
padding: 12px 20px;
|
||
box-sizing: border-box;
|
||
.playVideoBox {
|
||
height: calc(100% - 100px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bg1 {
|
||
background-color: #7ba6ff;
|
||
}
|
||
.bg2 {
|
||
background-color: #55cbbb;
|
||
}
|
||
.bg3 {
|
||
background-color: #84ccf3;
|
||
}
|
||
.bg4 {
|
||
background-color: #b59cf2;
|
||
}
|
||
.bg5 {
|
||
background-color: #f6b87d;
|
||
}
|
||
|
||
.bottom_info {
|
||
width: 100%;
|
||
height: 260px;
|
||
margin-top: 12px;
|
||
box-sizing: border-box;
|
||
// padding-bottom: 20px;
|
||
.left {
|
||
width: 50%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
padding: 10px 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
.center {
|
||
width: 22%;
|
||
height: 100%;
|
||
margin: 0 12px;
|
||
// background: #fff;
|
||
padding: 10px 20px;
|
||
box-sizing: border-box;
|
||
.driver_info {
|
||
text-align: center;
|
||
line-height: 25px;
|
||
img {
|
||
margin-bottom: 18px;
|
||
}
|
||
div {
|
||
padding: 0 20px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 28%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
padding: 10px 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.mod_info_wrap{
|
||
margin-left: 15px;
|
||
height: 100px;
|
||
}
|
||
.mod_info{
|
||
width: 160px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(112, 112, 112, 0.2);
|
||
margin: 14px 10px;
|
||
padding: 10px ;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
</style> |