huajimang
/
suyiScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-01-30 09:28:55 +08:00
parent 07c841f6b4
commit 80e7e9b2e5
153 changed files with 373231 additions and 372975 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/App.vue
View File

@ -1,40 +1,40 @@
<template>
<div id="app">
<!-- <div class="up">
<img src="" alt="">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div class="down">
</div> -->
<router-view></router-view>
</div>
</template>
<style lang="scss" >
p,
h2 {
margin: 0;
padding: 0;
}
</style>
<style lang="scss" scoped>
#app {
// width: 100vw;
// height: 100vh;
width: 100%;
height: 100%;
// background-color: #212229;
// background-color:#0d131f;
overflow: hidden;
}
</style>
<template>
<div id="app">
<!-- <div class="up">
<img src="" alt="">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div class="down">
</div> -->
<router-view></router-view>
</div>
</template>
<style lang="scss" >
p,
h2 {
margin: 0;
padding: 0;
}
</style>
<style lang="scss" scoped>
#app {
// width: 100vw;
// height: 100vh;
width: 100%;
height: 100%;
// background-color: #212229;
// background-color:#0d131f;
overflow: hidden;
}
</style>

94
src/api/api.js
View File

@ -1,47 +1,47 @@
import axios from 'axios'
// if (process.env.NODE_ENV === 'development') {
// axios.defaults.baseURL = '/api'
// } else if (process.env.NODE_ENV === 'production') {
// axios.defaults.baseURL = '/api'
// }
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
// 首页数据
export const getHomePageInfo = (params) => {
return axios.get('api/gk/homePage/getHomePageInfo', {
params
})
};
// 环境信息
export const getEnvironmentInfo = (params) => {
return axios.get('api/gk/info/getEnvironmentInfo', { params
})
};
export const getSiteInfo = (params) => {
return axios.get('api/gk/info/getSiteInfo', {
params
})
};
export const getSwitchInfo = (params) => {
return axios.get('api/gk/info/getSwitchInfo', {
params
})
};
//查询实时事件
export const getDeviceRecord = (params) => {
return axios.get('api/gk/info/getDeviceRecord', {
params
})
};
//查询实时记录下拉框
export const getDeviceNum = (params) => {
return axios.get('api/gk/info/getDeviceNum', {
params
})
};
// 修改提交
export const updateDeviceRecord = (params) => {
return axios.get('api/gk/info/updateDeviceRecord', {
params
})
};
import axios from 'axios'
// if (process.env.NODE_ENV === 'development') {
// axios.defaults.baseURL = '/api'
// } else if (process.env.NODE_ENV === 'production') {
// axios.defaults.baseURL = '/api'
// }
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
// 首页数据
export const getHomePageInfo = (params) => {
return axios.get('api/gk/homePage/getHomePageInfo', {
params
})
};
// 环境信息
export const getEnvironmentInfo = (params) => {
return axios.get('api/gk/info/getEnvironmentInfo', { params
})
};
export const getSiteInfo = (params) => {
return axios.get('api/gk/info/getSiteInfo', {
params
})
};
export const getSwitchInfo = (params) => {
return axios.get('api/gk/info/getSwitchInfo', {
params
})
};
//查询实时事件
export const getDeviceRecord = (params) => {
return axios.get('api/gk/info/getDeviceRecord', {
params
})
};
//查询实时记录下拉框
export const getDeviceNum = (params) => {
return axios.get('api/gk/info/getDeviceNum', {
params
})
};
// 修改提交
export const updateDeviceRecord = (params) => {
return axios.get('api/gk/info/updateDeviceRecord', {
params
})
};

30
src/assets/map/JianPu_Building/Build/JianPu_Building.json
View File

@ -1,16 +1,16 @@
{
"companyName": "LGZN",
"productName": "JianPuBuilding",
"productVersion": "0.1",
"dataUrl": "JianPu_Building.data.unityweb",
"wasmCodeUrl": "JianPu_Building.wasm.code.unityweb",
"wasmFrameworkUrl": "JianPu_Building.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "#231F20",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.4.0f1"
{
"companyName": "LGZN",
"productName": "JianPuBuilding",
"productVersion": "0.1",
"dataUrl": "JianPu_Building.data.unityweb",
"wasmCodeUrl": "JianPu_Building.wasm.code.unityweb",
"wasmFrameworkUrl": "JianPu_Building.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "#231F20",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.4.0f1"
}

46
src/assets/map/JianPu_Building/Build/JianPu_Building.wasm.framework.unityweb
View File

File diff suppressed because one or more lines are too long

6
src/assets/map/JianPu_Building/Build/UnityLoader.js
View File

File diff suppressed because one or more lines are too long

46
src/assets/map/JianPu_Building/TemplateData/UnityProgress.js
View File

@ -1,24 +1,24 @@
function UnityProgress(unityInstance, progress) {
if (!unityInstance.Module)
return;
if (!unityInstance.logo) {
unityInstance.logo = document.createElement("div");
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
unityInstance.container.appendChild(unityInstance.logo);
}
if (!unityInstance.progress) {
unityInstance.progress = document.createElement("div");
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
unityInstance.progress.empty = document.createElement("div");
unityInstance.progress.empty.className = "empty";
unityInstance.progress.appendChild(unityInstance.progress.empty);
unityInstance.progress.full = document.createElement("div");
unityInstance.progress.full.className = "full";
unityInstance.progress.appendChild(unityInstance.progress.full);
unityInstance.container.appendChild(unityInstance.progress);
}
unityInstance.progress.full.style.width = (100 * progress) + "%";
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
function UnityProgress(unityInstance, progress) {
if (!unityInstance.Module)
return;
if (!unityInstance.logo) {
unityInstance.logo = document.createElement("div");
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
unityInstance.container.appendChild(unityInstance.logo);
}
if (!unityInstance.progress) {
unityInstance.progress = document.createElement("div");
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
unityInstance.progress.empty = document.createElement("div");
unityInstance.progress.empty.className = "empty";
unityInstance.progress.appendChild(unityInstance.progress.empty);
unityInstance.progress.full = document.createElement("div");
unityInstance.progress.full.className = "full";
unityInstance.progress.appendChild(unityInstance.progress.full);
unityInstance.container.appendChild(unityInstance.progress);
}
unityInstance.progress.full.style.width = (100 * progress) + "%";
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
}

38
src/assets/map/JianPu_Building/TemplateData/style.css
View File

@ -1,19 +1,19 @@
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
.webgl-content .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
.webgl-content .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}

126
src/assets/map/JianPu_Building/index.html
View File

@ -1,63 +1,63 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | JianPuBuilding</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/JianPu_Building.json", {onProgress: UnityProgress});
// function init() {
// unityInstance.SetFullscreen(1)
// }
function home() {
window.history.go(-1);
}
</script>
</head>
<style>
html body {
margin: 0;
border: 0;
width: 100%;
height: 100%;
}
.back{
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
}
.home{
background: #ffffff;
position: absolute;
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
border-radius:5px
}
</style>
<body>
<!-- <div class="webgl-content">-->
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div>-->
<!-- <div class="footer">-->
<!-- <div class="webgl-logo"></div>-->
<!-- <div class="fullscreen" onclick="init()" style="cursor: pointer"></div>-->
<!-- <div class="back" onclick="home()" style="cursor: pointer"></div>-->
<!-- <div class="title">JianPuBuilding</div>-->
<!-- </div>-->
<!-- </div>-->
<div style="width: 100%; height:100%" class="webgl-content">
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div> -->
<div id="unityContainer" style="width: 100vw; height: 100vh;overflow: hidden;" ></div>
<div class="home">
<div class="back" onclick="home()" style="cursor: pointer"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | JianPuBuilding</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/JianPu_Building.json", {onProgress: UnityProgress});
// function init() {
// unityInstance.SetFullscreen(1)
// }
function home() {
window.history.go(-1);
}
</script>
</head>
<style>
html body {
margin: 0;
border: 0;
width: 100%;
height: 100%;
}
.back{
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
}
.home{
background: #ffffff;
position: absolute;
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
border-radius:5px
}
</style>
<body>
<!-- <div class="webgl-content">-->
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div>-->
<!-- <div class="footer">-->
<!-- <div class="webgl-logo"></div>-->
<!-- <div class="fullscreen" onclick="init()" style="cursor: pointer"></div>-->
<!-- <div class="back" onclick="home()" style="cursor: pointer"></div>-->
<!-- <div class="title">JianPuBuilding</div>-->
<!-- </div>-->
<!-- </div>-->
<div style="width: 100%; height:100%" class="webgl-content">
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div> -->
<div id="unityContainer" style="width: 100vw; height: 100vh;overflow: hidden;" ></div>
<div class="home">
<div class="back" onclick="home()" style="cursor: pointer"></div>
</div>
</div>
</body>
</html>

4
src/assets/map/build/.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5501
{
"liveServer.settings.port": 5501
}

6
src/assets/map/build/Build/UnityLoader.js
View File

File diff suppressed because one or more lines are too long

30
src/assets/map/build/Build/sgs.json
View File

@ -1,16 +1,16 @@
{
"companyName": "DefaultCompany",
"productName": "ShengDaPing",
"productVersion": "0.1",
"dataUrl": "sgs.data.unityweb",
"wasmCodeUrl": "sgs.wasm.code.unityweb",
"wasmFrameworkUrl": "sgs.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "#231F20",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.4.36f1c1"
{
"companyName": "DefaultCompany",
"productName": "ShengDaPing",
"productVersion": "0.1",
"dataUrl": "sgs.data.unityweb",
"wasmCodeUrl": "sgs.wasm.code.unityweb",
"wasmFrameworkUrl": "sgs.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "#231F20",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.4.36f1c1"
}

46
src/assets/map/build/TemplateData/UnityProgress.js
View File

@ -1,24 +1,24 @@
function UnityProgress(unityInstance, progress) {
if (!unityInstance.Module)
return;
if (!unityInstance.logo) {
unityInstance.logo = document.createElement("div");
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
unityInstance.container.appendChild(unityInstance.logo);
}
if (!unityInstance.progress) {
unityInstance.progress = document.createElement("div");
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
unityInstance.progress.empty = document.createElement("div");
unityInstance.progress.empty.className = "empty";
unityInstance.progress.appendChild(unityInstance.progress.empty);
unityInstance.progress.full = document.createElement("div");
unityInstance.progress.full.className = "full";
unityInstance.progress.appendChild(unityInstance.progress.full);
unityInstance.container.appendChild(unityInstance.progress);
}
unityInstance.progress.full.style.width = (100 * progress) + "%";
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
function UnityProgress(unityInstance, progress) {
if (!unityInstance.Module)
return;
if (!unityInstance.logo) {
unityInstance.logo = document.createElement("div");
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
unityInstance.container.appendChild(unityInstance.logo);
}
if (!unityInstance.progress) {
unityInstance.progress = document.createElement("div");
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
unityInstance.progress.empty = document.createElement("div");
unityInstance.progress.empty.className = "empty";
unityInstance.progress.appendChild(unityInstance.progress.empty);
unityInstance.progress.full = document.createElement("div");
unityInstance.progress.full.className = "full";
unityInstance.progress.appendChild(unityInstance.progress.full);
unityInstance.container.appendChild(unityInstance.progress);
}
unityInstance.progress.full.style.width = (100 * progress) + "%";
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
}

64
src/assets/map/build/TemplateData/style.css
View File

@ -1,32 +1,32 @@
html,body{
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#unityContainer{
width: 100%;
height: 100%;
margin: 0px;
}
.webgl-content * {border: 0; margin: 0; padding: 0;width: 100%; height: 100%;}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;display: none;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
.webgl-content .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}
html,body{
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#unityContainer{
width: 100%;
height: 100%;
margin: 0px;
}
.webgl-content * {border: 0; margin: 0; padding: 0;width: 100%; height: 100%;}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;display: none;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
.webgl-content .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}

90
src/assets/map/build/index.html
View File

@ -1,45 +1,45 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | ShengDaPing</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/sgs.json", {onProgress: UnityProgress});
function home() {
window.history.go(-1);
}
</script>
</head>
<style>
.back{
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
}
.home{
background: #ffffff;
position: absolute;
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
border-radius:5px
}
</style>
<body>
<div class="webgl-content" style="width:100%;height: 100%;">
<div id="unityContainer"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">ShengDaPing</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | ShengDaPing</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/sgs.json", {onProgress: UnityProgress});
function home() {
window.history.go(-1);
}
</script>
</head>
<style>
.back{
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
}
.home{
background: #ffffff;
position: absolute;
bottom: 20px;
right: 50px;
width: 38px;
height: 38px;
border-radius:5px
}
</style>
<body>
<div class="webgl-content" style="width:100%;height: 100%;">
<div id="unityContainer"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">ShengDaPing</div>
</div>
</div>
</body>
</html>

404
src/assets/map/food/foodMap.html
View File

@ -1,203 +1,203 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 16;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png",w:330,h:230, lng:118.82276, lat:32.095614, data: "省公司大楼" },{ icon: "images/1.png",w:300,h:200, lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",w:300,h:200, lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",w:300,h:200, lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png", lng: 118.773886, lat:32.058391, data: "省公司大楼" },{ icon: "images/1.png",lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
// style: "aegis://styles/aegis/Satellite512",
style: "aegis://styles/aegis/Streets",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "200px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 16;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png",w:330,h:230, lng:118.82276, lat:32.095614, data: "省公司大楼" },{ icon: "images/1.png",w:300,h:200, lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",w:300,h:200, lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",w:300,h:200, lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png", lng: 118.773886, lat:32.058391, data: "省公司大楼" },{ icon: "images/1.png",lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
// style: "aegis://styles/aegis/Satellite512",
style: "aegis://styles/aegis/Streets",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "200px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
</html>

402
src/assets/map/green/greenMap.html
View File

@ -1,202 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 5;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "greenImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "greenImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.85244, lat:32.11629, data: "江苏省公司大楼" },{ icon: "greenImages/floor2.png",w:330,h:230, lng: 118.647195, lat: 32.039924, data: "南京市公司大楼" },{ icon: "greenImages/floor3.png",w:330,h:230, lng: 119.02204, lat: 32.10846, data: "客服中心公司大楼" },] },
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.773886, lat:32.058391, data: "江苏省公司大楼" },] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// style: "aegis://styles/aegis/Satellite512",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 5;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "greenImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "greenImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.85244, lat:32.11629, data: "江苏省公司大楼" },{ icon: "greenImages/floor2.png",w:330,h:230, lng: 118.647195, lat: 32.039924, data: "南京市公司大楼" },{ icon: "greenImages/floor3.png",w:330,h:230, lng: 119.02204, lat: 32.10846, data: "客服中心公司大楼" },] },
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.773886, lat:32.058391, data: "江苏省公司大楼" },] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// style: "aegis://styles/aegis/Satellite512",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
</html>

44
src/assets/map/land/data/jd.json
View File

@ -1,23 +1,23 @@
[
{"tudi":"南京市鼓楼区和燕路2号","jd":"栖霞基地","zongbu":"江苏电力公司","fenzhi":"南京供电公司","fangchan":"沿河四村5幢9、10、11、12号","province":"江苏省","city":"南京市","area":"建邺区","position":"118.785821,32.095862"},
{"tudi":"南京市鼓楼区定淮门石头城115号","jd":"城北基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"裕顺雅苑6号401室","province":"江苏省","city":"南京市","area":"鼓楼区","position":"118.747813,32.066839"},
{"tudi":"南京市秦淮区火瓦巷51号","jd":"城南基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元704室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.789691,32.032739"},
{"tudi":"南京市雨花台区雨花南路32号","zongbu":"雨花基地","fenzhi":"","fangchan":"宁夏路1号101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.769801,31.994273"},
{"tudi":"南京市建邺区奥体大街1号","jd":"公司大楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号（枫亚苑05幢701室）","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.744015,31.990507"},
{"tudi":"南京市鼓楼区中山北路217号","jd":"龙吟广场","fenzhi":"","fangchan":"龙池阉64号602室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙池阉64号","position":"118.76956,32.070685"},
{"tudi":"南京市鼓楼区峨嵋路21号","jd":"健康中心（安仁街变）","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1701室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.770386,32.044743"},
{"tudi":"南京市鼓楼区龙池庵66号","jd":"苏电宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元402室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.750561,32.084403"},
{"tudi":"南京市玄武区中山路251号","jd":"新纪元宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库17号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.784701,32.049814"},
{"tudi":"南京市江宁区天元中路19号","jd":"峰电大厦","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库21号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.843786,31.93144"},
{"tudi":"南京市玄武区中山路250号","jd":"老卫生所","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1103室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.784696,32.049813"},
{"tudi":"南京市浦口区龙华路19号","jd":"龙华路19号基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"乐山路207号12栋一单元1302","province":"江苏省","city":"南京市","area":"建邺区","street":"乐山路207号","position":"118.640574,32.069147"},
{"tudi":"南京市六合区雄州镇园林西路8巷13号","jd":"六合园林路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"宁夏路1号102室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.845591,32.352524"},
{"tudi":"南京市六合区雄州镇方州路北侧","jd":"六合方州路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号6幢508室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.836226,32.364984"},
{"tudi":"南京市浦口区泰西路8号","jd":"泰西路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"中山路268号1幢2101-2112室","province":"江苏省","city":"南京市","area":"玄武区","street":"中山路268号","position":"118.708405,32.149725"},
{"tudi":"南京市江宁区天印大道1398号","jd":"江宁新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号（枫亚苑05幢1801室）","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.864288,31.942295"},
{"tudi":"南京市江宁区上元大街598号","jd":"江宁老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"港龙园15幢101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"港龙园小区","position":"118.849567,31.954672"},
{"tudi":"南京市高淳区北岭路23号","jd":"高淳新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1204室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.874337,31.332819"},
{"tudi":"南京市高淳区镇兴路1号","jd":"高淳老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号7幢605室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.865921,31.325835"},
{"tudi":"江苏省南京市溧水县永阳镇交通路99号","jd":"溧水培训办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"传达室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"北京西路20号","position":"119.035663,31.660993"},
{"tudi":"江苏省南京市溧水县永阳镇珍珠北路16号","jd":"溧水综合办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"锁金四村31幢2单元503室","province":"江苏省","city":"南京市","area":"玄武区","street":"锁金四村","position":"119.03119,31.654953"}
[
{"tudi":"南京市鼓楼区和燕路2号","jd":"栖霞基地","zongbu":"江苏电力公司","fenzhi":"南京供电公司","fangchan":"沿河四村5幢9、10、11、12号","province":"江苏省","city":"南京市","area":"建邺区","position":"118.785821,32.095862"},
{"tudi":"南京市鼓楼区定淮门石头城115号","jd":"城北基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"裕顺雅苑6号401室","province":"江苏省","city":"南京市","area":"鼓楼区","position":"118.747813,32.066839"},
{"tudi":"南京市秦淮区火瓦巷51号","jd":"城南基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元704室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.789691,32.032739"},
{"tudi":"南京市雨花台区雨花南路32号","zongbu":"雨花基地","fenzhi":"","fangchan":"宁夏路1号101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.769801,31.994273"},
{"tudi":"南京市建邺区奥体大街1号","jd":"公司大楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号（枫亚苑05幢701室）","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.744015,31.990507"},
{"tudi":"南京市鼓楼区中山北路217号","jd":"龙吟广场","fenzhi":"","fangchan":"龙池阉64号602室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙池阉64号","position":"118.76956,32.070685"},
{"tudi":"南京市鼓楼区峨嵋路21号","jd":"健康中心（安仁街变）","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1701室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.770386,32.044743"},
{"tudi":"南京市鼓楼区龙池庵66号","jd":"苏电宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元402室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.750561,32.084403"},
{"tudi":"南京市玄武区中山路251号","jd":"新纪元宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库17号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.784701,32.049814"},
{"tudi":"南京市江宁区天元中路19号","jd":"峰电大厦","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库21号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.843786,31.93144"},
{"tudi":"南京市玄武区中山路250号","jd":"老卫生所","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1103室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.784696,32.049813"},
{"tudi":"南京市浦口区龙华路19号","jd":"龙华路19号基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"乐山路207号12栋一单元1302","province":"江苏省","city":"南京市","area":"建邺区","street":"乐山路207号","position":"118.640574,32.069147"},
{"tudi":"南京市六合区雄州镇园林西路8巷13号","jd":"六合园林路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"宁夏路1号102室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.845591,32.352524"},
{"tudi":"南京市六合区雄州镇方州路北侧","jd":"六合方州路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号6幢508室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.836226,32.364984"},
{"tudi":"南京市浦口区泰西路8号","jd":"泰西路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"中山路268号1幢2101-2112室","province":"江苏省","city":"南京市","area":"玄武区","street":"中山路268号","position":"118.708405,32.149725"},
{"tudi":"南京市江宁区天印大道1398号","jd":"江宁新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号（枫亚苑05幢1801室）","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.864288,31.942295"},
{"tudi":"南京市江宁区上元大街598号","jd":"江宁老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"港龙园15幢101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"港龙园小区","position":"118.849567,31.954672"},
{"tudi":"南京市高淳区北岭路23号","jd":"高淳新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1204室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.874337,31.332819"},
{"tudi":"南京市高淳区镇兴路1号","jd":"高淳老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号7幢605室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.865921,31.325835"},
{"tudi":"江苏省南京市溧水县永阳镇交通路99号","jd":"溧水培训办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"传达室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"北京西路20号","position":"119.035663,31.660993"},
{"tudi":"江苏省南京市溧水县永阳镇珍珠北路16号","jd":"溧水综合办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"锁金四村31幢2单元503室","province":"江苏省","city":"南京市","area":"玄武区","street":"锁金四村","position":"119.03119,31.654953"}
]

691546
src/assets/map/land/data/map/js.json
View File

File diff suppressed because it is too large Load Diff

6
src/assets/map/land/js/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/assets/map/land/js/socket.io.js
View File

File diff suppressed because one or more lines are too long

3626
src/assets/map/land/landMap.html
View File

File diff suppressed because it is too large Load Diff

534
src/assets/map/travel/travelMap.html
View File

@ -1,268 +1,268 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#car01{
width: 650px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 50%;
top: 70%;
background: #789cd1;
opacity: 0.9;
color: #fff;
display: none;
font-size: 14px;
}
#car02{
width: 553px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 30%;
top: 65%;
position: absolute;
background: #789cd1;
opacity: 0.9;
color: #fff;
font-size: 14px;
display:none
}
#car03{
width: 553px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
position: absolute;
left: 14%;
top: 36%;
background: #789cd1;
opacity: 0.9;
color: #fff;
font-size: 14px;
display:none
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<div id="car01">
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
</div>
<div id="car02">
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
</div>
<div id="car03">
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
</div>
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 16;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "travelImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "travelImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
"nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png", lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png", lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// style: "aegis://styles/aegis/Satellite512",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
if(e.currentTarget.cusData.data=='车辆1'){
document.querySelector('#car01').style.display = 'block';
document.querySelector('#car02').style.display = 'none';
document.querySelector('#car03').style.display = 'none';
}else if(e.currentTarget.cusData.data=='车辆2'){
document.querySelector('#car01').style.display = 'none';
document.querySelector('#car02').style.display = 'block';
document.querySelector('#car03').style.display = 'none';
}else if(e.currentTarget.cusData.data=='车辆3'){
document.querySelector('#car01').style.display = 'none';
document.querySelector('#car02').style.display = 'none';
document.querySelector('#car03').style.display = 'block';
}
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#car01{
width: 650px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 50%;
top: 70%;
background: #789cd1;
opacity: 0.9;
color: #fff;
display: none;
font-size: 14px;
}
#car02{
width: 553px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 30%;
top: 65%;
position: absolute;
background: #789cd1;
opacity: 0.9;
color: #fff;
font-size: 14px;
display:none
}
#car03{
width: 553px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
position: absolute;
left: 14%;
top: 36%;
background: #789cd1;
opacity: 0.9;
color: #fff;
font-size: 14px;
display:none
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<div id="car01">
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
</div>
<div id="car02">
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
</div>
<div id="car03">
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
</div>
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 16;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "travelImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "travelImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
"nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png", lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png", lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// style: "aegis://styles/aegis/Satellite512",
// 默认缩放层级
zoom: 11,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
if(e.currentTarget.cusData.data=='车辆1'){
document.querySelector('#car01').style.display = 'block';
document.querySelector('#car02').style.display = 'none';
document.querySelector('#car03').style.display = 'none';
}else if(e.currentTarget.cusData.data=='车辆2'){
document.querySelector('#car01').style.display = 'none';
document.querySelector('#car02').style.display = 'block';
document.querySelector('#car03').style.display = 'none';
}else if(e.currentTarget.cusData.data=='车辆3'){
document.querySelector('#car01').style.display = 'none';
document.querySelector('#car02').style.display = 'none';
document.querySelector('#car03').style.display = 'block';
}
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
</html>

402
src/assets/map/wisdom/wisdomMap.html
View File

@ -1,202 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 5;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",w:300,h:200, lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png",w:300,h:200, lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png", lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
"nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// 默认缩放层级
zoom: 16,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>思极地图</title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div style="position:absolute;top:2rem;left:2rem;">
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script id="mapScript">
var map = null;
var defaultLevel = 5;//默认层级
var defaultArea = "nj";
var positions = {
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",w:300,h:200, lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png",w:300,h:200, lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png", lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
"nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" }] },
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
}
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
var lng = positions[defaultArea].lng;
var lat = positions[defaultArea].lat;
if (area != null) {
defaultArea = area;
lng = positions[defaultArea].lng;
lat = positions[defaultArea].lat;
}
map = new SGMap.Map({
// 地图绑定的DOM元素ID
container: "map",
// 地图样式
style: "aegis://styles/aegis/Streets",
// 默认缩放层级
zoom: 16,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 45,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
loadMarkers(defaultArea);
reportLocation();
}
//获取地图层级
function getMapZoom() {
return map.getZoom();
}
//设置地图层级
function setMapZoom(n) {
if (!isNaN(n) && n >= 0 && n <= 20)
map.setZoom(n);
}
//设置地图中心
function setMapCenter(lat, lng) {
map.setCenter([lng, lat]);
}
//获取地图当前中心点坐标
function getMapCenter() {
return map.getCenter();
}
//每秒汇报当前中心点坐标
function reportLocation() {
var centerPoint = getMapCenter();
console.log(centerPoint);
window.setTimeout("reportLocation()", 1000);
}
//地点跳转
function gotoPosition(posName) {
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
loadMarkers(posName);
}
//画marker点
function addMarker(markerData) {
var el = document.createElement("img");
el.cusData = markerData;
el.className = "marker";
// 自定义图标
el.src = markerData.icon;
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
// el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
// 如果不传el，会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
});
mk.setLngLat([markerData.lng, markerData.lat]);
mk.addTo(map);
el.addEventListener("click", function (e) {
/////////////////////////////////自定义输出内容//////////////////////////////////////
console.log("跳转" + e.target.cusData.data);
});
return mk;
}
//加载图标
var markerArray = new Array();
function loadMarkers(posName) {
for (var i in markerArray) {
markerArray[i].remove();
}
markerArray = new Array();
var markers = positions[posName].markers;
if (markers != undefined && markers != null) {
for (var i in markers) {
var markerData = markers[i];
markerArray.push(addMarker(markerData));
}
}
}
/*
1.获取2个经纬度之间的距离
2.lng1 lat1 经纬度1
3.lng2 lat2 经纬度2
*/
function getDisance(lng1, lat1, lng2, lat2) {
var dis = 0;
var radius = 6378137;//地球的半径
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(deltaLat / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(deltaLng / 2), 2)
)
);
return dis * radius;
}
//获取URL参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</body>
</html>

BIN
src/assets/newbanImg/bgTop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
src/assets/newbanImg/biandianzhan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 891 B

BIN
src/assets/newbanImg/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 577 B

BIN
src/assets/newbanImg/contentPop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/newbanImg/daibangongdan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 487 B

BIN
src/assets/newbanImg/fanhui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 B

BIN
src/assets/newbanImg/homeBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/newbanImg/jinggao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 839 B

BIN
src/assets/newbanImg/mapBeijing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
src/assets/newbanImg/shishifuhe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

BIN
src/assets/newbanImg/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/newbanImg/titlebeijing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/newbanImg/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 B

BIN
src/assets/newbanImg/yellowIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/newbanImg/zhuyao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/newbanImg/zuori.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 B

196
src/assets/scss/_variables.scss
View File

@ -1,98 +1,98 @@
// 颜色
$colors: (
"primary": #1A5CD7,
"info-1": #4394e4,
"info": #4b67af,
"white": #ffffff,
"light": #f9f9f9,
"grey-1": #999999,
"grey": #666666,
"dark-1": #5f5f5f,
"dark": #222222,
"black-1": #171823,
"black": #000000,
"icon": #5cd9e8
);
// 字体大小
$base-font-size: 0.2rem;
$font-sizes: (
xxs: 0.1,
//8px
xs: 0.125,
//10px
sm: 0.2875,
//12px
md: 0.1625,
//13px
lg: 0.175,
//14px
xl: 0.2,
//16px
xxl: 0.225,
//18px
xxxl: 0.25 //20px,,,,
);
// 宽高
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
//flex
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
.flex-1 {
flex: 1;
}
//.mt-1 => margin top
//spacing
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-base-size: 0.5rem;
$spacing-sizes: (
0: 0,
1: 0.5,
2: 1,
3: 1.5,
4: 2,
5: 2.5,
);
// 颜色
$colors: (
"primary": #1A5CD7,
"info-1": #4394e4,
"info": #4b67af,
"white": #ffffff,
"light": #f9f9f9,
"grey-1": #999999,
"grey": #666666,
"dark-1": #5f5f5f,
"dark": #222222,
"black-1": #171823,
"black": #000000,
"icon": #5cd9e8
);
// 字体大小
$base-font-size: 0.2rem;
$font-sizes: (
xxs: 0.1,
//8px
xs: 0.125,
//10px
sm: 0.2875,
//12px
md: 0.1625,
//13px
lg: 0.175,
//14px
xl: 0.2,
//16px
xxl: 0.225,
//18px
xxxl: 0.25 //20px,,,,
);
// 宽高
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
//flex
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
.flex-1 {
flex: 1;
}
//.mt-1 => margin top
//spacing
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-base-size: 0.5rem;
$spacing-sizes: (
0: 0,
1: 0.5,
2: 1,
3: 1.5,
4: 2,
5: 2.5,
);

376
src/assets/scss/index.scss
View File

@ -1,189 +1,189 @@
@import "./variables";
#index {
color: #d3d6dd;
// width: 1920px;
// height: 1080px;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: scale(1, 1) translate(-50%, -50%)!important;
transform-origin: left top;
overflow: hidden;
.bg {
width: 100%;
height: 100%;
padding: 0px 0px 0 0px;
// background-image: url("/src/assets/pageBg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
// .body-header {
// width: 100%;
// height: 244px;
// position: absolute;
// top:0px
// }
.body-bottom {
width: 100%;
height: 244px;
position: absolute;
bottom:0px
}
.body-left {
position: absolute;
// left: -390px;
left: 0px;
float: left;
width: 779px;
height: 1080px;
// background: url(./assets/left.png) no-repeat;
// background: url('/src/assets/left.png') no-repeat;
background-size: cover;
}
.body-right {
position: absolute;
right: 0px;
float: right;
width: 779px;
height: 1080px;
background-size: cover;
}
.host-body {
.dv-dec-10,
.dv-dec-10-s {
width: 33.3%;
height: 5px;
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-8 {
width: 200px;
height: 50px;
}
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.title-text {
font-size: 24px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
}
// 第二行
.aside-width {
width: 40%;
}
.react-r-s,
.react-l-s {
background-color: #0f1325;
}
// 平行四边形
.react-right {
&.react-l-s {
text-align: right;
width: 500px;
}
font-size: 18px;
width: 300px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
}
.react-left {
&.react-l-s {
width: 500px;
text-align: left;
}
font-size: 18px;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
background-color: #0f1325;
.react-left {
position: absolute;
left: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(-45deg);
}
}
.body-box {
margin-top: -55px;
// margin-top: 16px;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bottom-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
}
@import "./variables";
#index {
color: #d3d6dd;
// width: 1920px;
// height: 1080px;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: scale(1, 1) translate(-50%, -50%)!important;
transform-origin: left top;
overflow: hidden;
.bg {
width: 100%;
height: 100%;
padding: 0px 0px 0 0px;
// background-image: url("/src/assets/pageBg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
// .body-header {
// width: 100%;
// height: 244px;
// position: absolute;
// top:0px
// }
.body-bottom {
width: 100%;
height: 244px;
position: absolute;
bottom:0px
}
.body-left {
position: absolute;
// left: -390px;
left: 0px;
float: left;
width: 779px;
height: 1080px;
// background: url(./assets/left.png) no-repeat;
// background: url('/src/assets/left.png') no-repeat;
background-size: cover;
}
.body-right {
position: absolute;
right: 0px;
float: right;
width: 779px;
height: 1080px;
background-size: cover;
}
.host-body {
.dv-dec-10,
.dv-dec-10-s {
width: 33.3%;
height: 5px;
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-8 {
width: 200px;
height: 50px;
}
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.title-text {
font-size: 24px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
}
// 第二行
.aside-width {
width: 40%;
}
.react-r-s,
.react-l-s {
background-color: #0f1325;
}
// 平行四边形
.react-right {
&.react-l-s {
text-align: right;
width: 500px;
}
font-size: 18px;
width: 300px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
}
.react-left {
&.react-l-s {
width: 500px;
text-align: left;
}
font-size: 18px;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
background-color: #0f1325;
.react-left {
position: absolute;
left: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(-45deg);
}
}
.body-box {
margin-top: -55px;
// margin-top: 16px;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bottom-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
}
}

650
src/assets/scss/style.scss
View File

@ -1,326 +1,326 @@
@import "./variables";
// 全局样式
* {
margin: 0;
padding: 0;
list-style-type: none;
outline: none;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2em;
// background-color: #f1f1f1;
// background-color: #0d131f;
margin: 0;
padding: 0;
}
a {
color: #343440;
text-decoration: none;
}
.clearfix {
&::after {
content: "";
display: table;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
//浮动
.float-r {
float: right;
}
//浮动
.float-l {
float: left;
}
// 字体加粗
.fw-b {
font-weight: bold;
}
//文章一行显示，多余省略号显示
.title-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 返回按钮 */
.back-button a {
position: absolute;
right: 22px;
top: 41px;
width: 55px;
height: 21px;
background-color: transparent;
border: 0;
background-image: url('../bt-02.png');
cursor: pointer;
}
.back-button a:hover {
background-image: url('../bt-002.png');
}
.bg-color-black {
background-color: rgba(19, 25, 47, 0.6);
}
.bg-color-blue {
background-color: #1a5cd7;
}
// 切换按钮样式
.tabs_datag {
ul {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 20px;
font-size: 13px;
margin: 0 30px 0 0;
li {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #09304a;
border: 1px solid #0b5593;
color: #8ebbcd;
cursor: pointer;
text-align: center;
}
li:nth-child(1) {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #0b4471;
border: 1px solid #0e8bff;
color: #fff;
cursor: pointer;
text-align: center;
}
li:hover {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #0b4471;
border: 1px solid #0e8bff;
color: #fff;
cursor: pointer;
text-align: center;
}
}
}
// 切换按钮样式
.tabs_datag1 {
ul {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 20px;
font-size: 13px;
margin: 0 30px 0 0;
li {
margin: 0 5px;
width: 66px;
height: 24px;
padding-top: 2px;
//background: #09304a;
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
//border: 1px solid transparent;
color: #8ebbcd;
cursor: pointer;
text-align: center;
}
li:nth-child(1) {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
li:hover {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
}
}
.colorBlack {
color: #272727 !important;
&:hover {
color: #272727 !important;
}
}
.colorGrass {
color: #33cea0;
&:hover {
color: #33cea0 !important;
}
}
.colorRed {
color: #ff5722;
&:hover {
color: #ff5722 !important;
}
}
.colorText {
color: #d3d6dd !important;
&:hover {
color: #d3d6dd !important;
}
}
.colorBlue {
color: #257dff !important;
&:hover {
color: #257dff !important;
}
}
.colorCyan {
color: #5fbae9 !important;
&:hover {
color: #5fbae9 !important;
}
}
.colorWhi {
color: #b3def2 !important;
&:hover {
color: #b3def2 !important;
}
}
//颜色
@each $colorkey,
$color in $colors {
.text-#{$colorkey} {
color: $color;
}
.bg-#{$colorkey} {
background-color: $color;
}
}
//对齐
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
//flex
@each $key,
$value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key,
$value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
//字体
@each $fontkey,
$fontvalue in $font-sizes {
.fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size;
}
}
//.mt-1 => margin top
//spacing
@each $typekey,
$type in $spacing-types {
//.m-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size;
}
}
//.mx-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typekey}y-#{$sizekey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
//.mt-1
@each $directionkey,
$direction in $spacing-directions {
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
.#{$typekey} {
#{$type}: 0;
}
@import "./variables";
// 全局样式
* {
margin: 0;
padding: 0;
list-style-type: none;
outline: none;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2em;
// background-color: #f1f1f1;
// background-color: #0d131f;
margin: 0;
padding: 0;
}
a {
color: #343440;
text-decoration: none;
}
.clearfix {
&::after {
content: "";
display: table;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
//浮动
.float-r {
float: right;
}
//浮动
.float-l {
float: left;
}
// 字体加粗
.fw-b {
font-weight: bold;
}
//文章一行显示，多余省略号显示
.title-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 返回按钮 */
.back-button a {
position: absolute;
right: 22px;
top: 41px;
width: 55px;
height: 21px;
background-color: transparent;
border: 0;
background-image: url('../bt-02.png');
cursor: pointer;
}
.back-button a:hover {
background-image: url('../bt-002.png');
}
.bg-color-black {
background-color: rgba(19, 25, 47, 0.6);
}
.bg-color-blue {
background-color: #1a5cd7;
}
// 切换按钮样式
.tabs_datag {
ul {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 20px;
font-size: 13px;
margin: 0 30px 0 0;
li {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #09304a;
border: 1px solid #0b5593;
color: #8ebbcd;
cursor: pointer;
text-align: center;
}
li:nth-child(1) {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #0b4471;
border: 1px solid #0e8bff;
color: #fff;
cursor: pointer;
text-align: center;
}
li:hover {
margin: 0 5px;
width: 66px;
height: 26px;
line-height: 4px;
background: #0b4471;
border: 1px solid #0e8bff;
color: #fff;
cursor: pointer;
text-align: center;
}
}
}
// 切换按钮样式
.tabs_datag1 {
ul {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 20px;
font-size: 13px;
margin: 0 30px 0 0;
li {
margin: 0 5px;
width: 66px;
height: 24px;
padding-top: 2px;
//background: #09304a;
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
//border: 1px solid transparent;
color: #8ebbcd;
cursor: pointer;
text-align: center;
}
li:nth-child(1) {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
li:hover {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
}
}
.colorBlack {
color: #272727 !important;
&:hover {
color: #272727 !important;
}
}
.colorGrass {
color: #33cea0;
&:hover {
color: #33cea0 !important;
}
}
.colorRed {
color: #ff5722;
&:hover {
color: #ff5722 !important;
}
}
.colorText {
color: #d3d6dd !important;
&:hover {
color: #d3d6dd !important;
}
}
.colorBlue {
color: #257dff !important;
&:hover {
color: #257dff !important;
}
}
.colorCyan {
color: #5fbae9 !important;
&:hover {
color: #5fbae9 !important;
}
}
.colorWhi {
color: #b3def2 !important;
&:hover {
color: #b3def2 !important;
}
}
//颜色
@each $colorkey,
$color in $colors {
.text-#{$colorkey} {
color: $color;
}
.bg-#{$colorkey} {
background-color: $color;
}
}
//对齐
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
//flex
@each $key,
$value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key,
$value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
//字体
@each $fontkey,
$fontvalue in $font-sizes {
.fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size;
}
}
//.mt-1 => margin top
//spacing
@each $typekey,
$type in $spacing-types {
//.m-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size;
}
}
//.mx-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typekey}y-#{$sizekey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
//.mt-1
@each $directionkey,
$direction in $spacing-directions {
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
.#{$typekey} {
#{$type}: 0;
}
}

4
src/assets/socket.io.js
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/weather/Cloudy .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/weather/bigrain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/bigsnow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/weather/gale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/weather/hail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/middlerain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/weather/mieddlesnow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/moon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/night.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/rain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/weather/rainlitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/weather/rainsnow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/weather/rainstorm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/sand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/shower.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/weather/smog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/snow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/weather/sun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/weather/thunder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

138
src/common/echart/index.vue
View File

@ -1,69 +1,69 @@
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import tdTheme from './theme.json' // 引入默认主题
import '../map/fujian.js'
export default {
name: 'echart',
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '2.5rem'
},
options: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null
}
},
watch: {
options: {
handler(options) {
// 设置true清空echart缓存
this.chart.setOption(options, true)
},
deep: true
}
},
mounted() {
console.log("options", this.options)
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
this.initChart();
},
beforeDestroy() {
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log("$el", this.$el)
// 初始化echart
this.chart = this.$echarts.init(this.$el, 'tdTheme')
this.chart.setOption(this.options, true)
}
}
}
</script>
<style>
</style>
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import tdTheme from './theme.json' // 引入默认主题
import '../map/fujian.js'
export default {
name: 'echart',
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '2.5rem'
},
options: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null
}
},
watch: {
options: {
handler(options) {
// 设置true清空echart缓存
this.chart.setOption(options, true)
},
deep: true
}
},
mounted() {
console.log("options", this.options)
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
this.initChart();
},
beforeDestroy() {
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log("$el", this.$el)
// 初始化echart
this.chart = this.$echarts.init(this.$el, 'tdTheme')
this.chart.setOption(this.options, true)
}
}
}
</script>
<style>
</style>

