1654 lines
40 KiB
Vue
1654 lines
40 KiB
Vue
<template>
|
|
<view class="addIssue">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true" :themeType="true">
|
|
<view class="headerName">
|
|
桥机监测
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="search-box" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
|
<u-collapse>
|
|
<u-collapse-item>
|
|
<view @click="bridgeInfo.collapseFlag = !bridgeInfo.collapseFlag" class="collapse-header"
|
|
slot="title-all">
|
|
<view>
|
|
<view></view>
|
|
<view>{{ bridgeInfo.bridgeName || '全部'}}</view>
|
|
</view>
|
|
<view>
|
|
<view>{{bridgeCraneDevList.length > 0 ? bridgeCraneDevList.length - 1 : 0}}台</view>
|
|
<view class="arrow-bottom"></view>
|
|
</view>
|
|
</view>
|
|
<view class="collapse-content" v-show="bridgeInfo.collapseFlag">
|
|
<view @click="onBridgeCraneDevClick(item)"
|
|
:class="{'view-active': item.devId == bridgeInfo.bridgeId}"
|
|
v-for="item in bridgeCraneDevList" :key="item.devId">{{item.devName}}</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
<u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :bar-width="140"
|
|
:list="list" :is-scroll="false" :current="current" @change="currentChange"></u-tabs>
|
|
</view>
|
|
<view class="content">
|
|
<template v-if="current == 0">
|
|
<view class="box-main1" v-if="!bridgeInfo.bridgeId">
|
|
<view class="box-main1_header">
|
|
今日桥机工作情况
|
|
</view>
|
|
<view class="main1-item" v-for="(item, index) in bridgeTodayList" :key="item.id">
|
|
<view class="main1-item-top">
|
|
<view :class="`item-image${index}`"></view>
|
|
<view class="item-top_right">
|
|
<view>
|
|
<view>{{item.title}}</view>
|
|
<view>{{item.countNum}}次</view>
|
|
</view>
|
|
<view class="schedule">
|
|
<view
|
|
:style="`width: ${Math.abs(item.countPer) >= 100 ? 100 : Math.abs(item.countPer)}%`">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="main1-item-bottom">
|
|
<view class="">
|
|
<view class=""></view>
|
|
<view class="">相比昨日</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="">{{item.countPer}}%</view>
|
|
<view :class="item.countPer >= 0 ? 'bottom-image_up' : 'bottom-image_down'"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-main4" v-else>
|
|
<view class="content-box content-box1">
|
|
<view class="box-main1_header">
|
|
实时监控
|
|
<view class="" @click="onClickType(5)">
|
|
<view>{{videoInfo.videoName}}</view>
|
|
<view></view>
|
|
</view>
|
|
</view>
|
|
<view class="bridge-video" v-if="!videoShow && videoFlag">
|
|
<!-- APP环境使用web-view -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<video v-if="!isYsy" class="videoBox" id="myVideo" :custom-cache="false"
|
|
:src="playUrlFilter" controls autoplay></video>
|
|
<!-- #endif -->
|
|
<!-- H5环境使用ezuikit -->
|
|
<!-- #ifdef H5 -->
|
|
<my-player-m3u8 v-if="!isYsy && playUrlFilter" :showMask="true" :src="playUrlFilter"
|
|
:autoplay="true" />
|
|
<video v-else class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter"
|
|
controls autoplay>
|
|
</video>
|
|
<!-- #endif -->
|
|
<view v-if="isYsy && playUrlFilter && accessToken"
|
|
:style="{width: '100%', height: '225px'}">
|
|
<!-- H5环境使用ezuikit -->
|
|
<!-- #ifdef H5 -->
|
|
<iframe :src="ysyPlayUrl" :style="webviewStyles" frameborder="0"
|
|
:scrolling="'no'"></iframe>
|
|
<!-- #endif -->
|
|
<!-- APP环境使用web-view -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<web-view :src="ysyPlayUrl" :style="webviewStyles"
|
|
:webview-styles="webviewConfig"></web-view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="bridge-video" v-else>
|
|
<view class="videoBox1"></view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box content-box2">
|
|
<view class="box-main1_header">
|
|
桥机实时数据
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>上传时间:</view>
|
|
<view>{{bridgeCraneNewestInfo.uploadTime}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>设备类型:</view>
|
|
<view>{{bridgeCraneNewestInfo.devType}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>本次工作时间(h):</view>
|
|
<view>{{bridgeCraneNewestInfo.workTime}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>累计工作时间(h):</view>
|
|
<view>{{bridgeCraneNewestInfo.cumulativeWorkingTime}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>工作循环次数(次):</view>
|
|
<view>{{bridgeCraneNewestInfo.operatingCycleNumber}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>总重量(t):</view>
|
|
<view>{{bridgeCraneNewestInfo.neiweight5}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车小车行程(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance1}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车小车行程(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance2}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车前部安全距离(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance10}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车前部安全距离(级):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance12}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车后部安全距离(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance11}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车后部安全距离(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance13}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>大车行程(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance7}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>大车偏斜行程(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance14}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车吊钩速度(min):</view>
|
|
<view>{{bridgeCraneNewestInfo.speed1}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车吊钩高度(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance5}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>前天车吊钩重量(t):</view>
|
|
<view>{{bridgeCraneNewestInfo.neiweight1}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车吊钩速度(min):</view>
|
|
<view>{{bridgeCraneNewestInfo.speed2}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车吊钩高度(m):</view>
|
|
<view>{{bridgeCraneNewestInfo.distance6}}</view>
|
|
</view>
|
|
<view class="box-main4_item">
|
|
<view>后天车吊钩重量(t):</view>
|
|
<view>{{bridgeCraneNewestInfo.neiweight2}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="box-main2" v-else-if="current == 1">
|
|
<view class="content-box content-box1">
|
|
<view class="box-main1_header">
|
|
报警统计
|
|
</view>
|
|
<view class="box-main2-time">
|
|
<view @click="alarmByCodeClick(item)"
|
|
:class="{'time-active': item.id == countAlarmByCodeInfo.timeActive}"
|
|
v-for="item in timeList" :key="item.id">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<template v-if="countAlarmByCodeList.length > 0">
|
|
<view class="box-main2-box_charts">
|
|
<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
|
|
</view>
|
|
<view class="box-main2-box_roll">
|
|
<view class="box-main2-box" v-for="(item,index) in countAlarmByCodeList" :key="index">
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
|
|
<view>{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="new-nodata_height2" v-else>
|
|
<view class="new-nodata">
|
|
<view></view>
|
|
<text>暂无数据...</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box content-box2">
|
|
<view class="box-main1_header">
|
|
今日桥机工作情况
|
|
</view>
|
|
<template v-if="bridgeCraneAlarmList.length > 0">
|
|
<view class="content-box2_main" v-for="item in bridgeCraneAlarmList" :key="item.id">
|
|
<view class="box2_main_top">
|
|
<view>
|
|
<view></view>
|
|
<view>{{item.devName}}</view>
|
|
</view>
|
|
<view>
|
|
{{item.alarmTime}}
|
|
</view>
|
|
</view>
|
|
<view class="box2_main_bottom">
|
|
<view></view>
|
|
<view>告警信息:{{alarmTypeCodeListUp(item.alarmTypeCode)}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="new-nodata_height2" v-else>
|
|
<view class="new-nodata">
|
|
<view></view>
|
|
<text>暂无数据...</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-main3" v-else-if="current == 2">
|
|
<view class="content-box content-box1" v-if="!bridgeInfo.bridgeId">
|
|
<view class="box-main1_header">
|
|
运载排行榜
|
|
</view>
|
|
<view class="box-main2-time">
|
|
<view @click="workTimeByWorkerClick(item)"
|
|
:class="{'time-active': item.id == countWorkTimeByWorkerInfo.timeActive}"
|
|
v-for="item in timeList" :key="item.id">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<template v-if="countWorkTimeByWorkerList.length > 0">
|
|
<view class="box-main3_item" :class="`box-main3_item${index}`"
|
|
v-for="(item, index) in countWorkTimeByWorkerList" :key="index">
|
|
<view>
|
|
<view>{{item.workerName || '--'}}</view>
|
|
<view>{{item.neiweight5}}</view>
|
|
</view>
|
|
<view>
|
|
<view></view>
|
|
<view>运载量NO.{{index + 1}}</view>
|
|
</view>
|
|
<view></view>
|
|
</view>
|
|
</template>
|
|
<view class="new-nodata_height2" v-else>
|
|
<view class="new-nodata">
|
|
<view></view>
|
|
<text>暂无数据...</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box content-box2">
|
|
<view class="box-main1_header">
|
|
近7天工作时长统计趋势图
|
|
</view>
|
|
<view class="box-main2-box_charts">
|
|
<view class="box_charts-title">工作时长(H)</view>
|
|
<qiun-data-charts tooltipFormat="defaultTooltip" type="area" :opts="opts1"
|
|
:chartData="chartData1" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast" />
|
|
<u-popup :mask-close-able="false" v-model="videoShow" :closeable="false" mode="bottom">
|
|
<view class="content-popup">
|
|
<view class="content-popup_header"> 实时监控 </view>
|
|
<scroll-view v-if="bridgeVideoList.length > 0" scroll-y="true" style="height: 800rpx;">
|
|
<TreeView @node-click="onSupervisorClick" :multiple="false" checked-bg-color="rgba(81,129,246,0.1)"
|
|
:data="bridgeVideoList" :children-key="'children'" :label-key="'videoName'" :id-key="'id'"
|
|
:value="[videoId]" />
|
|
</scroll-view>
|
|
<view class="new-nodata_height" v-else>
|
|
<view class="new-nodata">
|
|
<view></view>
|
|
<text>暂无数据...</text>
|
|
</view>
|
|
</view>
|
|
<view class="confrim-btn">
|
|
<view @click="onCancelClick(5)">取消</view>
|
|
<view @click="onSubmitType(5)">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isJSON
|
|
} from "@/utils/tool.js"
|
|
import MyPlayerM3u8 from '@/components/my-player-m3u8/my-player-m3u8.vue';
|
|
import TreeView from "@/components/tree-view/TreeView.vue";
|
|
export default {
|
|
components: {
|
|
MyPlayerM3u8,
|
|
TreeView
|
|
},
|
|
data() {
|
|
return {
|
|
mobileTopHeight: 0,
|
|
projectDetail: {},
|
|
list: [{
|
|
name: '实时数据'
|
|
}, {
|
|
name: '报警记录'
|
|
}, {
|
|
name: '工效分析'
|
|
}],
|
|
current: 0,
|
|
bridgeTodayList: [{
|
|
id: 1,
|
|
title: "今日累计循环工作次数",
|
|
countNum: 0,
|
|
countPer: 0,
|
|
}, {
|
|
id: 2,
|
|
title: "今日累计违章报警次数",
|
|
countNum: 0,
|
|
countPer: 0,
|
|
}],
|
|
bridgeInfo: {
|
|
collapseFlag: false, // 控制筛选
|
|
bridgeId: "",
|
|
bridgeName: "",
|
|
bridgeCraneDevId: "",
|
|
},
|
|
chartData2: {},
|
|
opts2: {
|
|
padding: [5, 5, 5, 5],
|
|
dataLabel: false,
|
|
enableScroll: false,
|
|
tooltipShow: false,
|
|
title: {
|
|
name: "",
|
|
},
|
|
subtitle: {
|
|
name: '',
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
extra: {
|
|
pie: {
|
|
activeOpacity: 0,
|
|
activeRadius: 0,
|
|
offsetAngle: 0,
|
|
labelWidth: 0,
|
|
border: false,
|
|
borderWidth: 0,
|
|
borderColor: "#FFFFFF"
|
|
}
|
|
}
|
|
},
|
|
colorList: ['#C62828', '#F20081', '#AB47BC', '#9F8FBD', '#3949AB', '#2196F3 ', '#48C7D7', '#0097A7',
|
|
'#8BC34A', '#C0CA33', '#FBC02D',
|
|
'#FF9800', '#8D6E63', '#607D8B', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#00b0f0', '#0070c0',
|
|
'#92d050', '#00b050', '#002060', '#7030a0', '#262626',
|
|
'#a6a6a6', '#660010', '#b21016'
|
|
],
|
|
timeActive: 1,
|
|
timeList: [{
|
|
id: 1,
|
|
title: "今日"
|
|
}, {
|
|
id: 2,
|
|
title: "近7天"
|
|
}, {
|
|
id: 3,
|
|
title: "近30天"
|
|
}],
|
|
chartData1: {},
|
|
opts1: {
|
|
padding: [50, 15, 5, 15],
|
|
enableScroll: false,
|
|
dataLabel: false,
|
|
color: ['#2B8CF3'],
|
|
xAxis: {
|
|
disableGrid: false,
|
|
calibration: true,
|
|
fontColor: "#B3B3B3",
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2,
|
|
disabled: false,
|
|
gridColor: "#B3B3B3",
|
|
data: [{
|
|
calibration: true,
|
|
fontColor: "#B3B3B3",
|
|
// position: "left",
|
|
// title: "工作时长(H)",
|
|
}]
|
|
},
|
|
title: {
|
|
name: "",
|
|
},
|
|
subtitle: {
|
|
name: '',
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: "curve",
|
|
opacity: 1,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: "hollow"
|
|
}
|
|
},
|
|
},
|
|
// 设备列表
|
|
bridgeCraneDevList: [],
|
|
// 司机运载列表
|
|
countWorkTimeByWorkerList: [],
|
|
countWorkTimeByWorkerInfo: {
|
|
timeActive: 1,
|
|
startDate: "",
|
|
endDate: "",
|
|
},
|
|
// 报警统计
|
|
countAlarmByCodeList: [],
|
|
countAlarmByCodeInfo: {
|
|
timeActive: 1,
|
|
startDate: "",
|
|
endDate: "",
|
|
},
|
|
// 今日桥机工种情况
|
|
bridgeCraneAlarmList: [],
|
|
// 工作循环数据信息
|
|
bridgeCraneNewestInfo: {},
|
|
// 获取设备监控
|
|
bridgeVideoList: [],
|
|
accessToken: "",
|
|
url: "",
|
|
videoInfo: {
|
|
id: "",
|
|
videoName: "",
|
|
},
|
|
// 监理人员
|
|
videoShow: false,
|
|
videoId: "",
|
|
projectVideoConfig: {},
|
|
videoFlag: true,
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
|
|
this.getBridgeCraneDevList();
|
|
},
|
|
mounted() {
|
|
var that = this
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|
uni.setStorageSync('systemInfo', res)
|
|
console.log(res)
|
|
}
|
|
})
|
|
},
|
|
onPageScroll(e) {
|
|
// e.scrollTop 表示当前页面滚动的距离
|
|
console.log('页面滚动距离：', e.scrollTop);
|
|
var that = this
|
|
// 创建查询请求
|
|
const query = uni.createSelectorQuery().in(this);
|
|
// 选择目标节点并获取其信息
|
|
query.select('.bridge-video').boundingClientRect(data => {
|
|
console.log(data.top); // 输出节点信息
|
|
if((that.mobileTopHeight + 44) < data.top) {
|
|
that.videoFlag = true;
|
|
} else {
|
|
that.videoFlag = false;
|
|
}
|
|
}).exec();
|
|
// 在这里编写你的滚动相关逻辑
|
|
},
|
|
methods: {
|
|
// 多选下拉 5 监控
|
|
onClickType(type) {
|
|
console.log(1111, this.videoInfo)
|
|
if (type == 5) {
|
|
this.videoId = this.videoInfo.id;
|
|
this.videoShow = true;
|
|
}
|
|
},
|
|
// 监理人员
|
|
onSupervisorClick(id, checked, label) {
|
|
this.videoId = id;
|
|
},
|
|
onSubmitType(type) {
|
|
if (type == 5) {
|
|
const find = this.bridgeVideoList.find(item => this.videoId == item.id);
|
|
if (find) {
|
|
this.videoInfo = find;
|
|
this.getPlayUrl();
|
|
}
|
|
this.videoShow = false;
|
|
}
|
|
},
|
|
onCancelClick(type) {
|
|
if (type == 5) {
|
|
this.videoId = this.videoInfo.id;
|
|
this.videoShow = false;
|
|
}
|
|
},
|
|
onBridgeCraneDevClick(row) {
|
|
this.bridgeInfo.bridgeId = row.devId;
|
|
this.bridgeInfo.bridgeCraneDevId = row.id;
|
|
this.bridgeInfo.bridgeName = row.devName;
|
|
this.currentChange(this.current);
|
|
this.bridgeInfo.collapseFlag = false;
|
|
},
|
|
// 列表查询桥机设备信息
|
|
getBridgeCraneDevList() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneDev/list',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
},
|
|
method: "GET",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.bridgeCraneDevList = [{
|
|
id: "",
|
|
devName: "全部"
|
|
},
|
|
...res.result,
|
|
];
|
|
}
|
|
}
|
|
})
|
|
},
|
|
currentChange(index) {
|
|
this.current = index;
|
|
if (this.current == 0) {
|
|
if (!this.bridgeInfo.bridgeId) {
|
|
this.getBridgeCraneAlarmCountAlarmToday();
|
|
} else {
|
|
this.getBridgeCraneDevQueryById();
|
|
this.getNewestDataBridgeCraneData();
|
|
}
|
|
} else if (this.current == 1) {
|
|
this.getBridgeCraneAlarmPage();
|
|
this.alarmByCodeClick({
|
|
id: this.countAlarmByCodeInfo.timeActive,
|
|
});
|
|
} else if (this.current == 2) {
|
|
this.getBridgeCraneDataCountWorkTimeByDate();
|
|
if (!this.bridgeInfo.bridgeId) {
|
|
this.workTimeByWorkerClick({
|
|
id: this.countWorkTimeByWorkerInfo.timeActive,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
// 通过id查询桥机设备信息
|
|
getBridgeCraneDevQueryById() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneDev/queryById',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
id: this.bridgeInfo.bridgeCraneDevId,
|
|
},
|
|
method: "get",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.bridgeVideoList = Array.isArray(res.result.videoList) ? res.result.videoList : [];
|
|
that.projectVideoConfig = res.result.projectVideoConfig;
|
|
if (that.bridgeVideoList.length > 0) {
|
|
const resultInfo = that.bridgeVideoList[0];
|
|
that.videoInfo = resultInfo;
|
|
that.getPlayUrl();
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getPlayUrl() {
|
|
var that = this
|
|
var json = {
|
|
itemId: this.videoInfo.videoItemId
|
|
}
|
|
if (this.projectVideoConfig.videoType == 3) {
|
|
json.streamType = this.videoInfo.defaultStreamType || 1;
|
|
json.type = 'rtsp' //rtsp或者hls
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/videoItem/getVideoItemInfo",
|
|
data: json,
|
|
method: "post",
|
|
success(res) {
|
|
switch (that.projectVideoConfig.videoType) {
|
|
case 1:
|
|
// that.url=res.result.videoInfo.hdFlvAddress
|
|
that.url = res.result.videoInfo
|
|
that.accessToken = res.result.accessToken
|
|
break;
|
|
default:
|
|
that.url = res.result.videoInfo.url
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 查询最新的一条桥机工作循环数据信息
|
|
getNewestDataBridgeCraneData() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneData/getNewestData',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
devId: this.bridgeInfo.bridgeId,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.bridgeCraneNewestInfo = res.result;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 分页列表查询桥机报警数据信息
|
|
getBridgeCraneAlarmPage() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneAlarm/page',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
alarmTime_begin: this.$dayjs().format("YYYY-MM-DD"),
|
|
alarmTime_end: this.$dayjs().format("YYYY-MM-DD"),
|
|
devId: this.bridgeInfo.bridgeId,
|
|
pageNo: 1,
|
|
pageSize: -1,
|
|
},
|
|
method: "get",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.bridgeCraneAlarmList = res.result.records;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
alarmByCodeClick(row) {
|
|
this.countAlarmByCodeInfo.timeActive = row.id;
|
|
if (row.id == 1) {
|
|
this.countAlarmByCodeInfo.startDate = this.$dayjs().format("YYYY-MM-DD");
|
|
this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
} else if (row.id == 2) {
|
|
this.countAlarmByCodeInfo.startDate = this.$dayjs().subtract(6, "day").format("YYYY-MM-DD");
|
|
this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
} else if (row.id == 3) {
|
|
this.countAlarmByCodeInfo.startDate = this.$dayjs().subtract(29, "day").format("YYYY-MM-DD");
|
|
this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
}
|
|
this.getBridgeCraneAlarmCountAlarmByCode();
|
|
},
|
|
// 报警统计
|
|
getBridgeCraneAlarmCountAlarmByCode() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneAlarm/countAlarmByCode',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
startDate: this.countAlarmByCodeInfo.startDate,
|
|
endDate: this.countAlarmByCodeInfo.endDate,
|
|
devId: this.bridgeInfo.bridgeId,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.countAlarmByCodeList = res.result.map(item => {
|
|
return {
|
|
...item,
|
|
name: item.monitorParamCodeName || item.monitorParamCode,
|
|
value: item.num,
|
|
}
|
|
});
|
|
that.opts2.color = that.colorList;
|
|
that.chartData2 = {
|
|
series: [{
|
|
data: that.countAlarmByCodeList,
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
})
|
|
},
|
|
workTimeByWorkerClick(row) {
|
|
this.countWorkTimeByWorkerInfo.timeActive = row.id;
|
|
if (row.id == 1) {
|
|
this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().format("YYYY-MM-DD");
|
|
this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
} else if (row.id == 2) {
|
|
this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().subtract(6, "day").format("YYYY-MM-DD");
|
|
this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
} else if (row.id == 3) {
|
|
this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().subtract(29, "day").format("YYYY-MM-DD");
|
|
this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
|
|
}
|
|
this.getBridgeCraneDataCountWorkTimeByWorker();
|
|
},
|
|
// 司机工效分析（司机运载排行榜）
|
|
getBridgeCraneDataCountWorkTimeByWorker() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneData/countWorkTimeByWorker',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
startDate: this.countWorkTimeByWorkerInfo.startDate,
|
|
endDate: this.countWorkTimeByWorkerInfo.endDate,
|
|
devId: this.bridgeInfo.bridgeId,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.countWorkTimeByWorkerList = res.result;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 近一段时间工作时长统计趋势图(每日)
|
|
getBridgeCraneDataCountWorkTimeByDate() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneData/countWorkTimeByDate',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
startDate: this.$dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
|
endDate: this.$dayjs().format("YYYY-MM-DD"),
|
|
devId: this.bridgeInfo.bridgeId,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.chartData1 = {
|
|
categories: res.result.map(item => that.$dayjs(item.date).format("MM-DD")),
|
|
series: [{
|
|
data: res.result.map(item => item.workTime || 0),
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 今日累计违章报警次数
|
|
getBridgeCraneAlarmCountAlarmToday() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/bridgeCraneData/countByToday',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.bridgeTodayList[0].countNum = res.result.liftNumToday || 0;
|
|
that.bridgeTodayList[0].countPer = res.result.liftNumTodayThanYesterdayPct || 0;
|
|
that.bridgeTodayList[1].countNum = res.result.alarmNumToday || 0;
|
|
that.bridgeTodayList[1].countPer = res.result.alarmNumTodayThanYesterdayPct || 0;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
showToast(title, type) {
|
|
this.$refs.uToast.show({
|
|
title: title,
|
|
type: type,
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
playUrlFilter() {
|
|
//
|
|
// let url = "";
|
|
// if(this.videoConfig && this.videoConfig.videoType == 1) {
|
|
// url = this.url
|
|
// } else if (this.url) {
|
|
// url = 'rtsp://42.180.188.17' + this.url.substring(20);
|
|
// }
|
|
console.log(88888, this.url);
|
|
return this.url
|
|
},
|
|
isYsy() {
|
|
console.info(this.projectVideoConfig?.videoType, '======')
|
|
return this.projectVideoConfig?.videoType == 1
|
|
},
|
|
ysyPlayUrl() {
|
|
// 萤石云播放地址
|
|
return `https://open.ys7.com/ezopen/h5/iframe?url=${this.playUrlFilter}&template=simple&autoplay=1&accessToken=${this.accessToken}`
|
|
},
|
|
alarmTypeCodeListUp() {
|
|
return (val) => {
|
|
const alarmTypeCodeList = [{
|
|
id: 1,
|
|
title: "制动打开",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "限位到",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "超载报警",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "超速报警",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "偏斜报警",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "上升",
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "下降",
|
|
},
|
|
{
|
|
id: 8,
|
|
title: "前移",
|
|
},
|
|
{
|
|
id: 9,
|
|
title: "后移",
|
|
},
|
|
{
|
|
id: 10,
|
|
title: "左移",
|
|
},
|
|
{
|
|
id: 11,
|
|
title: "右移",
|
|
},
|
|
{
|
|
id: 12,
|
|
title: "断开",
|
|
},
|
|
];
|
|
const find = alarmTypeCodeList.find((item) => item.id == val);
|
|
return find ? find.title : "--";
|
|
};
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.new-nodata_height {
|
|
min-height: 800rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.new-nodata_height2 {
|
|
min-height: 500rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.content-popup {
|
|
.content-popup_main {
|
|
padding: 26rpx 0;
|
|
|
|
>view {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #ffffff;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #1a1a1a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
>view:not(:first-child) {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.popup_main_active {
|
|
background-color: rgba(81, 129, 246, 0.1);
|
|
color: #5181f6;
|
|
}
|
|
}
|
|
|
|
uni-scroll-view {
|
|
margin: 26rpx 0;
|
|
}
|
|
|
|
.content-popup_header {
|
|
height: 86rpx;
|
|
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 30rpx;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.confrim-btn {
|
|
padding: 18rpx 26rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
|
|
>view {
|
|
width: 50%;
|
|
height: 76rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
>view:first-child {
|
|
background-color: rgba(81, 129, 246, 0.1);
|
|
border-radius: 6rpx 0rpx 0rpx 6rpx;
|
|
color: #5181f6;
|
|
}
|
|
|
|
>view:last-child {
|
|
background-color: #5181f6;
|
|
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 26rpx;
|
|
// height: calc(100vh - 88rpx - 88rpx - 118rpx - 26rpx);
|
|
// height: calc(82vh);
|
|
overflow: auto;
|
|
|
|
.box-main4 {
|
|
|
|
.content-box2 {
|
|
margin-top: 26rpx;
|
|
|
|
.box-main4_item {
|
|
margin-top: 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
|
|
>view:first-child {
|
|
// width: 40%;
|
|
width: 51%;
|
|
color: #808080;
|
|
}
|
|
|
|
>view:last-child {
|
|
width: 60%;
|
|
color: #4D4D4D;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box1 {
|
|
overflow: auto;
|
|
position: relative;
|
|
|
|
/* 确保视频能够随页面滚动 */
|
|
.bridge-video {
|
|
margin-top: 26rpx;
|
|
|
|
/deep/ .m3u8-player,
|
|
.player-m3u8 {
|
|
width: 100%;
|
|
height: 304rpx;
|
|
|
|
}
|
|
|
|
.videoBox {
|
|
width: 100%;
|
|
height: 304rpx;
|
|
}
|
|
|
|
.videoBox1 {
|
|
width: 100%;
|
|
height: 304rpx;
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
|
|
.box-main1_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>view {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
|
|
>view:last-child {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
padding: 26rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
.box-main3 {
|
|
.content-box2 {
|
|
margin-top: 26rpx;
|
|
|
|
.box-main2-box_charts {
|
|
margin-top: 26rpx;
|
|
height: 368rpx;
|
|
background: linear-gradient(180deg, #E9F1FC 0%, #FFFFFF 100%);
|
|
position: relative;
|
|
|
|
.box_charts-title {
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #B3B3B3;
|
|
position: absolute;
|
|
top: 26rpx;
|
|
left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box1 {
|
|
.box-main3_item2 {
|
|
background: linear-gradient(90deg, #F8D8DA 0%, #FFFFFF 100%);
|
|
|
|
>view:nth-child(3) {
|
|
width: 35%;
|
|
background: linear-gradient(90deg, #F5D5B1 0%, #C0631C 100%);
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
color: #D9BB99;
|
|
|
|
>view:first-child {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon9.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-main3_item1 {
|
|
background: linear-gradient(90deg, #D4E3F7 0%, #FFFFFF 100%);
|
|
|
|
>view:nth-child(3) {
|
|
width: 65%;
|
|
background: linear-gradient(90deg, #F9F7F8 0%, #949A9E 100%);
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
color: #C2C2C2;
|
|
|
|
>view:first-child {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon8.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-main3_item0 {
|
|
background: linear-gradient(90deg, #FAEDD8 0%, #FFFFFF 100%);
|
|
|
|
>view:nth-child(3) {
|
|
width: 100%;
|
|
background: linear-gradient(90deg, #FFD700 0%, #F4AF4D 100%);
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
color: #FFD700;
|
|
|
|
>view:first-child {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon7.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-main3_item {
|
|
width: 100%;
|
|
padding: 20rpx 26rpx;
|
|
|
|
border-radius: 16rpx;
|
|
margin-top: 26rpx;
|
|
|
|
>view:nth-child(3) {
|
|
|
|
height: 10rpx;
|
|
border-radius: 94rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 14rpx;
|
|
font-weight: 800;
|
|
font-size: 26rpx;
|
|
|
|
>view:first-child {
|
|
width: 36rpx;
|
|
height: 22rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
>view:nth-child(1) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #1A1A1A;
|
|
|
|
>view:last-child {
|
|
font-weight: 800;
|
|
font-size: 26rpx;
|
|
color: #FFD700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-main2-time {
|
|
display: flex;
|
|
margin-top: 26rpx;
|
|
|
|
>view {
|
|
width: 144rpx;
|
|
height: 60rpx;
|
|
background-color: #EFF3F7;
|
|
border-radius: 50rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
.time-active {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
padding: 26rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
.box-main2 {
|
|
.content-box2 {
|
|
margin-top: 26rpx;
|
|
|
|
.content-box2_main {
|
|
padding: 26rpx;
|
|
background: #EFF3F7;
|
|
border-radius: 8rpx;
|
|
margin-top: 26rpx;
|
|
|
|
.box2_main_bottom {
|
|
margin-top: 26rpx;
|
|
padding: 26rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
|
|
>view:first-child {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon6.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
|
|
.box2_main_top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 500;
|
|
|
|
>view:last-child {
|
|
font-size: 26rpx;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>view:first-child {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon5.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
>view:last-child {
|
|
font-size: 30rpx;
|
|
color: #498CEC;
|
|
margin-left: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box1 {
|
|
.box-main2-time {
|
|
display: flex;
|
|
margin-top: 26rpx;
|
|
|
|
>view {
|
|
width: 144rpx;
|
|
height: 60rpx;
|
|
background-color: #EFF3F7;
|
|
border-radius: 50rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
.time-active {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.box-main2-box_charts {
|
|
height: 348rpx;
|
|
}
|
|
|
|
.box-main2-box_roll {
|
|
overflow-y: scroll;
|
|
margin-top: 26rpx;
|
|
max-height: 408rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.box-main2-box {
|
|
width: 50%;
|
|
font-size: 28rpx;
|
|
color: #1A1A1A;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.bg_color {
|
|
width: 32rpx;
|
|
height: 20rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
>view:nth-child(n + 3) {
|
|
margin-top: 26rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
padding: 26rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
.box-main1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 26rpx;
|
|
|
|
.main1-item {
|
|
margin-top: 26rpx;
|
|
width: 100%;
|
|
// height: 244rpx;
|
|
border-radius: 8rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-bg1.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.main1-item-bottom {
|
|
padding: 24rpx 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
>view:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>view:first-child {
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.bottom-image_up {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-up.png');
|
|
}
|
|
|
|
.bottom-image_down {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-down.png');
|
|
}
|
|
|
|
>view:last-child {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 26rpx;
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>view:last-child {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #4D4D4D;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
>view:first-child {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon3.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main1-item-top {
|
|
padding: 34rpx 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-image0 {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon10.png');
|
|
}
|
|
|
|
.item-image1 {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon4.png');
|
|
}
|
|
|
|
>view:first-child {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item-top_right {
|
|
margin-left: 36rpx;
|
|
flex: 1;
|
|
|
|
.schedule {
|
|
width: 100%;
|
|
height: 20rpx;
|
|
background: #EFF3F7;
|
|
border-radius: 94rpx;
|
|
margin-top: 34rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>view {
|
|
width: 50%;
|
|
height: 8rpx;
|
|
background: #498CEC;
|
|
border-radius: 94rpx;
|
|
position: relative;
|
|
}
|
|
|
|
>view::after {
|
|
content: "";
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: rgba(255, 136, 0, 0.3);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
>view::before {
|
|
content: "";
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #FF8800;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: -6rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
>view:first-child {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #498CEC;
|
|
}
|
|
|
|
>view:last-child {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-main1_header {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-collapse-item {
|
|
position: relative;
|
|
}
|
|
|
|
/deep/ .u-collapse-body {
|
|
width: calc(100% - 52rpx);
|
|
height: initial !important;
|
|
position: absolute;
|
|
top: 134rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 11;
|
|
}
|
|
|
|
.collapse-content {
|
|
width: 100%;
|
|
padding: 16rpx 26rpx;
|
|
max-height: 472rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
border: 4rpx solid #DDEEFD;
|
|
overflow-y: auto;
|
|
|
|
>view:not(:last-child) {
|
|
border-bottom: 2rpx solid #DDEEFD;
|
|
}
|
|
|
|
>view {
|
|
margin-top: 16rpx;
|
|
padding: 10rpx 40rpx 26rpx;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.view-active {
|
|
background: #DDEEFD;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-collapse-head {
|
|
padding: 0;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.collapse-header {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #FFFFFF;
|
|
border: 2rpx solid #DDEEFD;
|
|
padding: 36rpx 26rpx;
|
|
|
|
>view {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
|
|
>view:last-child {
|
|
margin-left: 26rpx;
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
color: #1A1A1A;
|
|
|
|
>view:first-child {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon1.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
>view:last-child {
|
|
color: #4D4D4D;
|
|
|
|
.arrow-bottom {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url('@/static/bridgeCraneMonitor/index-icon2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addIssue {
|
|
min-height: 100vh;
|
|
background-color: #F2F3F7;
|
|
// max-height: 100vh;
|
|
// overflow: hidden;
|
|
}
|
|
|
|
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
/deep/ .headerBox {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.headerName {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.new-nodata {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>view {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
background-image: url('@/static/staffAttendance/nodata.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
>text {
|
|
font-size: 22rpx;
|
|
color: #808080;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
</style> |