cxc/data_visual
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
cxc
2022-10-20 23:12:29 +08:00
parent 41c1bce422
commit cb3fdc2ce7
11 changed files with 193 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -6,8 +6,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=35a871e5905ecfd749bd998448b9cd03"></script>
src="https://webapi.amap.com/maps?v=1.4.15&key=7891f1238368a895ff1967c79643102d"></script>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>

3
src/App.vue
View File

@ -3,7 +3,8 @@ import Layout from "./views/Layout.vue";
</script>
<template>
<Layout></Layout>
<!-- <Layout></Layout> -->
<RouterView></RouterView>
</template>
<style scoped></style>

126
src/components/AMap.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div id="container"></div>
</template>
<script setup name="Map">
import { onMounted, reactive, ref } from "vue";
const markData = ref([
{
SUPERVISORID: "",
MAP: "40.740616,111.986715",
PROID: "HT6YXM-202210092022100001",
PROTYPE: "一类",
UPDATEDATE: 1665321084000,
SUPERVISOR: "",
DESIGNERID: "",
STCV: 0,
PROOWNER: "业务主管部门",
SURVEY: "",
UPDATEUSER: "user1",
SURVEYID: "",
PROCOST: 0,
CONTRACTOR: "华为技术有限公司1",
PROLEADER: "李四",
FLOORAREA: 0,
CREATEUSER: "user1",
ISEND: 0,
RSTATUS: "0",
PROREP: "高山",
PROSTATUS: 1,
CBDATE: 1664553600000,
CONTRACTORID: "XMQY-20220930000007",
PRONAME: "二车间工地施工",
BINDID: "46796779-32f5-453e-a49a-585aeb4d06a7",
ORGID: "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
PROADDRESS: "内蒙古自治区呼和浩特市赛罕区黄合少镇Z031",
DESIGNER: "",
PROCESSDEFID: "obj_62377f3503a84baba4749eb125b0b8cc",
PROPIC: "",
CREATEDATE: 1665321084000,
CEDATE: 1667232000000,
PROFILE: "已开工",
ID: "705838af-89b5-41da-8bb4-20ccc21e7fb4",
},
]);
const handleMarkerClick = (e) => {
console.log(e);
console.dir(e.target);
// console.log(e.target.getExtData());
};
onMounted(() => {
var map = new AMap.Map("container", {
mapStyle: "amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",
zoom: 24,
resizeEnable: true,
center: [111.986715, 40.740616],
});
for (const mkItem of markData.value) {
const lng = mkItem.MAP.split(",")[1];
const lat = mkItem.MAP.split(",")[0];
const marker = new AMap.Marker({
position: [lng, lat],
map: map,
extData: {
proid: mkItem.PROID,
},
});
marker.on("click", (e) => {
console.log(e.target.getExtData());
parent.postMessage({ proid: e.target.getExtData().proid });
});
}
});
// onMounted(() => {
// const map = new AMap.Map("map-wrap", {
// // mapStyle: "amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",
// // zoom: 24,
// resizeEnable: true,
// center: [111.986715, 40.740616],
// });
// // let layer = new AMap.LabelsLayer({
// // zooms: [3, 20],
// // zIndex: 1000,
// // // 开启标注避让，默认为开启，v1.4.15 新增属性
// // collision: true,
// // // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
// // animation: true,
// // });
// // map.add(layer);
// // for (const mk of markData.value) {
// const mk = markData.value[0];
// const lng = mk.MAP.split(",")[1];
// const lat = mk.MAP.split(",")[0];
// // var icon = new AMap.Icon({
// // size: new AMap.Size(40, 50), // 图标尺寸
// // image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
// // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
// // imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
// // });
// var marker = new AMap.Marker({
// map: map,
// // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
// icon: "/marker.png",
// // position: [lng, lat],
// });
// // const _marker = new AMap.Marker({
// // map: map,
// // // icon: icon,
// // content: `<div style="width:100px;height:100px;background-color:red;">编辑</div>`,
// // // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
// // position: [lng, lat],
// // dragEnable: false,
// // zoomEnable: false,
// // });
// marker.on("click", (e) => {
// console.log(e);
// });
// });
</script>
<style lang="scss" scoped>
#container {
width: 916px;
height: 580px;
}
</style>

14
src/router/index.js
View File

@ -4,9 +4,17 @@ import { createWebHashHistory, createRouter } from "vue-router";
// const About = { template: "<div>About</div>" };
const routes = [
{ path: "/", component: () => import("../views/Overview/index.vue") },
{ path: "/monitor", component: () => import("../views/Monitor/index.vue") },
{ path: "/monitor/detail", component: () => import("../views/Monitor/monitor-detail.vue") },
{ path: "/amap", component: () => import("../components/AMap.vue") },
// { path: "/", component: () => import("../views/Overview/index.vue") },
{
path: "/", component: () => import("../views/Layout.vue"), children: [
{
path: '', component: () => import('../views/Overview/index.vue')
},
{ path: "monitor", component: () => import("../views/Monitor/index.vue") },
{ path: "/monitor/detail", component: () => import("../views/Monitor/monitor-detail.vue") },
]
},
];
// 3. 创建路由实例并传递 `routes` 配置

6
src/views/Layout.vue
View File

@ -11,7 +11,7 @@ import ScaleBox from "../components/ScaleBox.vue";
import ScreenHeader from "../components/ScreenHeader.vue";
</script>
<style lang="scss" scoped>
.screen-layout{
background-image: url(../assets/bg@3x.png);
}
.screen-layout {
background-image: url(../assets/bg@3x.png);
}
</style>

