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>
|