flx：修改百色塔吊样式问题
This commit is contained in:
parent
a6207cbcf9
commit
0d94579acf
@ -2,49 +2,48 @@
|
||||
<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 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>
|
||||
<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 { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { getDistinguishedNumApi } from "@/api/modules/tower";
|
||||
@ -110,14 +109,13 @@ let totalData = ref([
|
||||
value: 19
|
||||
}
|
||||
]);
|
||||
let data = ref([]);
|
||||
let data = ref([] as any[]);
|
||||
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: "",
|
||||
@ -163,7 +161,7 @@ function initOption() {
|
||||
|
||||
title: {
|
||||
text: "报警总数",
|
||||
top: "150",
|
||||
top: "160",
|
||||
|
||||
textAlign: "center",
|
||||
left: "24%",
|
||||
@ -177,7 +175,7 @@ function initOption() {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
type:'scroll',
|
||||
type: "scroll",
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemGap: 20,
|
||||
@ -186,26 +184,26 @@ function initOption() {
|
||||
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;
|
||||
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;
|
||||
},
|
||||
return num;
|
||||
},
|
||||
data: dataName.value,
|
||||
top:50,
|
||||
top: 50,
|
||||
right: 400,
|
||||
left: 280,
|
||||
bottom: 0,
|
||||
@ -253,43 +251,44 @@ function _pie3() {
|
||||
return dataArr;
|
||||
}
|
||||
let dataName = ref([] as any);
|
||||
const echartsTest = ref(null as any);
|
||||
let towerAlarmData = ref(null as any);
|
||||
const getTowerNumAndAlarmList = async (type: any) => {
|
||||
if (type == 1) {
|
||||
//近七天
|
||||
var currentDate = new Date();
|
||||
var pastDate = new Date();
|
||||
let currentDate = new Date();
|
||||
let 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();
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth() + 1;
|
||||
let currentDay = currentDate.getDate();
|
||||
let pastYear = pastDate.getFullYear();
|
||||
let pastMonth = pastDate.getMonth() + 1;
|
||||
let 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;
|
||||
let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
|
||||
let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
|
||||
rangeTime.value = [pastTimer, currentTimer];
|
||||
} else if (type == 2) {
|
||||
//近30天
|
||||
var currentDate = new Date();
|
||||
var pastDate = new Date();
|
||||
let currentDate = new Date();
|
||||
let 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();
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth() + 1;
|
||||
let currentDay = currentDate.getDate();
|
||||
let pastYear = pastDate.getFullYear();
|
||||
let pastMonth = pastDate.getMonth() + 1;
|
||||
let 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;
|
||||
let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
|
||||
let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
|
||||
rangeTime.value = [pastTimer, currentTimer];
|
||||
}
|
||||
const res: any = await getDistinguishedNumApi({
|
||||
@ -300,7 +299,8 @@ const getTowerNumAndAlarmList = async (type: any) => {
|
||||
if (res.result) {
|
||||
console.log("群塔报警对比分析", res.result);
|
||||
let projectWorkerTypeOption: any = [];
|
||||
|
||||
data.value = [];
|
||||
|
||||
res.result.typeNumList.forEach(item => {
|
||||
// 只取有数据的工种
|
||||
towerAlarmData.value = res.result;
|
||||
@ -318,23 +318,24 @@ const getTowerNumAndAlarmList = async (type: any) => {
|
||||
|
||||
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]
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// console.log(data.value)
|
||||
echartsTest.value && echartsTest.value.clear();
|
||||
nextTick(() => {
|
||||
draw();
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -346,14 +347,13 @@ function timeChange(e: any) {
|
||||
onMounted(async () => {
|
||||
// initOption();
|
||||
await getTowerNumAndAlarmList(1);
|
||||
draw();
|
||||
// draw();
|
||||
});
|
||||
|
||||
function draw() {
|
||||
console.log("塔吊左侧圆环图", option.value);
|
||||
let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
|
||||
echartsTest.setOption(option.value, true);
|
||||
|
||||
echartsTest.value = echarts.init(document.getElementById("echartsLeftCenter"));
|
||||
echartsTest.value.setOption(option.value, true);
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -362,7 +362,7 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -374,8 +374,8 @@ onBeforeUnmount(() => {
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
top: 50%;
|
||||
left: 16.5%;
|
||||
z-index: 9;
|
||||
}
|
||||
.styleImg {
|
||||
@ -427,11 +427,11 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user