1511 lines
54 KiB
Vue
1511 lines
54 KiB
Vue
<template>
|
||
<div class="project-tower-crane main-page">
|
||
<el-col :span="6" class="h100">
|
||
<module-one-3-1 label="设备概况" class="h100">
|
||
<el-row class="tower-total">
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min quality-target-index-min">
|
||
<div class="czz-number-img czz-number-img-blue">
|
||
<svg-icon icon-class="tower"></svg-icon>
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p class="p-label">塔机总数</p>
|
||
<div>
|
||
<span class="span-num led-number">{{ towerTotalNum }}</span><span
|
||
class="span-unit">台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min quality-target-index-min">
|
||
<div class="czz-number-img czz-number-img-green">
|
||
<svg-icon icon-class="monitor"></svg-icon>
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p class="p-label">监控总数</p>
|
||
<div>
|
||
<span class="span-num led-number">{{ towerTotalNum }}</span><span
|
||
class="span-unit">台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row style="height: 160px; overflow: hidden" :key="chart1Key">
|
||
<staff-survey-chart :height="chart1Height" :unit="'个'" :data="towerConfigView"
|
||
width="100%"></staff-survey-chart>
|
||
</el-row>
|
||
|
||
<el-row class="left-data-list">
|
||
<div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
|
||
<div :class="'active'">监控列表</div>
|
||
</div>
|
||
<div class="drv-list scroll" id="listMin">
|
||
<div v-for="(it, idx) in towerConfigList" :key="idx" class="drv-item list-for"
|
||
:class="index == idx ? 'active' : ''" @click="onTowerCraneList(idx)">
|
||
<div class="item-content">
|
||
<div class="dev-row1">
|
||
<div class="survey_content">
|
||
<div class="survey_content_img labour-education_bgd">
|
||
<svg-icon icon-class="tower"></svg-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dev-row1-col2">
|
||
<div class="data-row">
|
||
<span class="sp-label">设备名称:</span>
|
||
<span class="sp-value">{{ it.deviceName }}</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="sp-label">总包单位:</span>
|
||
<span class="sp-value">{{ it.deptName }}</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="sp-label">设备状态:</span>
|
||
<span class="sp-value"
|
||
:class="it.online == 2 ? 'is-offline' : 'is-online'">{{
|
||
it.online == 2 ? "离线" : "在线"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dev-row2">
|
||
<div class="dev-row2-col">
|
||
<div class="data-row">
|
||
<span class="sp-label">司机:</span>
|
||
<span class="sp-value">{{ it.driName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="dev-row2-col">
|
||
<div class="data-row">
|
||
<span class="sp-label">电话:</span>
|
||
<span class="sp-value sp-tel">{{ it.driPhone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dev-row2">
|
||
<div class="dev-row2-col">
|
||
<div class="data-row">
|
||
<span class="sp-label">安全员:</span>
|
||
<span class="sp-value">{{ it.safName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="dev-row2-col">
|
||
<div class="data-row">
|
||
<span class="sp-label">电话:</span>
|
||
<span class="sp-value sp-tel">{{ it.safPhone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
</module-one-3-1>
|
||
</el-col>
|
||
<el-col :span="18" class="h100">
|
||
|
||
<el-row class="main-content">
|
||
<el-col :span="16" class="h100">
|
||
<el-row class="total-data">
|
||
<el-col :span="6">
|
||
<div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
|
||
<div :class="'active'">吊重次数({{ towerConfigStat.a0 }}次)</div>
|
||
<div class="title-bg"></div>
|
||
</div>
|
||
<div class="data-row2">
|
||
<div class="data-row2-col">
|
||
<div class="s-text">本月</div>
|
||
<div class="s-number">{{ towerConfigStat.a1 }}</div>
|
||
</div>
|
||
<div class="data-row2-col">
|
||
<div class="s-text">累计</div>
|
||
<div class="s-number">{{ towerConfigStat.a0 }}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
|
||
<div :class="'active'">超载次数({{ towerConfigStat.b0 }}次)</div>
|
||
<div class="title-bg"></div>
|
||
</div>
|
||
<div class="data-row2">
|
||
<div class="data-row2-col">
|
||
<div class="s-text">本月</div>
|
||
<div class="s-number">{{ towerConfigStat.b1 }}</div>
|
||
</div>
|
||
<div class="data-row2-col">
|
||
<div class="s-text">累计</div>
|
||
<div class="s-number">{{ towerConfigStat.b0 }}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
|
||
<div :class="'active'">
|
||
超载率({{ getRoudValue(towerConfigStat.b0, towerConfigStat.a0) }})
|
||
</div>
|
||
<div class="title-bg"></div>
|
||
</div>
|
||
<div class="data-row2">
|
||
<div class="data-row2-col">
|
||
<div class="s-text">本月</div>
|
||
<div class="s-number">
|
||
{{ getRoudValue(towerConfigStat.b1, towerConfigStat.a1) }}
|
||
</div>
|
||
</div>
|
||
<div class="data-row2-col">
|
||
<div class="s-text">累计</div>
|
||
<div class="s-number">
|
||
{{ getRoudValue(towerConfigStat.b0, towerConfigStat.a0) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
|
||
<div :class="'active'">告警次数(10次)</div>
|
||
<div class="title-bg"></div>
|
||
</div>
|
||
<div class="data-row2">
|
||
<div class="data-row2-col">
|
||
<div class="s-text">本月</div>
|
||
<div class="s-number">{{ towerConfigStat.c1 }}</div>
|
||
</div>
|
||
<div class="data-row2-col">
|
||
<div class="s-text">累计</div>
|
||
<div class="s-number">{{ towerConfigStat.c0 }}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="dev-info">
|
||
<div class="safe-tower-crane-max">
|
||
<div class="safe-tower-crane-min" style="position: relative">
|
||
<el-row class="row-crane-min">
|
||
<el-col :span="2">
|
||
<div class="safe-tower-left" v-if="towerConfigList.length > 1"
|
||
@click="safeTowerLeft"></div>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<div class="safe-tower-content-max">
|
||
<transition :name="direction">
|
||
<component :is="comName" :value="selDev" :width="360" :height="200"
|
||
:top="55" :left="85" :tHeight="runData.height" :tLoad="runData.load"
|
||
:tRotation="runData.rotation" :tRange="runData.range"
|
||
:tLeanAngleX="runData.leanAngleX" :tLeanAngleY="runData.leanAngleY"
|
||
:tLoadPercent="runData.loadPercent"
|
||
:tMomentPercent="runData.momentPercent"></component>
|
||
</transition>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div class="safe-tower-right" v-if="towerConfigList.length > 1"
|
||
@click="safeTowerRight"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="safe-height">
|
||
<div class="analyse-map">
|
||
<div class="analyse-title">
|
||
<div class="analyse-text">正在发生</div>
|
||
<div class="analyse-equipment">塔机监测</div>
|
||
</div>
|
||
<div class="afoot-content safe-afoot-content">
|
||
<div class="afoot-overflow safe-afoot-overflow" id="afootOverflow">
|
||
<div v-if="warningData.length == 0" class="not-data">
|
||
暂无预警数据
|
||
</div>
|
||
|
||
<div v-if="warningData.length > 0" class="quality-table special-table scroll"
|
||
style="padding:0px;" :key="tbHeight">
|
||
<el-table :data="warningData" class="mytable"
|
||
style="width: 100%;background: transparent;" :height="tbHeight"
|
||
ref="fbsubordinateUnit">
|
||
<el-table-column prop="createTime" label="发送时间"></el-table-column>
|
||
<el-table-column label="预警类型">
|
||
<template slot-scope="scope">
|
||
<div class="tag-group">
|
||
<template v-for="(item, idx) in dicts">
|
||
<el-tag :key="idx"
|
||
v-if="dic(item.value, scope.row.warnings)" type="danger"
|
||
effect="dark">
|
||
{{ item.label }}
|
||
</el-tag>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="analyse-map">
|
||
<div class="analyse-title analyse_title_blue">
|
||
<div class="analyse-text">力矩曲线</div>
|
||
</div>
|
||
<div class="safe-moment">
|
||
<my-chart :key="itemChartKey1" id="project-tower-crane-item2" width="100%" height="100%"
|
||
:render="o => renderDataItem2(o)"></my-chart>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row class="dev-info-list">
|
||
<el-col :span="4" class="dev-info-item" v-for="(it, idx) in devBottomInfo" :key="idx">
|
||
<div class="info-item-content">
|
||
<div class="row-1">
|
||
<span class="sp-title">{{ it.title }}</span>
|
||
<svg-icon v-if="idx == 0" icon-class="meter1"></svg-icon>
|
||
<svg-icon v-if="idx == 1" icon-class="meter2"></svg-icon>
|
||
<svg-icon v-if="idx == 2" icon-class="meter3"></svg-icon>
|
||
<svg-icon v-if="idx == 3" icon-class="meter4"></svg-icon>
|
||
<svg-icon v-if="idx == 4" icon-class="meter5"></svg-icon>
|
||
<svg-icon v-if="idx == 5" icon-class="meter6"></svg-icon>
|
||
</div>
|
||
<div class="row-scale">
|
||
<div class="row-scale-ctx">
|
||
<div v-for="i in 10" :key="i" class="scale-item"></div>
|
||
</div>
|
||
<span class="sp-data1 sp-data sp-sc">报警:{{ it.data1 }}</span>
|
||
<span class="sp-data2 sp-data sp-sc" v-if="it.data2 >= 5" :style="calcTop(it)">报警:{{
|
||
it.data2 }}</span>
|
||
<span class="sp-sc2 sp-sc">{{ it.scale2 }}</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</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 {
|
||
tbHeight: 290,
|
||
itemChartKey1: 0,
|
||
chart1Key: 0,
|
||
chart1Height: '200px',
|
||
dpi: '',
|
||
selProject: null,
|
||
index: 0,
|
||
towerConfigView: [],
|
||
towerConfigList: [],
|
||
towerConfigStat: { a0: 0, b0: 0, c0: 0, a1: 0, b1: 0, c1: 0 },
|
||
runData: {
|
||
height: "0",
|
||
range: "0",
|
||
rotation: "0",
|
||
load: "0",
|
||
windSpeed: "0",
|
||
leanAngleX: "0",
|
||
leanAngleY: "0",
|
||
loadPercent: "0",
|
||
momentPercent: "0",
|
||
windSpeedPercent: "0",
|
||
warnings: null,
|
||
},
|
||
selDev: {},
|
||
devBottomInfo: [
|
||
{ title: "幅度", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
{ title: "风速", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
{ title: "吊重", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
{ title: "倾角", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
{ title: "转角", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
{ title: "高度", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
|
||
],
|
||
direction: "right",
|
||
comName: "tower-crane-value-1",
|
||
warningData: [],
|
||
momentData: {},
|
||
forIndex: 0,
|
||
warningInterval: undefined,
|
||
countvwInterval: undefined,
|
||
towerTotalNum: 0,
|
||
dept: null,
|
||
prjs: [],
|
||
project: null,
|
||
dicts: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
window.safetyApp = this;
|
||
this.$store.dispatch('ChangeNav', 304);
|
||
this.$bus.$on('projectChange', prj => {
|
||
this.selProject = prj;
|
||
this.init();
|
||
});
|
||
this.selProject = this.$store.getters.selProject;
|
||
this.init();
|
||
this.dpi = this.$dpi();
|
||
this.resize();
|
||
window.addEventListener("resize", () => {
|
||
if (this.dpi != this.$dpi()) {
|
||
this.dpi = this.$dpi();
|
||
this.resize();
|
||
}
|
||
|
||
});
|
||
this.$api.dict("ssp_proble_sub_type").then((d) => {
|
||
this.dangerTypeDict = d || [];
|
||
});
|
||
this.momentData = JSON.parse(
|
||
'{"point":[[null,null]],"dataX":[15,20,25,30,35,40,45,50,55,60],"dataY":[3,3,3,3,2.59,2.2,1.9,1.66,1.46,1.3]}'
|
||
);
|
||
},
|
||
created() {
|
||
this.$api.dict("device_tower_warning").then((d) => {
|
||
this.dicts = d || [];
|
||
console.log("---->", this.dicts);
|
||
});
|
||
},
|
||
methods: {
|
||
resize() {
|
||
this.chart1Key++;
|
||
this.itemChartKey1++;
|
||
let is1K = this.$dpi() == "1K";
|
||
let is2K = this.$dpi() == "2K";
|
||
this.tbHeight = is1K ? 290 : is2K ? 410 : 770;
|
||
},
|
||
init() {
|
||
if (!this.selProject) {
|
||
return;
|
||
}
|
||
this.initTowerConfigView();
|
||
this.initTowerConfigList();
|
||
},
|
||
getRoudValue(a, b) {
|
||
if (a > 0) {
|
||
return (parseFloat(a / b) * 100).toFixed(1) + "%";
|
||
} else {
|
||
return "0%";
|
||
}
|
||
},
|
||
initTowerConfigView() {
|
||
let postData = {
|
||
comId: this.selProject.comId,
|
||
projectId: this.selProject.id,
|
||
};
|
||
this.$api.tower.findTowerConfigGroupOnline(postData).then((d) => {
|
||
let list = [];
|
||
let total = 0;
|
||
if (d.data && d.data.length > 0) {
|
||
d.data.forEach((datum) => {
|
||
total += datum.total;
|
||
if (datum.online == 1) {
|
||
list.push({ text: "在线数量", value: datum.total });
|
||
if (d.data.length == 1) {
|
||
list.push({ text: "离线数量", value: 0 });
|
||
}
|
||
} else {
|
||
list.push({ text: "离线数量", value: datum.total });
|
||
}
|
||
});
|
||
}
|
||
this.towerTotalNum = total;
|
||
this.towerConfigView = list;
|
||
});
|
||
|
||
},
|
||
initTowerConfigList() {
|
||
let postData = {
|
||
comdId: this.selProject.comId,
|
||
projectId: this.selProject.id,
|
||
};
|
||
this.$api.tower.findTowerConfigListByProjectId(postData).then((d) => {
|
||
this.towerConfigList = d.data || [];
|
||
if (d.data.length > 0) {
|
||
this.initSelDev(this.index);
|
||
} else {
|
||
this.runData.height = "0";
|
||
this.runData.range = "0";
|
||
this.runData.rotation = "0";
|
||
this.runData.load = "0";
|
||
this.runData.windSpeed = "0";
|
||
this.runData.leanAngleX = "0";
|
||
this.runData.leanAngleY = "0";
|
||
this.runData.loadPercent = "0";
|
||
this.runData.momentPercent = "0";
|
||
this.runData.windSpeedPercent = "0";
|
||
this.runData.warnings = null;
|
||
this.devBottomInfo[0].data1 = 0;
|
||
this.devBottomInfo[1].data1 = 0;
|
||
this.devBottomInfo[2].data1 = 0;
|
||
this.devBottomInfo[3].data1 = 0;
|
||
this.devBottomInfo[4].data1 = 0;
|
||
this.devBottomInfo[5].data1 = 0;
|
||
this.devBottomInfo[0].data2 = 0;
|
||
this.devBottomInfo[1].data2 = 0;
|
||
this.devBottomInfo[2].data2 = 0;
|
||
this.devBottomInfo[3].data2 = 0;
|
||
this.devBottomInfo[4].data2 = 0;
|
||
this.devBottomInfo[5].data2 = 0;
|
||
this.towerConfigStat.a0 = 0;
|
||
this.towerConfigStat.b0 = 0;
|
||
this.towerConfigStat.c0 = 0;
|
||
this.towerConfigStat.a1 = 0;
|
||
this.towerConfigStat.b1 = 0;
|
||
this.towerConfigStat.c1 = 0;
|
||
this.warningData = [];
|
||
this.selDev = { deviceName: "未找到设备", frontBrachium: 0, afterBrachium: 0 };
|
||
}
|
||
});
|
||
|
||
},
|
||
dic(ds, value) {
|
||
if (value.split(",").indexOf(ds) > -1) {
|
||
return true;
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
initSelDev(n) {
|
||
this.selDev = this.towerConfigList[this.index];
|
||
this.initLimitData();
|
||
this.initRunData();
|
||
//正在发生 定时器
|
||
clearInterval(this.warningInterval);
|
||
this.warningInterval = setInterval(this.initRunData, 60000);
|
||
this.initCountData();
|
||
clearInterval(this.countvwInterval);
|
||
this.countvwInterval = setInterval(this.initCountData, 60000);
|
||
},
|
||
initCountData() {
|
||
this.$api.tower.findTowerStatisticsView(this.selDev.deviceSn).then((d) => {
|
||
this.towerConfigStat = d.data || [];
|
||
});
|
||
},
|
||
initLimitData() {
|
||
this.$api.tower.selectDevTowerDataLimitList(this.selDev.deviceSn).then((d) => {
|
||
this.devBottomInfo[0].data2 = d.data[0].rangeLimitStart;
|
||
this.devBottomInfo[1].data2 = d.data[0].windSpeedWarning;
|
||
this.devBottomInfo[2].data2 = d.data[0].loadWarning;
|
||
this.devBottomInfo[3].data2 = d.data[0].leanWarning;
|
||
this.devBottomInfo[4].data2 = d.data[0].rotationLimitStart;
|
||
this.devBottomInfo[5].data2 = d.data[0].highLimitWarning;
|
||
});
|
||
},
|
||
initRunData() {
|
||
this.$api.tower.selectDevTowerDataRunList(this.selDev.deviceSn).then((d) => {
|
||
if (d.data.length > 0) {
|
||
this.runData.height = d.data[0].height;
|
||
this.runData.range = d.data[0].range;
|
||
this.runData.rotation = d.data[0].rotation;
|
||
this.runData.load = d.data[0].load;
|
||
this.runData.windSpeed = d.data[0].windSpeed;
|
||
this.runData.leanAngleX = d.data[0].leanAngleX;
|
||
this.runData.leanAngleY = d.data[0].leanAngleY;
|
||
this.runData.loadPercent = d.data[0].loadPercent;
|
||
this.runData.momentPercent = d.data[0].momentPercent;
|
||
this.runData.windSpeedPercent = d.data[0].windSpeedPercent;
|
||
this.runData.warnings = d.data[0].warnings;
|
||
this.devBottomInfo[0].data1 = d.data[0].range;
|
||
this.devBottomInfo[1].data1 = d.data[0].windSpeed;
|
||
this.devBottomInfo[2].data1 = d.data[0].load;
|
||
this.devBottomInfo[3].data1 = d.data[0].leanAnglePercent
|
||
? d.data[0].leanAnglePercent
|
||
: 0;
|
||
this.devBottomInfo[4].data1 = d.data[0].rotation;
|
||
this.devBottomInfo[5].data1 = d.data[0].height;
|
||
}
|
||
this.warningData = d.data || [];
|
||
});
|
||
},
|
||
calcTop(d) {
|
||
let tmp = 100 - (d.data2 * 100.0) / d.data1;
|
||
return `top:calc(20px + ${tmp > 78 ? 78 : tmp}%)`;
|
||
},
|
||
getRoudValue(a, b) {
|
||
if (a > 0) {
|
||
return (parseFloat(a / b) * 100).toFixed(1) + "%";
|
||
} else {
|
||
return "0%";
|
||
}
|
||
},
|
||
safeTowerLeft() {
|
||
this.direction = "left";
|
||
this.automaticRoll();
|
||
},
|
||
safeTowerRight() {
|
||
//切换动画
|
||
this.direction = "right";
|
||
this.automaticRoll();
|
||
},
|
||
automaticRoll() {
|
||
//切换动画
|
||
if (this.direction == "right") {
|
||
if (this.index == this.towerConfigList.length - 1) {
|
||
this.index = 0;
|
||
} else {
|
||
this.index = this.index + 1;
|
||
}
|
||
} else {
|
||
if (this.index == 0) {
|
||
this.index = this.towerConfigList.length - 1;
|
||
} else {
|
||
this.index = this.index - 1;
|
||
}
|
||
}
|
||
this.selDev = this.towerConfigList[this.index];
|
||
var height = $(".list-for").innerHeight();
|
||
$("#listMin").animate({ scrollTop: height * this.index + "px" });
|
||
},
|
||
onTowerCraneList(n) {
|
||
this.index = n;
|
||
this.selDev = this.towerConfigList[this.index];
|
||
this.initLimitData();
|
||
this.initCountData();
|
||
//切换动画
|
||
this.direction = "right";
|
||
},
|
||
safeAutomaticRoll() {
|
||
var height = $(".safe-afoot-overflow").innerHeight();
|
||
console.log(height);
|
||
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, 10000);
|
||
},
|
||
renderDataItem2(o) {
|
||
let data = this.momentData;
|
||
var color = '#20bc00'
|
||
var Xmax = Math.max.apply(null, data.dataX);
|
||
var Ymax = Math.max.apply(null, data.dataY);
|
||
let is1K = this.$dpi() == "1K";
|
||
let is2K = this.$dpi() == "2K";
|
||
|
||
let option = {
|
||
tooltip: {
|
||
position: "top",
|
||
formatter: function (params) {
|
||
var fd = params.data[0];
|
||
var dz = params.data[1]
|
||
res = '<div style="padding: 5px 10px;">' +
|
||
'<div style="padding-bottom: 5px;">幅度：<span>' + fd + '</span> m</div>' +
|
||
'<div>吊重：<span>' + dz + '</span> t</div>' +
|
||
'</div>'
|
||
return res
|
||
},
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
right: "15%",
|
||
left: "4%",
|
||
bottom: "5%",
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
name: '幅度/m',
|
||
max: 60,
|
||
nameTextStyle: {
|
||
color: "#c5d9fc",
|
||
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
},
|
||
splitLine: {
|
||
//去除网格线
|
||
show: false,
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#c5d9fc",
|
||
margin: 20,
|
||
fontSize: 30
|
||
},
|
||
},
|
||
|
||
},
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
position: "bottom",
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#194e92",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#c5d9fc",
|
||
margin: 20,
|
||
fontSize: 30
|
||
},
|
||
},
|
||
data: data.dataX,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '吊重/t',
|
||
nameTextStyle: {
|
||
color: "#c5d9fc",
|
||
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
},
|
||
max: Ymax + 1,
|
||
type: "value",
|
||
splitNumber: 7,
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#194e92",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 20,
|
||
textStyle: {
|
||
color: "#c5d9fc",
|
||
fontSize: is1K ? 12 : is2K ? 14 : 18
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "吊重",
|
||
type: "effectScatter",
|
||
rippleEffect: { // 设置涟漪动画样式
|
||
color: 'purple', // 涟漪颜色,默认为散点自身颜色
|
||
brushType: 'fill', // 动画方式,全填充或只有线条,'stroke' 'fill'
|
||
period: 2, //动画周期
|
||
scale: '3', //涟漪规模
|
||
},
|
||
xAxisIndex: 0,
|
||
yAxisIndex: 0,
|
||
symbolSize: 15, //散点的固定大小
|
||
itemStyle: {
|
||
color: color,
|
||
|
||
},
|
||
data: data.point,
|
||
},
|
||
{
|
||
type: "line",
|
||
symbol: "none",
|
||
smooth: true,
|
||
xAxisIndex: 1,
|
||
yAxisIndex: 0,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 3,
|
||
color: "#5968db", // 线条颜色
|
||
},
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
normal: {
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgb(25,43,115,0.9)" },
|
||
{ offset: 0.7, color: "rgba(25,43,115, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(25,43,115, 1)", //阴影颜色
|
||
},
|
||
},
|
||
data: data.dataY,
|
||
},
|
||
],
|
||
};
|
||
return option;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.project-tower-crane {
|
||
.screen-one-3-1 {
|
||
height: calc(100% - 20px) !important;
|
||
}
|
||
|
||
.tower-total {
|
||
.equipment-list-min {
|
||
.czz-number-img {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.svg-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
&.czz-number-img-blue {
|
||
.svg-icon {
|
||
fill: #1e90ff
|
||
}
|
||
}
|
||
|
||
&.czz-number-img-green {
|
||
.svg-icon {
|
||
fill: ForestGreen
|
||
}
|
||
}
|
||
}
|
||
|
||
.p-label {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.span-num {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.span-unit {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-data-list {
|
||
height: calc(100% - 283px) !important;
|
||
|
||
.drv-list {
|
||
padding: 0px 12px;
|
||
max-height: calc(100% - 70px);
|
||
overflow-y: auto;
|
||
|
||
.drv-item {
|
||
border-bottom: dotted 1px #429fff;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
.item-content {
|
||
background-color: #42a1ff60;
|
||
}
|
||
}
|
||
|
||
&:first-child {
|
||
.item-content {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
background-color: #429fff25;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.dev-row1 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.survey_content {
|
||
.survey_content_img {
|
||
.svg-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
fill: #1e90ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.dev-row2 {
|
||
display: grid;
|
||
grid-template-columns: 50% 50%;
|
||
|
||
.sp-tel {
|
||
display: inline-block;
|
||
width: 107px;
|
||
word-wrap: break-word;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.dev-row2-col {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.data-row {
|
||
padding-left: 12px;
|
||
line-height: 30px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
flex-grow: 1;
|
||
display: flex;
|
||
|
||
span {
|
||
display: flex;
|
||
|
||
&:last-child {
|
||
flex-grow: 1;
|
||
margin-left: 4px;
|
||
color: #79bbe3;
|
||
}
|
||
|
||
&.is-offline {
|
||
color: burlywood;
|
||
}
|
||
|
||
&.is-online {
|
||
color: #63f8bc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
height: calc(100% - 270px);
|
||
|
||
.total-data {
|
||
.data-row2 {
|
||
margin-top: 10px;
|
||
display: grid;
|
||
grid-template-columns: 50% 50%;
|
||
|
||
.data-row2-col {
|
||
text-align: center;
|
||
line-height: 40px;
|
||
|
||
.s-text {
|
||
color: #497deb;
|
||
}
|
||
|
||
.s-number {
|
||
color: #429fff;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info {
|
||
height: calc(100% - 150px);
|
||
|
||
.safe-tower-crane-max {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.safe-tower-content-max {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.safe-tower-crane-min {
|
||
flex-grow: 1;
|
||
position: relative;
|
||
|
||
.row-crane-min {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.analyse-map {
|
||
.safe-afoot-overflow {
|
||
height: auto;
|
||
}
|
||
|
||
.safe-afoot-content {
|
||
height: 270px;
|
||
}
|
||
|
||
.safe-moment {
|
||
height: 260px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info-list {
|
||
height: 270px;
|
||
margin-top: 10px;
|
||
|
||
.dev-info-item {
|
||
.info-item-content {
|
||
border: 1px solid transparent;
|
||
border-image: linear-gradient(to bottom, #f7f1f100, #3473c3d4);
|
||
border-image-slice: 1;
|
||
height: 100%;
|
||
|
||
.row-1 {
|
||
position: relative;
|
||
|
||
.sp-title {
|
||
position: relative;
|
||
left: 12px;
|
||
color: #ccd7e5d4;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.svg-icon {
|
||
position: absolute;
|
||
right: 12px;
|
||
fill: #9c1ef1 !important;
|
||
width: 20px !important;
|
||
height: 20px !important;
|
||
|
||
* {
|
||
fill: #9c1ef1 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.row-scale {
|
||
height: calc(100% - 24px);
|
||
position: relative;
|
||
text-align: center;
|
||
|
||
.row-scale-ctx {
|
||
height: 100%;
|
||
display: inline-block;
|
||
width: 30%;
|
||
|
||
.scale-item {
|
||
margin: 22% 0px;
|
||
height: 4%;
|
||
background: #002d8d94;
|
||
border-radius: 5%;
|
||
}
|
||
}
|
||
|
||
.sp-sc {
|
||
position: absolute;
|
||
bottom: 2px;
|
||
left: 50%;
|
||
font-size: 12px;
|
||
color: #72b5f9;
|
||
}
|
||
|
||
.sp-sc1 {
|
||
margin-left: calc(-15% - 20px);
|
||
}
|
||
|
||
.sp-sc2 {
|
||
margin-left: calc(15% + 10px);
|
||
}
|
||
|
||
.sp-data {
|
||
text-align: right;
|
||
margin-left: calc(-15% - 60px);
|
||
}
|
||
|
||
.sp-data1 {
|
||
top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
padding: 12px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
.warning-info-title .active {
|
||
background-size: 10px 20px;
|
||
}
|
||
|
||
.tower-total {
|
||
margin-bottom: 20px;
|
||
|
||
.equipment-list-min {
|
||
.czz-number-img {
|
||
width: 100px;
|
||
height: 100px;
|
||
|
||
.svg-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
}
|
||
|
||
.p-label {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.span-num {
|
||
font-size: 42px;
|
||
}
|
||
|
||
.span-unit {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-data-list {
|
||
height: calc(100% - 283px) !important;
|
||
|
||
.warning-info-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.drv-list {
|
||
padding: 0px 12px;
|
||
max-height: calc(100% - 80px);
|
||
|
||
.drv-item {
|
||
&:first-child {
|
||
.item-content {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.dev-row1 {
|
||
.survey_content {
|
||
.survey_content_img {
|
||
width: 120px;
|
||
height: 120px;
|
||
background-size: 120px 60px;
|
||
|
||
.svg-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-row2 {
|
||
grid-template-columns: 50% 50%;
|
||
|
||
.sp-tel {
|
||
width: 107px;
|
||
}
|
||
}
|
||
|
||
.data-row {
|
||
padding-left: 12px;
|
||
line-height: 30px;
|
||
|
||
span {
|
||
font-size: 20px;
|
||
|
||
&:last-child {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
height: calc(100% - 360px);
|
||
|
||
.total-data {
|
||
.warning-info-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.data-row2 {
|
||
margin-top: 10px;
|
||
font-size: 20px;
|
||
|
||
.data-row2-col {
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info {
|
||
height: calc(100% - 150px);
|
||
|
||
.safe-tower-content-max {
|
||
width: 90%;
|
||
height: 700px;
|
||
|
||
.safe-tower-content-title {
|
||
span {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.safe-tower-content-data {
|
||
|
||
.safe-tower-icon {
|
||
transform: scale(1.5);
|
||
position: relative;
|
||
left: 60px;
|
||
top: 110px;
|
||
}
|
||
|
||
.safe-tower-content-data-list {
|
||
font-size: 20px;
|
||
padding: 30px 5px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.analyse-map {
|
||
.safe-afoot-content {
|
||
height: 400px;
|
||
}
|
||
|
||
.analyse-title {
|
||
.analyse-text {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.quality-table {
|
||
.cell {
|
||
font-size: 18px;
|
||
|
||
.tag-group {
|
||
.el-tag {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safe-moment {
|
||
height: 360px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info-list {
|
||
height: 360px;
|
||
margin-top: 10px;
|
||
|
||
.dev-info-item {
|
||
.info-item-content {
|
||
.row-1 {
|
||
.sp-title {
|
||
left: 12px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.svg-icon {
|
||
right: 12px;
|
||
width: 30px !important;
|
||
height: 30px !important;
|
||
}
|
||
}
|
||
|
||
.row-scale {
|
||
.row-scale-ctx {
|
||
width: 30%;
|
||
|
||
.scale-item {
|
||
margin: 22% 0px;
|
||
height: 4%;
|
||
}
|
||
}
|
||
|
||
.sp-sc {
|
||
bottom: 2px;
|
||
left: 50%;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.sp-data {
|
||
text-align: right;
|
||
margin-left: calc(-15% - 80px);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sp-data1 {
|
||
top: 10px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
padding: 12px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (min-width: 2561px) {
|
||
.warning-info-title .active {
|
||
background-size: 16px 30px;
|
||
}
|
||
|
||
.tower-total {
|
||
margin-bottom: 40px;
|
||
|
||
.equipment-list-min {
|
||
.czz-number-img {
|
||
width: 160px;
|
||
height: 160px;
|
||
|
||
.svg-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
}
|
||
|
||
.p-label {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.span-num {
|
||
font-size: 52px;
|
||
}
|
||
|
||
.span-unit {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-data-list {
|
||
height: calc(100% - 283px) !important;
|
||
|
||
.warning-info-title {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.drv-list {
|
||
padding: 0px 12px;
|
||
max-height: calc(100% - 190px);
|
||
|
||
.drv-item {
|
||
&:first-child {
|
||
.item-content {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.dev-row1 {
|
||
.survey_content {
|
||
.survey_content_img {
|
||
width: 180px;
|
||
height: 180px;
|
||
background-size: 180px 90px;
|
||
|
||
.svg-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-top: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-row2 {
|
||
grid-template-columns: 50% 50%;
|
||
|
||
.sp-tel {
|
||
width: 107px;
|
||
}
|
||
}
|
||
|
||
.data-row {
|
||
padding-left: 12px;
|
||
line-height: 50px;
|
||
|
||
span {
|
||
font-size: 28px;
|
||
|
||
&:last-child {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-content {
|
||
height: calc(100% - 540px);
|
||
|
||
.total-data {
|
||
.warning-info-title {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.data-row2 {
|
||
margin-top: 10px;
|
||
font-size: 30px;
|
||
|
||
.data-row2-col {
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info {
|
||
height: calc(100% - 200px);
|
||
|
||
.safe-tower-content-max {
|
||
width: 90%;
|
||
height: 1200px;
|
||
|
||
.safe-tower-content-title {
|
||
span {
|
||
font-size: 40px;
|
||
}
|
||
}
|
||
|
||
.safe-tower-content-data {
|
||
|
||
.safe-tower-icon {
|
||
transform: scale(2.5);
|
||
position: relative;
|
||
left: 200px;
|
||
top: 250px;
|
||
}
|
||
|
||
.safe-tower-content-data-list {
|
||
font-size: 30px;
|
||
padding: 60px 5px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.analyse-map {
|
||
.safe-afoot-content {
|
||
height: 760px;
|
||
}
|
||
|
||
.analyse-title {
|
||
.analyse-text {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.quality-table {
|
||
.cell {
|
||
font-size: 24px;
|
||
|
||
.tag-group {
|
||
.el-tag {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safe-moment {
|
||
height: 540px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dev-info-list {
|
||
height: 540px;
|
||
margin-top: 10px;
|
||
|
||
.dev-info-item {
|
||
.info-item-content {
|
||
.row-1 {
|
||
.sp-title {
|
||
left: 12px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.svg-icon {
|
||
right: 12px;
|
||
width: 30px !important;
|
||
height: 30px !important;
|
||
}
|
||
}
|
||
|
||
.row-scale {
|
||
.row-scale-ctx {
|
||
width: 30%;
|
||
|
||
.scale-item {
|
||
margin: 22% 0px;
|
||
height: 4%;
|
||
}
|
||
}
|
||
|
||
.sp-sc {
|
||
bottom: 2px;
|
||
left: 50%;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.sp-data {
|
||
text-align: right;
|
||
margin-left: calc(-15% - 80px);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sp-data1 {
|
||
top: 10px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
padding: 12px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |