flx:修改百色塔吊样式问题

This commit is contained in:
X_Rian 2024-07-25 15:48:10 +08:00
parent a6207cbcf9
commit 0d94579acf

View File

@ -39,12 +39,11 @@
<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,
@ -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,6 +299,7 @@ const getTowerNumAndAlarmList = async (type: any) => {
if (res.result) {
console.log("群塔报警对比分析", res.result);
let projectWorkerTypeOption: any = [];
data.value = [];
res.result.typeNumList.forEach(item => {
//
@ -318,11 +318,6 @@ 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,
@ -337,6 +332,12 @@ const getTowerNumAndAlarmList = async (type: any) => {
}
});
}
// console.log(data.value)
echartsTest.value && echartsTest.value.clear();
nextTick(() => {
draw();
});
}
};
function timeChange(e: any) {
if (e) {
@ -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(() => {
@ -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 {