9
src/views/Monitor/camera.vue
View File

@ -38,15 +38,20 @@ const props = defineProps({
type: [String, Number],
default: 420,
},
source: {
type: String,
default:
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
},
});
const { width, height } = toRefs(props);
const { width, height, source } = toRefs(props);
const videoElementRef = ref();
// const playBtnRef = ref();
let flvPlayer = flvjs.createPlayer({
type: "flv",
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
url: source.value,
// url: "http://localhost:8000/lycoris_recoil.flv",
});

6
src/views/Monitor/index.vue
View File

@ -29,6 +29,7 @@
<div class="monitor-list grid grid-cols-2">
<Camera
v-for="(item, index) in localtionList.slice(0, 4)"
:source="item.link"
:key="index"
></Camera>
<!-- <div
@ -63,7 +64,10 @@ import { ref } from "vue";
import Camera from "./camera.vue";
const localtionList = ref([
{ name: "工地大门一" },
{
name: "工地大门一",
link: "http://101.34.251.155:10000/sms/34020000002020000001/flv/hls/34020000001320000001_34020000001320000002.flv",
},
{ name: "工地大门二" },
{ name: "工地大门三" },
{ name: "工地大门四" },

98
src/views/Overview/Map.vue
View File

@ -1,93 +1,13 @@
<template>
<div class="map-wrap">
<div class="pin pin-1" @click="showTip"></div>
<div class="pin pin-2" @click="showTip"></div>
<div class="pin pin-3" @click="showTip"></div>
<div class="tooltip" ref="toolTipRef" v-show="isShowTip">
<div class="close-button absolute top-1 right-1" @click="hideTip"></div>
<div class="title">六院信息化工程</div>
<div>设计单位：碧海蓝天创意设计有限公司</div>
<div>负责人：江海洋／汪东城／简易宏</div>
<div>施工单位：航天六院</div>
<div>工程单位负责人江海洋／汪东城</div>
<div>监理单位：维创监理有限公司</div>
<div>负责人：裴勇／程保国／李珊</div>
</div>
</div>
<iframe src="/#/amap" width="916" height="580" frameborder="0"></iframe>
</template>
<script setup name="Map">
import { nextTick, ref } from "vue";
<script setup>
import { onMounted } from "vue";
const toolTipRef = ref();
const isShowTip = ref(false);
const showTip = (event) => {
// console.log("in");
const parentLeft = event.target.parentNode.getBoundingClientRect().left;
const parentTop = event.target.parentNode.getBoundingClientRect().top;
const x = event.pageX - parentLeft;
const y = event.pageY - parentTop;
isShowTip.value = true;
// nextTick(() => {
if (toolTipRef.value) {
toolTipRef.value.style.left = `${x}px`;
toolTipRef.value.style.top = `${y}px`;
toolTipRef.value.style.zIndex = 9999;
}
// });
// console.log(x, y);
};
const hideTip = () => {
isShowTip.value = false;
if (toolTipRef.value) {
toolTipRef.value.style.zIndex = -1000;
}
};
onMounted(() => {
window.addEventListener("message", (e) => {
console.log(e.data.msg);
console.log("父页面收到了来自iframe的消息");
});
});
</script>
<style lang="scss" scoped>
.map-wrap {
width: 916px;
height: 580px;
background-image: url(../../assets/map.png);
background-size: cover;
position: relative;
.pin {
user-select: none;
background-image: url(../../assets/pin.png);
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
z-index: 99;
cursor: pointer;
}
.pin-1 {
left: 80px;
top: 360px;
}
.pin-2 {
left: 400px;
top: 400px;
}
.pin-3 {
left: 600px;
top: 370px;
}
.tooltip {
text-align: center;
color: white;
position: absolute;
background-image: url(../../assets/group4671@3x.png);
background-size: 100% 100%;
z-index: 99;
width: 266px;
.close-button {
cursor: pointer;
width: 20px;
height: 20px;
background-size: cover;
background-image: url(../../assets/close.png);
}
// height: 210px;
}
}
</style>

21
src/views/Overview/ProjectDetail.vue
View File

@ -19,6 +19,27 @@
import ChartContainer from "@/components/ChartContainer.vue";
import { ref } from "vue";
const resp = {
RESP: "王五",
PROID: "HT6YXM-202209302022090009",
UPDATEDATE: 1664515833000,
PRONAME: "测试办公楼扩建",
TASKTITLE: "材料出库",
RBDATE: "2016-01-01 00:00:00",
BINDID: "3d657d15-2685-4361-b315-95b5dfdaacc9",
ORGID: "8911e732-b42a-4556-853f-ad32761bcbee",
EDATE: "2023-01-30 00:00:00",
BDATE: "2012-03-01 00:00:00",
ANNEX: "",
MILESTONEFLAG: 1,
UPDATEUSER: "system1",
PROCESSDEFID: "obj_c9074b46bca14282a3fd3a7869d18baf",
TASKCONTENT: "将整理好得原材料出库",
CREATEDATE: 1664515833000,
REDATE: "2016-01-01 00:00:00",
TASKID: "RWJD-202209302022090003",
};
const dataList = ref([
{
title: "项目名称",

2
src/views/Overview/QualitySituation.vue
View File

@ -62,7 +62,7 @@ const loadData = async () => {
}
};
onMounted(() => {
loadData();
// loadData();
});
</script>

2
src/views/Overview/SecuritySituation.vue
View File

@ -79,7 +79,7 @@ const loadData = async () => {
]);
}
};
loadData();
// loadData();
</script>
<style lang="scss" scoped>