815 lines
25 KiB
Vue
815 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<!-- 运行信息 -->
|
|||
|
|
<vue-scroll style="height: 100%">
|
|||
|
|
<div class="operationInfo">
|
|||
|
|
<div class="title whiteBlock">
|
|||
|
|
<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')
|
|||
|
|
" @visible-change='visibleChange'
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
:label="item.devName"
|
|||
|
|
v-for="(item, index) in lifterList"
|
|||
|
|
: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-button type="warning" plain @click="refresh">{{
|
|||
|
|
$t("message.lifter.refresh")
|
|||
|
|
}}</el-button> -->
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content whiteBlock">
|
|||
|
|
<div class="bottom_info flex" style="height: 398px">
|
|||
|
|
<div class="T_H_wrap" style="margin-right: 12px">
|
|||
|
|
<div class="load whiteBlock">
|
|||
|
|
<div class="state_title pageTitle">{{ $t("message.lifter.realTimeVideo") }}</div>
|
|||
|
|
<div style="margin-bottom: 15px">
|
|||
|
|
<el-select
|
|||
|
|
size="small"
|
|||
|
|
v-model="videoId"
|
|||
|
|
:placeholder="$t('message.lifter.pleaseSelectVideo')"
|
|||
|
|
@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" size="small" style="margin-left: 10px;height:32px" plain
|
|||
|
|
>{{ $t("message.lifter.demand") }}</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 class="T_H_wrap" style="margin-right: 12px">
|
|||
|
|
<div class="load whiteBlock">
|
|||
|
|
<div class="flex2">
|
|||
|
|
<div class="state_title pageTitle">{{company == 'longguang'? $t("message.lifter.currentLiftOperator") : $t("message.lifter.currentElevatorDriver") }}</div>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
style="margin-left: 10px; margin-bottom: 15px"
|
|||
|
|
@click="showDriver = true"
|
|||
|
|
plain
|
|||
|
|
>{{company == 'longguang'? $t("message.lifter.viewLiftOperator") : $t("message.lifter.viewDriverList") }}</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<vue-scroll style="height: 86%;">
|
|||
|
|
<div class="driver_info" v-if="company == 'longguang' || item.idCard == realTimeDevData.driverIdCard" v-for="item in driverList">
|
|||
|
|
<img
|
|||
|
|
class="imgHead"
|
|||
|
|
:src="fileUrl + item.fieldAcquisitionUrl"
|
|||
|
|
v-if="item.fieldAcquisitionUrl"
|
|||
|
|
width=""
|
|||
|
|
/>
|
|||
|
|
<img src="@/assets/images/profile_photo.png" v-else />
|
|||
|
|
<div>{{ $t("message.lifter.fullName") }}：{{ item.workerName }}</div>
|
|||
|
|
<div>{{ $t("message.lifter.contactNumber") }}：{{ item.emergentPhone }}</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="driver_info" v-for="item in driverList">-->
|
|||
|
|
<!-- <img-->
|
|||
|
|
<!-- :src="realTimeDevData.fieldAcquisitionUrl"-->
|
|||
|
|
<!-- v-if="realTimeDevData.fieldAcquisitionUrl"-->
|
|||
|
|
<!-- />-->
|
|||
|
|
<!-- <img src="@/assets/images/profile_photo.png" v-else />-->
|
|||
|
|
<!-- <div>姓名：{{ realTimeDevData.driverName }}</div>-->
|
|||
|
|
<!-- <div>上岗时间：{{ realTimeDevData.reciveTime }}</div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
</vue-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="T_H_wrap">
|
|||
|
|
<div class="load whiteBlock">
|
|||
|
|
<div class="state_title pageTitle">{{ $t("message.lifter.recentWork") }}</div>
|
|||
|
|
<div class="flex">
|
|||
|
|
<el-date-picker style="width: 300px"
|
|||
|
|
v-model="timeValue"
|
|||
|
|
type="daterange"
|
|||
|
|
size="small"
|
|||
|
|
:range-separator="$t('message.lifter.to')"
|
|||
|
|
:start-placeholder="$t('message.lifter.startDate')"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
:end-placeholder="$t('message.lifter.deadline')"
|
|||
|
|
@change="getTime"
|
|||
|
|
>
|
|||
|
|
</el-date-picker>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
style="margin-left: 10px"
|
|||
|
|
plain
|
|||
|
|
@click="getRecentWorkList"
|
|||
|
|
>{{ $t("message.lifter.demand") }}</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
:data="workList"
|
|||
|
|
class="tables"
|
|||
|
|
style="width: 100%; min-height: 180px"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="startTime" :label="$t('message.lifter.startTime')" width="180">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="endTime" :label="$t('message.lifter.endTime')" width="180">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="workTime" :label="$t('message.lifter.workingHours')">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="loading" :label="$t('message.lifter.liftingWeight')"> </el-table-column>
|
|||
|
|
<el-table-column prop="driverName" :label="company == 'longguang'? $t('message.lifter.liftOperator') : $t('message.lifter.driver') ">
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="direction_data_wrap flex" style="margin-top: 5px">
|
|||
|
|
<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/towercurrentdata11.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.load") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{ realTimeData.loading?realTimeData.loading:0 }} kg</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="type bg1 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata13.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.weightPercentage") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{ realTimeData.loadRatio?realTimeData.loadRatio:0 }} %</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">{{ realTimeData.height?realTimeData.height:0 }} m</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 预警 -->
|
|||
|
|
<div class="type bg2 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata10.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.alarmStatus") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{realTimeData.isAlarm==1? $t("message.lifter.abnormal") : $t("message.lifter.normal") }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_type">
|
|||
|
|
<div class="type bg3 flex2">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata12.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.heightPercentage") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="floorNumS" class="value">{{ floorNumS?floorNumS:"--" }} %</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="type bg3 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata6.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.currentSpeed") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{realTimeData.speed?realTimeData.speed:0}}m/s</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.dipAngle") }}X</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{ realTimeData.dipAngleX?realTimeData.dipAngleX:0 }} °</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="type bg4 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata6.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.airSpeed") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{realTimeData.windSpeed?realTimeData.windSpeed:0}} m/s</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.dipAngle") }}Y</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{ realTimeData.dipAngleY?realTimeData.dipAngleY:0 }} °</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="type bg5 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata2.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.currentFloor") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{realTimeData.floorNum}}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_type">
|
|||
|
|
<div class="type bg6 flex2">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata14.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.numberOfPeople") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{ realTimeData.peopleNumber?realTimeData.peopleNumber:0 }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="type bg6 flex2 marg_t">
|
|||
|
|
<div class="left">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/towericon/towercurrentdata10.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ $t("message.lifter.equipmentStatus") }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="value">{{devonline===0? $t("message.lifter.offLine") : $t("message.lifter.onLine") }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom_info flex">
|
|||
|
|
<div class="T_H_wrap" style="margin-right: 12px">
|
|||
|
|
<div class="load whiteBlock">
|
|||
|
|
<div class="state_title pageTitle">
|
|||
|
|
{{
|
|||
|
|
$t("message.lifter.realTime") +
|
|||
|
|
$t("message.lifter.liftingWeight")
|
|||
|
|
}}
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 85%; width: 100%" ref="liftingWeight"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="altitude">
|
|||
|
|
<div class="state_title pageTitle">{{$t('message.lifter.realTime')+$t('message.lifter.inclination')}}</div>
|
|||
|
|
<div style="height: 85%; width: 100%" ref="gradient"></div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="T_H_wrap">
|
|||
|
|
<div class="load whiteBlock">
|
|||
|
|
<div class="state_title pageTitle">
|
|||
|
|
{{
|
|||
|
|
$t("message.lifter.realTime") + $t("message.lifter.altitude")
|
|||
|
|
}}
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 85%; width: 100%" ref="height"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="altitude">
|
|||
|
|
<div class="state_title pageTitle">{{$t('message.lifter.realTime')+$t('message.lifter.alarm')}}</div>
|
|||
|
|
<div style="height: 85%; width: 100%" ref="alarm"></div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 查看司机信息 -->
|
|||
|
|
<el-dialog :modal-append-to-body="false" :title="company == 'longguang'? $t('message.lifter.liftOperator') : $t('message.lifter.driverInfo') " :visible.sync="showDriver" width="667px">
|
|||
|
|
<div class="dialog_content">
|
|||
|
|
<el-table :data="driverList" class="tables" style="width: 100%">
|
|||
|
|
<el-table-column prop="workerName" :label="$t('message.lifter.fullName')"> </el-table-column>
|
|||
|
|
<el-table-column prop="emergentPhone" :label="$t('message.lifter.contactNumber')">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="address" :label="$t('message.lifter.photo')">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<img
|
|||
|
|
:src="fileUrl + scope.row.fieldAcquisitionUrl"
|
|||
|
|
@click="openImg(fileUrl + scope.row.fieldAcquisitionUrl)"
|
|||
|
|
width="20"
|
|||
|
|
alt=""
|
|||
|
|
srcset=""
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</vue-scroll>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import echarts from 'echarts4';;
|
|||
|
|
import {
|
|||
|
|
getLifterListApi,
|
|||
|
|
getLifterCurrentDataApi,
|
|||
|
|
getSelectLifterBySnApi,
|
|||
|
|
getSelectLifterWorkCycleListApi,
|
|||
|
|
getTodayLifterCurrentDataListApi
|
|||
|
|
} from "@/assets/js/api/lifter";
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
hidePluginWindow,showPluginWindow
|
|||
|
|
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
|
|||
|
|
|
|||
|
|
|
|||
|
|
import videoModule from "@/components/videoModule/videoModule.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
videoModule,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
projectSn: "",
|
|||
|
|
lifterList: [],
|
|||
|
|
devSn: "",
|
|||
|
|
realTimeData: {
|
|||
|
|
loading: 0,
|
|||
|
|
loadRatio: 0,
|
|||
|
|
height: 0,
|
|||
|
|
heightRatio: 0,
|
|||
|
|
biasAngle: 0,
|
|||
|
|
biasRatio: 0,
|
|||
|
|
peopleNumber: 0,
|
|||
|
|
dipAngleX:0,
|
|||
|
|
speed:0,
|
|||
|
|
floorNum:0,
|
|||
|
|
windSpeed:0,
|
|||
|
|
isAlarm:0
|
|||
|
|
},
|
|||
|
|
videoId: "",
|
|||
|
|
videoList: [],
|
|||
|
|
selectList: [], //视频数据源
|
|||
|
|
realTimeDevData: {},
|
|||
|
|
showDriver: false,
|
|||
|
|
timeValue: "",
|
|||
|
|
fileUrl: "",
|
|||
|
|
workList: [],
|
|||
|
|
driverList:[],
|
|||
|
|
startTime:'',
|
|||
|
|
endTime:'',
|
|||
|
|
echartsArr:[],
|
|||
|
|
devonline:0,
|
|||
|
|
maxHeight:'',
|
|||
|
|
floorNumS:"",
|
|||
|
|
company:COMPANY
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.projectSn = this.$store.state.projectSn;
|
|||
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|||
|
|
this.getLifterList();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
openImg(src){
|
|||
|
|
window.open(src)
|
|||
|
|
},
|
|||
|
|
//下拉框聚焦
|
|||
|
|
visibleChange(val){
|
|||
|
|
if(val){
|
|||
|
|
hidePluginWindow();
|
|||
|
|
}else{
|
|||
|
|
showPluginWindow();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//选择时间时
|
|||
|
|
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,
|
|||
|
|
};
|
|||
|
|
getSelectLifterWorkCycleListApi(data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.workList = res.result;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//获取设备列表下拉
|
|||
|
|
getLifterList() {
|
|||
|
|
let data = {
|
|||
|
|
projectSn: this.projectSn,
|
|||
|
|
};
|
|||
|
|
getLifterListApi(data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.lifterList = res.result;
|
|||
|
|
if(res.result.length>0){
|
|||
|
|
this.devSn = res.result[0].devSn;
|
|||
|
|
this.getListData();
|
|||
|
|
this.getSelectLifterBySn();
|
|||
|
|
this.getRecentWorkList();
|
|||
|
|
this.getTodayLifterCurrentDataList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取 设备 视频列表
|
|||
|
|
getSelectLifterBySn(){
|
|||
|
|
let data = {
|
|||
|
|
devSn:this.devSn
|
|||
|
|
}
|
|||
|
|
getSelectLifterBySnApi(data).then(res=>{
|
|||
|
|
this.maxHeight = res.result.lifter.maxHeight
|
|||
|
|
if(res.code==200){
|
|||
|
|
this.videoList = res.result.videoList;
|
|||
|
|
this.devonline=res.result.lifter.devonline
|
|||
|
|
this.driverList = res.result.driverList;
|
|||
|
|
if(res.result.videoList.length>0){
|
|||
|
|
this.videoId = res.result.videoList[0].id;
|
|||
|
|
this.getVideo(res.result.videoList[0].id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取实时数据
|
|||
|
|
getListData() {
|
|||
|
|
let data = {
|
|||
|
|
devSn: this.devSn,
|
|||
|
|
};
|
|||
|
|
getLifterCurrentDataApi(data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
if (res.result) {
|
|||
|
|
this.realTimeData = res.result;
|
|||
|
|
console.log(this.maxHeight);
|
|||
|
|
if (!this.maxHeight){
|
|||
|
|
this.$message.error(this.$t('message.lifter.theHeightIsZero'));
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let Num = res.result.height/this.maxHeight*100
|
|||
|
|
this.floorNumS = Num.toFixed(2)
|
|||
|
|
this.getSelectLifterBySn();
|
|||
|
|
this.realTimeDevData = res.result;
|
|||
|
|
this.getTodayLifterCurrentDataList();
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
this.realTimeData= {
|
|||
|
|
loading: 0,
|
|||
|
|
loadRatio: 0,
|
|||
|
|
height: 0,
|
|||
|
|
heightRatio: 0,
|
|||
|
|
biasAngle: 0,
|
|||
|
|
biasRatio: 0,
|
|||
|
|
peopleNumber: 0,
|
|||
|
|
dipAngleX:0,
|
|||
|
|
speed:0,
|
|||
|
|
floorNum:0,
|
|||
|
|
windSpeed:0,
|
|||
|
|
isAlarm:0
|
|||
|
|
}
|
|||
|
|
this.echartsArr = []
|
|||
|
|
this.createdEcharts();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//选择的视频
|
|||
|
|
getVideo(val) {
|
|||
|
|
for (let i = 0; i < this.videoList.length; i++) {
|
|||
|
|
if (val == this.videoList[i].id) {
|
|||
|
|
this.selectList = [this.videoList[i]];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//刷新
|
|||
|
|
refresh() {
|
|||
|
|
this.devSn = "";
|
|||
|
|
},
|
|||
|
|
//获取图表数据
|
|||
|
|
getTodayLifterCurrentDataList(){
|
|||
|
|
let data = {
|
|||
|
|
devSn:this.devSn
|
|||
|
|
};
|
|||
|
|
getTodayLifterCurrentDataListApi(data).then(res=>{
|
|||
|
|
if(res.code==200){
|
|||
|
|
if(res.result){
|
|||
|
|
this.echartsArr = res.result;
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
this.echartsArr = []
|
|||
|
|
}
|
|||
|
|
this.createdEcharts(); //创建图表
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//创建图表
|
|||
|
|
createdEcharts() {
|
|||
|
|
var chart1 = echarts.init(this.$refs.liftingWeight);
|
|||
|
|
// var chart2 = echarts.init(this.$refs.gradient);
|
|||
|
|
var chart3 = echarts.init(this.$refs.height);
|
|||
|
|
// var chart4 = echarts.init(this.$refs.alarm);
|
|||
|
|
chart1.clear();
|
|||
|
|
// chart2.clear();
|
|||
|
|
chart3.clear();
|
|||
|
|
// chart4.clear();
|
|||
|
|
chart1.setOption(this.getOption(0));
|
|||
|
|
// chart2.setOption(this.getOption(1));
|
|||
|
|
chart3.setOption(this.getOption(2));
|
|||
|
|
// chart4.setOption(this.getOption(3));
|
|||
|
|
},
|
|||
|
|
//图表信息
|
|||
|
|
getOption(index) {
|
|||
|
|
let heightArr = [];
|
|||
|
|
let loadArr = [];
|
|||
|
|
let timeArr = [];
|
|||
|
|
for(let i =0; i<this.echartsArr.length; i++){
|
|||
|
|
let time = this.echartsArr[i].reciveTime.substring(12);
|
|||
|
|
heightArr.push(this.echartsArr[i].height);
|
|||
|
|
loadArr.push(this.echartsArr[i].loading);
|
|||
|
|
timeArr.push(time)
|
|||
|
|
}
|
|||
|
|
var colors = ["#3A7BFF", "#55CBBB", "#B59CF2", "#F3D025"];
|
|||
|
|
var opt = {
|
|||
|
|
color: colors,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 30,
|
|||
|
|
},
|
|||
|
|
// legend: {},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: timeArr,
|
|||
|
|
axisLabel: {
|
|||
|
|
//X轴刻度配置
|
|||
|
|
interval: "auto", //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
name: [
|
|||
|
|
this.$t("message.lifter.load") + "(kg)",
|
|||
|
|
this.$t("message.lifter.angle") + "(°)",
|
|||
|
|
this.$t("message.lifter.altitude") + "(m)",
|
|||
|
|
this.$t("message.lifter.alarm") +
|
|||
|
|
"(" +
|
|||
|
|
this.$t("message.lifter.next") +
|
|||
|
|
")",
|
|||
|
|
][index],
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#eee",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
// realtime: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: 100,
|
|||
|
|
height: 8,
|
|||
|
|
borderColor: "transparent",
|
|||
|
|
backgroundColor: "#e8e8e8",
|
|||
|
|
filterColor: "#999999",
|
|||
|
|
bottom: 0,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: [
|
|||
|
|
this.$t("message.lifter.load"),
|
|||
|
|
this.$t("message.lifter.angle"),
|
|||
|
|
this.$t("message.lifter.altitude"),
|
|||
|
|
this.$t("message.lifter.alarm"),
|
|||
|
|
][index],
|
|||
|
|
type: "line",
|
|||
|
|
symbol: "none",
|
|||
|
|
smooth: true,
|
|||
|
|
data: index==0?loadArr:heightArr,
|
|||
|
|
// markLine: getMarkLine(index),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: colors[index],
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: colors[index],
|
|||
|
|
opacity: 0.1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
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 {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 298px;
|
|||
|
|
.pageTitle {
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
.direction_data_wrap {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
height: 260px;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.data_wrap {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.data_type {
|
|||
|
|
width: 16%;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom_info {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100%);
|
|||
|
|
margin-top: 12px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.T_H_wrap {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.load {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 6px);
|
|||
|
|
// background: #fff;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.altitude {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(50% - 6px);
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.playVideoBox {
|
|||
|
|
height: calc(100% - 90px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.driver_info {
|
|||
|
|
/*text-align: center;*/
|
|||
|
|
line-height: 25px;
|
|||
|
|
margin-top: 100px;
|
|||
|
|
.imgHead{
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
img {
|
|||
|
|
margin-bottom: 18px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg1 {
|
|||
|
|
background-color: #7ba6ff;
|
|||
|
|
background-image: none;
|
|||
|
|
}
|
|||
|
|
.bg2 {
|
|||
|
|
background-color: #55cbbb;
|
|||
|
|
}
|
|||
|
|
.bg3 {
|
|||
|
|
background-color: #84ccf3;
|
|||
|
|
}
|
|||
|
|
.bg4 {
|
|||
|
|
background-color: #b59cf2;
|
|||
|
|
}
|
|||
|
|
.bg5 {
|
|||
|
|
background-color: #f6b87d;
|
|||
|
|
}
|
|||
|
|
.bg6 {
|
|||
|
|
background-color: #9ed96b;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|