1113 lines
32 KiB
Vue
1113 lines
32 KiB
Vue
<template>
|
||
<!-- 运行数据 -->
|
||
<vue-scroll style="height: 100%">
|
||
<div class="operationInfo">
|
||
<div class="content">
|
||
<div class="realTimeData_info flex">
|
||
<div class="trajectory whiteBlock">
|
||
<div class="flex2">
|
||
<div class="state_title pageTitle">
|
||
{{
|
||
$t("message.lifter.realTime") +
|
||
$t("message.lifter.movingTrajectory")
|
||
}}
|
||
<span class="warningText">{{ warningText }}</span>
|
||
</div>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
plain
|
||
@click="towerCraneDialog = true"
|
||
>查看基本信息</el-button
|
||
>
|
||
</div>
|
||
<div class="flex" style="height: calc(100% - 35px)">
|
||
<div class="towerRunBox">
|
||
<img
|
||
src="@/assets/images/towericon/towerBG.png"
|
||
alt=""
|
||
ref="towerBG"
|
||
/>
|
||
<img
|
||
src="@/assets/images/towericon/1.png"
|
||
alt=""
|
||
v-show="hideGoods"
|
||
class="xMove"
|
||
id="xMove"
|
||
:style="{ top: '70px', left: coordData.coordX + 'px' }"
|
||
/>
|
||
<img
|
||
src="@/assets/images/towericon/line.png"
|
||
alt=""
|
||
class="lines"
|
||
id="line"
|
||
v-show="hideGoods"
|
||
:style="{
|
||
left: coordData.coordX + 8 + 'px',
|
||
height: coordData.lineLength + 'px',
|
||
top: '78px',
|
||
}"
|
||
/>
|
||
<div
|
||
class="moveBox"
|
||
id="moveBox"
|
||
v-show="hideGoods"
|
||
:style="{
|
||
top: coordData.coordY + 'px',
|
||
left: coordData.coordX - 6 + 'px',
|
||
}"
|
||
>
|
||
<img src="@/assets/images/towericon/hock.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="allTowerTrack flex" ref="allTowerTrack">
|
||
<img
|
||
:src="workingPlan"
|
||
:style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
|
||
/>
|
||
<div
|
||
v-for="(item, index) in towerList"
|
||
:key="index"
|
||
class="cycle"
|
||
:class="
|
||
checkedIndex == item.id ? 'cycle_border1' : 'cycle_border2'
|
||
"
|
||
:style="{ top: item.mapY + 'px', left: item.mapX + 'px' }"
|
||
@click="getDevData(item)"
|
||
>
|
||
<img src="@/assets/images/towericon/tower.png" />
|
||
|
||
<p
|
||
id="arrow"
|
||
:style="{ transform: `rotate(${item.angle}deg)` }"
|
||
>
|
||
<span></span><span></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="T_H_wrap whiteBlock">
|
||
<div class="load">
|
||
<div class="state_title pageTitle">实时视频<span class="tower-time">最后一条数据上传时间：{{towerData.realTime}}</span></div>
|
||
<div style="margin-bottom: 15px">
|
||
<el-select
|
||
size="medium"
|
||
v-model="videoId"
|
||
placeholder="请选择视频"
|
||
@change="getVideo"
|
||
@visible-change="visibleChange"
|
||
>
|
||
<el-option
|
||
v-for="item in videoList"
|
||
:key="item.id"
|
||
:label="item.videoName"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-button
|
||
type="primary"
|
||
style="margin-left: 10px"
|
||
size="medium"
|
||
plain
|
||
>查询</el-button
|
||
>
|
||
</div>
|
||
<videoModule
|
||
class="playVideoBox"
|
||
:type="'1x1'"
|
||
:value="selectList"
|
||
:displayBottomMod="false"
|
||
:winNumBer="1"
|
||
:autoplay="false"
|
||
:showCaptrue="false"
|
||
:showControl="false"
|
||
:showPlayback="false"
|
||
></videoModule>
|
||
</div>
|
||
</div>
|
||
</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.lifter.slingLoad") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.loading }} kg</div>
|
||
</div>
|
||
<div class="type bg1 flex2 marg_t">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata6.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.airSpeed") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.windspeed }} m/s</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.lifter.altitude") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.height }} m</div>
|
||
</div>
|
||
<div class="type bg2 flex2 marg_t">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata7.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.airSpeedOfPercentage") }}</div>
|
||
</div>
|
||
<div class="value">
|
||
{{
|
||
realTimeDevData.windRatio ? realTimeDevData.windRatio : 0
|
||
}}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg3 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata3.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.percentageOfMoments") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.torqueRatio }} %</div>
|
||
</div>
|
||
<div class="type bg3 flex2 marg_t">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata8.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.rotationAngle") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.angle }}°</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg4 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata4.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.dip") }}</div>
|
||
</div>
|
||
<div class="value">
|
||
{{
|
||
realTimeDevData.biasAngle ? realTimeDevData.biasAngle : 0
|
||
}}°
|
||
</div>
|
||
</div>
|
||
<div class="type bg4 flex2 marg_t">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata9.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.range") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.ranger }} m</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_type">
|
||
<div class="type bg5 flex2">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata5.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.percentageOfDip") }}</div>
|
||
</div>
|
||
<div class="value">{{ realTimeDevData.biasAngleRatio }}%</div>
|
||
</div>
|
||
<div class="type bg5 flex2 marg_t">
|
||
<div class="left">
|
||
<img
|
||
src="@/assets/images/towericon/towercurrentdata10.png"
|
||
/>
|
||
<div>{{ $t("message.lifter.earlyWarning") }}</div>
|
||
</div>
|
||
<div class="value">
|
||
{{
|
||
realTimeDevData.alarmName
|
||
? realTimeDevData.alarmName
|
||
: "无"
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom_info flex">
|
||
<div class="left whiteBlock">
|
||
<div class="state_title pageTitle">近期数据跟踪</div>
|
||
<div style="height: 85%; width: 100%" ref="load"></div>
|
||
</div>
|
||
<div class="center whiteBlock">
|
||
<div class="flex2">
|
||
<div class="state_title pageTitle">当前塔吊司机</div>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
style="margin-left: 10px; margin-bottom: 15px"
|
||
@click="showDriver = true"
|
||
plain
|
||
>查看司机列表</el-button
|
||
>
|
||
</div>
|
||
<div class="driver_info">
|
||
<img
|
||
:src="realTimeDevData.fieldAcquisitionUrl"
|
||
v-if="realTimeDevData.fieldAcquisitionUrl"
|
||
/>
|
||
<img src="@/assets/images/profile_photo.png" v-else />
|
||
<div>姓名：{{ realTimeDevData.driverName }}</div>
|
||
<div>
|
||
上岗时间：{{
|
||
realTimeDevData.driverName ? realTimeDevData.reciveTime : ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right whiteBlock">
|
||
<div class="state_title pageTitle">工作循环</div>
|
||
<div class="flex">
|
||
<el-date-picker
|
||
v-model="timeValue"
|
||
type="daterange"
|
||
size="small"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
value-format="yyyy-MM-dd"
|
||
end-placeholder="结束日期"
|
||
@change="getTime"
|
||
>
|
||
</el-date-picker>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
plain
|
||
@click="getRecentWorkList"
|
||
>查询</el-button
|
||
>
|
||
</div>
|
||
|
||
<el-table
|
||
:data="workList"
|
||
class="tables"
|
||
style="width: 100%; min-height: 180px"
|
||
>
|
||
<el-table-column prop="startTime" label="开始时间">
|
||
</el-table-column>
|
||
<el-table-column prop="endTime" label="结束时间">
|
||
</el-table-column>
|
||
<el-table-column prop="workTime" label="工作时长">
|
||
</el-table-column>
|
||
<el-table-column prop="loading" label="吊重"> </el-table-column>
|
||
<el-table-column prop="driverName" label="司机">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 查看司机信息 -->
|
||
<el-dialog :modal-append-to-body="false" title="司机信息" :visible.sync="showDriver" width="667px">
|
||
<div class="dialog_content">
|
||
<el-table :data="driverList" class="tables" style="width: 100%">
|
||
<el-table-column prop="workerName" label="姓名"> </el-table-column>
|
||
<el-table-column prop="emergentPhone" label="联系电话">
|
||
</el-table-column>
|
||
<el-table-column prop="address" label="照片">
|
||
<template slot-scope="scope">
|
||
<img
|
||
:src="fileUrl + scope.row.fieldAcquisitionUrl"
|
||
width="20"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- //查看当前设备基本信息 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
title="设备基本信息"
|
||
:visible.sync="towerCraneDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
:model="towerData"
|
||
ref="ruleForm"
|
||
label-width="120px"
|
||
class="demo-ruleForm"
|
||
>
|
||
<el-form-item label="设备名称" prop="devName">
|
||
<el-input v-model="towerData.devName" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备编号" prop="devSn">
|
||
<el-input v-model="towerData.devSn" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="前臂长" prop="forearmLength">
|
||
<el-input
|
||
v-model="towerData.forearmLength"
|
||
:disabled="true"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="塔高" prop="towerHeight">
|
||
<el-input
|
||
v-model="towerData.towerHeight"
|
||
:disabled="true"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="机械设备备案号" prop="registNo">
|
||
<el-input v-model="towerData.registNo" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备状态">
|
||
<div class="dev-leave" :class="{'dev-line': towerData.devOnline == 1}">
|
||
<!-- <span></span> -->
|
||
{{towerData.devOnlineName}}
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</vue-scroll>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||
import {
|
||
getTowerListApi,
|
||
getSelectTowerBySnApi,
|
||
getRecentWorkListApi,
|
||
getTowerCurrentDataApi,
|
||
getTodayTowerDataApi,
|
||
} from "@/assets/js/api/towerCrane";
|
||
|
||
import {
|
||
hidePluginWindow,
|
||
showPluginWindow,
|
||
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
|
||
var frontArmLength = 496; //图片塔吊臂长px
|
||
var height = 484; //图片塔吊高度px
|
||
var imgLeftWidth = 115; //塔吊图片司机距离左边距离px
|
||
var imgLeftHeight = 70; //塔吊图片司机距离上边距离px
|
||
var realWidth = 0; //实际塔吊臂长m
|
||
var realHeight = 0; //实际塔吊高度m
|
||
var $moveBox;
|
||
var $xMove;
|
||
var $line;
|
||
export default {
|
||
components: { videoModule },
|
||
data() {
|
||
return {
|
||
projectSn: "",
|
||
towerList: [], //设备列表
|
||
checkedIndex: 0, //选中的设备
|
||
devSn: "", //选中的设备的sn
|
||
selectList: [], //视频数据源
|
||
videoList: [],
|
||
videoId: "",
|
||
driverList: [],
|
||
showDriver: false, //司机列表
|
||
towerCraneDialog: false, //基本信息
|
||
towerData: {},
|
||
fileUrl: "",
|
||
timeValue: [],
|
||
endTime: "",
|
||
startTime: "",
|
||
workList: [],
|
||
interval: null,
|
||
realTimeDevData: {
|
||
loading: "",
|
||
windspeed: "",
|
||
height: "",
|
||
windRatio: "",
|
||
torqueRatio: "",
|
||
angle: "",
|
||
biasAngle: "",
|
||
ranger: "",
|
||
biasAngleRatio: "",
|
||
alarmName: "",
|
||
},
|
||
echartsData: [],
|
||
angle: 0,
|
||
coordData: {
|
||
coordX: 0,
|
||
coordY: 0,
|
||
lineLength: 0,
|
||
},
|
||
hideGoods: false, //隐藏货物
|
||
workingPlan: "",
|
||
imgWidth: 0,
|
||
imgHeight: 0,
|
||
warningText: "",
|
||
interval2:null
|
||
};
|
||
},
|
||
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;
|
||
// this.workingPlan = require('@/assets/images/3.jpg')
|
||
},
|
||
mounted() {
|
||
this.getTowerList();
|
||
this.$nextTick(() => {
|
||
$moveBox = document.getElementById("moveBox");
|
||
$xMove = document.getElementById("xMove");
|
||
$line = document.getElementById("line");
|
||
});
|
||
},
|
||
|
||
beforeDestroy() {
|
||
clearTimeout(this.interval);
|
||
clearInterval(this.interval2);
|
||
},
|
||
|
||
methods: {
|
||
//下拉框聚焦
|
||
visibleChange(val) {
|
||
if(this.videoList.length>0&&this.videoList[0].videoType==3){
|
||
if (val) {
|
||
hidePluginWindow();
|
||
} else {
|
||
showPluginWindow();
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
// 获取施工图计算比例
|
||
calculate() {
|
||
if (this.workingPlan) {
|
||
let url = this.workingPlan + "?" + Date.parse(new Date());
|
||
// 创建对象
|
||
var img = new Image();
|
||
// 改变图片的src
|
||
img.src = url;
|
||
|
||
let that = this;
|
||
img.onload = function () {
|
||
let pack = that.$refs.allTowerTrack; //获取显示框的大小
|
||
let clientWidth = pack.clientWidth; //获取显示框宽
|
||
let clientHeight = pack.clientHeight; //获取显示框高
|
||
console.log(clientWidth,clientHeight)
|
||
let imgWidth = img.width; //获取图片宽
|
||
let imgHeight = img.height; //获取图片高
|
||
console.log(imgWidth, imgHeight)
|
||
let ratioX = clientWidth / imgWidth; //计算比例
|
||
let ratioY = clientHeight / imgHeight; //计算比例
|
||
console.log(ratioX, ratioY);
|
||
let w = imgWidth * ratioX; //图片的显示尺寸
|
||
let h = imgHeight * ratioX; //图片的显示尺寸
|
||
that.imgWidth = w;
|
||
console.log(w, h);
|
||
that.imgHeight = h;
|
||
let dataList = JSON.parse(JSON.stringify(that.towerList));
|
||
for (let i = 0; i < dataList.length; i++) {
|
||
dataList[i].mapX = String(Number(dataList[i].mapX) * ratioX - 37);
|
||
dataList[i].mapY = String(Number(dataList[i].mapY) * ratioX - 37);
|
||
}
|
||
that.towerList = dataList;
|
||
};
|
||
}
|
||
},
|
||
|
||
//获取所有的设备列表
|
||
getTowerList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getTowerListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result.length > 0) {
|
||
this.towerList = res.result;
|
||
this.checkedIndex = res.result[0].id;
|
||
this.devSn = res.result[0].devSn;
|
||
this.getDevData(res.result[0]);
|
||
this.calculate();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取选中的设备信息
|
||
getDevData(val) {
|
||
this.checkedIndex = val.id;
|
||
this.devSn = val.devSn;
|
||
clearTimeout(this.interval);
|
||
clearInterval(this.interval2);
|
||
this.getTowerPageData();
|
||
this.getRecentWorkList();
|
||
this.createdEcharts();
|
||
this.interval2 = setInterval(() => {
|
||
this.createdEcharts();
|
||
}, 5000);
|
||
},
|
||
|
||
//获取当前塔吊的数据 当前塔吊司机 当前塔吊视频 当前设备基本信息
|
||
getTowerPageData() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
};
|
||
getSelectTowerBySnApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
|
||
this.driverList = res.result.driverList;
|
||
this.towerData = res.result.tower;
|
||
if(this.towerData.devOnline == 1){
|
||
this.towerData.devOnlineName = "在线"
|
||
} else {
|
||
this.towerData.devOnlineName = "离线"
|
||
}
|
||
console.log(this.towerData)
|
||
if(res.result.tower.enableVideoUrl==1){
|
||
this.videoList = res.result.videoList;
|
||
}else{
|
||
if(res.result.tower.videoUrl&&res.result.tower.videoUrl!='null'){
|
||
this.videoList = JSON.parse(res.result.tower.videoUrl);
|
||
}else{
|
||
|
||
this.videoList = []
|
||
}
|
||
}
|
||
if (this.videoList.length > 0) {
|
||
this.videoId = this.videoList[0].id;
|
||
this.getVideo(this.videoList[0].id);
|
||
}else{
|
||
this.videoId=''
|
||
this.selectList=[]
|
||
}
|
||
realWidth = this.towerData.forearmLength;
|
||
realHeight = this.towerData.towerHeight;
|
||
//获取设备的实时数据
|
||
this.getRealTimeData();
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
//选择的视频
|
||
getVideo(val) {
|
||
for (let i = 0; i < this.videoList.length; i++) {
|
||
if (val == this.videoList[i].id) {
|
||
this.selectList = [this.videoList[i]];
|
||
}
|
||
}
|
||
},
|
||
|
||
//选择时间时
|
||
getTime(val) {
|
||
if (val) {
|
||
this.startTime = val[0];
|
||
this.endTime = val[1];
|
||
} else {
|
||
this.startTime = "";
|
||
this.endTime = "";
|
||
}
|
||
},
|
||
|
||
//获取近期工作数据列表
|
||
getRecentWorkList() {
|
||
let data = {
|
||
endTime: this.endTime,
|
||
startTime: this.startTime,
|
||
devSn: this.devSn,
|
||
};
|
||
getRecentWorkListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.workList = res.result;
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取实时数据
|
||
getRealTimeData(devSn, index) {
|
||
let data = {
|
||
devSn: devSn ? devSn : this.devSn,
|
||
};
|
||
getTowerCurrentDataApi(data).then((res) => {
|
||
console.log(index)
|
||
if (res.code == 200) {
|
||
if (res.result) {
|
||
if (devSn) {
|
||
this.towerList[index].angle = res.result ? res.result.angle : 0;
|
||
return;
|
||
} else{
|
||
console.log('000')
|
||
this.realTimeDevData = res.result;
|
||
this.interval=setTimeout(() => {
|
||
this.getRealTimeData(devSn, index);
|
||
}, 5000);
|
||
}
|
||
var y = parseFloat(res.result.height);
|
||
var x = parseFloat(res.result.ranger);
|
||
this.move(x, y);
|
||
// this.move(150,250)
|
||
this.hideGoods = true;
|
||
}else{
|
||
this.realTimeDevData={
|
||
loading: "",
|
||
windspeed: "",
|
||
height: "",
|
||
windRatio: "",
|
||
torqueRatio: "",
|
||
angle: "",
|
||
biasAngle: "",
|
||
ranger: "",
|
||
biasAngleRatio: "",
|
||
alarmName: "",
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
move(x, y) {
|
||
// ;
|
||
// var x = randomNum(0,realWidth)
|
||
// var y = randomNum(0,realHeight)
|
||
var xImg, yImg;
|
||
|
||
// if (x <= realWidth) {
|
||
// xImg = (x / realWidth) * frontArmLength + imgLeftWidth
|
||
// this.warningText=''
|
||
// if (y <= realHeight) {
|
||
// yImg = (y / realHeight) * height + imgLeftHeight
|
||
// this.warningText=''
|
||
// } else {
|
||
// yImg = height + imgLeftHeight
|
||
// this.warningText='当前设备高度参数错误'
|
||
// }
|
||
// } else {
|
||
// xImg = frontArmLength + imgLeftWidth;
|
||
// this.warningText='当前设备前臂长参数错误'
|
||
// if (y <= realHeight) {
|
||
// yImg = (y / realHeight) * height + imgLeftHeight
|
||
// } else {
|
||
// yImg = height + imgLeftHeight
|
||
// this.warningText='当前设备前臂长,高度参数错误'
|
||
// }
|
||
// }
|
||
if (x <= realWidth) {
|
||
xImg = (x / realWidth) * (frontArmLength - imgLeftWidth) + imgLeftWidth;
|
||
this.warningText = "";
|
||
} else {
|
||
xImg = frontArmLength-imgLeftWidth;
|
||
this.warningText = "当前设备前臂长参数错误";
|
||
}
|
||
console.log(realHeight, y, realHeight, height, imgLeftHeight, imgLeftHeight);
|
||
if (y <= realHeight) {
|
||
yImg = ((y) / realHeight) * (height-imgLeftHeight) + imgLeftHeight;
|
||
// this.warningText = "";
|
||
} else {
|
||
yImg = height-imgLeftHeight;
|
||
this.warningText = "当前设备高度参数错误";
|
||
}
|
||
if(xImg<90){
|
||
xImg=90
|
||
}
|
||
if (yImg > 380){
|
||
yImg = 380
|
||
}
|
||
$moveBox.style.left = xImg - 6 + "px";
|
||
$moveBox.style.top = yImg + "px";
|
||
$xMove.style.left = xImg + "px";
|
||
$line.style.left = xImg + 8 + "px";
|
||
$line.style.height = yImg-74 + "px";
|
||
},
|
||
//创建图表
|
||
createdEcharts() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
};
|
||
getTodayTowerDataApi(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].ranger);
|
||
}
|
||
}
|
||
let opt = {
|
||
color: ["#FD3A88", "#47F9FD"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
data: ["吊重", "幅度"],
|
||
},
|
||
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: "吊重",
|
||
type: "line",
|
||
data: loadingData,
|
||
smooth: true,
|
||
},
|
||
{
|
||
name: "幅度",
|
||
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 {
|
||
background-color: #ffffff;
|
||
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: 260px;
|
||
width: 100%;
|
||
margin-top: 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%;
|
||
// height: calc(100% - 150px);
|
||
// margin-top: 12px;
|
||
box-sizing: border-box;
|
||
height: 554px;
|
||
.trajectory {
|
||
width: 72%;
|
||
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;
|
||
}
|
||
.allTowerTrack {
|
||
width: 50%;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
.cycle_border1 {
|
||
border: #f5a623 3px solid;
|
||
}
|
||
.cycle_border2 {
|
||
border: #f5a623 3px dashed;
|
||
}
|
||
.cycle {
|
||
cursor: pointer;
|
||
width: 75px;
|
||
height: 75px;
|
||
border-radius: 50%;
|
||
padding: 0 !important;
|
||
// margin: 30px auto 0;
|
||
position: absolute;
|
||
}
|
||
.cycle img {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-left: -15px;
|
||
margin-top: -15px;
|
||
z-index: 100;
|
||
}
|
||
.cycle p {
|
||
position: absolute;
|
||
width: 2px;
|
||
left: 50%;
|
||
top: 0;
|
||
height: 100%;
|
||
/* background-color: #F5A623; */
|
||
transform: rotate(0deg);
|
||
margin-left: -1px;
|
||
padding: 0;
|
||
transition: all 0.5s;
|
||
}
|
||
.cycle p span {
|
||
display: block;
|
||
height: 50%;
|
||
}
|
||
.cycle p span:first-child {
|
||
background-color: #f5a623;
|
||
}
|
||
.cycle p span:last-child {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.tower-time{
|
||
float: right;
|
||
font-size: 12px;
|
||
}
|
||
.dev-line{
|
||
margin-left: 8px;
|
||
color: #67C23A;
|
||
span{
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #67C23A;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.dev-leave{
|
||
margin-left: 8px;
|
||
color: #909399;
|
||
span{
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #909399;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style>
|