admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
X_Rian 2024-07-25 15:48:10 +08:00
parent a6207cbcf9
commit 0d94579acf
1 changed files with 108 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
src/views/sevenLargeScreen/towerCraneMonitoring/leftCenter.vue
View File

@ -2,49 +2,48 @@
<Card title="群塔报警对比分析"> <Card title="群塔报警对比分析">
<div class="box"> <div class="box">
<div class="num" v-if="towerAlarmData">{{ towerAlarmData.alarmNum }}</div> <div class="num" v-if="towerAlarmData">{{ towerAlarmData.alarmNum }}</div>
<div class="rightHeader"> <div class="rightHeader">
<div <div
class="day" class="day"
:class="airType == 1 ? 'active' : ''" :class="airType == 1 ? 'active' : ''"
@click=" @click="
airType = 1; airType = 1;
getTowerNumAndAlarmList(1); getTowerNumAndAlarmList(1);
" "
> >
近7天 近7天
</div> </div>
<div <div
class="year" class="year"
:class="airType == 2 ? 'active' : ''" :class="airType == 2 ? 'active' : ''"
@click=" @click="
airType = 2; airType = 2;
getTowerNumAndAlarmList(2); getTowerNumAndAlarmList(2);
" "
> >
近30天 近30天
</div> </div>
<div class="time"> <div class="time">
<el-date-picker <el-date-picker
v-model="rangeTime" v-model="rangeTime"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:clearable="false" :clearable="false"
@change="timeChange" @change="timeChange"
/> />
</div>
</div> </div>
<div class="styleImg"></div>
<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
</div> </div>
<div class="styleImg"></div>
<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
</div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from "vue"; import { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { getDistinguishedNumApi } from "@/api/modules/tower"; import { getDistinguishedNumApi } from "@/api/modules/tower";
@ -110,14 +109,13 @@ let totalData = ref([
value: 19 value: 19
} }
]); ]);
let data = ref([]); let data = ref([] as any[]);
let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]); let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
let seriesOption = ref([] as any); let seriesOption = ref([] as any);
let option = ref([] as any); let option = ref([] as any);
let rangeTime = ref("" as any); let rangeTime = ref("" as any);
function initOption() { function initOption() {
seriesOption.value = [ seriesOption.value = [
{ {
name: "", name: "",
@ -163,7 +161,7 @@ function initOption() {
title: { title: {
text: "报警总数", text: "报警总数",
top: "150", top: "160",
textAlign: "center", textAlign: "center",
left: "24%", left: "24%",
@ -177,7 +175,7 @@ function initOption() {
show: false show: false
}, },
legend: { legend: {
type:'scroll', type: "scroll",
show: true, show: true,
icon: "rect", icon: "rect",
itemGap: 20, itemGap: 20,
@ -186,26 +184,26 @@ function initOption() {
orient: "vertical", orient: "vertical",
x: "right", x: "right",
formatter: function (name) { formatter: function (name) {
let num; let num;
for (let i = 0; i < totalData.value.length; i++) { for (let i = 0; i < totalData.value.length; i++) {
if (totalData.value[i].name === name) { if (totalData.value[i].name === name) {
let cont = 9; let cont = 9;
let stringArr = " "; let stringArr = " ";
// if (name.length == 4) { // if (name.length == 4) {
// cont = 19; // cont = 19;
// } else if (name.length == 5) { // } else if (name.length == 5) {
// cont = 20; // cont = 20;
// } // }
// for (let j = 0; j < cont; j++) { // for (let j = 0; j < cont; j++) {
// stringArr += ""; // stringArr += "";
// } // }
num =name + stringArr + totalData.value[i].value; num = name + stringArr + totalData.value[i].value;
}
} }
} return num;
return num; },
},
data: dataName.value, data: dataName.value,
top:50, top: 50,
right: 400, right: 400,
left: 280, left: 280,
bottom: 0, bottom: 0,
@ -253,43 +251,44 @@ function _pie3() {
return dataArr; return dataArr;
} }
let dataName = ref([] as any); let dataName = ref([] as any);
const echartsTest = ref(null as any);
let towerAlarmData = ref(null as any); let towerAlarmData = ref(null as any);
const getTowerNumAndAlarmList = async (type: any) => { const getTowerNumAndAlarmList = async (type: any) => {
if (type == 1) { if (type == 1) {
//近七天 //近七天
var currentDate = new Date(); let currentDate = new Date();
var pastDate = new Date(); let pastDate = new Date();
pastDate.setDate(pastDate.getDate() - 7); pastDate.setDate(pastDate.getDate() - 7);
var currentYear = currentDate.getFullYear(); let currentYear = currentDate.getFullYear();
var currentMonth = currentDate.getMonth() + 1; let currentMonth = currentDate.getMonth() + 1;
var currentDay = currentDate.getDate(); let currentDay = currentDate.getDate();
var pastYear = pastDate.getFullYear(); let pastYear = pastDate.getFullYear();
var pastMonth = pastDate.getMonth() + 1; let pastMonth = pastDate.getMonth() + 1;
var pastDay = pastDate.getDate(); let pastDay = pastDate.getDate();
currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : ""; currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : ""; currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : ""; pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : ""; pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay; let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay; let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
rangeTime.value = [pastTimer, currentTimer]; rangeTime.value = [pastTimer, currentTimer];
} else if (type == 2) { } else if (type == 2) {
//近30天 //近30天
var currentDate = new Date(); let currentDate = new Date();
var pastDate = new Date(); let pastDate = new Date();
pastDate.setDate(pastDate.getDate() - 30); pastDate.setDate(pastDate.getDate() - 30);
var currentYear = currentDate.getFullYear(); let currentYear = currentDate.getFullYear();
var currentMonth = currentDate.getMonth() + 1; let currentMonth = currentDate.getMonth() + 1;
var currentDay = currentDate.getDate(); let currentDay = currentDate.getDate();
var pastYear = pastDate.getFullYear(); let pastYear = pastDate.getFullYear();
var pastMonth = pastDate.getMonth() + 1; let pastMonth = pastDate.getMonth() + 1;
var pastDay = pastDate.getDate(); let pastDay = pastDate.getDate();
currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : ""; currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : ""; currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : ""; pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : ""; pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay; let currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay; let pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
rangeTime.value = [pastTimer, currentTimer]; rangeTime.value = [pastTimer, currentTimer];
} }
const res: any = await getDistinguishedNumApi({ const res: any = await getDistinguishedNumApi({
@ -300,7 +299,8 @@ const getTowerNumAndAlarmList = async (type: any) => {
if (res.result) { if (res.result) {
console.log("群塔报警对比分析", res.result); console.log("群塔报警对比分析", res.result);
let projectWorkerTypeOption: any = []; let projectWorkerTypeOption: any = [];
data.value = [];
res.result.typeNumList.forEach(item => { res.result.typeNumList.forEach(item => {
// 只取有数据的工种 // 只取有数据的工种
towerAlarmData.value = res.result; towerAlarmData.value = res.result;
@ -318,23 +318,24 @@ const getTowerNumAndAlarmList = async (type: any) => {
trafficWay.value = projectWorkerTypeOption; trafficWay.value = projectWorkerTypeOption;
totalData.value = projectWorkerTypeOption; totalData.value = projectWorkerTypeOption;
for (let i = 0; i < totalData.value.length; i++) {
draw(); data.value.push({
value: totalData.value[i].value,
} name: totalData.value[i].name,
itemStyle: {
for (let i = 0; i < totalData.value.length; i++) { normal: {
data.value.push({ borderWidth: 0,
value: totalData.value[i].value, shadowBlur: 2,
name: totalData.value[i].name, borderColor: color.value[i],
itemStyle: { shadowColor: color.value[i]
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 () => { onMounted(async () => {
// initOption(); // initOption();
await getTowerNumAndAlarmList(1); await getTowerNumAndAlarmList(1);
draw(); // draw();
}); });
function draw() { function draw() {
console.log("塔吊左侧圆环图", option.value); console.log("塔吊左侧圆环图", option.value);
let echartsTest = echarts.init(document.getElementById("echartsLeftCenter")); echartsTest.value = echarts.init(document.getElementById("echartsLeftCenter"));
echartsTest.setOption(option.value, true); echartsTest.value.setOption(option.value, true);
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
@ -362,7 +362,7 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box{ .box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@ -374,8 +374,8 @@ onBeforeUnmount(() => {
font-size: calc(100vw * 24 / 1920); font-size: calc(100vw * 24 / 1920);
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 45%; top: 50%;
left: 18%; left: 16.5%;
z-index: 9; z-index: 9;
} }
.styleImg { .styleImg {
@ -427,11 +427,11 @@ onBeforeUnmount(() => {
} }
} }
.time { .time {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: 37%; left: 37%;
margin-top: -18%; margin-top: -18%;
} }
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
width: 85%; width: 85%;
height: 0%; height: 0%;