980
src/common/echart/theme.json
View File

@ -1,490 +1,490 @@
{
"color": [
"#2d8cf0",
"#19be6b",
"#ff9900",
"#E46CBB",
"#9A66E4",
"#ed3f14"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"lineStyle": {
"normal": {
"width": 1,
"color": "#aaa"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#2d8cf0",
"#19be6b",
"#f5ae4a",
"#9189d5",
"#56cae2",
"#cbb0e3"
],
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#fff"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#fff"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999"
},
"emphasis": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#fff"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": 1
},
"crossStyle": {
"color": "#ccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#8fd3e8",
"borderWidth": 1
},
"emphasis": {
"color": "#8fd3e8"
}
},
"controlStyle": {
"normal": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"emphasis": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "rgba(138,124,168,0.37)"
},
"label": {
"normal": {
"textStyle": {
"color": "#8fd3e8"
}
},
"emphasis": {
"textStyle": {
"color": "#8fd3e8"
}
}
}
},
"visualMap": {
"color": [
"#516b91",
"#59c4e6",
"#a5e7f0"
]
},
"dataZoom": {
"backgroundColor": "rgba(0,0,0,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#333"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
},
"emphasis": {
"textStyle": {
"color": "#eee"
}
}
}
}
}
{
"color": [
"#2d8cf0",
"#19be6b",
"#ff9900",
"#E46CBB",
"#9A66E4",
"#ed3f14"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"lineStyle": {
"normal": {
"width": 1,
"color": "#aaa"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#2d8cf0",
"#19be6b",
"#f5ae4a",
"#9189d5",
"#56cae2",
"#cbb0e3"
],
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#fff"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#fff"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999"
},
"emphasis": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#fff"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": 1
},
"crossStyle": {
"color": "#ccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#8fd3e8",
"borderWidth": 1
},
"emphasis": {
"color": "#8fd3e8"
}
},
"controlStyle": {
"normal": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"emphasis": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "rgba(138,124,168,0.37)"
},
"label": {
"normal": {
"textStyle": {
"color": "#8fd3e8"
}
},
"emphasis": {
"textStyle": {
"color": "#8fd3e8"
}
}
}
},
"visualMap": {
"color": [
"#516b91",
"#59c4e6",
"#a5e7f0"
]
},
"dataZoom": {
"backgroundColor": "rgba(0,0,0,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#333"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
},
"emphasis": {
"textStyle": {
"color": "#eee"
}
}
}
}
}

94
src/common/map/fujian.js
View File

File diff suppressed because one or more lines are too long

8
src/common/var.scss
View File

@ -1,5 +1,5 @@
$title-color: #B2E7FD;
$default-font-color: #9ECEE4;
$border-color: #29a3d3a1;
$table-header-color: #5FB7E7;
$title-color: #B2E7FD;
$default-font-color: #9ECEE4;
$border-color: #29a3d3a1;
$table-header-color: #5FB7E7;
$table-header-bg:#0B2F45

258
src/components/BasicBox/index.vue
View File

@ -1,129 +1,129 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
// background: rgba(16,29,37,0.8);
// border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
margin-left: -12px;
background: url('~@/assets/leftthree.png') no-repeat;
background-size: 92%;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 92%;
height: 35px;
line-height: 59px;
/* padding-left: 9px; */
margin-bottom: 5px;
background-size: contain;
color: #fff;
font-weight: 700;
font-size: 15px;
/* position: absolute; */
text-align: center;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
// background: rgba(16,29,37,0.8);
// border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
margin-left: -12px;
background: url('~@/assets/leftthree.png') no-repeat;
background-size: 92%;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 92%;
height: 35px;
line-height: 59px;
/* padding-left: 9px; */
margin-bottom: 5px;
background-size: contain;
color: #fff;
font-weight: 700;
font-size: 15px;
/* position: absolute; */
text-align: center;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>

254
src/components/BasicBox1/index.vue
View File

@ -1,127 +1,127 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource" >
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
<div class="line">
<img src="~@/assets/landRes/line.png" alt="" width="100%" height="100%">
</div>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
// width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource" >
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
<div class="line">
<img src="~@/assets/landRes/line.png" alt="" width="100%" height="100%">
</div>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
// width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>

262
src/components/BasicBox2/index.vue
View File

@ -1,131 +1,131 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
padding: 18px 0px!important;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
padding: 18px 0px!important;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>

504
src/components/BasicBox4/index.vue
View File

@ -1,252 +1,252 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<!-- <div>
<template>
<el-select v-model="valueData" class="timeStle1">
<el-option
class="timeStle"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div> -->
<div class="search-middle">
<div class="search-container">
<el-input type="text" name="" id="cha" placeholder="请输入部门点击查询" class="inputStyle"
v-model="inputInfo.departnew">
</el-input>
<button @click="search()">搜索</button>
</div>
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
valueData: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
options: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return{
inputInfo: {
departnew: '',
jdnew: '',
},
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
search() {
this.$emit('inputData', this.inputInfo.departnew)
this.$parent.sreach()
}
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.timeStle1 {
// width: 150px !important;
// position: relative;
float: right;
margin: 7px 0;
margin-right: 15px;
color: #0e8bff;
// .el-input__inner {
// background: transparent;
// border: 0;
// height: 23px;
// line-height: 23px;
// color: #0e8bff;
// padding: 0 3px;
// }
// .el-input__inner {
// padding: 0 3px;
// }
// .el-input__inner:hover {
// color: #0e8bff;
// }
// .el-input__prefix {
// display: none;
// top: -8px;
// left: 2px;
// }
// .el-input__suffix {
// top: -8px;
// }
}
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
.search-middle {
height: 45px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid #29a3d3a1;
// width: 80%;
width: 95.6%;
float: right;
margin-right: 2%;
}
.search-middle .search-container {
position: relative;
width: 100%;
height: 100%;
}
.search-middle .search-container input:focus {
outline: none;
}
.search-middle .search-container input::-webkit-input-placeholder {
color: rgb(211, 245, 255);
}
.search-middle .search-container button {
width: 80px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
background: 10px 10px url(../../assets/search-button.png) no-repeat;
border: 0;
border-radius: 0;
text-align: center;
line-height: 30px;
cursor: pointer;
padding-left: 20px;
color: #b4e9ff;
}
.inputStyle{
height: 40px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid transparent;
// width: 80%;
width: 80%;
// float: right;
// margin-right: 2%;
color: #fff;
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<!-- <div>
<template>
<el-select v-model="valueData" class="timeStle1">
<el-option
class="timeStle"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div> -->
<div class="search-middle">
<div class="search-container">
<el-input type="text" name="" id="cha" placeholder="请输入部门点击查询" class="inputStyle"
v-model="inputInfo.departnew">
</el-input>
<button @click="search()">搜索</button>
</div>
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
valueData: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
options: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return{
inputInfo: {
departnew: '',
jdnew: '',
},
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
search() {
this.$emit('inputData', this.inputInfo.departnew)
this.$parent.sreach()
}
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.timeStle1 {
// width: 150px !important;
// position: relative;
float: right;
margin: 7px 0;
margin-right: 15px;
color: #0e8bff;
// .el-input__inner {
// background: transparent;
// border: 0;
// height: 23px;
// line-height: 23px;
// color: #0e8bff;
// padding: 0 3px;
// }
// .el-input__inner {
// padding: 0 3px;
// }
// .el-input__inner:hover {
// color: #0e8bff;
// }
// .el-input__prefix {
// display: none;
// top: -8px;
// left: 2px;
// }
// .el-input__suffix {
// top: -8px;
// }
}
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
.search-middle {
height: 45px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid #29a3d3a1;
// width: 80%;
width: 95.6%;
float: right;
margin-right: 2%;
}
.search-middle .search-container {
position: relative;
width: 100%;
height: 100%;
}
.search-middle .search-container input:focus {
outline: none;
}
.search-middle .search-container input::-webkit-input-placeholder {
color: rgb(211, 245, 255);
}
.search-middle .search-container button {
width: 80px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
background: 10px 10px url(../../assets/search-button.png) no-repeat;
border: 0;
border-radius: 0;
text-align: center;
line-height: 30px;
cursor: pointer;
padding-left: 20px;
color: #b4e9ff;
}
.inputStyle{
height: 40px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid transparent;
// width: 80%;
width: 80%;
// float: right;
// margin-right: 2%;
color: #fff;
}
</style>

280
src/components/BasicBox5/index.vue
View File

@ -1,140 +1,140 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<div class="imgurl">
<img src="@/assets/landRes/floor.png" alt="">
</div>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
ul {
padding-bottom: 10px;
max-height: 644px;
overflow-y: scroll;
}
ul::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
display: block;
position: relative;
height: 65px;
background: url('~@/assets/landRes/1.png') no-repeat;
// background-size: contain;
background-size:100%;
padding: 22px 0px!important;
}
.title {
width: 100%;
height: 33px;
line-height: 33px;
padding-left: 30px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
.imgurl{
padding-left: 20px;
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #fff;
width: 38%;
position: absolute;
left: 30px;
}
.right {
width: 62%;
color: #5FB7E7;
position: absolute;
right: 25px;
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<div class="imgurl">
<img src="@/assets/landRes/floor.png" alt="">
</div>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
ul {
padding-bottom: 10px;
max-height: 644px;
overflow-y: scroll;
}
ul::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
display: block;
position: relative;
height: 65px;
background: url('~@/assets/landRes/1.png') no-repeat;
// background-size: contain;
background-size:100%;
padding: 22px 0px!important;
}
.title {
width: 100%;
height: 33px;
line-height: 33px;
padding-left: 30px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
.imgurl{
padding-left: 20px;
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #fff;
width: 38%;
position: absolute;
left: 30px;
}
.right {
width: 62%;
color: #5FB7E7;
position: absolute;
right: 25px;
}
}
}
</style>

416
src/components/BasicBox6/index.vue
View File

@ -1,208 +1,208 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<div class="imgurl">
<img src="@/assets/landIndex/imgC.png" alt="">
</div>
<!-- <div style="padding-left: 20px;color: #8ec1d8;
font-weight: 700;
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div> -->
<!-- <ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="img">
<img src="@/assets/landIndex/scyf.png" alt="" >
</span>
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul> -->
<div class="bottom">
<!-- <div class="titMiddle">公司简介</div> -->
<div style="padding: 15px;color: #8ec1d8;
font-weight: 700;
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="img">
<img src="@/assets/landIndex/scyf.png" alt="" >
</span>
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
<!-- <div class="middle">
<div class="titMin">
<img src="@/assets/landIndex/tit2.png" alt="">
</div>
<p>国网南京供电公司后勤房地资源数量多，种类杂，散落分布在主城六区及江北新区、江宁区、高淳区、溧水区。经统计，现有办公用房21处，建筑面积20.01万平方米，其中本部11处，区公司10处；公有住房285套，建筑面积1万余平方米，其中本部240套，占比84.2%，江北33套，江宁4套，高淳4套，溧水4套。除此之外，还有79套苏逸权属房屋作为主业集体宿舍使用，位于江宁区伦敦城。</p>
</div> -->
<!-- <div class="titMiddle">系统简介</div>
<div class="middle">
<div class="titMin">
<img src="@/assets/landIndex/tit2.png" alt="">
</div>
<p>信息化，可视化地展示国网南京供电公司的房地资源，并对生产用房，辅助用房等房产资源进行数据的管理，统计与分析。</p>
</div> -->
</div>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
ul {
padding-bottom: 10px;
max-height: 644px;
overflow-y: scroll;
}
ul::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
display: block;
position: relative;
height: 65px;
line-height: 23px;
background: url('~@/assets/landRes/1.png') no-repeat;
// background-size: contain;
background-size: 100% 100%;
padding: 22px 0px!important;
}
.title {
width: 100%;
height: 36px;
line-height: 39px;
padding-left: 60px;
margin-bottom: 5px;
background: 30px url('~@/assets/landIndex/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 18px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
.imgurl{
padding-left: 60px;
}
.bottom{
padding-left: 60px;
.titMiddle{
height: 55px;
line-height: 37px;
padding-left: 42px;
margin-top: 35px;
font-weight: 700;
background: url('~@/assets/landIndex/tit1.png') no-repeat;
}
.middle{
padding-right: 22px;
margin: 0 auto;
}
.titMin{
display: inline;
}
p{
display: inline;
line-height: 35px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.img{
width: 20%;
position: absolute;
height: 100%;
top: 14px;
left: 5%;
}
.left {
color: #fff;
width: 45%;
position: absolute;
left:15%
}
.right {
width: 35%;
color: #5FB7E7;
position: absolute;
left:50%
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<slot name="top"></slot>
<div class="imgurl">
<img src="@/assets/landIndex/imgC.png" alt="">
</div>
<!-- <div style="padding-left: 20px;color: #8ec1d8;
font-weight: 700;
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div> -->
<!-- <ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="img">
<img src="@/assets/landIndex/scyf.png" alt="" >
</span>
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul> -->
<div class="bottom">
<!-- <div class="titMiddle">公司简介</div> -->
<div style="padding: 15px;color: #8ec1d8;
font-weight: 700;
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="img">
<img src="@/assets/landIndex/scyf.png" alt="" >
</span>
<span class="left">{{ item.key }}：</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
<!-- <div class="middle">
<div class="titMin">
<img src="@/assets/landIndex/tit2.png" alt="">
</div>
<p>国网南京供电公司后勤房地资源数量多，种类杂，散落分布在主城六区及江北新区、江宁区、高淳区、溧水区。经统计，现有办公用房21处，建筑面积20.01万平方米，其中本部11处，区公司10处；公有住房285套，建筑面积1万余平方米，其中本部240套，占比84.2%，江北33套，江宁4套，高淳4套，溧水4套。除此之外，还有79套苏逸权属房屋作为主业集体宿舍使用，位于江宁区伦敦城。</p>
</div> -->
<!-- <div class="titMiddle">系统简介</div>
<div class="middle">
<div class="titMin">
<img src="@/assets/landIndex/tit2.png" alt="">
</div>
<p>信息化，可视化地展示国网南京供电公司的房地资源，并对生产用房，辅助用房等房产资源进行数据的管理，统计与分析。</p>
</div> -->
</div>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
},
data() {
return {
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
ul {
padding-bottom: 10px;
max-height: 644px;
overflow-y: scroll;
}
ul::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
display: block;
position: relative;
height: 65px;
line-height: 23px;
background: url('~@/assets/landRes/1.png') no-repeat;
// background-size: contain;
background-size: 100% 100%;
padding: 22px 0px!important;
}
.title {
width: 100%;
height: 36px;
line-height: 39px;
padding-left: 60px;
margin-bottom: 5px;
background: 30px url('~@/assets/landIndex/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 18px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
.imgurl{
padding-left: 60px;
}
.bottom{
padding-left: 60px;
.titMiddle{
height: 55px;
line-height: 37px;
padding-left: 42px;
margin-top: 35px;
font-weight: 700;
background: url('~@/assets/landIndex/tit1.png') no-repeat;
}
.middle{
padding-right: 22px;
margin: 0 auto;
}
.titMin{
display: inline;
}
p{
display: inline;
line-height: 35px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.img{
width: 20%;
position: absolute;
height: 100%;
top: 14px;
left: 5%;
}
.left {
color: #fff;
width: 45%;
position: absolute;
left:15%
}
.right {
width: 35%;
color: #5FB7E7;
position: absolute;
left:50%
}
}
}
</style>

298
src/components/BasicBoxCostControl/index.vue
View File

@ -1,149 +1,149 @@
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
<select v-model="selected" v-if="optList">
<option v-for="(item, index) in optList" :key="index">
{{ item }}
</option>
</select>
</div>
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
<ul style="justify-content: flex-start;">
<li>昨日</li>
<li>本月</li>
<li>本年</li>
</ul>
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
optList:{
default: () => false,
type: [Array, Boolean],
required: true
}
},
data(){
return{
selected: '',
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
@import "~@/assets/scss/index.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>
<template>
<div class="box">
<div class="title">
<!-- <span class="icon"></span> -->
{{ title }}
</div>
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
<select v-model="selected" v-if="optList">
<option v-for="(item, index) in optList" :key="index">
{{ item }}
</option>
</select>
</div>
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
<ul style="justify-content: flex-start;">
<li>昨日</li>
<li>本月</li>
<li>本年</li>
</ul>
</div>
<slot name="top"></slot>
<ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index">
<span class="left">{{ item.key }}</span>
<span class="right">{{ item.value }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
default: () => "",
type: String,
required: true
},
dataSource: {
default: () => false,
type: [Array, Boolean],
required: true
},
optList:{
default: () => false,
type: [Array, Boolean],
required: true
}
},
data(){
return{
selected: '',
}
},
components: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "~@/common/var.scss";
@import "~@/assets/scss/index.scss";
.box {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
ul {
padding-bottom: 10px;
}
li {
width: 100%;
display: block;
position: relative;
height: 25px;
}
.title {
// max-width: 542px;
// // font-family: monospace;
// height: 22px;
// color: $title-color;
// font-size: 20px;
// padding-left: 50px;
// height: 40px;
// line-height: 40px;
// background: url('~@/assets/tit.png') no-repeat center;
width: 100%;
height: 25px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
li {
position: relative;
padding: 12px 0;
width: 100%;
.left {
color: #5FB7E7;
position: absolute;
left: 25px;
}
.right {
width: 68%;
color: #fff;
position: absolute;
right: 25px;
}
}
}
</style>

136
src/components/costControl/index.vue
View File

@ -1,69 +1,69 @@
<template>
<div class="customDvScrollBoard">
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
},
data() {
return {
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "排名",
index: true,
header: ['费用类别', '车型', '车均费用'],
// columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
<template>
<div class="customDvScrollBoard">
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
},
data() {
return {
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "排名",
index: true,
header: ['费用类别', '车型', '车均费用'],
// columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
</style>

204
src/components/customDvScrollBoard/index.vue
View File

@ -1,103 +1,103 @@
<template>
<div class="customDvScrollBoard">
<!-- <dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" /> -->
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
// header: {
// type: Object,
// default: () => { },
// required: true
// },
},
data() {
return {
// configd:'',
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: [],
// header: ['规划用途', '全省数量', '全省占比'],
header: ['规划用途', '数量', '占比'],
columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
.dv-scroll-board .rows {
/* overflow: hidden; */
overflow-y: scroll;
}
.dv-scroll-board .rows::-webkit-scrollbar{
display: none
}
.dv-scroll-board .rows .ceil {
text-align: center;
}
.dv-scroll-board .header .header-item {
text-align: center;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
<template>
<div class="customDvScrollBoard">
<!-- <dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" /> -->
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
// header: {
// type: Object,
// default: () => { },
// required: true
// },
},
data() {
return {
// configd:'',
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: [],
// header: ['规划用途', '全省数量', '全省占比'],
header: ['规划用途', '数量', '占比'],
columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
.dv-scroll-board .rows {
/* overflow: hidden; */
overflow-y: scroll;
}
.dv-scroll-board .rows::-webkit-scrollbar{
display: none
}
.dv-scroll-board .rows .ceil {
text-align: center;
}
.dv-scroll-board .header .header-item {
text-align: center;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
</style>

160
src/components/customDvScrollBoard1/index.vue
View File

@ -1,81 +1,81 @@
<template>
<div class="customDvScrollBoard">
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
},
data() {
return {
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: ['使用年份', '全省数量', '全省占比'],
header: ['使用年份', '数量', '占比'],
columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
<template>
<div class="customDvScrollBoard">
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
},
data() {
return {
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: ['使用年份', '全省数量', '全省占比'],
header: ['使用年份', '数量', '占比'],
columnWidth: [50],
rowNum: 4,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board .header {
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
</style>

244
src/components/customDvScrollBoard2/index.vue
View File

@ -1,123 +1,123 @@
<template>
<div class="customDvScrollBoard">
<!-- <dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" /> -->
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" @click="rowClick" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
// header: {
// type: Object,
// default: () => { },
// required: true
// },
},
data() {
return {
rowFloor:'',
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: [],
// header: ['规划用途', '全省数量', '全省占比'],
header: ['部门', '楼层', '房号','名称'],
columnWidth: [50],
rowNum: 5,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
},
methods: {
rowClick(data){
console.log("rowClick",data.row[2])
this.rowFloor=data.row[2]
this.$emit('rowFloor', this.rowFloor)
},
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board {
height: 94%!important;
}
.dv-scroll-board .header {
background-color: $table-header-bg!important;
color: $table-header-color!important;
}
.dv-scroll-board .rows {
/* overflow: hidden; */
overflow-y: scroll;
}
.dv-scroll-board .rows::-webkit-scrollbar{
display: none
}
.dv-scroll-board .rows .ceil {
text-align: center;
cursor: pointer;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;
}
.dv-scroll-board .rows .ceil:hover {
overflow: visible; /* 鼠标放上去显示全部文字 */
}
.dv-scroll-board .header .header-item {
text-align: center;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
<template>
<div class="customDvScrollBoard">
<!-- <dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" /> -->
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" @click="rowClick" />
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: () => "css"
},
config: {
type: Object,
default: () => { },
required: true
},
// header: {
// type: Object,
// default: () => { },
// required: true
// },
},
data() {
return {
rowFloor:'',
defaultconfig: {
oddRowBGC: "#081E29",
evenRowBGC: "transparent",
waitTime: 2000000000000000000,
indexHeader: "序号",
index: true,
// header: [],
// header: ['规划用途', '全省数量', '全省占比'],
header: ['部门', '楼层', '房号','名称'],
columnWidth: [50],
rowNum: 5,
data: [
],
...this.config
}
}
},
watch: {
config(val) {
this.defaultconfig.data = val;
console.log("111",val);
}
},
methods: {
rowClick(data){
console.log("rowClick",data.row[2])
this.rowFloor=data.row[2]
this.$emit('rowFloor', this.rowFloor)
},
}
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.customDvScrollBoard {
span.index {
background: none !important;
}
.dv-scroll-board {
height: 94%!important;
}
.dv-scroll-board .header {
background-color: $table-header-bg!important;
color: $table-header-color!important;
}
.dv-scroll-board .rows {
/* overflow: hidden; */
overflow-y: scroll;
}
.dv-scroll-board .rows::-webkit-scrollbar{
display: none
}
.dv-scroll-board .rows .ceil {
text-align: center;
cursor: pointer;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;
}
.dv-scroll-board .rows .ceil:hover {
overflow: visible; /* 鼠标放上去显示全部文字 */
}
.dv-scroll-board .header .header-item {
text-align: center;
}
}
</style>
<style lang="scss" scoped>
.customDvScrollBoard {
.board {
overflow: hidden;
.dv-scroll-board .index {
background: none;
}
}
}
</style>

956
src/components/dialog/index.vue
View File

@ -1,479 +1,479 @@
<template>
<div class="box1">
<div class="title">
<!-- {{ title }} -->
基地部门楼层数据展示
<span style="float: right;
width: 30px;
height: 30px;
padding-right: 19px;" @click="close">X</span>
</div>
<el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
<el-form-item label="部门" prop="departnew">
<el-input v-model="ruleForm.departnew" placeholder="输入部门"></el-input>
</el-form-item>
<el-form-item label="基地" prop="jdnew">
<el-input
v-model="ruleForm.jdnew"
placeholder="输入基地"/>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
:data="tables.slice(
(queryInfo.pagenum - 1) * queryInfo.pagesize,
queryInfo.pagenum * queryInfo.pagesize)"
style="width: 100%"
:row-class-name="tableRowClassName"
:header-cell-style="{
background: '#0B2F45',
color: '#fff',
textAlign: 'center',
}"
@cell-mouse-enter="rowHover"
@cell-mouse-leave="leave"
@row-click="rowclick"
>
<el-table-column
prop="depart"
label="部门">
</el-table-column>
<el-table-column
prop="jd"
label="基地">
</el-table-column>
<!-- <el-table-column
prop="room"
label="房号">
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column> -->
<el-table-column
label="全口径人数" prop="peopleM">
<!-- <el-table-column
prop="people"
label="全民">
</el-table-column> -->
<!-- <el-table-column
prop="other"
label="其他">
</el-table-column> -->
</el-table-column>
<el-table-column
label="所属楼层" prop="floorM">
</el-table-column>
<!-- <el-table-column
prop="square"
label="面积(㎡)">
</el-table-column> -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[10, 15, 20]"
:page-size="queryInfo.pagesize"
:pager-count="5"
layout="total, sizes, pager, next"
:total="tables.length"
style="margin:15px 0px;"
background
></el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
// title: {
// default: () => "",
// type: String,
// required: true
// },
// dataSource: {
// default: () => false,
// type: [Array, Boolean],
// required: true
// },
},
name: "dialogComponent",
data(){
return{
detailVisible:true,
tableData: [],
formInline: {
depart: '',
jd: '',
people:'',
other:'',
square:'',
},
jdNameNew:'',
jdNameNewN:'',
jdNameOther:'',
ruleForm:{
departnew:'',
jdnew:'',
},
departnew:'',
jdnew:'',
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10,
},
jdName:"",
}
},
watch: {
jdNameNew:{
handler(newVal) {
// console.log("newVal",newVal)
this.jdNameOther=newVal
this.$emit('jdNameData',newVal)
}
},
jdNameNewN:{
handler(newVal) {
// console.log("newVal",newVal)
this.$emit('jdNameDataClick',newVal)
}
}
// departnew(newVal, oldVal) {
// console.log("newVal",newVal)
// if (newVal == "") {
// //这个方法是获取后台数据，自己根据自己的要求调用
// this.getJsonData();
// }else{
// this.query();
// }
// },
// jdnew(newVal, oldVal) {
// if (newVal == "") {
// //这个方法是获取后台数据，自己根据自己的要求调用
// this.getJsonData();
// }else{
// this.query();
// // this.queryjd()
// }
// },
},
methods:{
onSubmit() {
console.log('submit!');
},
rowHover(row){
// console.log('row',row.jd);
this.jdNameNew=row.jd
},
leave(){
this.jdNameNew=''
},
rowclick(row){
this.jdNameNewN=row
},
//3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
init(data){
// this.detailVisible=true;
//data是父组件弹窗传递过来的值，我们可以打印看看
console.log(data);
this.getJsonData()
},
close:function(){
this.detailVisible=false
this.$emit('transfer',this.detailVisible)//触发transfer方法，this.user 为向父组件传递的数据
},
getJsonData(){
this.tableData = []
axios.get('/json/departJd.json')
.then(result => {
for (var i = 0; i < result.data.length; i++) {
this.tableData.push(result.data[i])
}
})
.catch(error => {
console.log(error)
})
// axios.get('/json/城南基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/公司大楼.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/健康中心（安仁街变）.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/老卫生所.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/龙吟广场.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/栖霞基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/雨花基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize;
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return "row_color";
} else {
return "row_color_none";
}
},
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage;
},
},
computed: {
// 模糊搜索
tables () {
const departnew = this.ruleForm.departnew
const jdnew = this.ruleForm.jdnew
var that = this
if (departnew || jdnew) {
return this.tableData.filter(data => {
// return Object.keys(data).some(key => {
// return String(data[key]).toLowerCase().indexOf(departnew||jdnew) > -1
// })
let inputTrue = Object.keys(data).some(key =>{
if(key=='depart'){
return String(data[key]).toLowerCase().indexOf(departnew)>-1
}
});
let input2True = Object.keys(data).some(key =>{
if(key =='jd'){
if (String(data[key]).toLowerCase().indexOf(jdnew)>-1) {
let jd =''
jd = data.jd
that.jdName = jd
// that.$emit('jdNameData',that.jdName)
}
return String(data[key]).toLowerCase().indexOf(jdnew)>-1
}
});
// if (data.jd.toLowerCase().indexOf(jdnew) !== -1 ) {
// let jd =''
// jd = data.jd
// that.jdName = jd
// that.$emit('jdNameData',that.jdName)
// }
return inputTrue && input2True
})
}
// console.log("that.jdName",that.jdName)
return that.tableData
}
},
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.box1 {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
overflow-y: scroll;
overflow-x:hidden;
// ul {
// padding-bottom: 10px;
// max-height: 644px;
// overflow-y: scroll;
// }
// ul::-webkit-scrollbar {
// display: none;
// }
// li {
// width: 100%;
// display: block;
// position: relative;
// height: 65px;
// background: url('~@/assets/landRes/1.png') no-repeat;
// // background-size: contain;
// background-size:100%;
// padding: 22px 0px!important;
// }
.title {
width: 100%;
height: 33px;
line-height: 33px;
padding-left: 30px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
}
.box1::-webkit-scrollbar {
display: none;
}
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .0;
background: #fff!important;
}
.el-table thead{
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
.el-dialog{
color: #fff;
// background:transparent;
// background-color:rgba(7, 11, 66, 0.15);
background: #0B2F45 !important;
}
.el-form-item__label{
color: #fff!important;
}
.el-input__inner{
background: rgba(7, 11, 66, 0.15) !important;
}
.el-form--inline .el-form-item {
display: inline-block;
margin-left: 10px;
vertical-align: top;
width: 45%;
}
.el-form--inline .el-form-item__content {
display: inline-block;
vertical-align: top;
width: 78%;
}
.el-table tr {
// background: rgba(16, 29, 37, 0.8)!important;
background: #0B2F45!important;
color: #fff;
}
// .el-table tr:hover{
// color: #0B2F45;
// background: rgba(7, 11, 66, 0.15)!important;
// }
.el-table .cell{
text-align: center;
}
::v-deep .row_color {
// background: #5FB7E7 !important;
background: rgba(7, 11, 66, 0.15) !important;
color: #fff;
}
// 双行颜色
::v-deep .row_color_none {
background: #0B2F45 !important;
color: #fff;
}
.el-dialog__title{
color: #fff!important;
font-weight: 700;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
background: rgba(16, 29, 37, 0.8)!important;
color: #8ec1d8;
opacity: 0.8;
}
<template>
<div class="box1">
<div class="title">
<!-- {{ title }} -->
基地部门楼层数据展示
<span style="float: right;
width: 30px;
height: 30px;
padding-right: 19px;" @click="close">X</span>
</div>
<el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
<el-form-item label="部门" prop="departnew">
<el-input v-model="ruleForm.departnew" placeholder="输入部门"></el-input>
</el-form-item>
<el-form-item label="基地" prop="jdnew">
<el-input
v-model="ruleForm.jdnew"
placeholder="输入基地"/>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
:data="tables.slice(
(queryInfo.pagenum - 1) * queryInfo.pagesize,
queryInfo.pagenum * queryInfo.pagesize)"
style="width: 100%"
:row-class-name="tableRowClassName"
:header-cell-style="{
background: '#0B2F45',
color: '#fff',
textAlign: 'center',
}"
@cell-mouse-enter="rowHover"
@cell-mouse-leave="leave"
@row-click="rowclick"
>
<el-table-column
prop="depart"
label="部门">
</el-table-column>
<el-table-column
prop="jd"
label="基地">
</el-table-column>
<!-- <el-table-column
prop="room"
label="房号">
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column> -->
<el-table-column
label="全口径人数" prop="peopleM">
<!-- <el-table-column
prop="people"
label="全民">
</el-table-column> -->
<!-- <el-table-column
prop="other"
label="其他">
</el-table-column> -->
</el-table-column>
<el-table-column
label="所属楼层" prop="floorM">
</el-table-column>
<!-- <el-table-column
prop="square"
label="面积(㎡)">
</el-table-column> -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[10, 15, 20]"
:page-size="queryInfo.pagesize"
:pager-count="5"
layout="total, sizes, pager, next"
:total="tables.length"
style="margin:15px 0px;"
background
></el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
// title: {
// default: () => "",
// type: String,
// required: true
// },
// dataSource: {
// default: () => false,
// type: [Array, Boolean],
// required: true
// },
},
name: "dialogComponent",
data(){
return{
detailVisible:true,
tableData: [],
formInline: {
depart: '',
jd: '',
people:'',
other:'',
square:'',
},
jdNameNew:'',
jdNameNewN:'',
jdNameOther:'',
ruleForm:{
departnew:'',
jdnew:'',
},
departnew:'',
jdnew:'',
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10,
},
jdName:"",
}
},
watch: {
jdNameNew:{
handler(newVal) {
// console.log("newVal",newVal)
this.jdNameOther=newVal
this.$emit('jdNameData',newVal)
}
},
jdNameNewN:{
handler(newVal) {
// console.log("newVal",newVal)
this.$emit('jdNameDataClick',newVal)
}
}
// departnew(newVal, oldVal) {
// console.log("newVal",newVal)
// if (newVal == "") {
// //这个方法是获取后台数据，自己根据自己的要求调用
// this.getJsonData();
// }else{
// this.query();
// }
// },
// jdnew(newVal, oldVal) {
// if (newVal == "") {
// //这个方法是获取后台数据，自己根据自己的要求调用
// this.getJsonData();
// }else{
// this.query();
// // this.queryjd()
// }
// },
},
methods:{
onSubmit() {
console.log('submit!');
},
rowHover(row){
// console.log('row',row.jd);
this.jdNameNew=row.jd
},
leave(){
this.jdNameNew=''
},
rowclick(row){
this.jdNameNewN=row
},
//3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
init(data){
// this.detailVisible=true;
//data是父组件弹窗传递过来的值，我们可以打印看看
console.log(data);
this.getJsonData()
},
close:function(){
this.detailVisible=false
this.$emit('transfer',this.detailVisible)//触发transfer方法，this.user 为向父组件传递的数据
},
getJsonData(){
this.tableData = []
axios.get('/json/departJd.json')
.then(result => {
for (var i = 0; i < result.data.length; i++) {
this.tableData.push(result.data[i])
}
})
.catch(error => {
console.log(error)
})
// axios.get('/json/城南基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/公司大楼.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/健康中心（安仁街变）.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/老卫生所.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/龙吟广场.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/栖霞基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
// axios.get('/json/雨花基地.json')
// .then(result => {
// for (var i = 0; i < result.data.length; i++) {
// this.tableData.push(result.data[i])
// }
// })
// .catch(error => {
// console.log(error)
// })
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize;
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return "row_color";
} else {
return "row_color_none";
}
},
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage;
},
},
computed: {
// 模糊搜索
tables () {
const departnew = this.ruleForm.departnew
const jdnew = this.ruleForm.jdnew
var that = this
if (departnew || jdnew) {
return this.tableData.filter(data => {
// return Object.keys(data).some(key => {
// return String(data[key]).toLowerCase().indexOf(departnew||jdnew) > -1
// })
let inputTrue = Object.keys(data).some(key =>{
if(key=='depart'){
return String(data[key]).toLowerCase().indexOf(departnew)>-1
}
});
let input2True = Object.keys(data).some(key =>{
if(key =='jd'){
if (String(data[key]).toLowerCase().indexOf(jdnew)>-1) {
let jd =''
jd = data.jd
that.jdName = jd
// that.$emit('jdNameData',that.jdName)
}
return String(data[key]).toLowerCase().indexOf(jdnew)>-1
}
});
// if (data.jd.toLowerCase().indexOf(jdnew) !== -1 ) {
// let jd =''
// jd = data.jd
// that.jdName = jd
// that.$emit('jdNameData',that.jdName)
// }
return inputTrue && input2True
})
}
// console.log("that.jdName",that.jdName)
return that.tableData
}
},
}
</script>
<style lang="scss">
@import "~@/common/var.scss";
.box1 {
// background: #11223289;
background: rgba(16,29,37,0.8);
border: 2px solid $border-color;
padding: 5px 0;
margin-bottom: 10px;
width: 100%;
float: right;
max-height: 860px;
overflow-y: scroll;
overflow-x:hidden;
// ul {
// padding-bottom: 10px;
// max-height: 644px;
// overflow-y: scroll;
// }
// ul::-webkit-scrollbar {
// display: none;
// }
// li {
// width: 100%;
// display: block;
// position: relative;
// height: 65px;
// background: url('~@/assets/landRes/1.png') no-repeat;
// // background-size: contain;
// background-size:100%;
// padding: 22px 0px!important;
// }
.title {
width: 100%;
height: 33px;
line-height: 33px;
padding-left: 30px;
margin-bottom: 5px;
background: -15px url('~@/assets/tit.png') no-repeat;
background-size: contain;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
.icon {
height: 10px;
width: 10px;
transform: rotate(45deg);
background-color: #20BBD2;
display: inline-block;
line-height: 40px;
margin-right: 5px;
padding-left: 5px;
}
}
}
.box1::-webkit-scrollbar {
display: none;
}
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .0;
background: #fff!important;
}
.el-table thead{
background-color: $table-header-bg !important;
color: $table-header-color !important;
}
.el-dialog{
color: #fff;
// background:transparent;
// background-color:rgba(7, 11, 66, 0.15);
background: #0B2F45 !important;
}
.el-form-item__label{
color: #fff!important;
}
.el-input__inner{
background: rgba(7, 11, 66, 0.15) !important;
}
.el-form--inline .el-form-item {
display: inline-block;
margin-left: 10px;
vertical-align: top;
width: 45%;
}
.el-form--inline .el-form-item__content {
display: inline-block;
vertical-align: top;
width: 78%;
}
.el-table tr {
// background: rgba(16, 29, 37, 0.8)!important;
background: #0B2F45!important;
color: #fff;
}
// .el-table tr:hover{
// color: #0B2F45;
// background: rgba(7, 11, 66, 0.15)!important;
// }
.el-table .cell{
text-align: center;
}
::v-deep .row_color {
// background: #5FB7E7 !important;
background: rgba(7, 11, 66, 0.15) !important;
color: #fff;
}
// 双行颜色
::v-deep .row_color_none {
background: #0B2F45 !important;
color: #fff;
}
.el-dialog__title{
color: #fff!important;
font-weight: 700;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
background: rgba(16, 29, 37, 0.8)!important;
color: #8ec1d8;
opacity: 0.8;
}
</style>

298
src/components/echart/bottom/bottomLeftChart/chart.vue
View File

@ -1,150 +1,150 @@
<template>
<div>
<!-- 年度开工率 -->
<Echart
:options="options"
id="bottomLeftChart"
height="480px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
data: ["已贯通", "计划贯通", "贯通率"],
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
x: "8%",
width: "88%",
y: "4%"
},
xAxis: {
data: newData.category,
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisTick: {
show: false
}
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
},
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
}
],
series: [
{
name: "贯通率",
type: "line",
smooth: true,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
normal: {
color: "#F02FC2"
}
},
data: newData.rateData
},
{
name: "已贯通",
type: "bar",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#956FD4" },
{ offset: 1, color: "#3EACE5" }
])
}
},
data: newData.barData
},
{
name: "计划贯通",
type: "bar",
barGap: "-100%",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0.2)" }
])
}
},
z: -12,
data: newData.lineData
}
]
}
},
immediate: true,
deep: true
},
},
}
<template>
<div>
<!-- 年度开工率 -->
<Echart
:options="options"
id="bottomLeftChart"
height="480px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
data: ["已贯通", "计划贯通", "贯通率"],
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
x: "8%",
width: "88%",
y: "4%"
},
xAxis: {
data: newData.category,
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisTick: {
show: false
}
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
},
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
}
],
series: [
{
name: "贯通率",
type: "line",
smooth: true,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
normal: {
color: "#F02FC2"
}
},
data: newData.rateData
},
{
name: "已贯通",
type: "bar",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#956FD4" },
{ offset: 1, color: "#3EACE5" }
])
}
},
data: newData.barData
},
{
name: "计划贯通",
type: "bar",
barGap: "-100%",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0.2)" }
])
}
},
z: -12,
data: newData.lineData
}
]
}
},
immediate: true,
deep: true
},
},
}
</script>

