Skip to content

H
holo-web
Commit 17f9d32c authored by ninglx's avatar ninglx
Browse files
Options

创建data-vision-new子项目 json参数化配置地图

parent 6bd5d21f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6932 additions and 0 deletions
wj-data-vision-new/.gitignore 0 → 100644
View file @ 17f9d32c
.DS_Store
node_modules/
dist/
../.idea/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
yarn.lock
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
wj-data-vision-new/babel.config.js 0 → 100644
View file @ 17f9d32c
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
};
wj-data-vision-new/package.json 0 → 100644
View file @ 17f9d32c
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-plugin-router": "^4.5.7",
"@vue/cli-plugin-vuex": "^4.5.7",
"@vue/cli-service": "^4.5.7",
"chalk": "^3.0.0",
"commander": "^4.1.1",
"core-js": "^3.6.5",
"fs-extra": "^8.1.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"postcss-px-to-viewport": "^1.1.1",
"shelljs": "^0.8.4",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"Chrome 49"
],
"dependencies": {
"axios": "^1.5.0",
"codemirror": "^5.46.0",
"compression-webpack-plugin": "^3.1.0",
"driver.js": "^0.9.8",
"highcharts": "^10.3.3",
"highcharts-vue": "^1.4.0",
"js-cookie": "^3.0.0",
"js-export-excel": "^1.1.4",
"sortablejs": "^1.13.0",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.4.6",
"vue-seamless-scroll": "^1.1.23",
"vuedraggable": "^2.24.3",
"vuex": "^3.5.1"
}
}
wj-data-vision-new/public/index.html 0 → 100644
View file @ 17f9d32c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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 %>logo.png" />
<title></title>
<link href="/cdn/libs/element-ui/element-ui.css" rel="stylesheet" />
<link href="/cdn/font/font.css" rel="stylesheet" />
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet" />
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet" />
<link href="/cdn/libs/Cesium/Widgets/widgets.css" rel="stylesheet" />
<link
rel="stylesheet"
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/css"
/>
<script src="/cdn/libs/vue/vue.js"></script>
<script src="/cdn/libs/element-ui/element-ui.js"></script>
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<script src="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.js"></script>
<script
src="/cdn/libs/mapbox-gl/mapbox-gl.js"
type="text/javascript"
></script>
<script
src="/cdn/libs/threebox/threebox.js"
type="text/javascript"
></script>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
<script src="/cdn/libs/cesium/Cesium.js" type="text/javascript"></script>
<script
src="/cdn/libs/reconnecting-websocket/reconnecting-websocket.js"
type="text/javascript"
></script>
<style>
#app {
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
.full-w-h{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
wj-data-vision-new/src/App.vue 0 → 100644
View file @ 17f9d32c
<template>
<div class="full-w full-h situation-main">
<vision-header/>
<router-view class="router-view-main" />
</div>
</template>
<script>
import VisionHeader from "./components/visionHeader.vue";
export default {
components: { VisionHeader },
data() {
return {
showEditor: false,
};
},
computed: {},
created() {},
mounted() {
window.onkeydown = () => {
// alt + e 编辑
if (event.ctrlKey && event.altKey && event.keyCode === 69) {
this.$store.commit("troggleEditorStatus");
}
// alt + 1
if (event.altKey && event.keyCode === 49) {
this.$router.push("/home");
}
// alt + 2
if (event.altKey && event.keyCode === 50) {
this.$router.push("/situation1");
}
// alt + 3
if (event.altKey && event.keyCode === 51) {
this.$router.push("/situation2");
}
// alt + 4
if (event.altKey && event.keyCode === 52) {
this.$router.push("/situation3");
}
};
},
methods: {},
};
</script>
<style lang="less" scoped>
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
width: 100%;
}
.full-h {
height: 100vh;
}
.full-w {
width: 100%;
}
.situation-main {
position: relative;
.router-view-main {
height: 100%;
}
}
</style>
wj-data-vision-new/src/components/cameraVideo.vue 0 → 100644
View file @ 17f9d32c
<template>
<div class="cameraVideo">
<div class="loading-mask" v-show="cameraLoading">
<div style="position: relative">
<div class="el-icon-loading"></div>
<div>加载中...</div>
</div>
</div>
<!-- <div class="videoControl" @loadstart="loadstart($event)"-->
<!-- @canplay="canplay($event)" :id="videoData"></div>-->
<video
@loadstart="loadstart($event)"
@canplay="canplay($event)"
class="videoControl"
muted
:id="videoData"
ref="myCameraVideoPlayer"
></video>
</div>
</template>
<script>
export default {
name: "cameraVideo",
props: ["videoData"],
watch: {},
methods: {
canplay() {
this.cameraLoading = false;
this.$emit("vidCanplay", this.videoData);
},
loadstart() {
// this.cameraLoading = true;
},
loadVideo() {
console.log("video init...", this.videoData);
// let el = document.getElementById(this.videoData)
this.player && this.destroy();
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: this.videoData,
hasAudio: false,
hasVideo: true,
cors: true, // 是否跨域
});
// console.log('el', el, this.player)
let el = document.getElementById(this.videoData);
this.player?.attachMediaElement(el);
this.player?.load();
this.bindEvents();
if (this.player) {
this.player?.play();
}
},
bindEvents() {
//视频出错后销毁重新创建
this.player.on(flvjs.Events.ERROR, this.handleErr);
this.player.on(flvjs.Events.LOADING_COMPLETE, this.handleErr);
},
handleErr() {
if (this.player) {
try {
this.player?.pause();
this.player?.unload();
this.player?.detachMediaElement();
this.player?.destroy();
this.player = null;
} catch (error) {}
this.$nextTick(() => {
this.loadVideo();
});
}
},
pause() {
this.player && this.player?.pause();
},
destroy() {
if (this.player) {
this.player?.pause();
this.player?.unload();
this.player?.detachMediaElement();
this.player?.destroy();
this.player = null;
}
if (this.interval) {
clearInterval(this.interval);
}
},
},
data() {
return {
cameraLoading: true,
supported: false,
player: null,
interval: null,
};
},
mounted() {
// console.log('videoData', this.videoData);
this.player = null;
this.supported = flvjs.isSupported();
this.$nextTick(() => {
this.loadVideo();
});
this.interval = setInterval(() => {
if (this.cameraLoading) {
this.handleErr();
} else {
clearInterval(this.interval);
}
}, 5000);
},
beforeDestroy() {
this.destroy();
},
};
</script>
<style lang="less" scoped>
.loading-mask {
border-radius: 4px;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(8, 22, 35, 0.7);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color: #fcfcfc;
}
.cameraVideo {
position: relative;
.videoControl {
// display: none;
position: absolute;
height: 100%;
width: 100%;
}
// .vIsVisible {
// display: unset;
// }
}
::v-deep .el-icon-loading {
position: absolute;
left: 30%;
top: -14px;
transform: translateX(-50%);
}
</style>
wj-data-vision-new/src/components/cesiumMap.vue 0 → 100644
View file @ 17f9d32c
<template>
<div class="track3D-container" :id="cId"></div>
</template>
<script>
let viewer = null;
export default {
name: "cesiumMap",
props: ["cId", "loadTileset"],
components: {},
watch: {},
data() {
return {};
},
computed: {},
methods: {
loadMap() {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1OWE5YzQ2ZS05NDYzLTQ3NTEtYTZhOC0yNDhmMmIyY2I5ZTAiLCJpZCI6MTA0MTAyLCJpYXQiOjE2ODU2MTMxOTB9.JxmgXnf8_-V1eM9we2W8VfiP37vyGMJJDSWF4Br6hKU";
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZWVjYmI0Mi0wMzk2LTQ2YjMtYjYwOC04MmMyNzEyYjJiOTMiLCJpZCI6MTA0MTAyLCJpYXQiOjE2NjAwMDQ5MjR9.YwCrjFrZrgYYxxxqAXlDWB_eQdmPh8kgj8ZRfLcEOT4';
viewer = new Cesium.Viewer(this.cId, {
targetFrameRate: 30, // 目标帧率
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
// infoBox: true, // 隐藏点击要素之后显示的信息窗口
infoBox: false, // 隐藏点击要素之后显示的信息窗口
sceneModePicker: false, // 隐藏场景模式选择控件
selectionIndicator: true, // 显示实体对象选择框，默认true
timeline: true, // 时间线控件
navigationHelpButton: false, // 隐藏帮助按钮
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
shouldAnimate: true, // 开启动画自动播放
sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
// msaaSamples: 0,
imageryProvider: false,
// 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
// maximumRenderTimeChange: Infinity,
// shadows: true, // 阴影
// imageryProvider: new Cesium.UrlTemplateImageryProvider({
// url: cesium_config.baseMap,
// fileExtension: "png"
// }),
// imageryProvider:new Cesium.ArcGisMapServerImageryProvider({
// url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
// }),
// terrainProvider: new Cesium.EllipsoidTerrainProvider({}), // 地形
});
// viewer.scene.globe.baseColor = Cesium.Color.BLACK; //改变空球的颜色
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#53514c"); //改变空球的颜色
viewer.scene.globe.enableLighting = true;
viewer.scene.light = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358),
});
if (this.loadTileset) {
// tileset三维场景
const tileset = new Cesium.Cesium3DTileset({
url: cesium_config.tile3dURL,
// show: true,
// maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
// maximumScreenSpaceError: 256, // 数值加大，能让最终成像变模糊
// skipLevelOfDetail: true, //通过优化，树的级别可以完全跳过，子树可以与父树一起呈现 内存显著减少
// loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
// progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊0
// cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
// dynamicScreenSpaceError: true,
// projectTo2D: true,
});
// const tileset1 = new Cesium.Cesium3DTileset({
// // url: "changsha123/tileset.json",
// url: "jinan/tileset.json",
// });
// viewer.scene.primitives.add(tileset1);
// // viewer.scene.globe.depthTestAgainstTerrain = true;
// // viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
// tileset1.readyPromise.then(() => {
// window.tileset = tileset1;
// tileset1.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;
// tileset1.style = new Cesium.Cesium3DTileStyle({
// color: {
// conditions: [
// ['${name} === "HLD_CSZ_001_R002"', 'color("red")'],
// ["true", 'color("white")'],
// ],
// },
// });
// });
// tileset1.debugColorizeTiles = true;
// viewer.zoomTo(tileset1);
tileset.readyPromise.then(() => {
window.tileset = tileset;
tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;
this.$emit("tilesetReady");
//计算tileset的绑定范围
let boundingSphere = tileset.boundingSphere;
//计算中心点位置
let cartographic = Cesium.Cartographic.fromCartesian(
boundingSphere.center
);
//计算中心点位置的地表坐标
let surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
console.log("tileset自身center : ", [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude),
]);
// 偏移tileset到指定位置
let heightOffset = cesium_config.tilesetHeightOffset;
let x = Cesium.Math.toDegrees(cartographic.longitude);
let y = Cesium.Math.toDegrees(cartographic.latitude);
let offset = Cesium.Cartesian3.fromRadians(
cesium_config.tilesetOffsetX
? Cesium.Math.toRadians(x + cesium_config.tilesetOffsetX)
: cartographic.longitude,
cesium_config.tilesetOffsetY
? Cesium.Math.toRadians(y + cesium_config.tilesetOffsetY)
: cartographic.latitude,
heightOffset
);
let translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
//tileset.modelMatrix转换
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
// viewer.scene.globe.show = false
// viewer.imageryLayers.removeAll()
viewer.scene.primitives.add(tileset);
}
// viewer.scene.globe.enableLighting = false
// viewer.scene.sun.show = false
// viewer.zoomTo(tileset);
viewer.cesiumWidget.creditContainer.style.display = "none";
// 以下设置为了使cesium地图鼠标控制符合mapbox习惯
// 关闭双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
// 鼠标右键旋转
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG,
];
// 中键滚动缩放
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.WHEEL,
];
// 鼠标左键平移
viewer.scene.screenSpaceCameraController.rotateEventTypes = [
Cesium.CameraEventType.LEFT_DRAG,
];
viewer.scene.globe.enableLighting = true;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
...cesium_config.center,
cesium_config.zoomHeight
),
orientation: {
heading: Cesium.Math.toRadians(0), // 旋转角度
pitch: Cesium.Math.toRadians(-90.0), // 相机方向
},
duration: 0.5,
});
return viewer;
},
},
mounted() {},
created() {},
beforeDestroy() {
viewer?.destroy();
},
};
</script>
<style>
.cesium-viewer-timelineContainer {
z-index: 15;
left: 625px !important;
width: 1025px !important;
bottom: 35px !important;
height: 40px !important;
}
.cesium-timeline-bar {
height: 30px;
}
.cesium-timeline-main {
height: inherit;
}
.cesium-timeline-trackContainer {
height: unset !important;
}
/* pop框css*/
.cesium-popup-panel {
opacity: 0.8;
position: absolute;
z-index: 0;
}
.cesium-popup-close-btn > svg:hover {
color: #00fcf9 !important;
}
.cesium-popup-close-btn > svg {
display: none;
user-select: auto;
color: #4674d6;
cursor: pointer;
width: 15px;
}
.cesium-viewer {
position: unset;
}
</style>
wj-data-vision-new/src/components/loopVideo.vue 0 → 100644
View file @ 17f9d32c
<template>
<div
class="loopVideo"
v-loading="videoLoading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<video
controls
class="videoControl"
ref="player"
@loadstart="handleLoadStart"
@loadedmetadata="handleLoadedMetadata"
@ended="handleEnded"
@canplay="videoCanPlay"
></video>
</div>
</template>
<script>
let intervalTimer = null
import { getEventVideo } from "../../dao/track";
export default {
name: "loopVideo",
props: {
channel: String,
timeModel: Object,
autoplay: Boolean,
},
data() {
return {
videoLoading: true,
videoUrl: null,
flvPlayer: null,
intervalTimer: null,
};
},
mounted() {
this.$EventBus.$on("startPlay", this.startPlay());
if (this.channel) {
console.log(
"loopVideo start and end",
this.replaceTimeGap(this.timeModel.startTime),
this.replaceTimeGap(this.timeModel.endTime)
);
this.getVideoStreamUrl();
intervalTimer = setInterval(() => {
if (this.videoLoading) {
this.handleErr();
} else {
this.clearCurrentInterval();
}
}, 5000);
}
},
methods: {
handleErr() {
this.destroyPlayer();
this.$nextTick(() => {
this.getVideoStreamUrl();
});
},
videoCanPlay() {
this.videoLoading = false;
this.$emit("videoReady", this.channel);
},
replaceTimeGap(time) {
return time
.toString()
.replaceAll("-", "_")
.replaceAll(" ", "_")
.replaceAll(":", "_");
},
async getVideoStreamUrl() {
if (this.timeModel.startTime && this.timeModel.endTime) {
try {
const response = await getEventVideo({
channel: this.channel,
subtype: 0,
starttime: this.replaceTimeGap(this.timeModel.startTime),
endtime: this.replaceTimeGap(this.timeModel.endTime),
});
this.videoUrl = response.content;
this.playVideo();
} catch (error) {
console.error(`Failed to get video stream url: ${error}`);
}
} else {
console.log("no timerange...");
}
},
playVideo() {
if (!flvjs.isSupported()) {
console.error("FLV is not supported by this browser!");
return;
}
this.flvPlayer = flvjs.createPlayer({
type: "flv",
url: this.videoUrl,
isLive: true,
hasAudio: false,
hasVideo: true,
cors: true, // 是否跨域
});
this.flvPlayer.attachMediaElement(this.$refs.player);
this.flvPlayer.load();
if (this.flvPlayer && this.autoplay) {
this.startPlay();
}
},
clearCurrentInterval() {
if (intervalTimer) {
clearInterval(intervalTimer);
intervalTimer = null;
}
},
startPlay() {
// 已经触发播放但当前视频仍未加载出来则清除定时拉取请求
if (this.videoLoading) {
this.clearCurrentInterval();
}
this.flvPlayer?.play();
},
handleMediaDetached() {},
handleLoadStart() {},
handleLoadedMetadata() {},
handleEnded() {
if (this.flvPlayer) {
this.flvPlayer.play();
}
},
destroyPlayer() {
if (this.flvPlayer) {
this.flvPlayer?.pause();
this.flvPlayer?.unload();
this.flvPlayer?.detachMediaElement();
this.flvPlayer?.destroy();
this.flvPlayer = null;
}
},
},
watch: {
timeModel(val) {
this.handleErr();
},
},
beforeDestroy() {
this.clearCurrentInterval();
this.destroyPlayer();
this.$EventBus.$off("startPlay");
},
};
</script>
<style lang="less" scoped>
.loopVideo {
height: 100%;
width: 100%;
.videoControl {
// position: absolute;
height: 100%;
width: 100%;
}
}
.loading-mask {
// position: absolute;
width: 100%;
height: 100%;
background-color: rgba(8, 22, 35, 0.7);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #fcfcfc;
}
// ::v-deep .el-icon-loading {
// position: absolute;
// left: 30%;
// top: -14px;
// transform: translateX(-50%);
// }
</style>
wj-data-vision-new/src/components/map/index.vue 0 → 100644
View file @ 17f9d32c
<template>
<div :id="mapId" class="w_map" style="height: 100%; width: 100%"></div>
</template>
<script>
let map;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
name: "wMap",
props: ["mapId", "mapOptions"],
components: {},
data() {
return {};
},
mounted() {},
methods: {
initMap() {
let options = {
container: this.mapId,
style: 'http://106.120.201.126:14724/style.json',
center: this.mapOptions.center,
zoom: this.mapOptions.zoom,
maxZoom: this.mapOptions.maxZoom,
pitch: this.mapOptions.pitch,
bearing: this.mapOptions.bearing,
};
map = new mapboxgl.Map(options);
return map;
},
destroyMap() {
map?.remove;
map = null;
},
},
computed: {},
beforeDestroy() {},
};
</script>
<style scoped>
.w_map{
position: absolute;
left: 0;
top: 0;
}
</style>>
<style>
.mapboxgl-ctrl-attrib {
display: none;
}
</style>
wj-data-vision-new/src/components/msg-card.vue 0 → 100644
View file @ 17f9d32c
<template>
<div class="msg-card">
<div class="msg-card-title" v-if="!noHeader">
<div class="text">
{{ title }}
</div>
</div>
<div :class="[noHeader ? 'msg-card-content-noHeader' : 'msg-card-content']">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "msg-card",
props: {
long: Boolean,
title: String,
subhead: String,
noHeader: Boolean,
},
computed: {},
};
</script>
<style lang="less" scoped>
.text {
padding: 4px 0 4px 20px;
position: relative;
display: flex;
align-items: center;
font-size: 21px;
font-weight: 700;
color: white;
}
.right-text {
margin-left: 25px;
}
.msg-card {
width: 100%;
height: 100%;
.msg-card-title {
height: 45px;
font-weight: bold;
line-height: 38px;
padding-left: 6px;
width: 100%;
text-align: left;
background-image: url("../assets/images/msgCardHead.png");
background-size: 100% 100%;
}
.msg-card-content {
overflow-y: hidden;
padding: 10px 10px 0 10px;
background-size: 100% 100%;
height: calc(100% - 45px);
}
.msg-card-content-noHeader {
height: 100%;
overflow-y: hidden;
padding: 10px 10px 0 10px;
background-size: 100% 100%;
}
}
/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #2e5e99;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track {
background-color: #0f2645;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2e5e99;
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
</style>
wj-data-vision-new/src/components/pathMap/index.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/components/pathMap/renderMap.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/components/visionHeader.vue 0 → 100644
View file @ 17f9d32c
<template>
<div class="headerTitle">
{{ title }}
</div>
</template>
<script>
export default {
data() {
return {
title: "蒙自交通运行态势监测",
};
},
};
</script>
<style lang="less" scoped>
.headerTitle {
position: absolute;
left: 0;
height: 240px;
top: 0;
z-index: 2;
font-size: 54px;
font-weight: 600;
color: white;
line-height: 100px;
letter-spacing: 4px;
text-align: center;
width: 100%;
background-image: url("../assets/images/topIndex.png");
background-size: 100% 100%;
}
</style>
wj-data-vision-new/src/components/warehouse/eventList.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div class="cardInner">
<div class="optionItem" v-for="item of dangerOptions" :key="item">
<div class="leftIcon" :class="`danger${item.objType}`"></div>
<div class="rightDetail">
<div class="rightInner">
<div class="license">{{ item.eventName }}</div>
<div
v-for="(objValue, key) of item"
:key="key"
v-show="!['objType', 'eventName'].includes(key)"
>
{{ keyMapTranslate(key) }} : {{ objValue }}
</div>
</div>
</div>
</div>
</div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "leftBottom",
components: {
msgCardVue,
},
data() {
return {
ownChartData: [],
dangerOptions: [ // objType eventName 必须字段
{
objType: 2, // 1非机动车 2行人
eventName: "不走斑马线、斜穿路口",
timeBetween: "2023-04-10 01:22:12 ~ 01:24:28",
duration: "40 s",
location: "湘江中路与劳动西路交叉口",
},
{
objType: 1,
eventName: "斜穿路口",
timeBetween: "2023-04-10 10:22:12 ~ 10:22:20",
duration: "8 s",
location: "湘江中路与人民西路交叉口",
},
{
objType: 2,
eventName: "不走斑马线",
timeBetween: "2023-04-09 12:22:12 ~ 12:22:26",
duration: "14 s",
location: "湘江中路与人民西路交叉口",
},
],
};
},
computed: {},
watch: {},
props: {
title: {
type: String,
default: () => {
return "默认标题";
},
},
chartData: {
type: Array,
default: () => {
return [
{ a: "1", b: "2" },
{ a: "1", b: "2" },
];
},
},
colors: {
type: Array,
default: () => {
return ["#ffffff"];
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
},
mounted() {
this.ownChartData = this.chartData;
},
created() {},
methods: {
keyMapTranslate(key) {
if(this.keyMap[key]) return this.keyMap[key]
return key;
},
convertKvToArray(obj) {
let array = [];
for (let key in obj) {
array.push({ name: this.keyMapTranslate(key), value: obj[key] });
}
return array;
},
},
};
</script>
<style lang="less" scoped>
.cardInner {
display: flex;
flex-direction: column;
padding: 10px;
.optionItem {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
min-height: 120px;
align-items: center;
/* 四个角 */
.leftIcon {
width: 83px;
height: 84px;
background-size: 100% 100%;
}
.rightDetail {
width: calc(100% - 83px);
height: 100%;
}
.danger1 {
background-image: url("../../assets/images/danger_bicycle.png");
}
.danger2 {
background-image: url("../../assets/images/danger_passerby.png");
}
.rightInner {
padding: 8px 23px;
font-size: 16px;
color: rgba(222, 234, 255, 1);
// background-image: url("../../../assets/images/sc/textBorderBack.png");
background-size: 100% 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
span {
display: inline-block;
margin-right: 25px;
}
.license {
color: white;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
}
}
}
</style>
wj-data-vision-new/src/components/warehouse/leftBottom.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div class="totalTitle">
总量
<div class="titleNum">{{ totalNum }}</div>
</div>
<div
style="position: relative; width: 100%; height: 100%"
:id="chartId"
></div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "leftBottom",
components: {
msgCardVue,
},
data() {
return {
chart: null,
chartId: "",
ownChartData:[]
};
},
computed: {
totalNum() {
let total = 0;
for (let key in this.chartData) {
total += this.chartData[key];
}
return total;
},
},
watch: {
colors() {
this.refreshChart();
},
},
props: {
title: {
type: String,
default: () => {
return "默认标题";
},
},
chartData: {
type: Array,
default: () => {
return {
"rose1": 30,
"rose2": 30,
"rose3": 30,
"rose4": 30,
"rose5": 30,
"rose6": 30,
"rose7": 30,
"rose8": 30,
};
},
},
colors: {
type: Array,
default: () => {
return ["#ffffff"];
},
},
keyMap:{
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.ownChartData = this.chartData
this.$nextTick(() => {
this.refreshChart();
});
},
created() {
this.chartId = this.buildShortUUID();
},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
convertKvToArray(obj){
let array = []
for(let key in obj){
array.push({name: this.keyMapTranslate(key), value: obj[key]})
}
return array
},
refreshChart() {
if (this.chart) {
this.chart.clear();
} else {
let chartDom = document.getElementById(this.chartId);
this.chart = echarts.init(chartDom);
const watchChartWc = new ResizeObserver(() => {
this.chart?.resize();
});
// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById(this.chartId));
window.addEventListener("resize", () => this.chart?.resize());
}
let chartSeries = this.convertKvToArray(this.ownChartData)
this.chart.setOption(
{
color: this.colors,
legend: {
show: false,
},
toolbox: {
show: false,
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: ["50%", "80%"],
center: ["50%", "50%"],
roseType: "radius",
label: {
color: "inherit",
borderWidth: 0,
rich: {
num: {
align: "center",
height: 20,
},
},
formatter: "{c} ({d}%)\n {num|{b}}",
},
// labelLine: {
// length: 10,
// length2: 0,
// },
data: chartSeries,
},
],
},
true
);
},
},
};
</script>
<style lang="less" scoped>
.totalTitle {
position: absolute;
left: 50%;
top: 50%;
color: white;
transform: translate(-50%);
z-index: 3;
text-align: center;
.titleNum {
font-size: 20px;
font-weight: 700;
color: #80ffff;
}
}
</style>
wj-data-vision-new/src/components/warehouse/leftCenter.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div style="height: 60px" class="listData">
<div class="listDataItem" v-for="item of chartData.listData" :key="item">
{{ item.key }} {{ item.value }}
</div>
</div>
<div style="width: 100%; height: calc(100% - 60px)" :id="chartId"></div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "leftCenter",
components: {
msgCardVue,
},
data() {
return {
chart: null,
chartId: "",
ownChartData: {},
};
},
props: {
api: {
type: String,
default: () => {
return "";
},
},
chartType: {
type: String,
default: () => {
return "bar";
},
},
title: {
type: String,
default: () => {
return "默认标题";
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object,
default: () => {
return {
headerCount: 500,
keyList: ["picNumber", "VictType", "CrossNumber"],
list: [
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
],
dataList: {
serialList: ["time1", "time2", "time3", "time4", "time5"],
valueList: [
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
],
},
};
},
},
colors: {
type: Array,
default: () => {
return ["#ffffff"];
},
},
legend: {
type: Object,
default: () => {
return {
align: "center",
show: true,
};
},
},
},
watch: {
colors() {
this.refreshChart();
},
chartType() {
this.refreshChart();
},
legend: {
handler() {
this.refreshChart();
},
deep: true,
},
keyMap: {
handler() {
this.refreshChart();
},
deep: true,
},
},
mounted() {
this.ownChartData = this.chartData;
this.$nextTick(() => {
if (this.api) {
setTimeout(() => {
this.refreshChart();
}, 500);
} else {
this.refreshChart();
}
});
},
created() {
this.chartId = this.buildShortUUID();
},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
hexToRgb(hex) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
refreshChart() {
if (this.chart) {
this.chart.clear();
} else {
let chartDom = document.getElementById(this.chartId);
this.chart = echarts.init(chartDom);
const watchChartWc = new ResizeObserver(() => {
this.chart?.resize();
});
// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById(this.chartId));
window.addEventListener("resize", () => this.chart?.resize());
}
let legendData = [];
// 聚合组装数据
let seriesData = [];
let chartData = this.ownChartData.dataList;
let xData = chartData.serialList;
for (let key in chartData.valueList[0]) {
legendData.push(key);
seriesData.push({ name: key, values: [] });
}
for (let valueItem of chartData.valueList) {
for (let valueKey in valueItem) {
for (let series of seriesData) {
if (series.name == valueKey) {
series.values.push(valueItem[valueKey]);
}
}
}
}
// 转 echarts series
let chartSeries = [];
for (let i = 0; i < seriesData.length; i++) {
let itemColor = this.colors[i] || "#ffffff";
let rgb = this.hexToRgb(itemColor);
chartSeries.push({
name: seriesData[i].name,
data: seriesData[i].values,
type: this.chartType,
areaStyle: {
color: {
//线性渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`, // 0% 处的颜色
},
{
offset: 0.6,
color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b},0)`, // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
smooth: true,
symbol: "none",
});
}
// setOption
this.chart.setOption(
{
legend: {
data: legendData,
show: this.legend.show,
left: this.legend.align,
textStyle: {
color: "#fff",
},
},
tooltip: {},
color: this.colors,
grid: {
top: 40,
bottom: 10,
left: 10,
right: 20,
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: xData,
},
yAxis: {
name: "",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
type: "value",
axisLabel: {
color: "rgba(126, 139, 166, 1)",
},
},
series: chartSeries,
},
true
);
},
},
};
</script>
<style lang="less" scoped>
.listData {
display: flex;
justify-content: space-between;
.listDataItem {
flex: 0 0 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../../assets/images/indexBack.png");
background-position-y: center;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}
}
</style>
wj-data-vision-new/src/components/warehouse/leftTop.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div style="height: 60px" class="listData">
<div class="listDataItem" v-for="item of chartData.listData" :key="item">
{{ item.key }} {{ item.value }}
</div>
</div>
<div style="width: 100%; height: calc(100% - 60px)" :id="chartId"></div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "leftTop",
components: {
msgCardVue,
},
data() {
return {
chart: null,
chartId: "",
ownChartData: {},
};
},
props: {
api: {
type: String,
default: () => {
return "";
},
},
chartType: {
type: String,
default: () => {
return "bar";
},
},
title: {
type: String,
default: () => {
return "默认标题";
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object,
default: () => {
return {
headerCount: 500,
keyList: ["picNumber", "VictType", "CrossNumber"],
list: [
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
{ picNumber: "云G12345", VictType: 2, CrossNumber: 26 },
],
dataList: {
serialList: ["time1", "time2", "time3", "time4", "time5"],
valueList: [
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
],
},
};
},
},
colors: {
type: Array,
default: () => {
return ["#ffffff"];
},
},
legend: {
type: Object,
default: () => {
return {
align: "center",
show: true,
};
},
},
},
watch: {
colors() {
this.refreshChart();
},
chartType() {
this.refreshChart();
},
legend: {
handler() {
this.refreshChart();
},
deep: true,
},
keyMap: {
handler() {
this.refreshChart();
},
deep: true,
},
},
mounted() {
this.ownChartData = this.chartData;
this.$nextTick(() => {
if (this.api) {
setTimeout(() => {
this.refreshChart();
}, 500);
} else {
this.refreshChart();
}
});
},
created() {
this.chartId = this.buildShortUUID();
},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
hexToRgb(hex) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
refreshChart() {
if (this.chart) {
this.chart.clear();
} else {
let chartDom = document.getElementById(this.chartId);
this.chart = echarts.init(chartDom);
const watchChartWc = new ResizeObserver(() => {
this.chart?.resize();
});
// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById(this.chartId));
window.addEventListener("resize", () => this.chart?.resize());
}
let legendData = [];
// 聚合组装数据
let seriesData = [];
let chartData = this.ownChartData.dataList;
let xData = chartData.serialList;
for (let key in chartData.valueList[0]) {
legendData.push(this.keyMapTranslate(key));
seriesData.push({ name: this.keyMapTranslate(key), values: [] });
}
for (let valueItem of chartData.valueList) {
for (let valueKey in valueItem) {
for (let series of seriesData) {
if (series.name == valueKey) {
series.values.push(valueItem[valueKey]);
}
}
}
}
// 转 echarts series
let chartSeries = [];
for (let se of seriesData) {
chartSeries.push({
name: se.name,
data: se.values,
type: this.chartType,
});
}
// setOption
this.chart.setOption(
{
legend: {
data: legendData,
show: this.legend.show,
left: this.legend.align,
textStyle: {
color: "#fff",
},
},
tooltip: {},
color: this.colors,
grid: {
top: 40,
bottom: 10,
left: 10,
right: 10,
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: xData,
},
yAxis: {
name: "",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
type: "value",
axisLabel: {
color: "rgba(126, 139, 166, 1)",
},
},
series: chartSeries,
},
true
);
},
},
};
</script>
<style lang="less" scoped>
.listData {
display: flex;
justify-content: space-between;
.listDataItem {
flex: 0 0 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../../assets/images/indexBack.png");
background-position-y: center;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}
}
</style>
wj-data-vision-new/src/components/warehouse/rightBottom.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div style="height: 30px" class="listData">
<div class="listDataItem" v-for="item of topList" :key="item">
{{ item.title }}
</div>
</div>
<div style="width: 100%; height: calc(100% - 30px)" :id="chartId"></div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "rightBottom",
components: {
msgCardVue,
},
computed: {
topList() {
return this.ownChartData.dataLists;
},
},
data() {
return {
chart: null,
chartId: "",
ownChartData: {},
};
},
props: {
api: {
type: String,
default: () => {
return "";
},
},
chartType: {
type: String,
default: () => {
return "bar";
},
},
title: {
type: String,
default: () => {
return "默认标题";
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object,
default: () => {
return {
dataLists: [
{
title: 'qytop5',
serialList: ["企业1", "企业2"],
valueList: [{ wfsl: 1 }, { wfsl: 2 }],
},
{
title:'vehicletop5',
serialList: ["车辆1", "车辆2"],
valueList: [{ wfsl: 1 }, { wfsl: 2 }],
},
],
};
},
},
colors: {
type: Array,
default: () => {
return ["#fff"];
},
},
legend: {
type: Object,
default: () => {
return {
align: "center",
show: true,
};
},
},
},
watch: {
colors() {
this.refreshChart();
},
chartType() {
this.refreshChart();
},
legend: {
handler() {
this.refreshChart();
},
deep: true,
},
keyMap: {
handler() {
this.refreshChart();
},
deep: true,
},
},
mounted() {
this.ownChartData = this.chartData;
this.$nextTick(() => {
if (this.api) {
setTimeout(() => {
this.refreshChart();
}, 500);
} else {
this.refreshChart();
}
});
},
created() {
this.chartId = this.buildShortUUID();
},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
convertKvToArray(obj) {
let array = [];
for (let key in obj) {
array.push({ name: key, value: obj[key] });
}
return array;
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
refreshChart() {
if (this.chart) {
this.chart.clear();
} else {
let chartDom = document.getElementById(this.chartId);
this.chart = echarts.init(chartDom);
const watchChartWc = new ResizeObserver(() => {
this.chart?.resize();
});
// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById(this.chartId));
window.addEventListener("resize", () => this.chart?.resize());
}
// 聚合组装数据
let xData = [];
let serialL = JSON.parse(
JSON.stringify(this.ownChartData.dataLists[0].serialList)
);
let serialR = JSON.parse(
JSON.stringify(this.ownChartData.dataLists[1].serialList)
);
for (
let i = 0;
i <
[
...this.ownChartData.dataLists[0].serialList,
...this.ownChartData.dataLists[1].serialList,
].length;
i++
) {
// debugger
if (i % 2 === 0) {
xData.push(serialL[0]);
serialL.shift();
} else {
xData.push(serialR[0]);
serialR.shift();
}
}
let seriesData = [];
let valueL = JSON.parse(
JSON.stringify(this.ownChartData.dataLists[0].valueList)
);
let valueR = JSON.parse(
JSON.stringify(this.ownChartData.dataLists[1].valueList)
);
let key = Object.keys(this.ownChartData.dataLists[0].valueList[0])[0];
for (
let i = 0;
i <
[
...this.ownChartData.dataLists[0].valueList,
...this.ownChartData.dataLists[1].valueList,
].length;
i++
) {
if (i % 2 === 0) {
seriesData.push(valueL[0][key] * -1);
valueL.shift();
} else {
seriesData.push(valueR[0][key]);
valueR.shift();
}
}
// 转 echarts series
let chartSeries = [
{
name: "",
data: seriesData,
type: "bar",
itemStyle: {
color: (params) => {
if (params.dataIndex % 2 === 0) {
return this.colors[0];
} else {
return this.colors[1];
}
},
},
label: {
show: true,
position: "inside",
formatter: (params) => {
return `${params.name} ${
params.data * (params.data < 0 ? -1 : 1)
}`;
},
},
},
];
// setOption
this.chart.setOption(
{
legend: {
show: false,
},
tooltip: {
show: false,
},
grid: {
top: 40,
bottom: 10,
left: 10,
right: 10,
containLabel: true,
},
xAxis: {
type: "value",
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
},
yAxis: {
boundaryGap: true,
data: xData,
type: "category",
name: "",
axisTick: {
show: false,
},
axisLabel: {
show: false,
color: "rgba(126, 139, 166, 1)",
},
},
series: chartSeries,
},
true
);
},
},
};
</script>
<style lang="less" scoped>
.listData {
display: flex;
justify-content: space-between;
.listDataItem {
flex: 0 0 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../../assets/images/indexBack.png");
background-position-y: center;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}
}
</style>
wj-data-vision-new/src/components/warehouse/rightCenter.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div class="full-w-h listContainer">
<div class="child" v-for="item of ownChartData" :key="item">
<div class="childTitle">{{ keyMapTranslate(item.title) }}</div>
<div class="childContainer">
<div
class="sChild"
v-for="(objValue, key, index) of item.list"
:key="index"
>
<div>{{ objValue }}</div>
<div>{{ keyMapTranslate(key) }}</div>
</div>
</div>
</div>
</div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "rightCenter",
components: {
msgCardVue,
},
data() {
return {
ownChartData: [],
};
},
props: {
title: {
type: String,
default: () => {
return "默认标题";
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object,
default: () => {
return [
{
title: "lkzt",
list: { ydlk: 1, shlk: 2, yclk: 1, yclkk: 2 },
},
{
title: "ldzt",
list: { ydld: 1, cxld: 2 },
},
];
},
},
},
watch: {
},
mounted() {
this.ownChartData = this.chartData;
},
created() {},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
},
};
</script>
<style lang="less" scoped>
.listContainer {
display: flex;
justify-content: space-between;
background-color: black;
color: white;
.child {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4px;
height: 100%;
.childTitle {
height: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.childContainer {
display: flex;
flex-wrap: wrap;
background-color: blanchedalmond;
justify-content: center;
height: 90%;
width: 100%;
padding: 10px;
.sChild {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
.child:first-child{
width: 66%;
.sChild{
width: 50%;
}
}
.child:last-child{
width: 33%;
.sChild{
width: 100%;
}
}
}
</style>
wj-data-vision-new/src/components/warehouse/rightTop.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div style="height: 30%" class="listData">
<div class="listDataItem" v-for="item of topList" :key="item">
{{ keyMapTranslate(item.name) }} {{ item.value }}
</div>
</div>
<div style="width: 100%; height: 70%" :id="chartId"></div>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "rightTop",
components: {
msgCardVue,
},
computed: {
topList() {
return this.convertKvToArray(this.chartData.list);
},
},
data() {
return {
chart: null,
chartId: "",
ownChartData: {},
};
},
props: {
api: {
type: String,
default: () => {
return "";
},
},
chartType: {
type: String,
default: () => {
return "bar";
},
},
title: {
type: String,
default: () => {
return "默认标题";
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object,
default: () => {
return {
headerCount: 500,
keyList: ["key1", "key2"],
list: { jtwf: 12, jtsg: 14 ,sgzd: 20},
dataList: {
serialList: ["time1", "time2", "time3", "time4", "time5"],
valueList: [
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
{ key1: 2, key2: 4 },
{ key1: 1, key2: 3 },
],
},
};
},
},
colors: {
type: Array,
default: () => {
return ["#ffffff"];
},
},
legend: {
type: Object,
default: () => {
return {
align: "center",
show: true,
};
},
},
},
watch: {
colors() {
this.refreshChart();
},
chartType() {
this.refreshChart();
},
legend: {
handler() {
this.refreshChart();
},
deep: true,
},
keyMap: {
handler() {
this.refreshChart();
},
deep: true,
},
},
mounted() {
this.ownChartData = this.chartData;
this.$nextTick(() => {
if (this.api) {
setTimeout(() => {
this.refreshChart();
}, 500);
} else {
this.refreshChart();
}
});
},
created() {
this.chartId = this.buildShortUUID();
},
methods: {
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
hexToRgb(hex) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
},
convertKvToArray(obj) {
let array = [];
for (let key in obj) {
array.push({ name: key, value: obj[key] });
}
return array;
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
refreshChart() {
if (this.chart) {
this.chart.clear();
} else {
let chartDom = document.getElementById(this.chartId);
this.chart = echarts.init(chartDom);
const watchChartWc = new ResizeObserver(() => {
this.chart?.resize();
});
// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById(this.chartId));
window.addEventListener("resize", () => this.chart?.resize());
}
let legendData = [];
// 聚合组装数据
let seriesData = [];
let chartData = this.ownChartData.dataList;
let xData = chartData.serialList;
for (let key in chartData.valueList[0]) {
legendData.push(key);
seriesData.push({ name: key, values: [] });
}
for (let valueItem of chartData.valueList) {
for (let valueKey in valueItem) {
for (let series of seriesData) {
if (series.name == valueKey) {
series.values.push(valueItem[valueKey]);
}
}
}
}
// 转 echarts series
let chartSeries = [];
let rightYAxisName = seriesData[1].name;
for (let i = 0; i < seriesData.length; i++) {
let itemColor = this.colors[i] || "#ffffff";
let rgb = this.hexToRgb(itemColor);
chartSeries.push({
name: seriesData[i].name,
data: seriesData[i].values,
type: this.chartType,
areaStyle: {
color: {
//线性渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`, // 0% 处的颜色
},
{
offset: 0.6,
color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b},0)`, // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
yAxisIndex: i == 0 ? 0 : 1, // 索引值为0的数据组使用左侧y轴 其他使用右侧y轴
smooth: true,
symbol: "none",
});
if (i > 1) {
rightYAxisName += `/${seriesData[i].name}`;
}
}
let yAxis = [
{
name: chartSeries[0].name,
position: "left",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
type: "value",
axisLabel: {
color: "rgba(126, 139, 166, 1)",
},
},
{
name: rightYAxisName,
position: "right",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255, 255, 255, 0.2)",
},
},
type: "value",
axisLabel: {
color: "rgba(126, 139, 166, 1)",
},
},
];
// setOption
this.chart.setOption(
{
legend: {
data: legendData,
show: this.legend.show,
left: this.legend.align,
textStyle: {
color: "#fff",
},
},
tooltip: {},
color: this.colors,
grid: {
top: 40,
bottom: 10,
left: 10,
right: 10,
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: xData,
},
yAxis: yAxis,
series: chartSeries,
},
true
);
},
},
};
</script>
<style lang="less" scoped>
.listData {
display: flex;
justify-content: space-between;
.listDataItem {
flex: 0 0 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../../assets/images/indexBack.png");
background-position-y: center;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}
}
</style>
wj-data-vision-new/src/components/warehouse/tableList.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<el-table
:header-cell-style="{
backgroundColor: '#012b53',
color: '#cbedff',
borderBottom: 'none',
}"
:data="ownChartData"
:row-class-name="rowClassName"
stripe
style="width: 100%; background-color: transparent"
:cell-style="{
backgroundColor: 'transparent',
borderBottom: 'none',
color: '#cbe1d2',
}"
>
<el-table-column
v-for="(objValue, key) of ownChartData[0]"
:key="key"
align="center"
:prop="key"
:label="keyMapTranslate(key)"
width="auto"
>
</el-table-column>
</el-table>
</msg-card-vue>
</template>
<script>
import msgCardVue from "../msg-card.vue";
export default {
name: "leftBottom",
components: {
msgCardVue,
},
data() {
return {
ownChartData: [],
};
},
computed: {},
watch: {},
props: {
title: {
type: String,
default: () => {
return "默认标题";
},
},
chartData: {
type: Array,
default: () => {
return [
{ a: "1", b: "2" },
{ a: "1", b: "2" },
];
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
},
mounted() {
this.ownChartData = this.chartData;
},
created() {},
methods: {
rowClassName(a) {
return a.rowIndex % 2 ? "evenRow" : "oddRow";
},
keyMapTranslate(key) {
if(this.keyMap[key]) return this.keyMap[key]
return key
},
convertKvToArray(obj) {
let array = [];
for (let key in obj) {
array.push({ name: this.keyMapTranslate(key), value: obj[key] });
}
return array;
},
},
};
</script>
<style lang="less" scoped>
::v-deep .evenRow {
background-color: rgba(53, 92, 166, 0.15);
}
::v-deep .oddRow {
background-color: transparent;
}
::v-deep .el-table::before {
height: 0;
}
</style>
wj-data-vision-new/src/components/warehouse/videos.vue 0 → 100644
View file @ 17f9d32c
<template>
<msg-card-vue :title="title">
<div class="videos_container">
<div
class="video_item"
v-for="item in videoList"
:key="item"
:id="`div${item}`"
>
<div class="video_item_inner"></div>
</div>
</div>
</msg-card-vue>
</template>
<script>
import CameraVideo from "../cameraVideo.vue";
import msgCardVue from "../msg-card.vue";
export default {
name: "leftBottom",
components: {
msgCardVue,
CameraVideo,
},
data() {
return {
};
},
computed: {
videoList() {
return this.chartData;
},
},
watch: {},
props: {
title: {
type: String,
default: () => {
return "默认标题";
},
},
chartData: {
type: Array,
default: () => {
return [1, 2];
},
},
keyMap: {
type: Object,
default: () => {
return {};
},
},
},
mounted() {},
created() {},
methods: {
destroyAll() {
if (this.$refs.videoContainer) {
for (let container of this.$refs.videoContainer) {
container.destroy();
}
}
},
keyMapTranslate(key) {
return this.keyMap[key] || key;
},
buildShortUUID() {
const time = Date.now();
const random = Math.floor(Math.random() * 1000000000);
return random + String(time);
},
convertKvToArray(obj) {
let array = [];
for (let key in obj) {
array.push({ name: this.keyMapTranslate(key), value: obj[key] });
}
return array;
},
},
beforeDestroy() {
this.destroyAll();
},
};
</script>
<style lang="less" scoped>
.videos_container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
.video_item {
flex: 1;
padding: 6px 0;
.video_item_inner {
border: 1px solid #0099d7;
border-radius: 6px;
height: 100%;
}
}
}
</style>
wj-data-vision-new/src/config/routes.js 0 → 100644
View file @ 17f9d32c
export default [
{
path: '',
redirect: '/home',
},
// {
// path: '/home',
// component: (resolve) => require(['@/views/home/index'], resolve),
// },
{
path: '/home',
component: (resolve) => require(['@/views/preview/index'], resolve),
},
{
path: '/situation1',
component: (resolve) => require(['@/views/preview/situation1'], resolve),
},
{
path: '/situation2',
component: (resolve) => require(['@/views/preview/situation2'], resolve),
},
{
path: '/situation3',
component: (resolve) => require(['@/views/preview/situation3'], resolve),
},
]
wj-data-vision-new/src/dao/auth.js 0 → 100644
View file @ 17f9d32c
import request from "../utils/request";
export const autoLogin = () =>
request({
url: "/sso/identity/user/autoLogin",
method: "get",
});
export const logout = () =>
request({
url: "/sso/identity/user/logout",
method: "get",
});
export const queryMenu = (data) =>
request({
url: "/design/systemsetting/menu/queryMenusByParentId",
method: 'get',
params: data
});
wj-data-vision-new/src/dao/sso.js 0 → 100644
View file @ 17f9d32c
import request from "../utils/request";
export const login = () =>
request({
url: "/sso/identity/user/login",
method: "post",
headers: {
appVersion: "1.0.0",
uniId: "100",
},
});
export const getMachine = () =>
request({
url: "/sso/identity/user/getMachineCode",
method: "get",
});
export const activation = () =>
request({
url: "/sso/identity/user/activateMachine",
method: "post",
});
wj-data-vision-new/src/directive/index.js 0 → 100644
View file @ 17f9d32c
Vue.directive("scroll", {
// 当绑定元素插入到 DOM 中。
inserted: function(el, binding) {
let options = binding.expression
? JSON.parse(binding.expression)
: {
axis: "yx",
theme: "dark",
scrollInertia: 300
};
}
});
Vue.directive("drag", {
bind: function(el, binding, vnode, oldVnode) {
let header = el.querySelector(".el-dialog__header") || el;
let body = el.querySelector(".el-dialog") || el;
header.onmousedown = e => {
if (e.button != 0) {
return false;
}
{
if (!body.isInitDrag) {
body.style.cssText = `transform:none;
width:${body.offsetWidth}px;
height:${body.offsetHeight}px;
left:${parseInt(body.offsetWidth / document.body.offsetWidth) + "%"};
top:${body.offsetTop}px;
bottom:"auto"`;
body.isInitDrag = true;
}
}
window.onselectstart = window.ondragstart = () => {
return false;
};
let offsetX = e.clientX;
let offsetY = e.clientY;
let domLeft = parseFloat(body.style.left);
let domTop = parseFloat(body.style.top);
window.onmousemove = _.throttle(e => {
body.style.left = e.clientX - offsetX + domLeft + "px";
body.style.top = e.clientY - offsetY + domTop + "px";
if (parseInt(body.style.top) < 0) {
body.style.top = 0;
}
}, 20);
window.onmouseup = () => {
window.onmouseup = window.onmousemove = window.onselectstart = window.ondragstart = null;
};
};
}
});
wj-data-vision-new/src/main.js 0 → 100644
View file @ 17f9d32c
import store from './store'
import router from './router'
import './directive'
import App from './App'
import './permission'
Vue.use(ELEMENT, {
size: 'small',
})
// 关闭生产模式的提示
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
router,
render: (h) => h(App),
})
wj-data-vision-new/src/permission.js 0 → 100644
View file @ 17f9d32c
import router from "./router";
import { queryMenu } from "./dao/auth";
const whiteList = [];
router.beforeEach((to, from, next) => {
if (whiteList.includes(to.path)) {
// 在免登录白名单，直接进入
next();
} else {
// const parentId = map_config.SYS_ID;
// const parentId = 'CAFC20296895433784C193457A870DFD';
// queryMenu({ parentId: parentId, isRecursion: true }).then((res) => {
// console.log('res',res);
// let routes = res.content;
// // for (let route of routes) {
// // if (route.url === to.path) {
// next();
// // }
// // }
// });
const parentId = "1783337E5E9547B6A6E99C60443B90A2";
queryMenu({ parentId: parentId, isRecursion: true }).then((res) => {
// console.log('res',res);
// let routes = res.content;
// for (let route of routes) {
// if (route.url === to.path) {
next();
// }
// }
});
}
});
wj-data-vision-new/src/router/index.js 0 → 100644
View file @ 17f9d32c
import Router from 'vue-router'
import routes from '../config/routes'
// 注册路由
Vue.use(Router)
// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(err => err)
}
let originalReplace = Router.prototype.replace
Router.prototype.replace = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
return originalReplace.call(this, location).catch((err) => err)
}
export default new Router({
routes: [{
path: '/404', name: '404', component: (resolve) => require(['@/views/404/index'], resolve),
}, ...routes]
})
\ No newline at end of file
wj-data-vision-new/src/store/index.js 0 → 100644
View file @ 17f9d32c
import Vuex from "vuex";
import app from "./modules/app";
import dataset from "./modules/dataset";
import menudata from "./modules/menudata";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
app,
dataset,
menudata
},
getters: {
menu: state => state.app.menu,
}
});
export default store;
wj-data-vision-new/src/store/modules/app.js 0 → 100644
View file @ 17f9d32c
const user = {
state: {
menu: []
},
actions: {
}
};
export default user;
wj-data-vision-new/src/store/modules/dataset.js 0 → 100644
View file @ 17f9d32c
const dataset = {
state: {
parentData: JSON.parse(localStorage.getItem("parentData")) || {},
areaHomepage: true,
menuShow: false,
currentTime: '',
showEditor: false,
},
mutations: {
troggleEditorStatus(state){
state.showEditor = !state.showEditor
},
setCurrentTime(state, time) {
state.currentTime = time
},
setParentData(state, parentData) {
localStorage.setItem("parentData", JSON.stringify(parentData));
state.parentData = parentData;
},
setMenuStatus(state, show) {
state.menuShow = show
}
}
};
export default dataset;
\ No newline at end of file
wj-data-vision-new/src/store/modules/menudata.js 0 → 100644
View file @ 17f9d32c
const menudata = {
state: {
pathdata: JSON.parse(localStorage.getItem("pathdata")) || {},
pathActive:localStorage.getItem("pathActive") || "",
pathList:JSON.parse(localStorage.getItem("pathList")) || [],
},
mutations:{
setPathData(state, pathdata){
localStorage.setItem("pathdata", JSON.stringify(pathdata));
state.pathdata = pathdata;
},
setPathActive(state, pathActive){
localStorage.setItem("pathActive", pathActive);
state.pathActive = pathActive;
},
setPathList(state, pathList){
localStorage.setItem("pathList", JSON.stringify(pathList));
state.pathList = pathList;
},
}
};
export default menudata;
\ No newline at end of file
wj-data-vision-new/src/utils/cache.js 0 → 100644
View file @ 17f9d32c
const sessionCache = {
set (key, value) {
if (!sessionStorage) {
return
}
if (key != null && value != null) {
sessionStorage.setItem(key, value)
}
},
get (key) {
if (!sessionStorage) {
return null
}
if (key == null) {
return null
}
return sessionStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
sessionStorage.removeItem(key);
}
}
const localCache = {
set (key, value) {
if (!localStorage) {
return
}
if (key != null && value != null) {
localStorage.setItem(key, value)
}
},
get (key) {
if (!localStorage) {
return null
}
if (key == null) {
return null
}
return localStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
localStorage.removeItem(key);
}
}
export default {
/**
* 会话级缓存
*/
session: sessionCache,
/**
* 本地缓存
*/
local: localCache
}
wj-data-vision-new/src/utils/exportExcel.js 0 → 100644
View file @ 17f9d32c
const ExportJsonExcel = require("js-export-excel");
export function exportExcel(option){
var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存
}
\ No newline at end of file
wj-data-vision-new/src/utils/htmlToPdf.js 0 → 100644
View file @ 17f9d32c
// 导出页面为PDF格式
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
* @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字
* */
function downloadPDF(ele, pdfName){
let eleW = ele.offsetWidth;// 获得该容器的宽
let eleH = ele.offsetHeight;// 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
window.scrollTo(0,eleOffsetTop);
var canvas = document.createElement("canvas");
var abs = 0;
let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if(win_out>win_in){
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in)/2; // 获得滚动条宽度的一半
// console.log(a, '新abs');
}
canvas.width = eleW * 2; // 将画布宽&&高放大两倍
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
// html2canvas(element).then( (canvas)=>{ //报错
// html2canvas(element[0]).then( (canvas)=>{
html2canvas( ele, {
dpi: 300,
scrollY:eleOffsetTop,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS:true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
} ).then( (canvas)=>{
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 595.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//可动态生成
pdf.save(pdfName);
})
}
export default {
downloadPDF
}
\ No newline at end of file
wj-data-vision-new/src/utils/index.js 0 → 100644
View file @ 17f9d32c
/**
* Created by jiachenpan on 16/11/18.
*/
export function parseTime(time) {
if (time) {
var date = new Date(time)
var year = date.getFullYear()
/* 在日期格式中，月份是从0开始的，因此要加0
* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
* */
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
// 拼接
return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds
} else {
return ''
}
}
export function formatTime(time, option) {
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
// 替换邮箱字符
export function regEmail(email) {
if (String(email).indexOf('@') > 0) {
const str = email.split('@')
let _s = ''
if (str[0].length > 3) {
for (var i = 0; i < str[0].length - 3; i++) {
_s += '*'
}
}
var new_email = str[0].substr(0, 3) + _s + '@' + str[1]
}
return new_email
}
// 替换手机字符
export function regMobile(mobile) {
if (mobile.length > 7) {
var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
}
return new_mobile
}
//根据表名获取id
export function getTableNameGetId(tableName,data){
var obj = {};
switch (tableName) {
case 'rid_cross':
obj = { idFeild: 'inter_id', dataType: 'cross' }
break
case 'rid_rid':
obj = { idFeild: 'rid', dataType: 'rid' }
break
case 'rid_axf_three':
obj = { idFeild: 'forwardroa', dataType: 'link' }
break
case 'rid_lane_obj':
obj = { idFeild: 'laneid', dataType: 'lane' }
break
default:
break
}
return obj
}
wj-data-vision-new/src/utils/permission.js 0 → 100644
View file @ 17f9d32c
import store from '@/store'
/**
* @param {Array} value
* @returns {Boolean}
* @example see @/views/auth/directive.vue
*/
export default function checkPermission(value) {
if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles
const permissionRoles = value
const hasPermission = roles.some(role => {
return permissionRoles.includes(role)
})
if (!hasPermission) {
return false
}
return true
} else {
console.error(`need roles! Like v-permission="['admin','editor']"`)
return false
}
}
wj-data-vision-new/src/utils/request.js 0 → 100644
View file @ 17f9d32c
import axios from 'axios'
import { tansParams, blobValidate } from "./tools";
import cache from './cache'
import { saveAs } from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// 超时
timeout: 1000000
})
// request拦截器
service.interceptors.request.use(config => {
// console.log('axios request...', config);
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
url: config.url,
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime(),
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理，请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
console.log('axios response...', res);
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
// 给二进制数据添加对应的请求参数信息，避免接收到不需要的数据
// return { data: res.data, params: JSON.parse(res.config.data) }
return res.data
}
if (code === 401) {
if (!ELEMENT.$_overTime) {
ELEMENT.$_overTime = ELEMENT.Notification.error({
title: "失败",
message: "code 401, 3秒后退出登录",
});
setTimeout(() => {
window.location.href = "/";
}, 3000);
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
}
if (code !== 200) {
ELEMENT.Message.error(res.data.message || res.data.status)
} else {
if (res.config.showMsg) {
ELEMENT.Message.success(res.data.message || res.data.status)
}
}
return res.data
})
// 通用下载方法
export function download(url, params, filename) {
downloadLoadingInstance = ELEMENT.Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.get(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.click();
// saveAs(blob, filename)
} else {
console.log('isNotBlob');
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
downloadLoadingInstance.close();
})
}
export function getBlob(url) {
return service.get(url, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
}).then(async (data) => {
const blob = new Blob([data])
return blob
})
}
export default service
wj-data-vision-new/src/utils/tools.js 0 → 100644
View file @ 17f9d32c
/**
* 通用js方法封装处理
* Copyright (c) 2019 ruoyi
*/
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
}
// 回显数据字典
export function selectDictLabel(datas, value) {
if (value === undefined) {
return "";
}
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
if (actions.length === 0) {
actions.push(value);
}
return actions.join('');
}
// 回显数据字典（字符串、数组）
export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) {
return "";
}
if (Array.isArray(value)) {
value = value.join(",");
}
var actions = [];
var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false;
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) {
actions.push(datas[key].label + currentSeparator);
match = true;
}
})
if (!match) {
actions.push(temp[val] + currentSeparator);
}
})
return actions.join('').substring(0, actions.join('').length - 1);
}
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
}
// 转换字符串，undefined,null等转化为""
export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
}
// 数据合并
export function mergeRecursive(source, target) {
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p];
}
} catch (e) {
source[p] = target[p];
}
}
return source;
};
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
/**
* 参数处理
* @param {*} params 参数
*/
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
}
// 验证是否为blob格式
export async function blobValidate(data) {
try {
const text = await data.text();
JSON.parse(text);
return false;
} catch (error) {
return true;
}
}
\ No newline at end of file
wj-data-vision-new/src/views/404/index.vue 0 → 100644
View file @ 17f9d32c
<template>
<div id="error404">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="img_404" alt="404" />
<img class="pic-404__child left" :src="img_404_cloud" alt="404" />
<img class="pic-404__child mid" :src="img_404_cloud" alt="404" />
<img class="pic-404__child right" :src="img_404_cloud" alt="404" />
</div>
<div class="bullshit">
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">
请检查您填写的网址是否正确，请点击以下按钮返回主页或者发送错误报告
</div>
<a @click="back" class="bullshit__return-home">返回上一页</a>
<a href="/#/navigation" class="bullshit__return-home">返回主页</a>
</div>
</div>
</div>
</template>
<script>
import img_404 from "@/assets/images/404/404.png";
import img_404_cloud from "@/assets/images/404/404_cloud.png";
export default {
data() {
return {
img_404,
img_404_cloud
};
},
computed: {
message() {
return "迷路了...";
}
},
methods: {
back: function() {
window.history.go(-1);
}
}
};
</script>
<style scoped>
#error404 {
background: #f0f2f5;
margin-top: -20px;
height: 100%;
}
.bullshit__return-home {
margin-right: 20px;
}
.wscn-http404 {
position: relative;
width: 1200px;
margin: 20px auto 60px;
padding: 0 100px;
overflow: hidden;
}
.pic-404 {
position: relative;
float: left;
width: 600px;
padding: 150px 0;
overflow: hidden;
}
.pic-404__parent {
width: 100%;
}
.pic-404__child {
position: absolute;
}
.pic-404.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.pic-404.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
.pic-404.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 150px 0;
overflow: hidden;
}
.bullshit__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.bullshit__headline {
font-size: 20px;
line-height: 24px;
color: #1482f0;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.bullshit__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
.bullshit__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
wj-data-vision-new/src/views/home/index.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/views/home/settingPanel.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/views/preview/index.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/views/preview/situation1.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/views/preview/situation2.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/src/views/preview/situation3.vue 0 → 100644
View file @ 17f9d32c
This diff is collapsed.
wj-data-vision-new/vue.config.js 0 → 100644
View file @ 17f9d32c
const path = require('path')
// const pxtovw = require('postcss-px-to-viewport')
const publicPath = '/wj-data-vision-new'
const port = 9300
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const proxy = {
'/sso': {
target: 'http://10.102.1.182:9000',
},
'/holo': {
target: 'http://10.102.1.182:9000',
},
'/web': {
target: 'http://10.102.1.182:9000',
},
'/design': {
target: 'http://10.102.1.182:9000',
},
'/develop': {
target: 'http://10.102.1.182:9000',
},
'/opt': {
target: 'http://10.102.1.182:9000',
},
'/cdn': {
target: 'http://127.0.0.1:3000',
},
}
module.exports = {
publicPath,
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
port,
overlay: {
warnings: false,
errors: true,
},
proxy,
},
css: {
loaderOptions: {
// postcss: {
// //给postcss-loader传递选项
// plugins: [
// new pxtovw({
// unitToConvert: 'px', //需要转换的单位，默认为"px"；
// viewportWidth: 1920, //设计稿的视口宽度
// unitPrecision: 5, //单位转换后保留的小数位数
// propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
// viewportUnit: 'vw', //转换后的视口单位
// fontViewportUnit: 'vw', //转换后字体使用的视口单位
// selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
// minPixelValue: 1, //设置最小的转换数值
// mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
// replace: true, //是否直接更换属性值，而不添加备用属性
// exclude: [/node_modules/], //忽略某些文件夹下的文件
// }),
// ],
// },
},
},
configureWebpack: {
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': path.join(__dirname, 'src'),
},
},
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
}),
],
},
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment