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

fix: 编写龙门吊页面

Browse Source
This commit is contained in:
cjp 2023-10-13 17:50:08 +08:00
parent f0aba8f3cb
commit d97289697f
10 changed files with 323 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/modules/aIEarlyWarn.ts Normal file
View File

@ -0,0 +1,3 @@
// AI预警接口API
import http from "@/api";
const BASEURL = import.meta.env.VITE_API_URL;

3
src/api/modules/smartBuild.ts Normal file
View File

@ -0,0 +1,3 @@
// 智慧党建接口API
import http from "@/api";
const BASEURL = import.meta.env.VITE_API_URL;

3
src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
View File

@ -72,7 +72,6 @@ import { reactive, ref, onMounted } from "vue";
import textIcon from "@/assets/images/vehicleManagement/car.png";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let showDialog = ref(false as any);
const list = reactive([
{
id: 1,
@ -153,7 +152,7 @@ const list = reactive([
warnTime: "2023-01-01 12:00:00"
}
]);
let showDialog = ref(false as any);
function handleClick(event: any) {
console.log("点击", event.target.className);
if (event.target.className == "list-detail") {

18
src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue
View File

@ -18,13 +18,20 @@ type Props = {
yData?: any; // 传入y轴对应的数据
lineId?: any; // 传入折线图dom元素对应的id
lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑)
grid?: any; //折线图的上下左右偏移量
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
yData: [10, 5, 20, 25, 15, 25, 12],
lineId: "waterShortTerm",
lineSmooth: 0
lineSmooth: 0,
grid: {
top: "20%",
left: "6%",
right: "4%",
bottom: "10%"
}
// num: () => [12, 13, 14] // 复杂数据类型使用函数方式
});
@ -58,13 +65,7 @@ function initOption() {
tooltip: {
trigger: "axis"
},
grid: {
top: "20%",
left: "6%",
right: "4%",
bottom: "10%"
// containLabel: true
},
grid: props.grid,
xAxis: [
{
type: "category",
@ -219,5 +220,6 @@ onBeforeUnmount(async () => {
width: 100%;
height: 100%;
position: relative;
// transform: rotate(90deg);
}
</style>

6
src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue
View File

@ -33,11 +33,11 @@ const store = GlobalStore();
// x轴
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
let yData = ref([10, 5, 20, 35, 25, 15, 12] as any);
// 图表数据项
let option = ref(null as any);
// let option = ref(null as any);
// 选中
let checked = ref(1);

11
src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue
View File

@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
lineId: "waterShortTerm",
lineSmooth: 0,
grid: {
top: "20%",
top: "15%",
left: "10%",
right: "10%",
bottom: "10%"
@ -65,12 +65,7 @@ function initOption() {
tooltip: {
trigger: "axis"
},
grid: {
top: "20%",
left: "10%",
right: "10%",
bottom: "10%"
},
grid: props.grid,
xAxis: [
{
type: "category",
@ -214,7 +209,7 @@ onMounted(async () => {
drawChart();
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
mitts.off("devSn");
});

28
src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue
View File

@ -10,13 +10,14 @@
</div>
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
-->
<greenLineEchart
<blueLineEchart
:xData="xData"
:yData="yData"
:lineId="'gantryWorkTime'"
:lineSmooth="0"
:grid="lineGrid"
style="width: 100%; height: 100%"
></greenLineEchart>
></blueLineEchart>
</div>
</div>
</Card>
@ -26,18 +27,25 @@
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
// 图表数据项
let option = ref(null as any);
// let option = ref(null as any);
// 图标偏移度
let lineGrid = ref({
top: "20%",
left: "10%",
right: "8%",
bottom: "10%"
});
// 选中
let checked = ref(1);
@ -69,9 +77,11 @@ function getRecentSevenDays() {
for (let i = 0; i < 7; i++) {
const date = new Date(today.getTime() - i * millisecondsPerDay);
// 获取年
const year = today.getFullYear();
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
dates.unshift(`${month}-${day}`);
dates.unshift(`${year}-${month}-${day}`);
}
return dates;
}
@ -94,7 +104,7 @@ function getPassedDaysOfMonth() {
while (currentDate <= today) {
const month = currentDate.getMonth() + 1;
const day = currentDate.getDate();
dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
dates.push(`${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
currentDate.setDate(currentDate.getDate() + 1);
}
@ -102,7 +112,9 @@ function getPassedDaysOfMonth() {
return dates;
}
onMounted(async () => {});
onMounted(async () => {
getWeekData(1);
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {

132
src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue
View File

@ -10,13 +10,14 @@
</div> -->
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
-->
<greenLineEchart
<blueLineEchart
:xData="xData"
:yData="yData"
:lineId="'gantryWindSpeed'"
:lineSmooth="0"
:grid="lineGrid"
style="width: 100%; height: 100%"
></greenLineEchart>
></blueLineEchart>
</div>
</div>
</Card>
@ -26,87 +27,94 @@
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
let xData = ref(["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 25, 20, 15, 25, 12] as any);
// 图表数据项
let option = ref(null as any);
// let option = ref(null as any);
// 图标偏移度
let lineGrid = ref({
top: "10%",
left: "10%",
right: "8%",
bottom: "10%"
});
// 选中
let checked = ref(1);
function getWeekData(type: any) {
checked.value = type;
let currentWeek = getRecentSevenDays();
// console.log(currentWeek, "近七天");
// 模拟数据改变
xData.value = currentWeek;
yData.value = [20, 15, 25, 15, 25, 35, 12];
}
function getMonthData(type: any) {
checked.value = type;
let currentWeek = getPassedDaysOfMonth();
// console.log(currentWeek.length, "本月");
let testyData: any = [];
for (let i = 0; i < currentWeek.length; i++) {
testyData.push((i % 2) + 10);
}
xData.value = currentWeek;
yData.value = testyData;
}
// let checked = ref(1);
// function getWeekData(type: any) {
// checked.value = type;
// let currentWeek = getRecentSevenDays();
// // console.log(currentWeek, "近七天");
// // 模拟数据改变
// xData.value = currentWeek;
// yData.value = [20, 15, 25, 15, 25, 35, 12];
// }
// function getMonthData(type: any) {
// checked.value = type;
// let currentWeek = getPassedDaysOfMonth();
// // console.log(currentWeek.length, "本月");
// let testyData: any = [];
// for (let i = 0; i < currentWeek.length; i++) {
// testyData.push((i % 2) + 10);
// }
// xData.value = currentWeek;
// yData.value = testyData;
// }
//获取近七天的日期
function getRecentSevenDays() {
const dates: any = [];
const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
const today = new Date(); // 当前日期
// //获取近七天的日期
// function getRecentSevenDays() {
// const dates: any = [];
// const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
// const today = new Date(); // 当前日期
for (let i = 0; i < 7; i++) {
const date = new Date(today.getTime() - i * millisecondsPerDay);
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
dates.unshift(`${month}-${day}`);
}
return dates;
}
// for (let i = 0; i < 7; i++) {
// const date = new Date(today.getTime() - i * millisecondsPerDay);
// const month = ("0" + (date.getMonth() + 1)).slice(-2);
// const day = ("0" + date.getDate()).slice(-2);
// dates.unshift(`${month}-${day}`);
// }
// return dates;
// }
// 获取本月到今天的日期
function getPassedDaysOfMonth() {
// 存放数据的数组
const dates: any = [];
// 获取当前时间的时间戳
const today = new Date();
// 获取年
const year = today.getFullYear();
// 获取月
const month = today.getMonth();
// 获取当前月份第一天的时间戳
const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
// // 获取本月到今天的日期
// function getPassedDaysOfMonth() {
// // 存放数据的数组
// const dates: any = [];
// // 获取当前时间的时间戳
// const today = new Date();
// // 获取年
// const year = today.getFullYear();
// // 获取月
// const month = today.getMonth();
// // 获取当前月份第一天的时间戳
// const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
let currentDate = startDate;
// 遍历从这个月第一天到现在的日期数
while (currentDate <= today) {
const month = currentDate.getMonth() + 1;
const day = currentDate.getDate();
dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
// let currentDate = startDate;
// // 遍历从这个月第一天到现在的日期数
// while (currentDate <= today) {
// const month = currentDate.getMonth() + 1;
// const day = currentDate.getDate();
// dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
currentDate.setDate(currentDate.getDate() + 1);
}
// currentDate.setDate(currentDate.getDate() + 1);
// }
return dates;
}
// return dates;
// }
onMounted(async () => {});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
mitts.off("devSn");
// mitts.off("devSn");
});
</script>

164
src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue
View File

@ -1,7 +1,7 @@
<template>
<Card title="实时监测">
<div class="gantry-list">
<div class="people-message">人 员 信 息</div>
<div class="people-message" @click="showDialog = !showDialog">人 员 信 息</div>
<div class="gantry-icon"></div>
<div class="gantry-data">
<div class="box-contain">
@ -27,6 +27,44 @@
<div class="number">34<span>m</span></div>
</div>
</div>
<div class="list-detail" v-if="showDialog" @click="handleClick">
<div class="dialog-content">
<div class="dialog-title"><i>人员详情</i></div>
<div class="dialog-detail">
<div class="detail-top">
<div class="top-left">
<img src="@/assets/images/comprehensiveManage/project3.png" />
</div>
<div class="top-right">
<div style="margin-top: 2%"><span style="font-size: 20px; color: #65d7f9; margin-right: 5%">陈建 </span> 男</div>
<div style="margin-top: 18%">佳信捷软件_451班组</div>
<div style="margin-top: 18%">13324904501</div>
</div>
</div>
<div class="detail-text">
<div class="text-box">
<div class="type">身份证</div>
<div class="text">******************</div>
</div>
<div class="text-box" style="margin-top: 5%">
<div class="type">班组</div>
<div class="text">佳信捷软件_451班组</div>
</div>
<div class="text-box" style="margin-top: 5%">
<div class="type">工种</div>
<div class="text">窑炉修筑工</div>
</div>
<div class="text-box" style="margin-top: 5%">
<div class="type">参见单位</div>
<div class="text">中建四局</div>
</div>
</div>
</div>
<div class="close-icon" @click="showDialog = false">
<el-icon><Close /></el-icon>
</div>
</div>
</div>
</div>
</Card>
</template>
@ -34,6 +72,13 @@
<script lang="ts" setup>
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
let showDialog = ref(false as any);
function handleClick(event: any) {
console.log("点击", event.target.className);
if (event.target.className == "list-detail") {
showDialog.value = false;
}
}
onMounted(async () => {});
</script>
@ -47,6 +92,7 @@ onMounted(async () => {});
width: 3%;
left: 0%;
top: 10%;
cursor: pointer;
font-size: 12px;
padding-left: 5px;
padding-bottom: 1%;
@ -115,4 +161,120 @@ onMounted(async () => {});
}
}
}
.list-detail {
position: absolute;
width: 100%;
height: 100%;
.dialog-content {
position: absolute;
box-sizing: border-box;
padding: 2%;
left: 5%;
top: 5%;
width: 36%;
height: 92%;
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
background-size: 100% 100%;
z-index: 21;
.dialog-icon {
position: absolute;
left: 4%;
top: 4%;
width: 7%;
height: 7%;
img {
width: 100%;
height: 100%;
}
}
.pic-icon {
position: absolute;
left: 3%;
top: 40%;
width: 7%;
height: 7%;
img {
width: 100%;
height: 100%;
}
}
.close-icon {
position: absolute;
right: 3%;
top: 3%;
cursor: pointer;
color: #ffffff;
font-size: calc(100vw * 18 / 1920);
}
.dialog-title {
color: #ffffff;
font-weight: bold;
margin-left: 3%;
font-size: calc(100vw * 18 / 1920);
font-family: "OPPOSans-Bold";
}
.dialog-detail {
width: 100%;
height: 100%;
margin-top: 8%;
.detail-top {
height: 38%;
display: flex;
.top-left {
width: 35%;
height: 90%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.top-right {
margin-left: 6%;
font-size: 12px;
color: #fff;
}
}
.detail-text {
width: 100%;
height: 100%;
margin-top: 3%;
.text-box {
height: 8%;
display: flex;
align-items: center;
background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
background-size: 100% 100%;
.type {
width: 25%;
margin-left: 4%;
color: #a1accb;
font-size: calc(100vw * 12 / 1920);
}
.text {
font-size: calc(100vw * 12 / 1920);
color: #ffffff;
}
}
}
}
.pic-title {
color: #ffffff;
font-weight: bold;
font-size: calc(100vw * 18 / 1920);
font-family: "OPPOSans-Bold";
margin-top: 5%;
margin-left: 8%;
}
.big-pic {
width: 100%;
height: 50%;
margin-top: 10%;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>

51
src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue
View File

@ -1,6 +1,10 @@
<template>
<Card title="作业统计">
<div class="gantry-top-left">
<div class="select-right">
<div class="today selected" @click="tabChange(1)" :class="checked == 1 ? 'active' : ''">今日</div>
<div class="total selected" @click="tabChange(2)" :class="checked == 2 ? 'active' : ''">累计</div>
</div>
<div class="right-box">
<div class="yesterday-use">
<div class="text">工作时长(小时)</div>
@ -32,6 +36,12 @@
<script lang="ts" setup>
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
// 选中
let checked = ref(1);
function tabChange(type: any) {
checked.value = type;
}
onMounted(async () => {});
</script>
@ -39,6 +49,39 @@ onMounted(async () => {});
.gantry-top-left {
width: 100%;
height: 100%;
position: relative;
.select-right {
width: 25%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: 0%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.today {
width: 40%;
margin-right: 5%;
z-index: 99;
}
.total {
width: 40%;
margin-right: 5%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
.right-box {
width: 100%;
height: 100%;
@ -57,7 +100,7 @@ onMounted(async () => {});
.text {
font-size: 16px;
color: #65d7f9;
margin-top: 5%;
margin-top: 10%;
}
.num {
transform: skew(-5deg);
@ -80,7 +123,7 @@ onMounted(async () => {});
.text {
font-size: 16px;
color: #65d7f9;
margin-top: 5%;
margin-top: 10%;
}
.num {
transform: skew(-5deg);
@ -104,7 +147,7 @@ onMounted(async () => {});
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #ffffff;
margin-top: 5%;
margin-top: 10%;
}
.num {
transform: skew(-5deg);
@ -123,7 +166,7 @@ onMounted(async () => {});
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
background-size: 100% 100%;
.text {
margin-top: 5%;
margin-top: 10%;
font-size: 16px;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;