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

fix: 修改七参数大屏25个BUG

Browse Source
This commit is contained in:
cjp 2023-07-29 17:59:01 +08:00
parent f66d62bd3f
commit 37db6d303e
13 changed files with 291 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/sevenLargeScreen/distributionMonitoring/topRight.vue
View File

@ -153,11 +153,21 @@ onMounted(async () => {
.listBox {
.listStyle {
display: flex;
justify-content: space-around;
// justify-content: space-around;
color: #fff;
height: 12%;
line-height: 25px;
font-size: calc(100vw * 12 / 1920);
.dev {
width: 25%;
padding-left: 7%;
}
.time {
width: 40%;
}
.type {
width: 20%;
}
}
.listStyle:hover {
background: #091f3f;

5
src/views/sevenLargeScreen/elevatorMonitoring/leftCenter.vue
View File

@ -4,6 +4,7 @@
<div class="time">
<el-date-picker
v-model="rangeTime"
:clearable="false"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
@ -38,7 +39,7 @@ import { getAlarmTypeApi } from "@/api/modules/elevator";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let rangeTime = ref("");
let rangeTime = ref([new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date()] as any);
let listData = ref([] as any);
let alarmTotal = ref("" as any);
// let startTime = ref("" as any);
@ -62,8 +63,10 @@ function timeChange(e: any) {
// startTime.value = e[0];
// endTime.value = e[1];
// }
if (e) {
getAlarmTypeList();
}
}
onMounted(() => {
getAlarmTypeList();
});

7
src/views/sevenLargeScreen/headNoise/centerBottom.vue
View File

@ -6,6 +6,8 @@
<p>{{ item.day }}</p>
<p class="imgBox">
<img :src="item.url" />
<!-- <img v-if="item.wea_img == 'yun'" src="@/assets/images/dustNoise/weatherIcon/yun.png" /> -->
<!-- <img v-else src="@/assets/images/dustNoise/weatherIcon/yu.png" /> -->
</p>
<div class="weather">{{ item.wea }}</div>
<div class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</div>
@ -24,9 +26,10 @@ const weatherList = ref([]);
//获取天气
const loadWeather = async () => {
const res = await getWeatherDataApi({ cityid: "" });
var json = JSON.parse(res.result);
var list = json;
let json = JSON.parse(res.result);
let list = json;
list.forEach((element, index) => {
// 这里的写法线上解析不了待解决
element.url = "src/assets/images/dustNoise/weatherIcon/" + element.wea_img + ".png";
weatherList.value.push(element);
console.log("weatherList ========== ", weatherList.value);

13
src/views/sevenLargeScreen/headNoise/leftBottom.vue
View File

@ -1,6 +1,15 @@
<template>
<Card title="趋势图">
<div class="selectRight">
<el-date-picker
style="width:100%"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-select class="m-2" placeholder="Select" size="small" v-model="receive">
<el-option
v-for="(item, index) in noiseList"
@ -301,8 +310,8 @@ onBeforeUnmount(async () => {
<style lang="scss" scoped>
.selectRight {
position: absolute;
left: 18%;
width: 7%;
left: 12%;
width: 12%;
top: 75%;
z-index: 9;
}

2
src/views/sevenLargeScreen/headNoise/rightBottom.vue
View File

@ -7,7 +7,7 @@
<div class="tabThree">报警类型</div>
</div>
<div class="listBox" ref="scrollRef">
<el-scrollbar style="height:85%">
<el-scrollbar style="height:80%">
<div v-for="item in list" class="listStyle">
<div class="dev">{{ item.deviceName }}</div>
<div class="time">{{ item.tempAlarmTime }}</div>

2
src/views/sevenLargeScreen/laborManagement/circularGraph.vue
View File

@ -338,7 +338,7 @@ const option = reactive({
// backgroundColor: "#0A2E5D",
color: color,
title: {
text: "出勤总人次",
text: "出勤总人数",
top: "125",
textAlign: "center",
left: "49%",

24
src/views/sevenLargeScreen/laborManagement/leftBottom.vue
View File

@ -2,11 +2,20 @@
<div class="leftBottomBox">
<div class="leftEchars">
<Card title="出勤分析">
<!-- <div class="selectRight">
<el-select v-model="value" class="m-2" placeholder="Select" size="small">
<div class="selectRight">
<el-date-picker
style="width: 100%"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-select v-model="value" class="m-2" placeholder="Select" size="small">
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div> -->
</el-select> -->
</div>
<div id="myEchartsBottom" ref="myEchartsBottom" style="width: 100%; height: 100%"></div>
</Card>
@ -37,7 +46,7 @@ import { onMounted, reactive, ref } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const value = ref("周计划13");
const value = ref("周计划14");
const noiseList = [
{
@ -168,7 +177,6 @@ const option = reactive({
],
series: [
{
name: "扬尘",
type: "line",
// smooth: true, //是否平滑
showAllSymbol: true,
@ -267,8 +275,8 @@ onMounted(async () => {
width: 35%;
.selectRight {
position: absolute;
left: 1.5%;
width: 7%;
left: 15%;
width: 9%;
top: 75%;
z-index: 9;
}

1
src/views/sevenLargeScreen/laborManagement/rightBottom.vue
View File

@ -100,7 +100,6 @@ let option = ref({
series: [
{
type: "pictorialBar",
name: "提示框值",
data: [
{
label: {

127
src/views/sevenLargeScreen/laborManagement/rightCenter.vue
View File

@ -3,6 +3,10 @@
<div class="num">{{ max }}</div>
<div class="styleImg"></div>
<div id="echartsRight" style="width: 100%; height: 100%"></div>
<div class="rightHeader">
<div class="day Selected" @click="getNowData">实时</div>
<div class="year Selected" @click="getTodayData">今日</div>
</div>
</Card>
</template>
@ -121,6 +125,7 @@ function _pie3() {
// }
let max = ref(0 as Number);
let projectWorkerTypeData = ref(null as any);
//获取部门管理人员分析数据
// let timer = null
const getProjectWorkerList = async () => {
@ -131,17 +136,15 @@ const getProjectWorkerList = async () => {
let projectWorkerTypeOption: any = [];
if (res.result) {
res.result.projectCompanyWorkTotalList.forEach(item => {
// 只取有数据的工种
if (item.totalPersonNum > 0) {
// 计算工人总和
max.value = max.value + item.totalPersonNum;
// 计算工人总和 在场——实时 出勤——今日
max.value = item.presencePersonNum - 0 + max.value;
dataName.value.push(item.enterpriseName);
projectWorkerTypeOption.push({
value: item.totalPersonNum,
value: item.presencePersonNum,
name: item.enterpriseName
});
}
});
projectWorkerTypeData.value = res.result.projectCompanyWorkTotalList;
// 接口成功获取新值
totalData.value = projectWorkerTypeOption;
trafficWay.value = projectWorkerTypeOption;
@ -252,19 +255,95 @@ function initOption() {
};
}
function getNowData() {
let projectWorkerTypeOption: any = [];
max.value = 0;
projectWorkerTypeData.value.forEach(item => {
if (item.presencePersonNum >= 0) {
// 计算实时总和
max.value = item.presencePersonNum - 0 + max.value;
// 取
projectWorkerTypeOption.push({
value: item.presencePersonNum,
name: item.typeName
});
}
});
console.log("部门管理出勤分析", projectWorkerTypeData);
totalData.value = projectWorkerTypeOption;
trafficWay.value = projectWorkerTypeOption;
// optionData.value = getData(data);
// 初始化option
initOption();
// 处理data
data.value.length = 0;
for (let i = 0; i < trafficWay.value.length; i++) {
data.value.push({
value: trafficWay.value[i].value,
name: trafficWay.value[i].name,
itemStyle: {
normal: {
borderWidth: 0,
shadowBlur: 2,
borderColor: color.value[i],
shadowColor: color.value[i]
}
}
});
}
}
function getTodayData() {
// console.log("部门管理出勤分析", projectWorkerTypeData);
max.value = 0;
let projectWorkerTypeOption: any = [];
projectWorkerTypeData.value.forEach(item => {
if (item.attendancePersonNum >= 0) {
// 计算今日总和
max.value = item.attendancePersonNum - 0 + max.value;
// 取
projectWorkerTypeOption.push({
value: item.attendancePersonNum,
name: item.typeName
});
}
});
totalData.value = projectWorkerTypeOption;
trafficWay.value = projectWorkerTypeOption;
// optionData.value = getData(data);
// 初始化option
initOption();
// 处理data
data.value.length = 0;
for (let i = 0; i < trafficWay.value.length; i++) {
data.value.push({
value: trafficWay.value[i].value,
name: trafficWay.value[i].name,
itemStyle: {
normal: {
borderWidth: 0,
shadowBlur: 2,
borderColor: color.value[i],
shadowColor: color.value[i]
}
}
});
}
}
onMounted(async () => {
await getProjectWorkerList();
draw();
});
onBeforeUnmount(() => {
// clearInterval(timer);
echarts.dispose;
});
// 图表绘制
function draw() {
let echartsTest = echarts.init(document.getElementById("echartsRight"));
echartsTest.setOption(option.value);
console.log('右中出勤绘图数据',option.value);
console.log("右中出勤绘图数据", option.value);
}
</script>
@ -287,4 +366,36 @@ function draw() {
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
background-size: 100% 100%;
}
.rightHeader {
width: 20%;
display: flex;
position: absolute;
z-index: 99;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
left: 80%;
top: 45%;
.Selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
width: 15%;
margin-right: 5%;
margin-left: 55%;
}
.year {
width: 15%;
margin-right: 8%;
}
.Selected:hover {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
</style>

89
src/views/sevenLargeScreen/laborManagement/rightTop.vue
View File

@ -1,8 +1,8 @@
<template>
<Card title="按工种分析">
<div class="rightHeader">
<!-- <div class="day Selected" @click="getNowData">实时</div> -->
<!-- <div class="year Selected" @click="getTodayData">今日</div> -->
<div class="day Selected" @click="getNowData">实时</div>
<div class="year Selected" @click="getTodayData">今日</div>
</div>
<div class="num">{{ max }}</div>
<div id="echartTop" style="width: 100%; height: 100%"></div>
@ -10,8 +10,7 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import Card from "@/components/card.vue";
import * as echarts from "echarts";
import { selectProjectWorkerTypeTotalListApi } from "@/api/modules/labor";
@ -39,21 +38,21 @@ function getData(data: any) {
};
for (let i = 0; i < data.length; i++) {
res.series.push({
name: i,
name: i.name,
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [87 - i * 10 + "%", 82 - i * 10 + "%"],
center: ["25%", "50%"],
label: {
show: true
show: false
},
itemStyle: {
label: {
show: true
show: false
},
labelLine: {
show: true
show: false
},
borderWidth: 10
},
@ -69,9 +68,6 @@ function getData(data: any) {
color: "rgba(9, 26, 61)",
borderWidth: 20
},
tooltip: {
show: false
},
hoverAnimation: false
}
]
@ -86,6 +82,9 @@ let optionData = ref(null as any);
// 初始化option 绘制图表
function initOption() {
option.value = {
tooltip: {
trigger: "item" // 当鼠标悬浮在某个数据项上时触发
},
legend: {
show: true,
itemGap: 20,
@ -106,7 +105,7 @@ function initOption() {
yAxis: [
{
type: "category",
inverse: true,
inverse: false,
axisLine: {
show: false
},
@ -120,18 +119,19 @@ function initOption() {
color: "#EEEEEE",
fontSize: 16
},
show: true
show: false
},
data: optionData.value.yAxis
}
],
xAxis: [
{
show: false
show: true
}
],
series: optionData.value.series
};
draw();
}
// 图表绘制
function draw() {
@ -152,19 +152,19 @@ const getProjectWorkerList = async () => {
let projectWorkerTypeOption: any = [];
if (res.result) {
res.result.forEach(item => {
// 只取有数据的工种
if (item.workerNum > 0) {
// 计算工人总和
max.value = max.value + item.workerNum;
// 所有数据
projectWorkerTypeData.value.push(item);
if (item.presentPersonNum >= 0) {
// 计算实时总和
max.value = item.presentPersonNum - 0 + max.value;
// 取
projectWorkerTypeOption.push({
value: item.workerNum,
value: item.presentPersonNum,
name: item.typeName
});
}
});
// 所有数据
projectWorkerTypeData.value = res.result;
data = projectWorkerTypeOption;
optionData.value = getData(data);
// 初始化option
@ -173,10 +173,53 @@ const getProjectWorkerList = async () => {
}
};
function getNowData() {
max.value = 0;
let projectWorkerTypeOption: any = [];
projectWorkerTypeData.value.forEach(item => {
if (item.presentPersonNum >= 0) {
// 计算实时总和
max.value = item.presentPersonNum - 0 + max.value;
// 取
projectWorkerTypeOption.push({
value: item.presentPersonNum,
name: item.typeName
});
}
});
data = projectWorkerTypeOption;
optionData.value = getData(data);
// 初始化option
initOption();
}
function getTodayData() {
max.value = 0;
let projectWorkerTypeOption: any = [];
projectWorkerTypeData.value.forEach(item => {
if (item.totalPersonNum >= 0) {
// 计算今日总和
max.value = item.totalPersonNum - 0 + max.value;
// 取
projectWorkerTypeOption.push({
value: item.totalPersonNum,
name: item.typeName
});
}
});
data = projectWorkerTypeOption;
optionData.value = getData(data);
// 初始化option
initOption();
}
onMounted(async () => {
// console.log('挂载时',optionData)
await getProjectWorkerList();
draw();
});
onBeforeUnmount(() => {
echarts.dispose;
});
</script>
@ -218,7 +261,7 @@ onMounted(async () => {
color: #fff;
position: absolute;
top: 25%;
left: 78.8%;
left: 79.8%;
z-index: 9;
}
</style>

6
src/views/sevenLargeScreen/towerCraneMonitoring/right.vue
View File

@ -40,7 +40,7 @@
<div class="lineAdata" v-show="dataShow">
<div>荷载比</div>
<!-- 后端没有该字段，待定 -->
<div style="color: #65d7f9">0%</div>
<div style="color: #65d7f9">{{ towerDetail.loadRatio || 0 }}%</div>
</div>
<div class="lineAdata" v-show="dataShow" style="left: 38%">
<div>力矩比</div>
@ -235,6 +235,8 @@ function selectTower(e: any) {
getTowerDetail();
getTowerData();
getDriverInfoList();
getNewestData();
getSelectTower();
}
// 获取塔吊详情
// 进入页面播放ID
@ -292,10 +294,12 @@ const getTowerNumAndAlarmList = async () => {
//获取运行状态
let towerList = ref([] as any);
const getSelectTower = async () => {
towerList.value.length = 0
const res = await getTowerCurrentCountApi({
projectSn: store.sn
});
if (res.result) {
console.log("运行状态",res.result);
res.result.forEach((item: any) => {
if (item.devSn == towerDevSn.value) {
towerList.value.push(item);

24
src/views/sevenLargeScreen/vehicleManagement/topLeft.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="topLeFtBox" v-if="entryCarData">
<div class="topLeFtBox">
<div class="title"><i>入场车辆</i></div>
<div class="content">
<div class="content" v-if="entryCarData">
<div class="leftImg">
<div class="imgDiv">
<!-- 全景图 panoramaUrl -->
@ -37,6 +37,10 @@
</div>
</div>
</div>
<div class="notoDta" v-else>
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</template>
@ -158,6 +162,22 @@ onMounted(async () => {
cursor: default;
}
}
.notoDta {
top: 30%;
width: 12%;
left: 20%;
position: absolute;
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
}
}
::v-deep .el-input__prefix {
color: #4ac0f3;
}

25
src/views/sevenLargeScreen/vehicleManagement/topRight.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="topLeFtBox" v-if="entryCarData">
<div class="topLeFtBox">
<div class="title"><i>出场车辆</i></div>
<div class="content">
<div class="content" v-if="entryCarData">
<div class="leftImg">
<div class="imgDiv">
<!-- 全景图 panoramaUrl -->
@ -37,6 +37,10 @@
</div>
</div>
</div>
<div class="notoDta" v-else>
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</template>
@ -157,6 +161,23 @@ onMounted(async () => {
cursor: default;
}
}
.notoDta {
top: 30%;
width: 12%;
left: 70%;
position: absolute;
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
}
}
::v-deep .el-input__prefix {
color: #4ac0f3;
}