449 lines
8.9 KiB
Vue
449 lines
8.9 KiB
Vue
<template>
|
|
<Card title="群塔报警对比分析">
|
|
<div class="box">
|
|
<div class="num" v-if="towerAlarmData">{{ towerAlarmData.alarmNum }}</div>
|
|
<div class="rightHeader">
|
|
<div
|
|
class="day"
|
|
:class="airType == 1 ? 'active' : ''"
|
|
@click="
|
|
airType = 1;
|
|
getTowerNumAndAlarmList(1);
|
|
"
|
|
>
|
|
近7天
|
|
</div>
|
|
<div
|
|
class="year"
|
|
:class="airType == 2 ? 'active' : ''"
|
|
@click="
|
|
airType = 2;
|
|
getTowerNumAndAlarmList(2);
|
|
"
|
|
>
|
|
近30天
|
|
</div>
|
|
<div class="time">
|
|
<el-date-picker
|
|
v-model="rangeTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
:clearable="false"
|
|
@change="timeChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="styleImg"></div>
|
|
<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, onBeforeUnmount } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Card from "@/components/card.vue";
|
|
import { getDistinguishedNumApi } from "@/api/modules/tower";
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
const airType = ref(1);
|
|
|
|
let trafficWay = ref([
|
|
{
|
|
name: "回转限位",
|
|
value: 12,
|
|
radio: 0.13
|
|
},
|
|
{
|
|
name: "风速",
|
|
value: 52,
|
|
radio: 0.01
|
|
},
|
|
{
|
|
name: "力矩",
|
|
value: 15,
|
|
radio: 3.9
|
|
},
|
|
{
|
|
name: "倾斜",
|
|
value: 56,
|
|
radio: 10.5
|
|
},
|
|
{
|
|
name: "塔吊间碰撞",
|
|
value: 17,
|
|
radio: 0.4
|
|
},
|
|
{
|
|
name: "吊钩限位",
|
|
value: 19,
|
|
radio: 85.3
|
|
}
|
|
]);
|
|
let totalData = ref([
|
|
{
|
|
name: "回转限位",
|
|
value: 12
|
|
},
|
|
{
|
|
name: "风速",
|
|
value: 52
|
|
},
|
|
{
|
|
name: "力矩",
|
|
value: 15
|
|
},
|
|
{
|
|
name: "倾斜",
|
|
value: 56
|
|
},
|
|
{
|
|
name: "塔吊间碰撞",
|
|
value: 17
|
|
},
|
|
{
|
|
name: "吊钩限位",
|
|
value: 19
|
|
}
|
|
]);
|
|
let data = ref([]);
|
|
let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
|
|
let seriesOption = ref([] as any);
|
|
let option = ref([] as any);
|
|
let rangeTime = ref("" as any);
|
|
|
|
function initOption() {
|
|
|
|
seriesOption.value = [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
center: ["25%", "60%"],
|
|
clockWise: false,
|
|
radius: [70, 60],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
data: data.value
|
|
},
|
|
{
|
|
type: "pie",
|
|
center: ["25%", "60%"],
|
|
|
|
radius: [50, 50],
|
|
zlevel: 2,
|
|
silent: true,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: _pie3()
|
|
}
|
|
];
|
|
|
|
option.value = {
|
|
// backgroundColor: "#0A2E5D",
|
|
color: color.value,
|
|
center: ["25%", "50%"],
|
|
|
|
title: {
|
|
text: "报警总数",
|
|
top: "150",
|
|
|
|
textAlign: "center",
|
|
left: "24%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
fontWeight: "400"
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
legend: {
|
|
type:'scroll',
|
|
show: true,
|
|
icon: "rect",
|
|
itemGap: 20,
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
orient: "vertical",
|
|
x: "right",
|
|
formatter: function (name) {
|
|
let num;
|
|
for (let i = 0; i < totalData.value.length; i++) {
|
|
if (totalData.value[i].name === name) {
|
|
let cont = 9;
|
|
let stringArr = " ";
|
|
// if (name.length == 4) {
|
|
// cont = 19;
|
|
// } else if (name.length == 5) {
|
|
// cont = 20;
|
|
// }
|
|
// for (let j = 0; j < cont; j++) {
|
|
// stringArr += "";
|
|
// }
|
|
num =name + stringArr + totalData.value[i].value;
|
|
}
|
|
}
|
|
return num;
|
|
},
|
|
data: dataName.value,
|
|
top:50,
|
|
right: 400,
|
|
left: 280,
|
|
bottom: 0,
|
|
align: "left",
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
toolbox: {
|
|
show: false
|
|
},
|
|
series: seriesOption.value
|
|
};
|
|
}
|
|
|
|
function _pie3() {
|
|
let dataArr = [];
|
|
for (let i = 0; i < 100; i++) {
|
|
if (i % 2 === 0) {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5A5DE0",
|
|
borderWidth: 4,
|
|
borderColor: "#87E0FB"
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
dataArr.push({
|
|
name: (i + 1).toString(),
|
|
value: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(0,0,0,0)"
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return dataArr;
|
|
}
|
|
let dataName = ref([] as any);
|
|
let towerAlarmData = ref(null as any);
|
|
const getTowerNumAndAlarmList = async (type: any) => {
|
|
if (type == 1) {
|
|
//近七天
|
|
var currentDate = new Date();
|
|
var pastDate = new Date();
|
|
pastDate.setDate(pastDate.getDate() - 7);
|
|
var currentYear = currentDate.getFullYear();
|
|
var currentMonth = currentDate.getMonth() + 1;
|
|
var currentDay = currentDate.getDate();
|
|
var pastYear = pastDate.getFullYear();
|
|
var pastMonth = pastDate.getMonth() + 1;
|
|
var pastDay = pastDate.getDate();
|
|
currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
|
|
currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
|
|
pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
|
|
pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
|
|
var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
|
|
var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
|
|
rangeTime.value = [pastTimer, currentTimer];
|
|
} else if (type == 2) {
|
|
//近30天
|
|
var currentDate = new Date();
|
|
var pastDate = new Date();
|
|
pastDate.setDate(pastDate.getDate() - 30);
|
|
var currentYear = currentDate.getFullYear();
|
|
var currentMonth = currentDate.getMonth() + 1;
|
|
var currentDay = currentDate.getDate();
|
|
var pastYear = pastDate.getFullYear();
|
|
var pastMonth = pastDate.getMonth() + 1;
|
|
var pastDay = pastDate.getDate();
|
|
currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
|
|
currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
|
|
pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
|
|
pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
|
|
var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
|
|
var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
|
|
rangeTime.value = [pastTimer, currentTimer];
|
|
}
|
|
const res: any = await getDistinguishedNumApi({
|
|
projectSn: store.sn,
|
|
queryStartTime: rangeTime.value[0],
|
|
queryEndTime: rangeTime.value[1]
|
|
});
|
|
if (res.result) {
|
|
console.log("群塔报警对比分析", res.result);
|
|
let projectWorkerTypeOption: any = [];
|
|
|
|
res.result.typeNumList.forEach(item => {
|
|
// 只取有数据的工种
|
|
towerAlarmData.value = res.result;
|
|
// console.log("塔吊左中圆环图", res.result);
|
|
// dataName.value.push(item.enterpriseName);
|
|
if (item.num > 0) {
|
|
projectWorkerTypeOption.push({
|
|
value: item.num,
|
|
name: item.typeName
|
|
});
|
|
dataName.value.push(item.typeName);
|
|
}
|
|
});
|
|
initOption();
|
|
|
|
trafficWay.value = projectWorkerTypeOption;
|
|
totalData.value = projectWorkerTypeOption;
|
|
|
|
draw();
|
|
|
|
}
|
|
|
|
for (let i = 0; i < totalData.value.length; i++) {
|
|
data.value.push({
|
|
value: totalData.value[i].value,
|
|
name: totalData.value[i].name,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 0,
|
|
shadowBlur: 2,
|
|
borderColor: color.value[i],
|
|
shadowColor: color.value[i]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
function timeChange(e: any) {
|
|
if (e) {
|
|
getTowerNumAndAlarmList(null);
|
|
}
|
|
}
|
|
onMounted(async () => {
|
|
// initOption();
|
|
await getTowerNumAndAlarmList(1);
|
|
draw();
|
|
});
|
|
|
|
function draw() {
|
|
console.log("塔吊左侧圆环图", option.value);
|
|
let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
|
|
echartsTest.setOption(option.value, true);
|
|
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
// clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.num {
|
|
width: 66px;
|
|
text-align: center;
|
|
font-family: sadigitalNumber;
|
|
font-size: calc(100vw * 24 / 1920);
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 18%;
|
|
z-index: 9;
|
|
}
|
|
.styleImg {
|
|
left: 5%;
|
|
top: 20%;
|
|
width: 40%;
|
|
position: absolute;
|
|
height: 60%;
|
|
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.rightHeader {
|
|
width: 65%;
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 99;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 2.5vh;
|
|
left: 34%;
|
|
top: 30%;
|
|
.Selected {
|
|
height: 5%;
|
|
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
.day {
|
|
height: 5%;
|
|
width: 15%;
|
|
margin-right: 5%;
|
|
z-index: 99;
|
|
margin-top: -17%;
|
|
cursor: pointer;
|
|
}
|
|
.year {
|
|
height: 5%;
|
|
width: 15%;
|
|
margin-right: 8%;
|
|
z-index: 99;
|
|
margin-top: -17%;
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
height: 5%;
|
|
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.time {
|
|
position: absolute;
|
|
z-index: 999;
|
|
left: 37%;
|
|
margin-top: -18%;
|
|
}
|
|
::v-deep .el-input__wrapper {
|
|
width: 85%;
|
|
height: 0%;
|
|
background: #0d2956;
|
|
}
|
|
::v-deep .el-range-separator {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
::v-deep .el-range-input {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|