280
src/components/echart/bottom/bottomLeftChart/index.vue
View File

@ -1,141 +1,141 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
cdata: {
category: [
"市区",
"万州",
"江北",
"南岸",
"北碚",
"綦南",
"长寿",
"永川",
"璧山",
"江津",
"城口",
"大足",
"垫江",
"丰都",
"奉节",
"合川",
"江津区",
"开州",
"南川",
"彭水",
"黔江",
"石柱",
"铜梁",
"潼南",
"巫山",
"巫溪",
"武隆",
"秀山",
"酉阳",
"云阳",
"忠县",
"川东",
"检修"
],
lineData: [
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
56061,
62677,
59521,
67560,
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
36097,
39867,
44715,
48444,
50415,
50061,
32677,
49521,
32808
],
barData: [
4600,
5000,
5500,
6500,
7500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
33300,
4600,
5000,
5500,
6500,
7500,
8500,
9900,
22500,
14000,
21500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
7500
],
rateData: []
}
};
},
components: {
Chart,
},
mounted () {
this.setData();
},
methods: {
// 根据自己的业务情况修改
setData () {
for (let i = 0; i < this.cdata.barData.length -1; i++) {
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
this.cdata.rateData.push(rate.toFixed(2));
}
},
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
cdata: {
category: [
"市区",
"万州",
"江北",
"南岸",
"北碚",
"綦南",
"长寿",
"永川",
"璧山",
"江津",
"城口",
"大足",
"垫江",
"丰都",
"奉节",
"合川",
"江津区",
"开州",
"南川",
"彭水",
"黔江",
"石柱",
"铜梁",
"潼南",
"巫山",
"巫溪",
"武隆",
"秀山",
"酉阳",
"云阳",
"忠县",
"川东",
"检修"
],
lineData: [
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
56061,
62677,
59521,
67560,
18092,
20728,
24045,
28348,
32808,
36097,
39867,
44715,
48444,
50415,
36097,
39867,
44715,
48444,
50415,
50061,
32677,
49521,
32808
],
barData: [
4600,
5000,
5500,
6500,
7500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
33300,
4600,
5000,
5500,
6500,
7500,
8500,
9900,
22500,
14000,
21500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
7500
],
rateData: []
}
};
},
components: {
Chart,
},
mounted () {
this.setData();
},
methods: {
// 根据自己的业务情况修改
setData () {
for (let i = 0; i < this.cdata.barData.length -1; i++) {
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
this.cdata.rateData.push(rate.toFixed(2));
}
},
}
};
</script>
<style lang="scss" scoped>
</style>

716
src/components/echart/bottom/bottomRightChart/chart.vue
View File

@ -1,358 +1,358 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="480px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data() {
return {
options: {},
// 定义颜色
colorList: {
linearYtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f5b44d'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearGtoB: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#43dfa2'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1c98e8'
},
{
offset: 1,
color: '#28f8de'
}
]
},
areaBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(35,184,210,.2)'
},
{
offset: 1,
color: 'rgba(35,184,210,0)'
}
]
}
}
}
},
components: {
Echart
},
props: {
cdata: {
type: Object,
default: () => ({})
}
},
watch: {
cdata: {
handler(newData) {
this.options = {
title: {
text: '',
textStyle: {
color: '#D3D6DD',
fontSize: 24,
fontWeight: 'normal'
},
subtext: newData.year + '/' + newData.weekCategory[6],
subtextStyle: {
color: '#fff',
fontSize: 16
},
top: 50,
left: 80
},
legend: {
top: 120,
left: 80,
orient: 'vertical',
itemGap: 15,
itemWidth: 12,
itemHeight: 12,
data: ['平均指标', '我的指标'],
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
radar: {
center: ['68%', '27%'],
radius: '40%',
name: {
color: '#fff'
},
splitNumber: 8,
axisLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitArea: {
areaStyle: {
color: '#fff',
opacity: 0.1,
shadowBlur: 25,
shadowColor: '#000',
shadowOffsetX: 0,
shadowOffsetY: 5
}
},
indicator: [
{
name: '服务态度',
max: newData.maxData
},
{
name: '产品质量',
max: 10
},
{
name: '任务效率',
max: 12
},
{
name: '售后保障',
max: 3.5
}
]
},
grid: {
left: 90,
right: 80,
bottom: 40,
top: '60%'
},
xAxis: {
type: 'category',
position: 'bottom',
axisLine: true,
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
},
data: newData.weekCategory
},
// 下方Y轴
yAxis: {
name: '工单',
nameLocation: 'end',
nameGap: 24,
nameTextStyle: {
color: 'rgba(255,255,255,.5)',
fontSize: 14
},
max: newData.maxData,
splitNumber: 4,
axisLine: {
lineStyle: {
opacity: 0
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.1
}
},
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'radar',
symbolSize: 0,
data: [
{
value: newData.radarDataAvg[6],
name: '平均指标',
itemStyle: {
normal: {
color: '#f8d351'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: '#f8d351',
shadowBlur: 25,
shadowColor: 'rgba(248,211,81,.3)',
shadowOffsetX: 0,
shadowOffsetY: -10,
opacity: 1
}
}
},
{
value: newData.radarData[6],
name: '我的指标',
itemStyle: {
normal: {
color: '#43dfa2'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: this.colorList.linearGtoB,
shadowBlur: 15,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 5,
opacity: 0.8
}
}
}
]
},
{
name: '',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#fff'
}
},
lineStyle: {
normal: {
color: this.colorList.linearBtoG,
width: 3
}
},
areaStyle: {
normal: {
color: this.colorList.areaBtoG
}
},
data: newData.weekLineData,
lineSmooth: true,
markLine: {
silent: true,
data: [
{
type: 'average',
name: '平均值'
}
],
precision: 0,
label: {
normal: {
formatter: '平均值: \n {c}'
}
},
lineStyle: {
normal: {
color: 'rgba(248,211,81,.7)'
}
}
},
tooltip: {
position: 'top',
formatter: '{c} m',
backgroundColor: 'rgba(28,152,232,.2)',
padding: 6
}
},
{
name: '占位背景',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: '#000',
opacity: 0
}
},
silent: true,
barWidth: '50%',
data: newData.weekMaxData,
animation: false
}
]
}
},
immediate: true,
deep: true
}
}
}
</script>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="480px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data() {
return {
options: {},
// 定义颜色
colorList: {
linearYtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f5b44d'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearGtoB: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#43dfa2'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1c98e8'
},
{
offset: 1,
color: '#28f8de'
}
]
},
areaBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(35,184,210,.2)'
},
{
offset: 1,
color: 'rgba(35,184,210,0)'
}
]
}
}
}
},
components: {
Echart
},
props: {
cdata: {
type: Object,
default: () => ({})
}
},
watch: {
cdata: {
handler(newData) {
this.options = {
title: {
text: '',
textStyle: {
color: '#D3D6DD',
fontSize: 24,
fontWeight: 'normal'
},
subtext: newData.year + '/' + newData.weekCategory[6],
subtextStyle: {
color: '#fff',
fontSize: 16
},
top: 50,
left: 80
},
legend: {
top: 120,
left: 80,
orient: 'vertical',
itemGap: 15,
itemWidth: 12,
itemHeight: 12,
data: ['平均指标', '我的指标'],
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
radar: {
center: ['68%', '27%'],
radius: '40%',
name: {
color: '#fff'
},
splitNumber: 8,
axisLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitArea: {
areaStyle: {
color: '#fff',
opacity: 0.1,
shadowBlur: 25,
shadowColor: '#000',
shadowOffsetX: 0,
shadowOffsetY: 5
}
},
indicator: [
{
name: '服务态度',
max: newData.maxData
},
{
name: '产品质量',
max: 10
},
{
name: '任务效率',
max: 12
},
{
name: '售后保障',
max: 3.5
}
]
},
grid: {
left: 90,
right: 80,
bottom: 40,
top: '60%'
},
xAxis: {
type: 'category',
position: 'bottom',
axisLine: true,
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
},
data: newData.weekCategory
},
// 下方Y轴
yAxis: {
name: '工单',
nameLocation: 'end',
nameGap: 24,
nameTextStyle: {
color: 'rgba(255,255,255,.5)',
fontSize: 14
},
max: newData.maxData,
splitNumber: 4,
axisLine: {
lineStyle: {
opacity: 0
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.1
}
},
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'radar',
symbolSize: 0,
data: [
{
value: newData.radarDataAvg[6],
name: '平均指标',
itemStyle: {
normal: {
color: '#f8d351'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: '#f8d351',
shadowBlur: 25,
shadowColor: 'rgba(248,211,81,.3)',
shadowOffsetX: 0,
shadowOffsetY: -10,
opacity: 1
}
}
},
{
value: newData.radarData[6],
name: '我的指标',
itemStyle: {
normal: {
color: '#43dfa2'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: this.colorList.linearGtoB,
shadowBlur: 15,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 5,
opacity: 0.8
}
}
}
]
},
{
name: '',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#fff'
}
},
lineStyle: {
normal: {
color: this.colorList.linearBtoG,
width: 3
}
},
areaStyle: {
normal: {
color: this.colorList.areaBtoG
}
},
data: newData.weekLineData,
lineSmooth: true,
markLine: {
silent: true,
data: [
{
type: 'average',
name: '平均值'
}
],
precision: 0,
label: {
normal: {
formatter: '平均值: \n {c}'
}
},
lineStyle: {
normal: {
color: 'rgba(248,211,81,.7)'
}
}
},
tooltip: {
position: 'top',
formatter: '{c} m',
backgroundColor: 'rgba(28,152,232,.2)',
padding: 6
}
},
{
name: '占位背景',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: '#000',
opacity: 0
}
},
silent: true,
barWidth: '50%',
data: newData.weekMaxData,
animation: false
}
]
}
},
immediate: true,
deep: true
}
}
}
</script>

176
src/components/echart/bottom/bottomRightChart/index.vue
View File

@ -1,89 +1,89 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
drawTiming: null,
cdata: {
year: null,
weekCategory: [],
radarData: [],
radarDataAvg: [],
maxData: 12000,
weekMaxData: [],
weekLineData: []
}
}
},
components: {
Chart,
},
mounted () {
this.drawTimingFn();
},
beforeDestroy () {
clearInterval(this.drawTiming);
},
methods: {
drawTimingFn () {
this.setData();
this.drawTiming = setInterval(() => {
this.setData();
}, 6000);
},
setData () {
// 清空轮询数据
this.cdata.weekCategory = [];
this.cdata.weekMaxData = [];
this.cdata.weekLineData = [];
this.cdata.radarData = [];
this.cdata.radarDataAvg = [];
let dateBase = new Date();
this.cdata.year = dateBase.getFullYear();
// 周数据
for (let i = 0; i < 7; i++) {
// 日期
let date = new Date();
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
// 折线图数据
this.cdata.weekMaxData.push(this.cdata.maxData);
let distance = Math.round(Math.random() * 11000 + 500);
this.cdata.weekLineData.push(distance);
// 雷达图数据
// 我的指标
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
this.cdata.radarData.unshift(radarDayData);
// 平均指标
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayDataAvg = [
distanceAvg,
averageSpeedAvg,
maxSpeedAvg,
hourAvg
];
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
}
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
drawTiming: null,
cdata: {
year: null,
weekCategory: [],
radarData: [],
radarDataAvg: [],
maxData: 12000,
weekMaxData: [],
weekLineData: []
}
}
},
components: {
Chart,
},
mounted () {
this.drawTimingFn();
},
beforeDestroy () {
clearInterval(this.drawTiming);
},
methods: {
drawTimingFn () {
this.setData();
this.drawTiming = setInterval(() => {
this.setData();
}, 6000);
},
setData () {
// 清空轮询数据
this.cdata.weekCategory = [];
this.cdata.weekMaxData = [];
this.cdata.weekLineData = [];
this.cdata.radarData = [];
this.cdata.radarDataAvg = [];
let dateBase = new Date();
this.cdata.year = dateBase.getFullYear();
// 周数据
for (let i = 0; i < 7; i++) {
// 日期
let date = new Date();
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
// 折线图数据
this.cdata.weekMaxData.push(this.cdata.maxData);
let distance = Math.round(Math.random() * 11000 + 500);
this.cdata.weekLineData.push(distance);
// 雷达图数据
// 我的指标
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
this.cdata.radarData.unshift(radarDayData);
// 平均指标
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayDataAvg = [
distanceAvg,
averageSpeedAvg,
maxSpeedAvg,
hourAvg
];
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
}
}
}
};
</script>
<style lang="scss" scoped>
</style>

160
src/components/echart/carTravel/centerLeft1Chart/chart.vue
View File

@ -1,81 +1,81 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

66
src/components/echart/carTravel/centerLeft1Chart/index.vue
View File

@ -1,33 +1,33 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["终端安装数", "终端安装率", "终端在线率",],
seriesData: [
{ value: 10, name: "终端安装数" },
{ value: 5, name: "终端安装率" },
{ value: 15, name: "终端在线率" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["终端安装数", "终端安装率", "终端在线率",],
seriesData: [
{ value: 10, name: "终端安装数" },
{ value: 5, name: "终端安装率" },
{ value: 15, name: "终端在线率" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>

160
src/components/echart/carTravel/centerLeft1Chart1/chart.vue
View File

@ -1,81 +1,81 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

66
src/components/echart/carTravel/centerLeft1Chart1/index.vue
View File

@ -1,33 +1,33 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["新增车辆", "变更车辆", "处置车辆",],
seriesData: [
{ value: 10, name: "新增车辆" },
{ value: 5, name: "变更车辆" },
{ value: 15, name: "处置车辆" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["新增车辆", "变更车辆", "处置车辆",],
seriesData: [
{ value: 10, name: "新增车辆" },
{ value: 5, name: "变更车辆" },
{ value: 15, name: "处置车辆" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>

298
src/components/echart/carTravel/chart.vue
View File

@ -1,149 +1,149 @@
<template>
<div>
<!-- <Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="560px"
></Echart> -->
<Echart
:options="options"
id="centreRight2Chart1"
height="230px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler(newData) {
// 固定样式数据
let lineStyle = {
normal: {
width: 1,
opacity: 0.5,
},
};
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "15%",
right: "3%",
left: "9%",
bottom: "15%",
},
xAxis: [
{
type: "category",
data: [
"车型1",
"车型2",
"车型3",
"车型4",
"车型5",
],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
},
],
yAxis: [
{
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
},
],
series: [
{
type: "bar",
data: [80, 80, 97, 53, 95, 26, 72],
barWidth: "15px",
showBackground: true,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,244,255,1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,77,167,1)", // 100% 处的颜色
},
],
false
),
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4,
barBorderRadius: 9,
},
},
label: {
normal: {
show: true,
lineHeight: 30,
formatter: "{c}",
position: "top",
textStyle: {
color: "#00D6F9",
fontSize: 15,
},
},
},
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>
<template>
<div>
<!-- <Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="560px"
></Echart> -->
<Echart
:options="options"
id="centreRight2Chart1"
height="230px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler(newData) {
// 固定样式数据
let lineStyle = {
normal: {
width: 1,
opacity: 0.5,
},
};
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "15%",
right: "3%",
left: "9%",
bottom: "15%",
},
xAxis: [
{
type: "category",
data: [
"车型1",
"车型2",
"车型3",
"车型4",
"车型5",
],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
},
],
yAxis: [
{
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
},
],
series: [
{
type: "bar",
data: [80, 80, 97, 53, 95, 26, 72],
barWidth: "15px",
showBackground: true,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,244,255,1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,77,167,1)", // 100% 处的颜色
},
],
false
),
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4,
barBorderRadius: 9,
},
},
label: {
normal: {
show: true,
lineHeight: 30,
formatter: "{c}",
position: "top",
textStyle: {
color: "#00D6F9",
fontSize: 15,
},
},
},
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>

226
src/components/echart/carTravel/new/chart.vue
View File

@ -1,113 +1,113 @@
<template>
<div>
<!-- <Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="560px"
></Echart> -->
<Echart
:options="options"
id="centreRight2Chart1"
height="230px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '库存情况',
type: 'pie',
radius: '68%',
center: ['50%', '50%'],
clockwise: false,
data: [{
value: 45,
name: 'CARD'
}, {
value: 25,
name: 'SSD'
}, {
value: 15,
name: 'U盘'
}, {
value: 8,
name: '嵌入式'
}, {
value: 7,
name: 'FLASH'
}],
label: {
normal: {
textStyle: {
color: '#999',
fontSize: 14,
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
color: [
'#00acee',
'#52cdd5',
'#79d9f1',
'#a7e7ff',
'#c8efff'
],
backgroundColor: '#fff'
},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
// cdata: {
// handler(newData) {
// // 固定样式数据
// let lineStyle = {
// normal: {
// width: 1,
// opacity: 0.5,
// },
// };
// this.options =
// },
// immediate: true,
// deep: true,
// },
},
};
</script>
<template>
<div>
<!-- <Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="560px"
></Echart> -->
<Echart
:options="options"
id="centreRight2Chart1"
height="230px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '库存情况',
type: 'pie',
radius: '68%',
center: ['50%', '50%'],
clockwise: false,
data: [{
value: 45,
name: 'CARD'
}, {
value: 25,
name: 'SSD'
}, {
value: 15,
name: 'U盘'
}, {
value: 8,
name: '嵌入式'
}, {
value: 7,
name: 'FLASH'
}],
label: {
normal: {
textStyle: {
color: '#999',
fontSize: 14,
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
color: [
'#00acee',
'#52cdd5',
'#79d9f1',
'#a7e7ff',
'#c8efff'
],
backgroundColor: '#fff'
},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
// cdata: {
// handler(newData) {
// // 固定样式数据
// let lineStyle = {
// normal: {
// width: 1,
// opacity: 0.5,
// },
// };
// this.options =
// },
// immediate: true,
// deep: true,
// },
},
};
</script>

344
src/components/echart/carTravel/pieChart.vue
View File

