949 lines
28 KiB
Vue
949 lines
28 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"
|
||
@change="selectChange"
|
||
>
|
||
<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-for="(item, index) in driverList"
|
||
:key="index"
|
||
>
|
||
<div v-if="driverList.length > 0">
|
||
<img
|
||
class="imgHead"
|
||
:src="fileUrl + item.imageUrl"
|
||
v-if="item.imageUrl"
|
||
width=""
|
||
/>
|
||
<img src="@/assets/images/profile_photo.png" v-else />
|
||
<div>
|
||
{{ $t('message.lifter.fullName') }}：{{ item.workerName }}
|
||
</div>
|
||
<div>
|
||
{{ $t('message.lifter.contactNumber') }}：{{
|
||
item.phoneNumber
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="noMessage" v-else>暂无数据</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 class="value">
|
||
{{ floorNumS ? floorNumS : 0 }} %
|
||
</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 === 1 ? '在线' : '离线' }}
|
||
</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="driverData" class="tables" style="width: 100%">
|
||
<el-table-column
|
||
prop="workerName"
|
||
:label="$t('message.lifter.fullName')"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="phoneNumber"
|
||
:label="$t('message.lifter.contactNumber')"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="imageUrl"
|
||
:label="$t('message.lifter.photo')"
|
||
align="center"
|
||
>
|
||
<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: 0,
|
||
floorNumS: 0,
|
||
company: COMPANY,
|
||
driverData: [],
|
||
};
|
||
},
|
||
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;
|
||
}
|
||
});
|
||
},
|
||
//下拉选择
|
||
selectChange(val) {
|
||
this.devSn = val
|
||
this.floorNumS = 0
|
||
console.log("下拉时的devSn----", this.devSn);
|
||
this.getSelectLifterBySn();
|
||
this.getRecentWorkList();
|
||
this.getTodayLifterCurrentDataList();
|
||
setTimeout(() => {
|
||
this.getListData();
|
||
}, 1000)
|
||
},
|
||
|
||
//获取设备列表下拉
|
||
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.getSelectLifterBySn();
|
||
this.getRecentWorkList();
|
||
this.getTodayLifterCurrentDataList();
|
||
setTimeout(() => {
|
||
this.getListData();
|
||
}, 1000)
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取 设备 视频列表
|
||
getSelectLifterBySn() {
|
||
let data = {
|
||
devSn: this.devSn
|
||
}
|
||
getSelectLifterBySnApi(data).then(res => {
|
||
this.maxHeight = res.result.lifter.maxHeight
|
||
console.log("9999999999999999", res);
|
||
if (res.code == 200) {
|
||
if (res.result.currentDriver != null) {
|
||
this.driverList = [res.result.currentDriver]
|
||
} else {
|
||
this.driverList = []
|
||
}
|
||
this.driverData = res.result.driverList != [] ? res.result.driverList : []
|
||
this.videoList = res.result.videoList;
|
||
this.devOnline = res.result.lifter.devOnline
|
||
|
||
|
||
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("66666666666666666666", this.maxHeight);
|
||
if (!this.maxHeight) {
|
||
this.$message.error(this.$t('message.lifter.theHeightIsZero'));
|
||
return
|
||
}
|
||
console.log('计算之前1', res.result.height);
|
||
console.log('计算之前2', this.maxHeight);
|
||
let Num = res.result.height / this.maxHeight * 100
|
||
console.log('计算后的值', Num);
|
||
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 {
|
||
width: 90%;
|
||
height: calc(100% - 100px);
|
||
}
|
||
|
||
.driver_info {
|
||
/*text-align: center;*/
|
||
line-height: 25px;
|
||
.noMessage {
|
||
height: 315px;
|
||
line-height: 315px;
|
||
text-align: center;
|
||
}
|
||
.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>
|