admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BUG修改

Browse Source
This commit is contained in:
kun 2023-07-15 17:38:42 +08:00
parent cf4a924c57
commit 62f4fb8806
21 changed files with 1074 additions and 499 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -114,5 +114,10 @@
libpath="<%= BASE_URL %>lib/"
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,cesium,mars3d,mars3d-widget"
></script>
<!-- 百度地图引入 -->
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=RvvkaTXFdYPWLIaxRQmW5nzlyARRac9X"
></script>
</body>
</html>

9
src/api/modules/huizhou.ts
View File

@ -163,6 +163,15 @@ export const globalPlanAdd = (params: any) => {
export const globalPlanEdit = (params: any) => {
return http.post(BASEURL + `/project/projectNodePlan/edit`, params);
};
// 全景计划(政务端)------------
// 全景计划新增
export const globalPlanGovermentAdd = (params: any) => {
return http.post(BASEURL + `/gov/projectNodePlan/add`, params);
};
// 全景计划编辑
export const globalPlanGovermentEdit = (params: any) => {
return http.post(BASEURL + `/gov/projectNodePlan/edit`, params);
};
// 全景计划(政务端)------------
// 全景计划分页列表

113
src/views/goverment/huizhou/largeScreen/largeScreenOne/components/BDmaps.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div class="mapBox" id="mapBox" ref="AMapRef"></div>
</template>
<script setup lang="tsx" name="pieChart">
import { ref, onMounted, shallowRef, watch } from "vue";
import initAMap from "@/components/AMap/AMap";
import zhongkai from "../point.js";
import { BAR_MAP } from "element-plus";
const AMapRef = ref();
const areas = zhongkai();
const map = ref<any>({});
const props = defineProps<{
projectData: Array<any>;
}>();
const setProjectData = async () => {
console.log("setProjectData");
if (AMapRef.value) {
addMarker();
}
};
watch(() => props.projectData, setProjectData, { deep: true });
// 调用地图
const mapData = async () => {
map.value = new BMapGL.Map("mapBox"); // 初始化地图
let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
map.value.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
// let convertor = new BMapGL.Convertor();
// let pointArr = [];
// pointArr.push(new BMapGL.Point(116.481181, 39.90923));
// convertor.translate(pointArr, 1, 5, translateCallback); // 中心点坐标转换
map.value.enableScrollWheelZoom(true); // 设置可以鼠标滑动进行缩放
};
// 设置镂空面
// const setHoleArea = () => {
// var bd = new BMapGL.Boundary();
// bd.get("仲恺区", function (rs) {
// // console.log('外轮廓：', rs.boundaries[0])
// // console.log('内镂空：', rs.boundaries[1])
// var hole = new BMapGL.Polygon(rs.boundaries, {
// fillColor: "blue",
// fillOpacity: 0.2
// });
// map.value.addOverlay(hole);
// });
// };
//添加掩膜区域
const createArea = () => {
// 设置掩膜区域坐标点数组
let path = [];
areas.map(item => {
path.push(new BMapGL.Point(item[0], item[1]));
});
// 创建区域掩膜实例
var mapmask = new BMapGL.MapMask(path, {
showRegion: "inside", // 显示区域范围以内部分
isBuildingMask: true, // 楼块是否参与掩膜
isPoiMask: true, // poi标注是否参与掩膜
isMapMask: true // 底图是否参与掩膜
});
// 将区域掩膜添加到地图上，实现掩膜效果
map.value.addOverlay(mapmask);
};
//绘制掩膜多边形区域
const drawArea = () => {
// 设置区域坐标点数组
let path = [];
areas.map(item => {
path.push(new BMapGL.Point(item[0], item[1]));
});
// 创建区域掩膜实例
var polygon = new BMapGL.Polygon(path, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
map.value.addOverlay(polygon);
};
// 地图增加坐标点
const addMarker = () => {
if (!props.projectData.length > 0) {
return;
}
const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; // 图片引入
let myIcon = new BMapGL.Icon(createMarkerImage("marker.png"), new BMapGL.Size(80, 80), {
imageSize: new BMapGL.Size(40, 40),
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
let marker = new BMapGL.Marker(point, { icon: myIcon }); // 标记点
map.value.addOverlay(marker); // 添加标记点
};
// 坐标转换回调
const translateCallback = (data: any) => {
console.log(data, "77777777");
if (data.status === 0) {
let point = new BMapGL.Point(data.points[0].lng, data.points[0].lat); // 点位设置
let marker = new BMapGL.Marker(point);
map.value.centerAndZoom(point, 19); // 创建中心点并设置初始所放值
map.value.addOverlay(marker);
}
};
onMounted(async () => {
console.log("onMounted");
await mapData();
addMarker();
drawArea();
// setHoleArea();
createArea();
});
</script>
<style scoped lang="scss">
.mapBox {
width: 100%;
height: 100%;
}
</style>

113
src/views/goverment/huizhou/largeScreen/largeScreenOne/components/BDmaps3D.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div class="mapBox" id="mapBox" ref="AMapRef"></div>
</template>
<script setup lang="tsx" name="pieChart">
import { ref, onMounted, shallowRef, watch } from "vue";
import initAMap from "@/components/AMap/AMap";
import zhongkai from "../point.js";
import { BAR_MAP } from "element-plus";
const AMapRef = ref();
const areas = zhongkai();
const map = ref<any>({});
const props = defineProps<{
projectData: Array<any>;
}>();
const setProjectData = async () => {
console.log("setProjectData");
if (AMapRef.value) {
addMarker();
}
};
watch(() => props.projectData, setProjectData, { deep: true });
// 调用地图
const mapData = async () => {
map.value = new BMapGL.Map("mapBox"); // 初始化地图
let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
map.value.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
// let convertor = new BMapGL.Convertor();
// let pointArr = [];
// pointArr.push(new BMapGL.Point(116.481181, 39.90923));
// convertor.translate(pointArr, 1, 5, translateCallback); // 中心点坐标转换
map.value.enableScrollWheelZoom(true); // 设置可以鼠标滑动进行缩放
};
// 设置镂空面
// const setHoleArea = () => {
// var bd = new BMapGL.Boundary();
// bd.get("仲恺区", function (rs) {
// // console.log('外轮廓：', rs.boundaries[0])
// // console.log('内镂空：', rs.boundaries[1])
// var hole = new BMapGL.Polygon(rs.boundaries, {
// fillColor: "blue",
// fillOpacity: 0.2
// });
// map.value.addOverlay(hole);
// });
// };
//添加掩膜区域
const createArea = () => {
// 设置掩膜区域坐标点数组
let path = [];
areas.map(item => {
path.push(new BMapGL.Point(item[0], item[1]));
});
// 创建区域掩膜实例
var mapmask = new BMapGL.MapMask(path, {
showRegion: "inside", // 显示区域范围以内部分
isBuildingMask: true, // 楼块是否参与掩膜
isPoiMask: true, // poi标注是否参与掩膜
isMapMask: true // 底图是否参与掩膜
});
// 将区域掩膜添加到地图上，实现掩膜效果
map.value.addOverlay(mapmask);
};
//绘制掩膜多边形区域
const drawArea = () => {
// 设置区域坐标点数组
let path = [];
areas.map(item => {
path.push(new BMapGL.Point(item[0], item[1]));
});
// 创建区域掩膜实例
var polygon = new BMapGL.Polygon(path, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
map.value.addOverlay(polygon);
};
// 地图增加坐标点
const addMarker = () => {
if (!props.projectData.length > 0) {
return;
}
const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; // 图片引入
let myIcon = new BMapGL.Icon(createMarkerImage("marker.png"), new BMapGL.Size(80, 80), {
imageSize: new BMapGL.Size(40, 40),
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
let marker = new BMapGL.Marker(point, { icon: myIcon }); // 标记点
map.value.addOverlay(marker); // 添加标记点
};
// 坐标转换回调
const translateCallback = (data: any) => {
console.log(data, "77777777");
if (data.status === 0) {
let point = new BMapGL.Point(data.points[0].lng, data.points[0].lat); // 点位设置
let marker = new BMapGL.Marker(point);
map.value.centerAndZoom(point, 19); // 创建中心点并设置初始所放值
map.value.addOverlay(marker);
}
};
onMounted(async () => {
console.log("onMounted");
await mapData();
addMarker();
drawArea();
// setHoleArea();
createArea();
});
</script>
<style scoped lang="scss">
.mapBox {
width: 100%;
height: 100%;
}
</style>

224
src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps.vue
View File

@ -36,229 +36,9 @@ const mapData = async () => {
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
];
var zhongkaiqu = [
[
new AMap.LngLat(114.134995, 23.051756),
new AMap.LngLat(114.14564, 23.061068),
new AMap.LngLat(114.15045, 23.066189),
new AMap.LngLat(114.15397, 23.071177),
new AMap.LngLat(114.160225, 23.086802),
new AMap.LngLat(114.164246, 23.089462),
new AMap.LngLat(114.170715, 23.090393),
new AMap.LngLat(114.18236, 23.091324),
new AMap.LngLat(114.19428, 23.094515),
new AMap.LngLat(114.20083, 23.100431),
new AMap.LngLat(114.21031, 23.113728),
new AMap.LngLat(114.22231, 23.11991),
new AMap.LngLat(114.23022, 23.123499),
new AMap.LngLat(114.24287, 23.126158),
new AMap.LngLat(114.24617, 23.128153),
new AMap.LngLat(114.25343, 23.12596),
new AMap.LngLat(114.270676, 23.128618),
new AMap.LngLat(114.277435, 23.124762),
new AMap.LngLat(114.28505, 23.124098),
new AMap.LngLat(114.297264, 23.12576),
new AMap.LngLat(114.30747, 23.132872),
new AMap.LngLat(114.31409, 23.125427),
new AMap.LngLat(114.325584, 23.11745),
new AMap.LngLat(114.32472, 23.112663),
new AMap.LngLat(114.3184, 23.109207),
new AMap.LngLat(114.313225, 23.108675),
new AMap.LngLat(114.308044, 23.105751),
new AMap.LngLat(114.30402, 23.106548),
new AMap.LngLat(114.300285, 23.095644),
new AMap.LngLat(114.31092, 23.092453),
new AMap.LngLat(114.316956, 23.088198),
new AMap.LngLat(114.31897, 23.088198),
new AMap.LngLat(114.32759, 23.086071),
new AMap.LngLat(114.33047, 23.086071),
new AMap.LngLat(114.33133, 23.086603),
new AMap.LngLat(114.33507, 23.08022),
new AMap.LngLat(114.3457, 23.080484),
new AMap.LngLat(114.34484, 23.0749),
new AMap.LngLat(114.34743, 23.073835),
new AMap.LngLat(114.35059, 23.074368),
new AMap.LngLat(114.35404, 23.069313),
new AMap.LngLat(114.359505, 23.063196),
new AMap.LngLat(114.36497, 23.063196),
new AMap.LngLat(114.36726, 23.0616),
new AMap.LngLat(114.368416, 23.059471),
new AMap.LngLat(114.37273, 23.056812),
new AMap.LngLat(114.3733, 23.055481),
new AMap.LngLat(114.376465, 23.056812),
new AMap.LngLat(114.381065, 23.057343),
new AMap.LngLat(114.383934, 23.059206),
new AMap.LngLat(114.385086, 23.062132),
new AMap.LngLat(114.38796, 23.062664),
new AMap.LngLat(114.39026, 23.06426),
new AMap.LngLat(114.39371, 23.061333),
new AMap.LngLat(114.39256, 23.060003),
new AMap.LngLat(114.394, 23.057875),
new AMap.LngLat(114.39658, 23.059206),
new AMap.LngLat(114.40032, 23.060003),
new AMap.LngLat(114.39889, 23.05628),
new AMap.LngLat(114.40061, 23.052555),
new AMap.LngLat(114.40463, 23.052023),
new AMap.LngLat(114.40291, 23.050426),
new AMap.LngLat(114.402336, 23.045904),
new AMap.LngLat(114.40032, 23.049097),
new AMap.LngLat(114.39889, 23.047234),
new AMap.LngLat(114.39486, 23.048298),
new AMap.LngLat(114.394, 23.050426),
new AMap.LngLat(114.39084, 23.048298),
new AMap.LngLat(114.38969, 23.04484),
new AMap.LngLat(114.38796, 23.042978),
new AMap.LngLat(114.39429, 23.04005),
new AMap.LngLat(114.39802, 23.039253),
new AMap.LngLat(114.3986, 23.037922),
new AMap.LngLat(114.39889, 23.034996),
new AMap.LngLat(114.40061, 23.030472),
new AMap.LngLat(114.39946, 23.028343),
new AMap.LngLat(114.401184, 23.02595),
new AMap.LngLat(114.405495, 23.02515),
new AMap.LngLat(114.40607, 23.022757),
new AMap.LngLat(114.4078, 23.021692),
new AMap.LngLat(114.40866, 23.020096),
new AMap.LngLat(114.41297, 23.017435),
new AMap.LngLat(114.414406, 23.016104),
new AMap.LngLat(114.41153, 23.013708),
new AMap.LngLat(114.41383, 23.009186),
new AMap.LngLat(114.410385, 23.006258),
new AMap.LngLat(114.40952, 23.003065),
new AMap.LngLat(114.40463, 23.004927),
new AMap.LngLat(114.40032, 23.006523),
new AMap.LngLat(114.39687, 23.005194),
new AMap.LngLat(114.39026, 23.004662),
new AMap.LngLat(114.38652, 23.005726),
new AMap.LngLat(114.384514, 23.006258),
new AMap.LngLat(114.383934, 23.006258),
new AMap.LngLat(114.38365, 23.009186),
new AMap.LngLat(114.38279, 23.011047),
new AMap.LngLat(114.38279, 23.01504),
new AMap.LngLat(114.38307, 23.020096),
new AMap.LngLat(114.38307, 23.022757),
new AMap.LngLat(114.38336, 23.025417),
new AMap.LngLat(114.37933, 23.024353),
new AMap.LngLat(114.37675, 23.022757),
new AMap.LngLat(114.37474, 23.02382),
new AMap.LngLat(114.37244, 23.022224),
new AMap.LngLat(114.36899, 23.021425),
new AMap.LngLat(114.3664, 23.021692),
new AMap.LngLat(114.36525, 23.019564),
new AMap.LngLat(114.36094, 23.016636),
new AMap.LngLat(114.35864, 23.013176),
new AMap.LngLat(114.35634, 23.009983),
new AMap.LngLat(114.35404, 23.007322),
new AMap.LngLat(114.351456, 23.007055),
new AMap.LngLat(114.346565, 23.005194),
new AMap.LngLat(114.346565, 23.00413),
new AMap.LngLat(114.34312, 23.000935),
new AMap.LngLat(114.342545, 22.998007),
new AMap.LngLat(114.34082, 22.998007),
new AMap.LngLat(114.33996, 22.995878),
new AMap.LngLat(114.33679, 22.994549),
new AMap.LngLat(114.33334, 22.994814),
new AMap.LngLat(114.33162, 22.994814),
new AMap.LngLat(114.329605, 22.995878),
new AMap.LngLat(114.329895, 22.99295),
new AMap.LngLat(114.32817, 22.988958),
new AMap.LngLat(114.32472, 22.990822),
new AMap.LngLat(114.320694, 22.990822),
new AMap.LngLat(114.31868, 22.99029),
new AMap.LngLat(114.31667, 22.987362),
new AMap.LngLat(114.31782, 22.98257),
new AMap.LngLat(114.31897, 22.981506),
new AMap.LngLat(114.32127, 22.983635),
new AMap.LngLat(114.32041, 22.980175),
new AMap.LngLat(114.320694, 22.978844),
new AMap.LngLat(114.32242, 22.978046),
new AMap.LngLat(114.32817, 22.97565),
new AMap.LngLat(114.32817, 22.971924),
new AMap.LngLat(114.33105, 22.96793),
new AMap.LngLat(114.32472, 22.967665),
new AMap.LngLat(114.32357, 22.971924),
new AMap.LngLat(114.321846, 22.972988),
new AMap.LngLat(114.3138, 22.975916),
new AMap.LngLat(114.3051, 22.978512),
new AMap.LngLat(114.29633, 22.978779),
new AMap.LngLat(114.29217, 22.977713),
new AMap.LngLat(114.28742, 22.97585),
new AMap.LngLat(114.283325, 22.973787),
new AMap.LngLat(114.28067, 22.970392),
new AMap.LngLat(114.27758, 22.9666),
new AMap.LngLat(114.27585, 22.965801),
new AMap.LngLat(114.274414, 22.964737),
new AMap.LngLat(114.2724, 22.964737),
new AMap.LngLat(114.271255, 22.961807),
new AMap.LngLat(114.2724, 22.95888),
new AMap.LngLat(114.26953, 22.958347),
new AMap.LngLat(114.26694, 22.95462),
new AMap.LngLat(114.26435, 22.949827),
new AMap.LngLat(114.26062, 22.946367),
new AMap.LngLat(114.25918, 22.942373),
new AMap.LngLat(114.258606, 22.935717),
new AMap.LngLat(114.258316, 22.932789),
new AMap.LngLat(114.25544, 22.92986),
new AMap.LngLat(114.250984, 22.924799),
new AMap.LngLat(114.2428, 22.919075),
new AMap.LngLat(114.23381, 22.921804),
new AMap.LngLat(114.223465, 22.93099),
new AMap.LngLat(114.22059, 22.939777),
new AMap.LngLat(114.22202, 22.9463),
new AMap.LngLat(114.223175, 22.95056),
new AMap.LngLat(114.22461, 22.955751),
new AMap.LngLat(114.22275, 22.957615),
new AMap.LngLat(114.22734, 22.961609),
new AMap.LngLat(114.22756, 22.968197),
new AMap.LngLat(114.22835, 22.971058),
new AMap.LngLat(114.22849, 22.97585),
new AMap.LngLat(114.228424, 22.982306),
new AMap.LngLat(114.22555, 22.986563),
new AMap.LngLat(114.22015, 22.99182),
new AMap.LngLat(114.20888, 22.992685),
new AMap.LngLat(114.20399, 22.994015),
new AMap.LngLat(114.20485, 22.996677),
new AMap.LngLat(114.20255, 22.996943),
new AMap.LngLat(114.19709, 22.996145),
new AMap.LngLat(114.193924, 22.995878),
new AMap.LngLat(114.19041, 22.999006),
new AMap.LngLat(114.186455, 22.99721),
new AMap.LngLat(114.18387, 22.994015),
new AMap.LngLat(114.178116, 22.989758),
new AMap.LngLat(114.17438, 22.988958),
new AMap.LngLat(114.17467, 22.986563),
new AMap.LngLat(114.17208, 22.9847),
new AMap.LngLat(114.169495, 22.98683),
new AMap.LngLat(114.164604, 22.983902),
new AMap.LngLat(114.16259, 22.984434),
new AMap.LngLat(114.16231, 22.987627),
new AMap.LngLat(114.15857, 22.988958),
new AMap.LngLat(114.158, 22.98603),
new AMap.LngLat(114.15541, 22.989758),
new AMap.LngLat(114.14362, 22.992418),
new AMap.LngLat(114.13902, 22.999338),
new AMap.LngLat(114.13615, 22.995613),
new AMap.LngLat(114.130684, 23.000935),
new AMap.LngLat(114.13471, 23.007322),
new AMap.LngLat(114.13413, 23.009718),
new AMap.LngLat(114.139595, 23.011047),
new AMap.LngLat(114.14104, 23.012379),
new AMap.LngLat(114.13902, 23.014507),
new AMap.LngLat(114.138664, 23.016436),
new AMap.LngLat(114.139885, 23.0185),
new AMap.LngLat(114.142685, 23.023888),
new AMap.LngLat(114.14542, 23.02921),
new AMap.LngLat(114.145706, 23.031603),
new AMap.LngLat(114.14542, 23.035461),
new AMap.LngLat(114.14341, 23.038387),
new AMap.LngLat(114.13953, 23.03759),
new AMap.LngLat(114.13263, 23.043444),
new AMap.LngLat(114.13277, 23.04929),
new AMap.LngLat(114.1332, 23.04504)
]
];
let zhongkaiquArea = [areas];
var pathArray = [outer];
pathArray.push.apply(pathArray, zhongkaiqu); // options.areas[0].path 外部区域 遮罩
pathArray.push.apply(pathArray, zhongkaiquArea); // options.areas[0].path 外部区域 遮罩
var polygon = new AMap.Polygon({
path: pathArray,
map: map.value,

11
src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue
View File

@ -6,8 +6,12 @@
</div>
<!-- <Map2D class="mapStyle" v-if="mapValue == 0"></Map2D> -->
<!-- <Map3DStyle class="mapStyle" v-if="mapValue == 1"></Map3DStyle> -->
<maps class="mapStyle" :projectData="projectData" v-if="mapValue == 0"></maps>
<maps3D class="mapStyle" :projectData="projectData" v-if="mapValue == 1"></maps3D>
<!-- 高德地图版本 -->
<!-- <maps class="mapStyle" :projectData="projectData" v-if="mapValue == 0"></maps> -->
<!-- <maps3D class="mapStyle" :projectData="projectData" v-if="mapValue == 1"></maps3D> -->
<!-- 百度地图版本 -->
<BDmaps class="mapStyle" :projectData="projectData" v-if="mapValue == 0"></BDmaps>
<BDmaps3D class="mapStyle" :projectData="projectData" v-if="mapValue == 1"></BDmaps3D>
<!-- <headerScreen class="topHeader"></headerScreen> -->
<leftScreen class="leftScreen"></leftScreen>
<centerScreen class="centerScreen"></centerScreen>
@ -40,6 +44,8 @@ import Map2D from "./components/map2D.vue";
import Map3DStyle from "./components/Map3DStyle.vue";
import maps from "./components/maps.vue";
import maps3D from "./components/maps3D.vue";
import BDmaps from "./components/BDmaps.vue";
import BDmaps3D from "./components/BDmaps3D.vue";
import largeScreenTwo from "../largeScreenTwo/index.vue";
import { GlobalStore } from "@/stores";
import { sendIframeMessage } from "@/utils/util";
@ -104,6 +110,7 @@ onMounted(async () => {
bottom: 20px;
display: flex;
align-items: center;
z-index: 10;
div {
width: 106px;
height: 36px;

550
src/views/goverment/huizhou/progressManagement/GanttchartChart/copyOne.vue
View File

@ -1,90 +1,122 @@
<template>
<div class="gantt-box">
<div class="header">
<div class="left-content">
<div class="item" v-for="(item, index) in headerList" :key="index">
<div class="color-block" :style="{ background: item.color }"></div>
<div class="label">{{ item.label }}</div>
<div class="main-box">
<LeftMenu
v-model="active"
:tabs="['项目名称', '工程名称']"
:records="records"
@change-page="onCurChange"
@search="onSearchInput"
:pageable="pages"
class="leftMenu"
>
<template #default="{ data }">
<div class="leftProject" @click="onSearch(data)">
<span class="projectName">{{
(data as ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
}}</span>
<div class="leftMenu_item">
<div class="leftMenu_item flx-justify-between">
<div style="margin-top: 5px" class="flx-justify-between">
<img style="margin-right: 5px" src="@/assets/images/AIwaring/dustMap.png" alt="" />
<span class="middleSize">{{ data.projectAddress || data.address }}</span>
</div>
<!-- <div>
<img src="@/assets/images/AIwaring/报警.png" alt="" />
<span class="middleSize">今日报警次数：{{ data.todayAlarm }}</span>
</div> -->
</div>
</div>
</div>
</template>
</LeftMenu>
<div class="gantt-box">
<div class="header">
<div class="left-content">
<div class="item" v-for="(item, index) in headerList" :key="index">
<div class="color-block" :style="{ background: item.color }"></div>
<div class="label">{{ item.label }}</div>
</div>
</div>
<div class="right-content">备注：更新（进度填报）内容后该甘特图将自动更新</div>
</div>
<div class="right-content">备注：更新（进度填报）内容后该甘特图将自动更新</div>
</div>
<div class="gantt-chart">
<div class="table" @scroll="handleScroll">
<div class="thead">
<div class="row">
<div class="td">分部分项工程名称</div>
<div class="td">开始日期</div>
<div class="td" style="border-right: 1px solid #0a769a">完成日期</div>
<div class="td" v-for="date in dateList" :key="date">
<div class="date">
<div class="month">
{{ date }}
</div>
<div class="days">
<div class="day" v-for="day in getDays(date)" :key="day.num">
{{ day.num }}
<div class="gantt-chart">
<div class="table" @scroll="handleScroll">
<div class="thead">
<div class="row">
<div class="td">分部分项工程名称</div>
<div class="td">开始日期</div>
<div class="td" style="border-right: 1px solid #0a769a">完成日期</div>
<div class="td" v-for="date in dateList" :key="date">
<div class="date">
<div class="month">
{{ date }}
</div>
<div class="days">
<div class="day" v-for="day in getDays(date)" :key="day.num">
{{ day.num }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
<div class="row">
<div class="td" @click="handleOpen(i)" style="color: #35e5fd">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.endTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
class="grid"
v-for="day in getDays(date)"
:key="'grid' + day.num"
:ref="(el: any) => setItemRef(el, p.pName + '@|@' + day.date)"
></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in p.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
<div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
<div class="td">{{ child.pName }}</div>
<div class="td">{{ child.startTime }}</div>
<div class="td">{{ child.endTime }}</div>
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.name">
<div class="row">
<div class="td" @click="handleOpen(i)" style="color: #35e5fd">{{ p.name }}</div>
<div class="td">{{ p.planStartTime }}</div>
<div class="td">{{ p.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
class="grid"
v-for="day in getDays(date)"
:key="'grid' + day.num"
:ref="(el: any) => setItemRef(el, child.pName + '@|@' + day.date)"
:ref="(el: any) => setItemRef(el, p.name + '@|@' + day.date)"
></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in child.gantts"
v-for="(gantt, index) in p.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
<div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.name">
<div class="td">{{ child.name }}</div>
<div class="td">{{ child.planStartTime }}</div>
<div class="td">{{ child.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
class="grid"
v-for="day in getDays(date)"
:key="'grid' + day.num"
:ref="(el: any) => setItemRef(el, child.name + '@|@' + day.date)"
></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in child.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="tooltips" :style="tooltipsStyle">
<div class="status">已逾期5天</div>
<div class="charger">负责人：史蒂夫</div>
<div class="tooltips" :style="tooltipsStyle">
<div class="status">已逾期5天</div>
<div class="charger">负责人：史蒂夫</div>
</div>
</div>
</div>
</div>
@ -92,73 +124,138 @@
</template>
<script setup lang="tsx" name="ProjectSupervisionRecord">
import { computed, reactive, ref, onMounted } from "vue";
import { computed, reactive, ref, onMounted, onBeforeMount, watch } from "vue";
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
import { bigItemGovermentAll } from "@/api/modules/huizhou";
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
import { getDustprojectPage, getDustengineeringPage, getAIQuestionPage } from "@/api/modules/goverment";
const refChart = ref();
const headerList = reactive([
{ label: "阶段完成", color: "#35e5fd" },
{ label: "任务完成", color: "#4fd389" },
{ label: "未开始", color: "#35e5fd" },
{ label: "进行中", color: "#f1d520" },
{ label: "逾期", color: "#fc6f8e" }
{ label: "已完成", color: "#4fd389" },
{ label: "已逾期", color: "#fc6f8e" }
]);
const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#fc6f8e"]);
const projects = reactive([
{
pName: "抹灰工程1",
startTime: "2023/05/29",
endTime: "2023/07/29",
status: 1,
delay: 0,
gantts: [],
children: [
{
pName: "抹灰工程1-1",
startTime: "2023/05/29",
endTime: "2023/07/29",
status: 1,
delay: 0,
gantts: []
}
]
},
{
pName: "抹灰工程2",
startTime: "2023/06/29",
endTime: "2023/08/29",
status: 1,
delay: 0,
gantts: [],
children: [
{
pName: "抹灰工程2-1",
startTime: "2023/06/29",
endTime: "2023/07/29",
status: 1,
delay: 0,
gantts: []
}
]
},
{
pName: "抹灰工程3",
startTime: "2023/07/29",
endTime: "2023/09/29",
status: 1,
delay: 0,
gantts: [],
children: [
{
pName: "抹灰工程3-1",
startTime: "2023/07/29",
endTime: "2023/10/29",
status: 1,
delay: 0,
gantts: []
}
]
}
]);
const active = ref(0);
const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
const projects = ref([]);
const pages = ref({
pageNo: 1,
pageSize: 7,
total: 0
});
const pageable = ref({
pageNo: 1,
pageSize: 12,
total: 0
});
// 项目或者工程名字
const searchName = ref<string>("");
// {
// pName: "抹灰工程1",
// startTime: "2023/05/29",
// endTime: "2023/07/29",
// status: 1,
// delay: 0,
// gantts: [],
// children: [
// {
// pName: "抹灰工程1-1",
// startTime: "2023/05/29",
// endTime: "2023/07/29",
// status: 1,
// delay: 0,
// gantts: []
// }
// ]
// },
// {
// pName: "抹灰工程2",
// startTime: "2023/06/29",
// endTime: "2023/08/29",
// status: 1,
// delay: 0,
// gantts: [],
// children: [
// {
// pName: "抹灰工程2-1",
// startTime: "2023/06/29",
// endTime: "2023/07/29",
// status: 1,
// delay: 0,
// gantts: []
// }
// ]
// },
// {
// pName: "抹灰工程3",
// startTime: "2023/07/29",
// endTime: "2023/09/29",
// status: 1,
// delay: 0,
// gantts: [],
// children: [
// {
// pName: "抹灰工程3-1",
// startTime: "2023/07/29",
// endTime: "2023/10/29",
// status: 1,
// delay: 0,
// gantts: []
// }
// ]
// }
// ]);
const itemRefs = [];
// 搜索用的项目sn或者工程sn
const searchSn = ref("");
// 页面的项目名称和工程名称的div点击事件
const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
const { result } = await getAIQuestionPage(
active.value === 0
? { projectSn: (params as ResAiProjectPage).projectSn, pageNo: pageable.value.pageNo, pageSize: pageable.value.pageSize }
: {
engineeringSn: (params as ResAiEngineerPage).engineeringSn,
pageNo: pageable.value.pageNo,
pageSize: pageable.value.pageSize
}
);
pageable.value.total = Number(result.total);
active.value === 0
? (searchSn.value = (params as ResAiProjectPage).projectSn)
: (searchSn.value = (params as ResAiEngineerPage).engineeringSn);
active.value === 0
? (searchName.value = (params as ResAiProjectPage).projectName)
: (searchName.value = (params as ResAiEngineerPage).engineeringName);
getDataList();
};
// leftMenu页面的搜索按钮
const onSearchInput = async (params: string) => {
console.log(params);
if (active.value === 0) {
const { result } = await getDustprojectPage({ projectName: params, ...pages.value });
records.value = result.records;
} else {
const { result } = await getDustengineeringPage({ engineeringName: params, ...pages.value });
records.value = result.records;
}
};
// leftMenu页面的分页
const onCurChange = async (params: number) => {
console.log(active.value);
if (active.value === 0) {
const { result } = await getDustprojectPage({ ...pages.value, pageNo: params });
records.value = result.records;
} else {
const { result } = await getDustengineeringPage({ ...pages.value, pageNo: params });
records.value = result.records;
pages.value.total = +result.total;
}
pages.value.total = +res.result.total;
};
const setItemRef = (el: any, va: any) => {
if (el) {
const b = va.split("@|@");
@ -167,7 +264,6 @@ const setItemRef = (el: any, va: any) => {
refData: va,
item: el
};
if (itemRefs.length == 0) {
const itemList = [];
itemList.push(dataItem);
@ -206,16 +302,69 @@ let tooltipsStyle = reactive({
left: 0,
top: 0
});
onMounted(() => {
setGantts();
console.log(getDays("2022/09"), "月日期分布");
const getDataList = async () => {
let requestData = {};
if (active.value === 0) {
requestData.projectSn = searchSn.value;
} else {
requestData.engineeringSn = searchSn.value;
}
const res = await bigItemGovermentAll(requestData);
console.log(res);
if (res) {
const arr = dealArr(res.result);
projects.value = arr;
}
setTimeout(function () {
setGantts();
}, 300);
};
const dealArr = arr => {
arr.map(item => {
item.gantts = [];
item.delay = 0;
if (item.children && item.children.length > 0) {
dealArr(item.children);
}
});
return arr;
};
// 获取项目名称分页
const getProPage = async () => {
const { result } = await getDustprojectPage(pages.value);
records.value = result.records;
records.value.map(item => {
let showGif = false;
item.showGif = showGif;
});
pages.value.total = Number(result.total);
};
// 获取工程名称分页
const getEngPage = async () => {
const { result } = await getDustengineeringPage(pages.value);
records.value = result.records;
records.value.map(item => {
let showGif = false;
item.showGif = showGif;
});
pages.value.total = +result.total;
};
onBeforeMount(() => {});
onMounted(async () => {
getDataList();
await getProPage();
onSearch(records.value[0]);
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
console.log(getDays("2022-09"), "月日期分布");
});
const getGanttStyle = (project: any) => {
console.log("进入 getGanttStyle --- ", project);
let { startTime, endTime, pName } = project;
const startArr = startTime.split("/");
const endArr = endTime.split("/");
let { planStartTime, planEndTime, name } = project;
const startArr = planStartTime.split("-");
const endArr = planEndTime.split("-");
let startRef = null;
let endRef = null;
// 抹灰工程1-1-2022/09/03
@ -225,28 +374,28 @@ const getGanttStyle = (project: any) => {
if (a) {
const day = startArr[2] - 1;
startArr[2] = day < 10 ? "0" + day : day;
startTime = startArr.join("/");
planStartTime = startArr.join("-");
}
const b = !(endArr[2] % 2);
console.log(a, ":!(endArr[2] % 2):");
if (!(endArr[2] % 2)) {
const day = endArr[2] - 1;
endArr[2] = day < 10 ? "0" + day : day;
endTime = endArr.join("/");
planEndTime = endArr.join("-");
}
console.log(dateList, "endTime ------------", itemRefs.length);
console.log(dateList, "planEndTime ------------", itemRefs.length);
for (let index = 0; index < itemRefs.length; index++) {
const data = itemRefs[index];
if (data.name === pName) {
if (data.name === name) {
for (let index = 0; index < data.itemS.length; index++) {
const element = data.itemS[index];
if (element.refData === pName + "@|@" + startTime) {
if (element.refData === name + "@|@" + planStartTime) {
startRef = data.itemS[index].item;
}
if (element.refData === pName + "@|@" + endTime) {
if (element.refData === name + "@|@" + planEndTime) {
endRef = data.itemS[index].item;
}
}
@ -266,9 +415,9 @@ const setGantts = () => {
const configGantts = (projects: any) => {
console.log("进入渲染 setGantts -- ", projects);
projects.map(project => {
let { endTime, pName, gantts } = project;
let { planEndTime, name, gantts } = project;
const gantt = getGanttStyle(project);
gantt.background = colors.value[project.status];
gantt.background = colors.value[project.state - 1];
if (gantts) {
gantts.push(gantt);
@ -276,12 +425,12 @@ const setGantts = () => {
project.gantts = [gantt];
}
if (project.delay) {
const delayStartTime = increaseDate(endTime, 1);
const delayEndTime = increaseDate(endTime, project.delay);
const delayStartTime = increaseDate(planEndTime, 1);
const delayEndTime = increaseDate(planEndTime, project.delay);
const gantt = getGanttStyle({
startTime: delayStartTime,
endTime: delayEndTime,
pName
planStartTime: delayStartTime,
planEndTime: delayEndTime,
name
});
gantt.background = colors.value[3];
gantts.push(gantt);
@ -289,15 +438,15 @@ const setGantts = () => {
project.children && configGantts(project.children);
});
};
configGantts(projects);
configGantts(projects.value);
};
const increaseDate = (date: any, delay: any) => {
const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
return new Date(timestamp).toISOString().replace(/-/g, "/").slice(0, 10);
return new Date(timestamp).toISOString().replace(/-/g, "-").slice(0, 10);
};
const getDays = (date: any) => {
const year = date.split("/")[0];
const month = +date.split("/")[1];
const year = date.split("-")[0];
const month = +date.split("-")[1];
const large = [1, 3, 5, 7, 8, 10, 12];
const normal = [4, 6, 9, 11];
const small = [2];
@ -319,19 +468,22 @@ const getDays = (date: any) => {
.fill(0)
.map((item, index) => {
let num = index + 1;
let fulldate = date + (num < 10 ? "/0" + num : "/" + num);
let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
return { num, date: fulldate };
})
.filter(item => item.num % 2);
if (count === 28) {
days.push({ num: 28, date: date + "/28" });
days.push({ num: 28, date: date + "-28" });
} else if (count === 30) {
days.push({ num: 30, date: date + "/30" });
days.push({ num: 30, date: date + "-30" });
}
return days;
})();
};
const handleOpen = (index: any) => {
console.log(666);
console.log(index);
console.log(openedIndex.value);
if (index === openedIndex.value) {
openedIndex.value = 9999;
} else {
@ -349,6 +501,8 @@ const handleScroll = (e: any) => {
}, 100);
};
const handleHover = (e: any) => {
console.log(666);
console.log(e);
const { clientX, clientY } = e;
const decreaseLeft = clientX - 680;
const decreaseTop = clientY - 200;
@ -359,32 +513,110 @@ const handleHover = (e: any) => {
};
};
const handleLeave = () => {
console.log(777);
tooltipsStyle.display = "none";
};
const dateList = computed(() => {
let dates = [];
const mapDates = data => {
data.map(p => {
dates.push(p.startTime);
dates.push(p.endTime);
dates.push(p.planStartTime);
dates.push(p.planEndTime);
p.children && mapDates(p.children);
});
};
mapDates(projects);
mapDates(projects.value);
dates = dates.map(date => date.slice(0, 7)).sort();
dates = [...new Set(dates)];
console.log("dateList----", dates);
return dates;
});
watch(
() => active.value,
async (value: number) => {
pages.value.pageNo = 1;
pages.value.total = 0;
// console.log(value);
if (value === 0) {
await getProPage();
onSearch(records.value[0]);
} else {
await getEngPage();
onSearch(records.value[0]);
}
},
{
deep: true
}
);
</script>
<style scoped lang="scss">
.leftMenu {
width: 300px;
// width: 290px;
// 页面的项目工程
:deep(.item) {
height: 78px !important;
}
:deep(.content) {
height: calc(100% - 160px) !important;
}
.leftProject {
// padding: 5px 8px;
color: #333333;
.projectName {
display: block;
width: 100%;
overflow: hidden;
// font-weight: 700;
font-family: "siyuan_Medium";
font-size: 20px;
color: #ffffff;
text-overflow: ellipsis;
white-space: nowrap;
}
.leftMenu_item {
display: flex;
justify-content: space-between;
margin-top: 10px;
overflow: hidden;
.middleSize {
display: inline-block;
font-size: 18px;
color: #c4c4c4;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.video {
display: flex;
align-items: center;
img {
width: 14px;
height: 14px;
margin: 0 4px;
}
}
}
.bottom_item {
.bottomSize {
font-size: 18px !important;
color: #666666;
}
}
}
}
.gantt-box {
box-sizing: border-box;
width: 100%px;
width: calc(100% - 320px);
height: 100%;
padding: 18px;
background: #092945;
margin-left: 20px;
border-radius: 8px;
.header {
display: flex;
justify-content: space-between;
@ -410,13 +642,13 @@ const dateList = computed(() => {
.label {
color: #ccc;
font-size: 16px;
font-size: 20px;
}
}
}
.right-content {
font-size: 16px;
font-size: 20px;
line-height: 60px;
color: #ccc;
}
@ -453,7 +685,7 @@ const dateList = computed(() => {
line-height: 42px;
background-color: #092945;
color: #fff;
font-size: 16px;
font-size: 20px;
border-top: 1px solid #0a769a;
.date {
line-height: 21px;
@ -541,7 +773,7 @@ const dateList = computed(() => {
border-right: 1px solid #0a769a;
border-bottom: 1px solid #0a769a;
color: #fff;
font-size: 16px;
font-size: 20px;
border-top: 1px solid #0a769a;
.grids {
@ -566,7 +798,7 @@ const dateList = computed(() => {
&:not(:nth-child(1)) {
width: 100px;
font-size: 14px;
font-size: 18px;
text-align: center;
}
@ -589,7 +821,7 @@ const dateList = computed(() => {
.td {
height: 38px;
line-height: 38px;
font-size: 14px;
font-size: 18px;
}
}
}
@ -601,7 +833,7 @@ const dateList = computed(() => {
padding: 10px;
width: 130px;
height: 65px;
font-size: 16px;
font-size: 20px;
color: #fff;
border-radius: 8px;
background-color: #50a6b3;
@ -613,7 +845,7 @@ const dateList = computed(() => {
height: 20px;
min-width: 60px;
line-height: 20px;
font-size: 12px;
font-size: 16px;
border-radius: 10px;
background-color: #ff6c7f;
}

127
src/views/goverment/huizhou/progressManagement/GanttchartChart/index.vue
View File

@ -44,9 +44,9 @@
<div class="table" @scroll="handleScroll">
<div class="thead">
<div class="row">
<div class="td">分部分项工程名称</div>
<div class="td">开始日期</div>
<div class="td" style="border-right: 1px solid #0a769a">完成日期</div>
<div class="td fixed_1">分部分项工程名称</div>
<div class="td fixed_2">开始日期</div>
<div class="td fixed_3" style="border-right: 1px solid #0a769a">完成日期</div>
<div class="td" v-for="date in dateList" :key="date">
<div class="date">
<div class="month">
@ -64,9 +64,13 @@
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.name">
<div class="row">
<div class="td" @click="handleOpen(i)" style="color: #35e5fd">{{ p.name }}</div>
<div class="td">{{ p.planStartTime }}</div>
<div class="td">{{ p.planEndTime }}</div>
<div class="td fixed_1" @click="handleOpen(i)" style="color: #35e5fd; padding-left: 25px">
<el-icon size="16" v-if="openedIndex === i"><caret-bottom /></el-icon>
<el-icon size="16" v-else><caret-right /></el-icon>
<span>{{ p.name }}</span>
</div>
<div class="td fixed_2">{{ p.planStartTime }}</div>
<div class="td fixed_3">{{ p.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
@ -86,11 +90,11 @@
@mouseleave="handleLeave"
></div>
</div>
<div class="children">
<div class="children" v-if="openedIndex === i">
<div class="row" v-for="child in p.children" :key="'child-' + child.name">
<div class="td">{{ child.name }}</div>
<div class="td">{{ child.planStartTime }}</div>
<div class="td">{{ child.planEndTime }}</div>
<div class="td fixed_1">{{ child.name }}</div>
<div class="td fixed_2">{{ child.planStartTime }}</div>
<div class="td fixed_3">{{ child.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
@ -357,7 +361,6 @@ onMounted(async () => {
onSearch(records.value[0]);
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
searchName.value = (records.value as ResAiProjectPage[])[0].projectName;
console.log(getDays("2022-09"), "月日期分布");
});
const getGanttStyle = (project: any) => {
console.log("进入 getGanttStyle --- ", project);
@ -492,6 +495,7 @@ const handleOpen = (index: any) => {
};
const handleScroll = (e: any) => {
console.log(e);
if (scrollTimer.value) {
clearTimeout(scrollTimer.value);
}
@ -499,6 +503,21 @@ const handleScroll = (e: any) => {
scrollLeft.value = e.target.scrollLeft;
scrollTimer.value = null;
}, 100);
const fixedElement1 = document.querySelectorAll(".fixed_1");
const fixedElement2 = document.querySelectorAll(".fixed_2");
const fixedElement3 = document.querySelectorAll(".fixed_3");
console.log(fixedElement1);
console.log(fixedElement1[0]);
console.log(fixedElement1.length);
for (let i = 0; i < fixedElement1.length; i++) {
fixedElement1[i].style.left = e.target.scrollLeft + "px";
}
for (let i = 0; i < fixedElement2.length; i++) {
fixedElement2[i].style.left = e.target.scrollLeft + "px";
}
for (let i = 0; i < fixedElement3.length; i++) {
fixedElement3[i].style.left = e.target.scrollLeft + "px";
}
};
const handleHover = (e: any) => {
console.log(666);
@ -655,7 +674,7 @@ watch(
}
.gantt-chart {
height: calc(100% - 145px);
overflow: hidden;
.table {
position: relative;
height: 100%;
@ -673,11 +692,30 @@ watch(
}
.thead {
border-left: 1px solid #0a769a;
width: max-content;
// border-left: 1px solid #0a769a;
.row {
display: flex;
position: relative;
.fixed_1,
.fixed_2,
.fixed_3 {
width: 200px;
position: relative;
background: #092945;
z-index: 10;
}
.fixed_1 {
border-left: 1px solid #0a769a;
left: 0;
}
.fixed_2 {
left: 0px;
}
.fixed_3 {
left: 0px;
}
.td {
flex-shrink: 0;
box-sizing: border-box;
@ -705,7 +743,7 @@ watch(
}
&:nth-child(1) {
padding-left: 40px;
padding-left: 30px;
width: 200px;
overflow: hidden;
white-space: nowrap;
@ -725,33 +763,33 @@ watch(
}
.tbody {
border-left: 1px solid #0a769a;
width: max-content;
// border-left: 1px solid #0a769a;
.row-groups {
position: relative;
height: 42px;
&::before {
content: "";
position: absolute;
left: 26px;
top: 16px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #5be1f4;
z-index: 99;
}
// &::before {
// content: "";
// position: absolute;
// left: 26px;
// top: 16px;
// width: 0;
// height: 0;
// border-top: 4px solid transparent;
// border-right: 4px solid transparent;
// border-bottom: 4px solid transparent;
// border-left: 4px solid #5be1f4;
// z-index: 99;
// }
&.open {
height: unset;
&::before {
border-left-color: transparent;
border-top-color: #5be1f4;
}
// &::before {
// border-left-color: transparent;
// border-top-color: #5be1f4;
// }
}
> .row .td:first-child {
@ -763,7 +801,24 @@ watch(
position: relative;
display: flex;
border-top: 1px solid #0a769a;
.fixed_1,
.fixed_2,
.fixed_3 {
width: 200px;
position: relative;
background: #092945;
z-index: 10;
}
.fixed_1 {
left: 0;
border-left: 1px solid #0a769a;
}
.fixed_2 {
left: 0px;
}
.fixed_3 {
left: 0px;
}
.td {
flex-shrink: 0;
box-sizing: border-box;
@ -772,9 +827,9 @@ watch(
background-color: #092945;
border-right: 1px solid #0a769a;
border-bottom: 1px solid #0a769a;
border-top: 1px solid #0a769a;
color: #fff;
font-size: 20px;
border-top: 1px solid #0a769a;
.grids {
height: 100%;

9
src/views/goverment/huizhou/progressManagement/panoramicPlan/index.scss
View File

@ -99,7 +99,14 @@
box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
}
}
:deep() {
.el-form .el-form-item__content .el-range-editor {
width: 300px;
}
.el-range-separator {
color: var(--el-menu-text-color);
}
}
// :deep(.el-dialog__body) {
// padding: 0 0 0 0 !important;
// background-color: pink;

96
src/views/goverment/huizhou/progressManagement/panoramicPlan/index.vue
View File

@ -37,8 +37,15 @@
:isShowSearch="false"
:onReset="true"
>
<template #formButton="scope">
<el-button class="btnStyle" @click="handleAddItem()">新增</el-button>
</template>
<!-- 表格操作 -->
<template #operation="{ row }">
<el-button type="primary" link @click="handleEditItem(row)">
<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
<span>编辑</span>
</el-button>
<el-button type="primary" link @click="handleItemDetail(row)">
<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
<span>查看</span>
@ -68,8 +75,15 @@ import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { globalPlanGovermentList, globalPlanProList, globalPlanEngList } from "@/api/modules/huizhou";
import {
globalPlanGovermentList,
globalPlanProList,
globalPlanEngList,
globalPlanGovermentAdd,
globalPlanGovermentEdit
} from "@/api/modules/huizhou";
import { getDicList } from "@/api/modules/jxjview";
import { ElMessage } from "element-plus";
const pages = ref({
pageNo: 1,
pageSize: 7,
@ -137,19 +151,21 @@ const columns: ColumnProps[] = [
return scoped.row.isSendBack == 1 ? "是" : "否";
}
},
{ prop: "operation", label: "操作", width: 100, fixed: "right" }
{ prop: "operation", label: "操作", width: 160, fixed: "right" }
];
interface formData {
title: string;
uploadTime: string;
remark: string;
videoUrl: string;
}
const formData = ref<formData>({
title: "",
uploadTime: "",
remark: "",
videoUrl: ""
const formData = ref({
nodeNumber: "",
nodeName: "",
type: "",
standardCompleteTime: "",
planCompleteTime: "",
expectCompleteTime: "",
realCompleteTime: "",
state: null,
actualDeviation: "",
phaseName: "",
chargerNumber: "",
chargerName: ""
});
const visible = ref(false);
const title = ref("新增");
@ -182,24 +198,32 @@ const formConfig = {
label: "标准完成时间",
prop: "standardCompleteTime",
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
disabled: true
},
{
label: "计划完成时间",
prop: "planCompleteTime",
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
disabled: true
},
{
label: "预计完成时间",
prop: "expectCompleteTime",
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
disabled: true
},
{
label: "实际完成时间",
prop: "realCompleteTime",
type: "date",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD",
disabled: true
},
{
@ -303,6 +327,38 @@ const formConfig = {
};
// 项目或者工程名字
const searchName = ref<string>("");
// 修改数据按钮
const handleEditItem = async (row: any) => {
console.log(row);
formData.value = reactive({ ...row });
title.value = "编辑";
formConfig.formItemConfig.map(item => {
item.disabled = false;
});
visible.value = true;
};
const handleAddItem = () => {
formData.value = reactive({
nodeNumber: "",
nodeName: "",
type: "",
standardCompleteTime: "",
planCompleteTime: "",
expectCompleteTime: "",
realCompleteTime: "",
state: null,
actualDeviation: "",
phaseName: "",
chargerNumber: "",
chargerName: ""
});
title.value = "新增";
// fileList.value = reactive([]);
formConfig.formItemConfig.map(item => {
item.disabled = false;
});
visible.value = true;
};
const getDicMainList = async () => {
// 获取状态字典
const { result } = await getDicList({ dictType: "node_plan_state" });
@ -403,11 +459,25 @@ const getEngPage = async () => {
const handleItemDetail = async (row: any) => {
console.log(row);
formData.value = reactive({ ...row });
formConfig.formItemConfig.map(item => {
item.disabled = true;
});
title.value = "查看";
visible.value = true;
};
// 新增，编辑数据
const saveItem = async (form: any) => {
form.engineeringSn = searchSn.value;
if (form.id && title.value != "查看") {
// console.log(form.dictCode);
const res = await globalPlanGovermentEdit(form);
proTable.value.getTableList();
ElMessage.success("编辑成功");
} else if (title.value != "查看" && !form.id) {
const res = await globalPlanGovermentAdd(form);
ElMessage.success("新增成功");
proTable.value.getTableList();
}
visible.value = false;
};
watch(

177
src/views/hz-project/progressManagement/ganttChart/index.vue
View File

@ -33,9 +33,13 @@
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.name">
<div class="row">
<div class="td" @click="handleOpen(i)" style="color: #35e5fd">{{ p.name }}</div>
<div class="td">{{ p.planStartTime }}</div>
<div class="td">{{ p.planEndTime }}</div>
<div class="td fixed_1" @click="handleOpen(i)" style="color: #35e5fd; padding-left: 25px">
<el-icon size="16" v-if="openedIndex === i"><caret-bottom /></el-icon>
<el-icon size="16" v-else><caret-right /></el-icon>
<span>{{ p.name }}</span>
</div>
<div class="td fixed_2">{{ p.planStartTime }}</div>
<div class="td fixed_3">{{ p.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
@ -57,9 +61,9 @@
</div>
<div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.name">
<div class="td">{{ child.name }}</div>
<div class="td">{{ child.planStartTime }}</div>
<div class="td">{{ child.planEndTime }}</div>
<div class="td fixed_1">{{ child.name }}</div>
<div class="td fixed_2">{{ child.planStartTime }}</div>
<div class="td fixed_3">{{ child.planEndTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div
@ -373,6 +377,21 @@ const handleScroll = (e: any) => {
scrollLeft.value = e.target.scrollLeft;
scrollTimer.value = null;
}, 100);
const fixedElement1 = document.querySelectorAll(".fixed_1");
const fixedElement2 = document.querySelectorAll(".fixed_2");
const fixedElement3 = document.querySelectorAll(".fixed_3");
console.log(fixedElement1);
console.log(fixedElement1[0]);
console.log(fixedElement1.length);
for (let i = 0; i < fixedElement1.length; i++) {
fixedElement1[i].style.left = e.target.scrollLeft + "px";
}
for (let i = 0; i < fixedElement2.length; i++) {
fixedElement2[i].style.left = e.target.scrollLeft + "px";
}
for (let i = 0; i < fixedElement3.length; i++) {
fixedElement3[i].style.left = e.target.scrollLeft + "px";
}
};
const handleHover = (e: any) => {
const { clientX, clientY } = e;
@ -405,12 +424,70 @@ const dateList = computed(() => {
</script>
<style scoped lang="scss">
.leftMenu {
width: 300px;
// width: 290px;
// 页面的项目工程
:deep(.item) {
height: 78px !important;
}
:deep(.content) {
height: calc(100% - 160px) !important;
}
.leftProject {
// padding: 5px 8px;
color: #333333;
.projectName {
display: block;
width: 100%;
overflow: hidden;
// font-weight: 700;
font-family: "siyuan_Medium";
font-size: 20px;
color: #ffffff;
text-overflow: ellipsis;
white-space: nowrap;
}
.leftMenu_item {
display: flex;
justify-content: space-between;
margin-top: 10px;
overflow: hidden;
.middleSize {
display: inline-block;
font-size: 18px;
color: #c4c4c4;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.video {
display: flex;
align-items: center;
img {
width: 14px;
height: 14px;
margin: 0 4px;
}
}
}
.bottom_item {
.bottomSize {
font-size: 18px !important;
color: #666666;
}
}
}
}
.gantt-box {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 18px;
background: #092945;
margin-left: 20px;
border-radius: 8px;
.header {
display: flex;
justify-content: space-between;
@ -449,7 +526,7 @@ const dateList = computed(() => {
}
.gantt-chart {
height: calc(100% - 145px);
overflow: hidden;
.table {
position: relative;
height: 100%;
@ -467,11 +544,31 @@ const dateList = computed(() => {
}
.thead {
border-left: 1px solid #0a769a;
width: max-content;
min-width: 100%;
// border-left: 1px solid #0a769a;
.row {
display: flex;
position: relative;
.fixed_1,
.fixed_2,
.fixed_3 {
width: 200px;
position: relative;
background: #092945;
z-index: 10;
}
.fixed_1 {
border-left: 1px solid #0a769a;
left: 0;
}
.fixed_2 {
left: 0px;
}
.fixed_3 {
left: 0px;
}
.td {
flex-shrink: 0;
box-sizing: border-box;
@ -499,7 +596,7 @@ const dateList = computed(() => {
}
&:nth-child(1) {
padding-left: 40px;
padding-left: 30px;
width: 200px;
overflow: hidden;
white-space: nowrap;
@ -519,33 +616,34 @@ const dateList = computed(() => {
}
.tbody {
border-left: 1px solid #0a769a;
width: max-content;
min-width: 100%;
// border-left: 1px solid #0a769a;
.row-groups {
position: relative;
height: 42px;
&::before {
content: "";
position: absolute;
left: 26px;
top: 16px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #5be1f4;
z-index: 99;
}
// &::before {
// content: "";
// position: absolute;
// left: 26px;
// top: 16px;
// width: 0;
// height: 0;
// border-top: 4px solid transparent;
// border-right: 4px solid transparent;
// border-bottom: 4px solid transparent;
// border-left: 4px solid #5be1f4;
// z-index: 99;
// }
&.open {
height: unset;
&::before {
border-left-color: transparent;
border-top-color: #5be1f4;
}
// &::before {
// border-left-color: transparent;
// border-top-color: #5be1f4;
// }
}
> .row .td:first-child {
@ -557,7 +655,24 @@ const dateList = computed(() => {
position: relative;
display: flex;
border-top: 1px solid #0a769a;
.fixed_1,
.fixed_2,
.fixed_3 {
width: 200px;
position: relative;
background: #092945;
z-index: 10;
}
.fixed_1 {
left: 0;
border-left: 1px solid #0a769a;
}
.fixed_2 {
left: 0px;
}
.fixed_3 {
left: 0px;
}
.td {
flex-shrink: 0;
box-sizing: border-box;
@ -566,9 +681,9 @@ const dateList = computed(() => {
background-color: #092945;
border-right: 1px solid #0a769a;
border-bottom: 1px solid #0a769a;
border-top: 1px solid #0a769a;
color: #fff;
font-size: 20px;
border-top: 1px solid #0a769a;
.grids {
height: 100%;

10
src/views/hz-project/progressManagement/globalPlanManagement/index.vue
View File

@ -12,14 +12,14 @@
:isShowSearch="false"
:onReset="true"
>
<template #formButton="scope">
<!-- <template #formButton="scope">
<el-button class="btnStyle" @click="handleAddItem()">新增</el-button>
</template>
</template> -->
<template #operation="{ row }">
<el-button type="primary" link @click="handleEditItem(row)">
<!-- <el-button type="primary" link @click="handleEditItem(row)">
<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
<span>编辑</span>
</el-button>
</el-button> -->
<el-button type="primary" link @click="handleItemDetail(row)">
<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
<span>查看</span>
@ -311,7 +311,7 @@ const columns: ColumnProps[] = [
return scoped.row.isSendBack == 1 ? "是" : "否";
}
},
{ prop: "operation", label: "操作", width: 200, fixed: "right" }
{ prop: "operation", label: "操作", width: 100, fixed: "right" }
];
const getDicMainList = async () => {
// 获取学历字典

7
src/views/login/CompanyLogon/basic-form.vue
View File

@ -47,11 +47,10 @@
:on-success="uploadSuccess"
style="display: flex; align-items: center; justify-content: center"
>
<el-button plain color="#47A99D" size="small">选择文件</el-button>
<!-- color="#47A99D" -->
<el-button plain class="btnStyle" size="small">选择文件</el-button>
<template #tip>
<div v-show="!ruleForm.businessLicense" style="margin-left: 10px; margin-top: 10px; color: #aeaeae">
未选择任何文件
</div>
<div v-show="!ruleForm.businessLicense" style="margin-left: 10px; color: #aeaeae">未选择任何文件</div>
</template>
</el-upload>
</el-form-item>

7
src/views/login/CompanyLogon/entrepreneur.scss
View File

@ -11,7 +11,7 @@
> span {
flex-shrink: 0;
font-size: 16px;
color: #333;
color: white;
}
> .unit-checkbox {
@ -70,3 +70,8 @@
align-items: center;
}
}
:deep() {
.el-checkbox__label {
color: white;
}
}

2
src/views/login/CompanyLogon/entrepreneur.vue
View File

@ -19,7 +19,7 @@
</div>
<footer class="footer">
<el-button @click="prev">上一步</el-button>
<el-button class="btnStyle" @click="prev">上一步</el-button>
<el-button @click="onSubmit" type="primary">提交</el-button>
</footer>
</div>

38
src/views/login/CompanyLogon/index.scss
View File

@ -2,8 +2,10 @@
width: 100%;
height: 100vh;
overflow: auto;
background: url("@/assets/images/login/loginBackground.jpg") center center repeat;
background-size: 100% 100%;
background-color: var(--el-menu-bg-color);
overflow-y: auto;
// background: url("@/assets/images/login/loginBackground.jpg") center center repeat;
// background-size: 100% 100%;
// background-attachment: scroll;
.middle {
@ -56,8 +58,7 @@
min-height: 500px;
// margin-top: 10%;
overflow-y: auto;
background-color: #ffffff;
background-color: var(--el-menu-bg-color);
.setps {
width: 64%;
margin: 0 auto;
@ -78,7 +79,34 @@
}
}
}
:deep() {
.el-form-item__label {
color: var(--el-menu-text-color);
}
.el-input__wrapper,
.el-textarea__inner,
.el-input.is-disabled .el-input__wrapper {
background-color: transparent;
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
.el-input__inner,
.el-textarea__inner,
.el-range-input {
color: var(--el-menu-text-color);
font-size: 20px;
}
.el-range-separator {
color: var(--el-menu-text-color);
}
.el-pager li.is-active {
background-color: var(--el-color-primary);
color: var(--el-color-white);
}
.el-table__expand-icon > .el-icon {
font-size: 18px;
color: var(--el-menu-text-color);
}
}
@media screen and (max-width: 640px) {
.container {
padding: 10px;

12
src/views/login/CompanyLogon/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="basic-information flx-column">
<div class="header-lf">
<!-- <div class="header-lf">
<div class="logo">
<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
<!-- <img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
<span>数字化政务监管平台</span> -->
<img src="@/assets/images/logo.svg" alt="logo" />
<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
<span>数字化政务监管平台</span>
<span class="middle">|</span>
<span>企业注册</span>
</div>
@ -13,7 +13,7 @@
<span class="middle">|</span>
<span style="margin-right: 30px">马上登录</span>
</div>
</div>
</div> -->
<div class="container">
<Setps :datas="datas" :active="active" />
@ -36,6 +36,7 @@ import { addCompany } from "@/api/modules/jxjview";
import type { RuleFormData } from "./basic-form.vue";
import type { EnterpriseMains } from "./entrepreneur.vue";
import { ElMessage } from "element-plus";
import { sendIframeMessage } from "@/utils/util";
const router = useRouter();
const datas = reactive(values);
@ -79,6 +80,7 @@ const onSubmit = async () => {
requestData.value = {};
// debugger;
onReset.value[0]?.reset();
await sendIframeMessage({ isClose: true }, 2, undefined);
} catch (err: any) {
// ElMessage.error(err);
// active.value++;

1
src/views/login/CompanyLogon/registered.scss
View File

@ -19,6 +19,7 @@
margin: auto;
background: url("@/assets/images/login/mail11.png") no-repeat center center;
background-size: 100%;
color: white;
.text1 {
position: absolute;
bottom: 21px;

4
src/views/login/CompanyLogon/unit-table.scss
View File

@ -55,10 +55,12 @@ $primary: #409eff;
top: 50%;
left: -124px;
display: flex;
color: #333333;
color: white;
transform: translateY(-50%);
.index {
margin-right: 15px;
color: white;
background-color: #092945;
}
.line {
position: absolute;

7
src/views/login/CompanyLogon/unit-table.vue
View File

@ -13,7 +13,7 @@
</el-form-item>
</el-form>
<div class="position">
<div class="position table-box">
<div class="divide">
<el-tag class="index" type="info">{{ divide.index }}</el-tag>
{{ divide.title }}
@ -23,11 +23,10 @@
<el-table
class="table"
:data="modelValue.licenses"
max-height="175"
height="200"
style="width: 100%"
:header-cell-style="{ backgroundColor: '#D6E7FF', textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
border
>
<el-table-column label="资质编号" prop="licenseCode">
<template #default="{ row }">

51
src/views/login/ProJectForm/index.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="orderSide">
<div class="header-lf">
<!-- <div class="header-lf">
<div class="logo">
<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
<img src="@/assets/images/logo.svg" alt="logo" />
<div>
<!-- <img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
<span>数字化政务监管平台</span> -->
<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
<span>数字化政务监管平台</span>
</div>
<span class="middle">|</span>
@ -16,7 +16,7 @@
<span class="middle">|</span>
<span style="margin-right: 30px">马上登录</span>
</div>
</div>
</div> -->
<div class="centerLogin">
<div class="loginRight">
<!-- <div class="title">项目注册账号申请</div> -->
@ -62,7 +62,9 @@
<el-input v-model="logonForm.email" size="large" placeholder="请输入邮箱" />
</el-form-item>
</el-form>
<div class="logon"><el-button type="primary" :loading="loading" @click="loginGo(loginFormRef)">提交</el-button></div>
<div class="logon">
<el-button type="primary" class="hzStyle" :loading="loading" @click="loginGo(loginFormRef)">提交</el-button>
</div>
</div>
</div>
</div>
@ -77,6 +79,7 @@ import AMap from "@/components/AMap/AMap.vue";
import { ElMessage, FormInstance, ElForm, FormRules } from "element-plus";
// import router from "@/routers";
import { LOGIN_URL } from "@/config/config";
import { sendIframeMessage } from "@/utils/util";
const router = useRouter();
@ -175,6 +178,7 @@ const loginGo = async (formEl: FormInstance | undefined) => {
onMounted(async () => {
const res = await goverMentlist();
zhujian.value = res.result;
await sendIframeMessage({ isClose: true }, 2, undefined);
});
</script>
@ -182,8 +186,9 @@ onMounted(async () => {
.orderSide {
width: 100vw;
height: 100vh;
background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
background-size: 100% 100%;
// background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
// background-size: 100% 100%;
background-color: var(--el-menu-bg-color);
text-align: center;
position: relative;
.header-lf {
@ -237,7 +242,7 @@ onMounted(async () => {
display: flex;
width: 60%;
// height: 70%;
background-color: #fff;
background-color: var(--el-menu-bg-color);
position: absolute;
top: 50%;
left: 50%;
@ -269,4 +274,32 @@ onMounted(async () => {
height: 36px;
}
}
:deep() {
.el-form-item__label {
color: var(--el-menu-text-color);
}
.el-input__wrapper,
.el-textarea__inner,
.el-input.is-disabled .el-input__wrapper {
background-color: transparent;
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
.el-input__inner,
.el-textarea__inner,
.el-range-input {
color: var(--el-menu-text-color);
font-size: 20px;
}
.el-range-separator {
color: var(--el-menu-text-color);
}
.el-pager li.is-active {
background-color: var(--el-color-primary);
color: var(--el-color-white);
}
.el-table__expand-icon > .el-icon {
font-size: 18px;
color: var(--el-menu-text-color);
}
}
</style>