@ -1,172 +1,172 @@
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="241px"
width="460px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
seriesData: [80, 80, 97, 53, 95, 26, 72],
barLinearColors: [
new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00a0ff", // 0% 处的颜色
},
{
offset: 1,
color: "#0f4eac", // 100% 处的颜色
},
],
false
),
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#47ddf5" },
{ offset: 1, color: "#21879b" },
]),
],
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
methods: {
rankBarColor(cData) {
let tempData = [];
cData.forEach((item, index) => {
tempData.push({
value: item,
itemStyle: {
normal: {
color:
index % 2 == 0
? this.barLinearColors[0]
: this.barLinearColors[1],
// shadowColor: "rgba(0,160,221,1)",
// shadowBlur: 4,
barBorderRadius: 9,
},
},
});
});
return tempData;
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
tooltip: {
// backgroundColor: "rgba(50,50,50,.3)",
// textStyle: {
// color: "#222",
// },
formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
},
grid: {
top: "3%",
right: "19%",
left: "9%",
bottom: "9%",
},
legend: {
// orient: "hori",
bottom: 0,
itemWidth: 10,
itemHeight: 10,
},
series: [
{
name: "攻击次数",
type: "pie",
clockwise: false,
radius: "59%",
center: ["50%", "45%"],
hoverAnimation: false,
roseType: "radius",
data: [
{
value: 335,
name: "会议室",
},
{
value: 310,
name: "办公室",
},
{
value: 234,
name: "机房",
},
{
value: 135,
name: "设备间",
},
],
itemStyle: {
normal: {
borderColor: "#38f6c8",
borderWidth: 1,
},
},
label: {
show: true,
position: "outside",
formatter: "{a|{b}：{d}%}\n{hr|}",
rich: {
hr: {
backgroundColor: "t",
borderRadius: 100,
width: 0,
height: 6,
padding: [3, 3, 0, -12],
shadowColor: "#1c1b3a",
shadowBlur: 1,
shadowOffsetX: 1,
shadowOffsetY: 2,
},
a: {
padding: [-35, 15, -20, 5],
},
},
},
labelLine: {
normal: {
length: 10,
length2: 16,
lineStyle: {
width: 0.5,
},
},
},
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="241px"
width="460px"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
seriesData: [80, 80, 97, 53, 95, 26, 72],
barLinearColors: [
new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00a0ff", // 0% 处的颜色
},
{
offset: 1,
color: "#0f4eac", // 100% 处的颜色
},
],
false
),
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#47ddf5" },
{ offset: 1, color: "#21879b" },
]),
],
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
methods: {
rankBarColor(cData) {
let tempData = [];
cData.forEach((item, index) => {
tempData.push({
value: item,
itemStyle: {
normal: {
color:
index % 2 == 0
? this.barLinearColors[0]
: this.barLinearColors[1],
// shadowColor: "rgba(0,160,221,1)",
// shadowBlur: 4,
barBorderRadius: 9,
},
},
});
});
return tempData;
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
tooltip: {
// backgroundColor: "rgba(50,50,50,.3)",
// textStyle: {
// color: "#222",
// },
formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
},
grid: {
top: "3%",
right: "19%",
left: "9%",
bottom: "9%",
},
legend: {
// orient: "hori",
bottom: 0,
itemWidth: 10,
itemHeight: 10,
},
series: [
{
name: "攻击次数",
type: "pie",
clockwise: false,
radius: "59%",
center: ["50%", "45%"],
hoverAnimation: false,
roseType: "radius",
data: [
{
value: 335,
name: "会议室",
},
{
value: 310,
name: "办公室",
},
{
value: 234,
name: "机房",
},
{
value: 135,
name: "设备间",
},
],
itemStyle: {
normal: {
borderColor: "#38f6c8",
borderWidth: 1,
},
},
label: {
show: true,
position: "outside",
formatter: "{a|{b}：{d}%}\n{hr|}",
rich: {
hr: {
backgroundColor: "t",
borderRadius: 100,
width: 0,
height: 6,
padding: [3, 3, 0, -12],
shadowColor: "#1c1b3a",
shadowBlur: 1,
shadowOffsetX: 1,
shadowOffsetY: 2,
},
a: {
padding: [-35, 15, -20, 5],
},
},
},
labelLine: {
normal: {
length: 10,
length2: 16,
lineStyle: {
width: 0.5,
},
},
},
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>

206
src/components/echart/center/centerChartRate/index.vue
View File

@ -1,104 +1,104 @@
<template>
<div>
<!-- 通过率/达标率 -->
<Echart
:options="options"
:id="id"
height="100px"
width="100px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
tips: {
type: Number,
required: true,
default: 50
},
colorObj: {
type: Object,
default: function () {
return {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
};
}
}
},
watch: {
// tips 是会变更的数据，所以进行监听
tips: {
handler (newData) {
this.options = {
title:{
text: newData * 1 + "%",
x: "center",
y: "center",
textStyle: {
color: this.colorObj.textStyle,
fontSize: 16
}
},
series: [
{
type: "pie",
radius: ["75%", "80%"],
center: ["50%", "50%"],
hoverAnimation: false,
color: this.colorObj.series.color,
label: {
normal: {
show: false
}
},
data: [
{
value: newData,
itemStyle: {
normal: {
color: this.colorObj.series.dataColor.normal,
shadowBlur: 10,
shadowColor: this.colorObj.series.dataColor.shadowColor
}
}
},
{
value: 100 - newData
}
]
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<!-- 通过率/达标率 -->
<Echart
:options="options"
:id="id"
height="100px"
width="100px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
tips: {
type: Number,
required: true,
default: 50
},
colorObj: {
type: Object,
default: function () {
return {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
};
}
}
},
watch: {
// tips 是会变更的数据，所以进行监听
tips: {
handler (newData) {
this.options = {
title:{
text: newData * 1 + "%",
x: "center",
y: "center",
textStyle: {
color: this.colorObj.textStyle,
fontSize: 16
}
},
series: [
{
type: "pie",
radius: ["75%", "80%"],
center: ["50%", "50%"],
hoverAnimation: false,
color: this.colorObj.series.color,
label: {
normal: {
show: false
}
},
data: [
{
value: newData,
itemStyle: {
normal: {
color: this.colorObj.series.dataColor.normal,
shadowBlur: 10,
shadowColor: this.colorObj.series.dataColor.shadowColor
}
}
},
{
value: 100 - newData
}
]
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

160
src/components/echart/centerLeft/centerLeft1Chart/chart.vue
View File

@ -1,81 +1,81 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="220px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="220px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

66
src/components/echart/centerLeft/centerLeft1Chart/index.vue
View File

@ -1,33 +1,33 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
seriesData: [
{ value: 10, name: "data1" },
{ value: 5, name: "data2" },
{ value: 15, name: "data3" },
{ value: 25, name: "data4" },
{ value: 20, name: "data5" },
{ value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
seriesData: [
{ value: 10, name: "data1" },
{ value: 5, name: "data2" },
{ value: 15, name: "data3" },
{ value: 25, name: "data4" },
{ value: 20, name: "data5" },
{ value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>

580
src/components/echart/centerLeft/centerLeft2Chart/chart.vue
View File

@ -1,290 +1,290 @@
<template>
<div>
<Echart
id="centreLeft2Chart"
ref="centreLeft2ChartRef"
:options="options"
height="360px"
width="330px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart';
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Array,
default: () => [],
},
},
watch: {
cdata: {
handler(newData) {
// 设置点的位置(经纬度)
const geoCoordMap = {
厦门市: [118.11022, 24.490474, 20],
福州市: [119.206239, 26.275302, 20],
泉州市: [118.589421, 24.908853, 20],
漳州市: [117.561801, 24.510897, 20],
龙岩市: [116.82978, 25.391603, 20],
莆田市: [119.007558, 25.591011, 20],
三明市: [117.435001, 26.465444, 20],
南平市: [118.178459, 27.535627, 20],
宁德市: [119.527082, 27.15924, 20],
};
let seriesData = [
{
name: '厦门市',
},
{
name: '福州市',
},
{
name: '泉州市',
},
{
name: '漳州市',
},
{
name: '龙岩市',
},
{
name: '莆田市',
},
{
name: '三明市',
},
{
name: '南平市',
},
{
name: '宁德市',
},
];
let convertData = function (data) {
let scatterData = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
scatterData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return scatterData;
};
this.options = {
showLegendSymbol: true,
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: point => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
/*
formatter: params => {
return `<div style=""> ... </div>`
}
*/
},
visualMap: {
min: 0,
max: 10,
show: false,
seriesIndex: 0,
// 颜色
inRange: {
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
},
},
// 底部背景
geo: {
show: true,
aspectScale: 0.85, //长宽比
zoom: 1.2,
top: '10%',
left: '16%',
map: '福建',
roam: false,
itemStyle: {
normal: {
areaColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(7,114,204, .8)',
shadowOffsetX: 5,
shadowOffsetY: 5,
},
emphasis: {
areaColor: '#00aeef',
},
},
},
series: [
{
name: '相关指数',
type: 'map',
aspectScale: 0.85, //长宽比
zoom: 1.2,
mapType: '福建', // 自定义扩展图表类型
top: '10%',
left: '16%',
itemStyle: {
normal: {
color: 'red',
areaColor: 'rgba(19,54,162, .5)',
borderColor: 'rgba(0,242,252,.3)',
borderWidth: 1,
shadowBlur: 7,
shadowColor: '#00f2fc',
},
emphasis: {
areaColor: '#4f7fff',
borderColor: 'rgba(0,242,252,.6)',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#00f2fc',
},
},
label: {
formatter: params => `${params.name}`,
show: true,
position: 'insideRight',
textStyle: {
fontSize: 14,
color: '#efefef',
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
data: newData,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 7,
effectType: 'ripple',
legendHoverLink: false,
showEffectOn: 'render',
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke',
},
zlevel: 1,
itemStyle: {
normal: {
color: '#99FBFE',
shadowBlur: 5,
shadowColor: '#fff',
},
},
data: convertData(seriesData),
},
],
};
// 重新选择区域
this.handleMapRandomSelect();
},
immediate: true,
deep: true,
},
},
methods: {
// 开启定时器
startInterval() {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
_self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea() {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error)
}
});
},
handleMapRandomSelect() {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on('mouseover', function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on('globalout', function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error)
}
});
},
},
};
</script>
<template>
<div>
<Echart
id="centreLeft2Chart"
ref="centreLeft2ChartRef"
:options="options"
height="360px"
width="330px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart';
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Array,
default: () => [],
},
},
watch: {
cdata: {
handler(newData) {
// 设置点的位置(经纬度)
const geoCoordMap = {
厦门市: [118.11022, 24.490474, 20],
福州市: [119.206239, 26.275302, 20],
泉州市: [118.589421, 24.908853, 20],
漳州市: [117.561801, 24.510897, 20],
龙岩市: [116.82978, 25.391603, 20],
莆田市: [119.007558, 25.591011, 20],
三明市: [117.435001, 26.465444, 20],
南平市: [118.178459, 27.535627, 20],
宁德市: [119.527082, 27.15924, 20],
};
let seriesData = [
{
name: '厦门市',
},
{
name: '福州市',
},
{
name: '泉州市',
},
{
name: '漳州市',
},
{
name: '龙岩市',
},
{
name: '莆田市',
},
{
name: '三明市',
},
{
name: '南平市',
},
{
name: '宁德市',
},
];
let convertData = function (data) {
let scatterData = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
scatterData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return scatterData;
};
this.options = {
showLegendSymbol: true,
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: point => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
/*
formatter: params => {
return `<div style=""> ... </div>`
}
*/
},
visualMap: {
min: 0,
max: 10,
show: false,
seriesIndex: 0,
// 颜色
inRange: {
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
},
},
// 底部背景
geo: {
show: true,
aspectScale: 0.85, //长宽比
zoom: 1.2,
top: '10%',
left: '16%',
map: '福建',
roam: false,
itemStyle: {
normal: {
areaColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(7,114,204, .8)',
shadowOffsetX: 5,
shadowOffsetY: 5,
},
emphasis: {
areaColor: '#00aeef',
},
},
},
series: [
{
name: '相关指数',
type: 'map',
aspectScale: 0.85, //长宽比
zoom: 1.2,
mapType: '福建', // 自定义扩展图表类型
top: '10%',
left: '16%',
itemStyle: {
normal: {
color: 'red',
areaColor: 'rgba(19,54,162, .5)',
borderColor: 'rgba(0,242,252,.3)',
borderWidth: 1,
shadowBlur: 7,
shadowColor: '#00f2fc',
},
emphasis: {
areaColor: '#4f7fff',
borderColor: 'rgba(0,242,252,.6)',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#00f2fc',
},
},
label: {
formatter: params => `${params.name}`,
show: true,
position: 'insideRight',
textStyle: {
fontSize: 14,
color: '#efefef',
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
data: newData,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 7,
effectType: 'ripple',
legendHoverLink: false,
showEffectOn: 'render',
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke',
},
zlevel: 1,
itemStyle: {
normal: {
color: '#99FBFE',
shadowBlur: 5,
shadowColor: '#fff',
},
},
data: convertData(seriesData),
},
],
};
// 重新选择区域
this.handleMapRandomSelect();
},
immediate: true,
deep: true,
},
},
methods: {
// 开启定时器
startInterval() {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
_self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea() {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error)
}
});
},
handleMapRandomSelect() {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on('mouseover', function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on('globalout', function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error)
}
});
},
},
};
</script>

132
src/components/echart/centerLeft/centerLeft2Chart/index.vue
View File

@ -1,67 +1,67 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: [
{
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
name: '福州市',
value: 10,
elseData:{
// 这里放置地图 tooltip 里想显示的数据
}
},
{
name: '厦门市',
value: 9,
},
{
name: '漳州市',
value: 8,
},
{
name: '泉州市',
value: 7,
},
{
name: '三明市',
value: 6,
},
{
name: '莆田市',
value: 5,
},
{
name: '南平市',
value: 4,
},
{
name: '龙岩市',
value: 3,
},
{
name: '宁德市',
value: 2,
}
]
}
},
components: {
Chart,
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: [
{
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
name: '福州市',
value: 10,
elseData:{
// 这里放置地图 tooltip 里想显示的数据
}
},
{
name: '厦门市',
value: 9,
},
{
name: '漳州市',
value: 8,
},
{
name: '泉州市',
value: 7,
},
{
name: '三明市',
value: 6,
},
{
name: '莆田市',
value: 5,
},
{
name: '南平市',
value: 4,
},
{
name: '龙岩市',
value: 3,
},
{
name: '宁德市',
value: 2,
}
]
}
},
components: {
Chart,
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>

262
src/components/echart/centerRight/centerRightChart/chart.vue
View File

@ -1,132 +1,132 @@
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
// 固定样式数据
let lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
this.options = {
radar: {
indicator: newData.indicatorData,
shape: "circle",
splitNumber: 5,
radius: ["0%", "65%"],
name: {
textStyle: {
color: "rgb(238, 197, 102)"
}
},
splitLine: {
lineStyle: {
color: [
"rgba(238, 197, 102, 0.1)",
"rgba(238, 197, 102, 0.2)",
"rgba(238, 197, 102, 0.4)",
"rgba(238, 197, 102, 0.6)",
"rgba(238, 197, 102, 0.8)",
"rgba(238, 197, 102, 1)"
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(238, 197, 102, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
lineStyle: lineStyle,
data: newData.dataBJ,
symbol: "none",
itemStyle: {
normal: {
color: "#F9713C"
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: "上海",
type: "radar",
lineStyle: lineStyle,
data: newData.dataSH,
symbol: "none",
itemStyle: {
normal: {
color: "#B3E4A1"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: "广州",
type: "radar",
lineStyle: lineStyle,
data: newData.dataGZ,
symbol: "none",
itemStyle: {
normal: {
color: "rgb(238, 197, 102)"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
} //end
]
}
},
immediate: true,
deep: true
}
}
};
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
// 固定样式数据
let lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
this.options = {
radar: {
indicator: newData.indicatorData,
shape: "circle",
splitNumber: 5,
radius: ["0%", "65%"],
name: {
textStyle: {
color: "rgb(238, 197, 102)"
}
},
splitLine: {
lineStyle: {
color: [
"rgba(238, 197, 102, 0.1)",
"rgba(238, 197, 102, 0.2)",
"rgba(238, 197, 102, 0.4)",
"rgba(238, 197, 102, 0.6)",
"rgba(238, 197, 102, 0.8)",
"rgba(238, 197, 102, 1)"
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(238, 197, 102, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
lineStyle: lineStyle,
data: newData.dataBJ,
symbol: "none",
itemStyle: {
normal: {
color: "#F9713C"
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: "上海",
type: "radar",
lineStyle: lineStyle,
data: newData.dataSH,
symbol: "none",
itemStyle: {
normal: {
color: "#B3E4A1"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: "广州",
type: "radar",
lineStyle: lineStyle,
data: newData.dataGZ,
symbol: "none",
itemStyle: {
normal: {
color: "rgb(238, 197, 102)"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
} //end
]
}
},
immediate: true,
deep: true
}
}
};
</script>

108
src/components/echart/centerRight/centerRightChart/index.vue
View File

@ -1,55 +1,55 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: {
indicatorData: [
{ name: "data1", max: 300 },
{ name: "data2", max: 250 },
{ name: "data3", max: 300 },
{ name: "data4", max: 5},
{ name: "data5", max: 200 },
{ name: "data6", max: 100 }
],
dataBJ: [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28]
],
dataGZ: [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28]
],
dataSH: [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7]
]
}
}
},
components: {
Chart,
}
}
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: {
indicatorData: [
{ name: "data1", max: 300 },
{ name: "data2", max: 250 },
{ name: "data3", max: 300 },
{ name: "data4", max: 5},
{ name: "data5", max: 200 },
{ name: "data6", max: 100 }
],
dataBJ: [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28]
],
dataGZ: [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28]
],
dataSH: [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7]
]
}
}
},
components: {
Chart,
}
}
</script>

160
src/components/echart/costControl/centerLeft1Chart/chart.vue
View File

@ -1,81 +1,81 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

66
src/components/echart/costControl/centerLeft1Chart/index.vue
View File

@ -1,33 +1,33 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["终端安装数", "终端安装率", "终端在线率",],
seriesData: [
{ value: 10, name: "终端安装数" },
{ value: 5, name: "终端安装率" },
{ value: 15, name: "终端在线率" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["终端安装数", "终端安装率", "终端在线率",],
seriesData: [
{ value: 10, name: "终端安装数" },
{ value: 5, name: "终端安装率" },
{ value: 15, name: "终端在线率" },
// { value: 25, name: "data4" },
// { value: 20, name: "data5" },
// { value: 35, name: "data6" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>

162
src/components/echart/costControl/centerLeft1Chart1/chart.vue
View File

@ -1,82 +1,82 @@
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="280px"
width="430px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>

70
src/components/echart/costControl/centerLeft1Chart1/index.vue
View File

@ -1,35 +1,35 @@
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["费用1","费用2","费用3","费用4","费用5","费用6","费用7","费用8"],
seriesData: [
{ value: 10, name: "费用1" },
{ value: 5, name: "费用2" },
{ value: 15, name: "费用3" },
{ value: 25, name: "费用4" },
{ value: 20, name: "费用5" },
{ value: 35, name: "费用6" },
{ value: 20, name: "费用7" },
{ value: 35, name: "费用8" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: ["费用1","费用2","费用3","费用4","费用5","费用6","费用7","费用8"],
seriesData: [
{ value: 10, name: "费用1" },
{ value: 5, name: "费用2" },
{ value: 15, name: "费用3" },
{ value: 25, name: "费用4" },
{ value: 20, name: "费用5" },
{ value: 35, name: "费用6" },
{ value: 20, name: "费用7" },
{ value: 35, name: "费用8" },
],
},
};
},
components: {
Chart,
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>

Some files were not shown because too many files have changed in this diff Show More