提交diamagnetic
姜玉琦
parent
d9a0c5b99e
commit
261bfd443e
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div :style="{ 'height': height + 'px' }" ref="chart">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
this.echart(chChart,this.data)
|
||||
},
|
||||
echart(chChart,chartData){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var value = []
|
||||
var text = []
|
||||
var total = 0
|
||||
var bgd = []
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgd.push(100)
|
||||
total += chartData[i].value
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-10%",
|
||||
top: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: text,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "16",
|
||||
},
|
||||
formatter: function(params,i){
|
||||
var text = "{a|" + value[i] + "}{a| "+ prop[i]+ "%}";
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '16px',
|
||||
color: "#cbdaff",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: prop,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 8,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
barGap: "-100%",
|
||||
data: bgd,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
this.getChartData(this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<button type="button" :class="nav == 305 ? 'active' : ''" class="sub-btn" @click="doNav(305)">高支模监测</button>
|
||||
<button type="button" :class="nav == 306 ? 'active' : ''" class="sub-btn" @click="doNav(306)">配电箱监测</button>
|
||||
<button type="button" :class="nav == 307 ? 'active' : ''" class="sub-btn" @click="doNav(307)">爬架监测</button>
|
||||
<button type="button" :class="nav == 308 ? 'active' : ''" class="sub-btn" @click="doNav(308)">施工电梯监测</button>
|
||||
<button type="button" :class="nav == 308 ? 'active' : ''" class="sub-btn" @click="doNav(308)">升降机监测</button>
|
||||
</div>
|
||||
<div class="header-btn-list-padding menu-row1" style="text-align: left;">
|
||||
<button type="button" :class="nav == 309 ? 'active' : ''" class="sub-btn" @click="doNav(309)">视频监控</button>
|
||||
|
|
@ -45,7 +45,6 @@
|
|||
<button type="button" :class="nav == 405 ? 'active' : ''" class="sub-btn" @click="doNav(405)">标准化管理</button>
|
||||
<button type="button" :class="nav == 406 ? 'active' : ''" class="sub-btn" @click="doNav(406)">混泥土监测</button>
|
||||
<button type="button" :class="nav == 407 ? 'active' : ''" class="sub-btn" @click="doNav(407)">爬架监测</button>
|
||||
<button type="button" :class="nav == 408 ? 'active' : ''" class="sub-btn" @click="doNav(408)">施工电梯监测</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,7 +55,7 @@
|
|||
<div class="header-btn-list-arrow"></div>
|
||||
<div class="header-btn-list-item" style>
|
||||
<div class="header-btn-list-padding menu-row1" style="text-align: left;">
|
||||
<button type="button" :class="nav == 5 ? 'active' : ''" class="sub-btn" @click="doNav(5)">进度管理</button>
|
||||
<button type="button" :class="nav == 502 ? 'active' : ''" class="sub-btn" @click="doNav(502)">进度管理</button>
|
||||
<button type="button" :class="nav == 501 ? 'active' : ''" class="sub-btn" @click="doNav(501)">延时摄影</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,6 +197,9 @@ export default {
|
|||
case 306:
|
||||
this.$router.push('/powerIot')
|
||||
break
|
||||
case 308:
|
||||
this.$router.push('/dumbwaiter')
|
||||
break
|
||||
case 310:
|
||||
this.$router.push('/aiWarning')
|
||||
break
|
||||
|
|
@ -213,6 +215,9 @@ export default {
|
|||
case 501:
|
||||
this.$router.push('/photography')
|
||||
break
|
||||
case 502:
|
||||
this.$router.push('/planSchedule')
|
||||
break
|
||||
}
|
||||
},
|
||||
doLogout() {
|
||||
|
|
|
|||
|
|
@ -82,6 +82,15 @@ const routes = [
|
|||
/* webpackChunkName: "safetyCheck" */ "../views/safety/powerIot.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/dumbwaiter",
|
||||
name: "dumbwaiter",
|
||||
meta: { nav: 308 },
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "safetyCheck" */ "../views/safety/dumbwaiter.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/aiWarning",
|
||||
name: "aiWarning",
|
||||
|
|
@ -100,6 +109,15 @@ const routes = [
|
|||
/* webpackChunkName: "safetyCheck" */ "../views/schedule/photography.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/planSchedule",
|
||||
name: "planSchedule",
|
||||
meta: { nav: 502 },
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "safetyCheck" */ "../views/schedule/planSchedule.vue"
|
||||
),
|
||||
},
|
||||
];
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import moduleOne33 from "../components/module/module-one-3-3.vue";
|
|||
import staffSurveyChart from "../components/staffSurveyChart.vue";
|
||||
import trendChartLine from "../components/trend-chart-line.vue";
|
||||
import trendLineChart from "../components/trend-line-chart.vue";
|
||||
import certificateBarChart from "../components/certificate-bar-chart.vue";
|
||||
import peopleNumber from "@/components/people-number.vue";
|
||||
import dictTag from "@/components/DictTag/index.vue";
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
|
|
@ -44,6 +45,7 @@ Vue.component("people-number", peopleNumber);
|
|||
Vue.component("staff-survey-chart", staffSurveyChart);
|
||||
Vue.component("trend-chart-line", trendChartLine);
|
||||
Vue.component("trend-line-chart", trendLineChart);
|
||||
Vue.component("certificate-bar-chart", certificateBarChart);
|
||||
Vue.component("my-chart", MyChart);
|
||||
Vue.component("dict-tag", dictTag);
|
||||
Vue.component("MyDialog", MyDialog);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,721 @@
|
|||
<template>
|
||||
<div class="project-dumbwaiter main-page">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-3-1 label="设备概况">
|
||||
<div class="czz-number">
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<img src="images/circle_icon_25.png" />
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>升降机总数</p>
|
||||
<div class="survey_content_value">
|
||||
<span v-cloak v-html="deviceToal"></span> 台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-green">
|
||||
<img src="images/circle_icon_9.png" />
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>监控总数</p>
|
||||
<div class="survey_content_value survey_content_value_color_green">
|
||||
<span v-cloak v-html="deviceOnlineCount"></span> 台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<certificate-bar-chart
|
||||
:data="certificateData"
|
||||
:height="100"
|
||||
></certificate-bar-chart>
|
||||
|
||||
<div class="rank-chart" style="height: calc(100% - 224px)">
|
||||
<div class="rank-chart-title">监控列表</div>
|
||||
<div class="list-max" style="height: calc(100% - 63px)">
|
||||
<div
|
||||
class="list-min"
|
||||
id="listMin"
|
||||
@mouseout="listMinMouseout"
|
||||
@mouseover="listMinMouseover"
|
||||
>
|
||||
<div
|
||||
class="list-for"
|
||||
v-for="(item, i) in listData"
|
||||
@click="onTowerCraneList(i)"
|
||||
>
|
||||
<div :class="index == i ? 'list-con active' : 'list-con'">
|
||||
<div class="list-top">
|
||||
<div class="list-img">
|
||||
<img src="images/list_img_tj.png" />
|
||||
</div>
|
||||
<div class="list-info">
|
||||
<div class="list-info-name">
|
||||
设备名称：<span>{{ item.deviceName }}</span>
|
||||
</div>
|
||||
<div class="list-info-name">
|
||||
设备状态：
|
||||
<span class="list-info-state" v-if="item.deviceState != 0"
|
||||
>离线</span
|
||||
>
|
||||
<span class="list-info-state active" v-if="item.deviceState == 0"
|
||||
>在线</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<div class="list-details">
|
||||
司机：<span v-cloak>{{ item.driverName }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="list-details">
|
||||
电话：<span v-cloak>{{ item.driverPhone }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="list-details">
|
||||
安全员：<span v-cloak>{{ item.safetyOfficerName }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="list-details">
|
||||
电话：<span v-cloak>{{ item.safetyOfficerPhone }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="list-time">
|
||||
最后一次启用时间：<span v-cloak>{{ item.lastEnabledTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="h100">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="safe-height">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">运行次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top0"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top1"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">超载次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top2"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">超载率（%）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top4"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top5"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">违章次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top6"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top7"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="safe-tower-crane-max">
|
||||
<div
|
||||
class="safe-tower-crane-min"
|
||||
@mouseout="listMinMouseout"
|
||||
@mouseover="listMinMouseover"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div class="safe-tower-left" @click="safeTowerLeft"></div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="safe-tower-content-max">
|
||||
<transition :name="direction">
|
||||
<component :is="comName" :value="dumbwaiterValue"></component>
|
||||
</transition>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="safe-tower-right" @click="safeTowerRight"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="analyse-max">
|
||||
<div class="analyse-min" style="height: auto">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">报警分析</div>
|
||||
<div class="analyse-equipment">升降机监测</div>
|
||||
</div>
|
||||
<div style="padding: 30px 0">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="time-study-value">
|
||||
<p>今日报警数</p>
|
||||
<div class="analyse-num">
|
||||
<span v-cloak v-html="dayWarnCount"></span> 条
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-study-value">
|
||||
<p>本周报警数</p>
|
||||
<div class="analyse-num">
|
||||
<span v-cloak v-html="weekWarnCount"></span> 条
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="survey-oil-title">
|
||||
<div class="survey-oil-hr"></div>
|
||||
<div class="survey-oil-text">报警类型</div>
|
||||
</div>
|
||||
<div
|
||||
class="analyse-number-max"
|
||||
id="afootOverflowType"
|
||||
@mouseout="listMinMouseoutType"
|
||||
@mouseover="listMinMouseoverType"
|
||||
>
|
||||
<div
|
||||
class="glr-login-number-max analyse-num-max"
|
||||
v-for="item in warningList"
|
||||
>
|
||||
<div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
|
||||
<div class="glr-login-number analyse-login-numbe">
|
||||
<div v-cloak>
|
||||
<img src="images/text_red_spot.png" />{{ item.warnType }}
|
||||
</div>
|
||||
<div class="glr-rate-value glr-rate-red-value">
|
||||
<span v-cloak>{{ item.warnCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analyse-map">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">正在发生</div>
|
||||
</div>
|
||||
<div class="afoot-content safe-afoot-content">
|
||||
<div
|
||||
class="afoot-overflow safe-afoot-overflow"
|
||||
id="afootOverflow"
|
||||
@mouseout="warningListMinMouseout"
|
||||
@mouseover="warningListMinMouseover"
|
||||
>
|
||||
<div v-if="warningData.length == 0" class="not-data">暂无预警数据</div>
|
||||
<div
|
||||
v-if="warningData.length > 0"
|
||||
class="afoot-con-for"
|
||||
style="height: 180px"
|
||||
v-for="item in warningData"
|
||||
>
|
||||
<div class="afoot-machinery-nam safe-afoot-machinery-nam" v-cloak>
|
||||
{{ item.warn_context }}
|
||||
</div>
|
||||
<div class="afoot-machinery-info">
|
||||
<div class="afoot-machinery-img">
|
||||
<img :src="item.images" v-if="item.images" />
|
||||
</div>
|
||||
<div class="afoot-machinery-data">
|
||||
<div class="afoot-machinery-state" v-cloak>
|
||||
预警值：{{ item.warn_value }}
|
||||
</div>
|
||||
<div class="afoot-machinery-time" v-cloak>
|
||||
{{ item.warn_time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="padding: 0 30px">
|
||||
<div class="analyse-title analyse_title_blue" style="width: 450px">
|
||||
<div class="analyse-text">运行数据</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_5.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>高度</div>
|
||||
<p><span v-cloak v-html="footInfo.foot0"></span> m</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_6.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>楼层</div>
|
||||
<p><span v-cloak v-html="footInfo.foot1"></span> 层</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_7.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>当前人数</div>
|
||||
<p><span v-cloak v-html="footInfo.foot2"></span> 人</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_8.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>当前载重</div>
|
||||
<p><span v-cloak v-html="footInfo.foot3"></span> t</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_9.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>倾角1</div>
|
||||
<p><span v-cloak v-html="footInfo.foot4"></span> °</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_9.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>倾角2</div>
|
||||
<p><span v-cloak v-html="footInfo.foot5"></span> °</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_10.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>风速</div>
|
||||
<p><span v-cloak v-html="footInfo.foot6"></span> m/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_11.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>速度</div>
|
||||
<p><span v-cloak v-html="footInfo.foot7"></span> m/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_12.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>速度方向</div>
|
||||
<p><span v-cloak v-html="footInfo.foot8"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_2.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>前门状态</div>
|
||||
<p>
|
||||
<span
|
||||
:class="footInfo.foot9 == '打开' ? 'open' : 'close'"
|
||||
v-cloak
|
||||
v-html="footInfo.foot9"
|
||||
></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_13.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>后门状态</div>
|
||||
<p>
|
||||
<span
|
||||
:class="footInfo.foot10 == '打开' ? 'open' : 'close'"
|
||||
v-cloak
|
||||
v-html="footInfo.foot10"
|
||||
></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash.debounce";
|
||||
import "@/components/tower-crane-value-1";
|
||||
import "@/components/tower-crane-value-2";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceToal: 4,
|
||||
deviceOnlineCount: 10,
|
||||
certificateData: [],
|
||||
listData: [],
|
||||
interval: undefined, //定时器
|
||||
//升降机图当前位置
|
||||
index: 0,
|
||||
//升降机当前显示数据
|
||||
dumbwaiterValue: {},
|
||||
comName: "dumbwaiter-1",
|
||||
direction: "right",
|
||||
deviceId: 0,
|
||||
topInfo: {
|
||||
top0: 0,
|
||||
top1: 0,
|
||||
top2: 4250,
|
||||
top3: 68730,
|
||||
top4: 0,
|
||||
top5: 0,
|
||||
top6: 17000,
|
||||
top7: 274920,
|
||||
},
|
||||
footInfo: {
|
||||
foot0: 10,
|
||||
foot1: 10,
|
||||
foot2: 10,
|
||||
foot3: 10,
|
||||
foot4: 10,
|
||||
foot5: 10,
|
||||
foot6: 10,
|
||||
foot7: 10,
|
||||
foot8: 10,
|
||||
foot9: "",
|
||||
foot10: "",
|
||||
},
|
||||
warningData: [],
|
||||
dayWarnCount: 22,
|
||||
weekWarnCount: 999,
|
||||
//报警分析
|
||||
warningTypeInterval: undefined,
|
||||
warningTypeIndex: 0,
|
||||
warningList: [],
|
||||
warningInterval: undefined,
|
||||
forIndex: 0,
|
||||
warningData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("ChangeNav", 308);
|
||||
this.$bus.$on("projectChange", (prj) => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
});
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
init() {
|
||||
this.certificateData = JSON.parse(
|
||||
'[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]'
|
||||
);
|
||||
this.listData = JSON.parse(
|
||||
'[{"createUserid":null,"ratedSpeed":"1.8","delFlag":"0","deviceId":"3223081738","deviceName":"2#-2","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-09 15:35:42","safetyOfficerName":"马宁","maxHeight":120.5,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"张巧团","driverPhone":"17324808902","id":5,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081741","deviceName":"3223081741","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:32:49","safetyOfficerName":"马宁","maxHeight":160.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":6,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081748","deviceName":"3223081748","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:46:36","safetyOfficerName":"马宁","maxHeight":187.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":7,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081722","deviceName":"3#-1","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-10 09:48:34","safetyOfficerName":"马宁","maxHeight":122.9,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"高军平","driverPhone":"15139573902","id":8,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081749","deviceName":"3#-2","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-09 13:47:07","safetyOfficerName":"马宁","maxHeight":124.8,"createTime":"2023-09-12 18:25:13","cageSize":null,"ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"郭伟娟","driverPhone":"15239586568","id":9,"deviceState":"0","projectId":"98"}]'
|
||||
);
|
||||
this.warningList = [
|
||||
{ warnType: "报警类型A", warnCount: 4 },
|
||||
{ warnType: "报警类型B", warnCount: 4 },
|
||||
{ warnType: "报警类型C", warnCount: 4 },
|
||||
{ warnType: "报警类型D", warnCount: 4 },
|
||||
{ warnType: "报警类型E", warnCount: 4 },
|
||||
{ warnType: "报警类型F", warnCount: 4 },
|
||||
{ warnType: "报警类型G", warnCount: 4 },
|
||||
{ warnType: "报警类型H", warnCount: 4 },
|
||||
];
|
||||
this.warningData = [
|
||||
{
|
||||
warn_value: "预警A",
|
||||
images: ["images/831.jpg"],
|
||||
warn_context: "告警内容",
|
||||
warn_time: "24-02-02 14:00",
|
||||
project_abbreviation: "xxx项目",
|
||||
},
|
||||
{
|
||||
warn_value: "预警A",
|
||||
images: ["images/831.jpg"],
|
||||
warn_context: "告警内容",
|
||||
time: "24-02-02 14:00",
|
||||
project_abbreviation: "xxx项目",
|
||||
},
|
||||
{
|
||||
warn_value: "预警A",
|
||||
images: ["images/831.jpg"],
|
||||
warn_context: "告警内容",
|
||||
time: "24-02-02 14:00",
|
||||
project_abbreviation: "xxx项目",
|
||||
},
|
||||
];
|
||||
//list 定时器
|
||||
if (this.listData.length > 0) {
|
||||
this.interval = setInterval(this.automaticRoll, 10000);
|
||||
}
|
||||
//预警类型 定时器
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
//正在发生 定时器
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
|
||||
this.index = 0;
|
||||
this.deviceId = this.listData[0].id;
|
||||
this.updateDumbwaiterValue();
|
||||
},
|
||||
onTowerCraneList(n) {
|
||||
this.index = n;
|
||||
this.deviceId = this.listData[n].id;
|
||||
|
||||
//切换动画
|
||||
this.direction = "right";
|
||||
if (this.comName == "dumbwaiter-1") {
|
||||
this.comName = "dumbwaiter-2";
|
||||
} else {
|
||||
this.comName = "dumbwaiter-1";
|
||||
}
|
||||
},
|
||||
//监控列表
|
||||
listMinMouseover() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
listMinMouseout() {
|
||||
this.interval = setInterval(this.automaticRoll, 10000);
|
||||
},
|
||||
automaticRoll() {
|
||||
//切换动画
|
||||
if (this.direction == "right") {
|
||||
if (this.index == this.listData.length - 1) {
|
||||
this.index = 0;
|
||||
} else {
|
||||
this.index = this.index + 1;
|
||||
}
|
||||
} else {
|
||||
if (this.index == 0) {
|
||||
this.index = this.listData.length - 1;
|
||||
} else {
|
||||
this.index = this.index - 1;
|
||||
}
|
||||
}
|
||||
if (this.comName == "dumbwaiter-1") {
|
||||
this.comName = "dumbwaiter-2";
|
||||
} else {
|
||||
this.comName = "dumbwaiter-1";
|
||||
}
|
||||
var height = $(".list-for").innerHeight();
|
||||
$("#listMin").animate({ scrollTop: height * this.index + "px" });
|
||||
this.deviceId = this.listData[this.index].deviceId;
|
||||
this.updateDumbwaiterValue();
|
||||
},
|
||||
updateDumbwaiterValue() {
|
||||
this.dumbwaiterValue = {
|
||||
name: this.listData[this.index].deviceName,
|
||||
cageSize: this.listData[this.index].cageSize,
|
||||
loadCapacity: this.listData[this.index].ratedLoad,
|
||||
numberPeople: this.listData[this.index].ratedPeopleCount,
|
||||
liftingHeight: this.listData[this.index].ratedPeopleCount,
|
||||
runningSpeed: this.listData[this.index].ratedSpeed,
|
||||
enterTime: this.listData[this.index].entryTime,
|
||||
};
|
||||
},
|
||||
safeTowerLeft() {
|
||||
this.direction = "left";
|
||||
this.automaticRoll();
|
||||
},
|
||||
safeTowerRight() {
|
||||
//切换动画
|
||||
this.direction = "right";
|
||||
this.automaticRoll();
|
||||
},
|
||||
//报警类型
|
||||
automaticRollType() {
|
||||
var height = $(".glr-login-number-max").innerHeight();
|
||||
if (
|
||||
$("#afootOverflowType").scrollTop() ==
|
||||
height * this.warningList.length - $("#afootOverflowType").innerHeight()
|
||||
) {
|
||||
this.warningTypeIndex = 0;
|
||||
} else {
|
||||
this.warningTypeIndex = this.warningTypeIndex + 1;
|
||||
}
|
||||
$("#afootOverflowType").animate({
|
||||
scrollTop: height * this.warningTypeIndex + "px",
|
||||
});
|
||||
},
|
||||
listMinMouseoverType() {
|
||||
clearInterval(this.warningTypeInterval);
|
||||
},
|
||||
listMinMouseoutType() {
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
},
|
||||
|
||||
//正在发生
|
||||
safeAutomaticRoll() {
|
||||
var height = $(".safe-afoot-overflow").innerHeight();
|
||||
if (this.forIndex == this.warningData.length) {
|
||||
this.forIndex = 0;
|
||||
} else {
|
||||
this.forIndex = this.forIndex + 1;
|
||||
}
|
||||
$("#afootOverflow").animate({ scrollTop: height * this.forIndex + "px" });
|
||||
},
|
||||
warningListMinMouseover() {
|
||||
clearInterval(this.warningInterval);
|
||||
},
|
||||
warningListMinMouseout() {
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.project-dumbwaiter {
|
||||
.left-enter {
|
||||
left: -100%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.left-leave-to {
|
||||
left: 0;
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-enter-active,
|
||||
.left-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.right-enter {
|
||||
left: 100%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.right-leave-to {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right-enter-active,
|
||||
.right-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<div class="project-photography main-page">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-1-1 label="项目全景">
|
||||
<div class="photography-list">
|
||||
<template v-if="photographyList && photographyList.length > 0">
|
||||
<el-carousel height="100%" :autoplay="false">
|
||||
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
|
||||
<video controls="controls" class="photography-video" loop="loop">
|
||||
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
|
||||
您的浏览器不支持Video标签。
|
||||
</video>
|
||||
<div class="photography-list-title">{{ item.videoDate }}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="photography-list-nodata">
|
||||
<div>
|
||||
<i class="video-play">
|
||||
<svg
|
||||
class="icon"
|
||||
style="
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4551"
|
||||
>
|
||||
<path
|
||||
d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
|
||||
fill="#3D3D3D"
|
||||
p-id="4552"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
<div class="photography-list-no-title">暂无数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="进行中的计划">
|
||||
<div
|
||||
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
|
||||
>
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<svg-icon icon-class="notesearch"></svg-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="equipment-list-data equipment-list-data_div_top">
|
||||
<span>测试计划名称1</span>
|
||||
</div>
|
||||
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||||
<span class="sp-data">{{ it.value || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
|
||||
>
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<svg-icon icon-class="notesearch"></svg-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="equipment-list-data equipment-list-data_div_top">
|
||||
<span>测试计划名称2</span>
|
||||
</div>
|
||||
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||||
<span class="sp-data">{{ it.value || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="no-title">
|
||||
<module-one-3-3 :notitle="true">
|
||||
<template v-if="info">
|
||||
<div class="right-title">
|
||||
<span class="sp-title">{{ info.videoDate }}</span>
|
||||
</div>
|
||||
<video style="width: 98%" controls>
|
||||
<source :src="info.videoUrl" type="video/mp4" />
|
||||
您的浏览器不支持Video标签。
|
||||
</video>
|
||||
</template>
|
||||
<div v-else style="text-align: center" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px" />
|
||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||
</div>
|
||||
</module-one-3-3>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
photographyList: [],
|
||||
info: null,
|
||||
activeNames: [],
|
||||
infoList: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.photography = this;
|
||||
this.$store.dispatch("ChangeNav", 502);
|
||||
this.$bus.$on("projectChange", (prj) => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
});
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
}
|
||||
this.initPhotographyList();
|
||||
},
|
||||
initPhotographyList() {
|
||||
this.$api.detail.photographyList(this.selProject.id).then((d) => {
|
||||
this.photographyList = d.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.project-photography {
|
||||
.div-no-data {
|
||||
text-align: center;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.no-title {
|
||||
.right-title {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sp-title {
|
||||
display: inline-block;
|
||||
line-height: 72px;
|
||||
padding: 0px 40px;
|
||||
font-size: 40px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/images/bgphoto.png");
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: calc(100% - 201px);
|
||||
}
|
||||
/deep/ .screen-one-3-3 {
|
||||
background-image: none;
|
||||
border: solid 1px #409eff5c;
|
||||
.module-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-list {
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
.screen-one-3-1 {
|
||||
height: calc(100% - 20px) !important;
|
||||
.left-list {
|
||||
padding: 10px 10px 10px 0px;
|
||||
.video-item {
|
||||
line-height: 40px;
|
||||
border: solid 1px #1e8fff83;
|
||||
padding: 0px 20px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.header-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
&.is-active {
|
||||
background-color: #089fff;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #089fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #08a0ff95;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .screen-one-3-1 {
|
||||
.el-collapse {
|
||||
border: none;
|
||||
margin-top: 4px;
|
||||
|
||||
.el-collapse-item {
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #097fca2e;
|
||||
color: #089fff;
|
||||
border-bottom: dotted 1px #089fff77;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.img-item {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.video-item {
|
||||
position: relative;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-bottom: solid 1px #089fff77;
|
||||
.div-date {
|
||||
width: calc(90% - 24px);
|
||||
text-align: left;
|
||||
bottom: 0px;
|
||||
color: #089fff;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue