代码提交
This commit is contained in:
parent
07c841f6b4
commit
80e7e9b2e5
80
src/App.vue
80
src/App.vue
|
|
@ -1,40 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<!-- <div class="up">
|
<!-- <div class="up">
|
||||||
<img src="" alt="">
|
<img src="" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="down">
|
<div class="down">
|
||||||
|
|
||||||
</div> -->
|
</div> -->
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
p,
|
p,
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
// width: 100vw;
|
// width: 100vw;
|
||||||
// height: 100vh;
|
// height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// background-color: #212229;
|
// background-color: #212229;
|
||||||
// background-color:#0d131f;
|
// background-color:#0d131f;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,47 @@
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
// if (process.env.NODE_ENV === 'development') {
|
// if (process.env.NODE_ENV === 'development') {
|
||||||
// axios.defaults.baseURL = '/api'
|
// axios.defaults.baseURL = '/api'
|
||||||
// } else if (process.env.NODE_ENV === 'production') {
|
// } else if (process.env.NODE_ENV === 'production') {
|
||||||
// axios.defaults.baseURL = '/api'
|
// axios.defaults.baseURL = '/api'
|
||||||
// }
|
// }
|
||||||
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
|
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
|
||||||
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
|
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
|
||||||
// 首页数据
|
// 首页数据
|
||||||
export const getHomePageInfo = (params) => {
|
export const getHomePageInfo = (params) => {
|
||||||
return axios.get('api/gk/homePage/getHomePageInfo', {
|
return axios.get('api/gk/homePage/getHomePageInfo', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
// 环境信息
|
// 环境信息
|
||||||
export const getEnvironmentInfo = (params) => {
|
export const getEnvironmentInfo = (params) => {
|
||||||
return axios.get('api/gk/info/getEnvironmentInfo', { params
|
return axios.get('api/gk/info/getEnvironmentInfo', { params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
export const getSiteInfo = (params) => {
|
export const getSiteInfo = (params) => {
|
||||||
return axios.get('api/gk/info/getSiteInfo', {
|
return axios.get('api/gk/info/getSiteInfo', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
export const getSwitchInfo = (params) => {
|
export const getSwitchInfo = (params) => {
|
||||||
return axios.get('api/gk/info/getSwitchInfo', {
|
return axios.get('api/gk/info/getSwitchInfo', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
//查询实时事件
|
//查询实时事件
|
||||||
export const getDeviceRecord = (params) => {
|
export const getDeviceRecord = (params) => {
|
||||||
return axios.get('api/gk/info/getDeviceRecord', {
|
return axios.get('api/gk/info/getDeviceRecord', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
//查询实时记录下拉框
|
//查询实时记录下拉框
|
||||||
export const getDeviceNum = (params) => {
|
export const getDeviceNum = (params) => {
|
||||||
return axios.get('api/gk/info/getDeviceNum', {
|
return axios.get('api/gk/info/getDeviceNum', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
// 修改提交
|
// 修改提交
|
||||||
export const updateDeviceRecord = (params) => {
|
export const updateDeviceRecord = (params) => {
|
||||||
return axios.get('api/gk/info/updateDeviceRecord', {
|
return axios.get('api/gk/info/updateDeviceRecord', {
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
{
|
{
|
||||||
"companyName": "LGZN",
|
"companyName": "LGZN",
|
||||||
"productName": "JianPuBuilding",
|
"productName": "JianPuBuilding",
|
||||||
"productVersion": "0.1",
|
"productVersion": "0.1",
|
||||||
"dataUrl": "JianPu_Building.data.unityweb",
|
"dataUrl": "JianPu_Building.data.unityweb",
|
||||||
"wasmCodeUrl": "JianPu_Building.wasm.code.unityweb",
|
"wasmCodeUrl": "JianPu_Building.wasm.code.unityweb",
|
||||||
"wasmFrameworkUrl": "JianPu_Building.wasm.framework.unityweb",
|
"wasmFrameworkUrl": "JianPu_Building.wasm.framework.unityweb",
|
||||||
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
|
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
|
||||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||||
"splashScreenStyle": "Dark",
|
"splashScreenStyle": "Dark",
|
||||||
"backgroundColor": "#231F20",
|
"backgroundColor": "#231F20",
|
||||||
"cacheControl": {"default": "must-revalidate"},
|
"cacheControl": {"default": "must-revalidate"},
|
||||||
"developmentBuild": false,
|
"developmentBuild": false,
|
||||||
"multithreading": false,
|
"multithreading": false,
|
||||||
"unityVersion": "2019.4.0f1"
|
"unityVersion": "2019.4.0f1"
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +1,24 @@
|
||||||
function UnityProgress(unityInstance, progress) {
|
function UnityProgress(unityInstance, progress) {
|
||||||
if (!unityInstance.Module)
|
if (!unityInstance.Module)
|
||||||
return;
|
return;
|
||||||
if (!unityInstance.logo) {
|
if (!unityInstance.logo) {
|
||||||
unityInstance.logo = document.createElement("div");
|
unityInstance.logo = document.createElement("div");
|
||||||
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
||||||
unityInstance.container.appendChild(unityInstance.logo);
|
unityInstance.container.appendChild(unityInstance.logo);
|
||||||
}
|
}
|
||||||
if (!unityInstance.progress) {
|
if (!unityInstance.progress) {
|
||||||
unityInstance.progress = document.createElement("div");
|
unityInstance.progress = document.createElement("div");
|
||||||
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
||||||
unityInstance.progress.empty = document.createElement("div");
|
unityInstance.progress.empty = document.createElement("div");
|
||||||
unityInstance.progress.empty.className = "empty";
|
unityInstance.progress.empty.className = "empty";
|
||||||
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
||||||
unityInstance.progress.full = document.createElement("div");
|
unityInstance.progress.full = document.createElement("div");
|
||||||
unityInstance.progress.full.className = "full";
|
unityInstance.progress.full.className = "full";
|
||||||
unityInstance.progress.appendChild(unityInstance.progress.full);
|
unityInstance.progress.appendChild(unityInstance.progress.full);
|
||||||
unityInstance.container.appendChild(unityInstance.progress);
|
unityInstance.container.appendChild(unityInstance.progress);
|
||||||
}
|
}
|
||||||
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
||||||
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
||||||
if (progress == 1)
|
if (progress == 1)
|
||||||
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
.webgl-content * {border: 0; margin: 0; padding: 0}
|
.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 {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, .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 .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 {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 .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 .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 .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
||||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.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 .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 {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, .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 .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
||||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
||||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; 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 .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,63 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-us">
|
<html lang="en-us">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<title>Unity WebGL Player | JianPuBuilding</title>
|
<title>Unity WebGL Player | JianPuBuilding</title>
|
||||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||||
<link rel="stylesheet" href="TemplateData/style.css">
|
<link rel="stylesheet" href="TemplateData/style.css">
|
||||||
<script src="TemplateData/UnityProgress.js"></script>
|
<script src="TemplateData/UnityProgress.js"></script>
|
||||||
<script src="Build/UnityLoader.js"></script>
|
<script src="Build/UnityLoader.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/JianPu_Building.json", {onProgress: UnityProgress});
|
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/JianPu_Building.json", {onProgress: UnityProgress});
|
||||||
// function init() {
|
// function init() {
|
||||||
// unityInstance.SetFullscreen(1)
|
// unityInstance.SetFullscreen(1)
|
||||||
// }
|
// }
|
||||||
function home() {
|
function home() {
|
||||||
window.history.go(-1);
|
window.history.go(-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
html body {
|
html body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.back{
|
.back{
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
.home{
|
.home{
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius:5px
|
border-radius:5px
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<!-- <div class="webgl-content">-->
|
<!-- <div class="webgl-content">-->
|
||||||
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div>-->
|
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div>-->
|
||||||
<!-- <div class="footer">-->
|
<!-- <div class="footer">-->
|
||||||
<!-- <div class="webgl-logo"></div>-->
|
<!-- <div class="webgl-logo"></div>-->
|
||||||
<!-- <div class="fullscreen" onclick="init()" style="cursor: pointer"></div>-->
|
<!-- <div class="fullscreen" onclick="init()" style="cursor: pointer"></div>-->
|
||||||
<!-- <div class="back" onclick="home()" style="cursor: pointer"></div>-->
|
<!-- <div class="back" onclick="home()" style="cursor: pointer"></div>-->
|
||||||
<!-- <div class="title">JianPuBuilding</div>-->
|
<!-- <div class="title">JianPuBuilding</div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<div style="width: 100%; height:100%" class="webgl-content">
|
<div style="width: 100%; height:100%" class="webgl-content">
|
||||||
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div> -->
|
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div> -->
|
||||||
<div id="unityContainer" style="width: 100vw; height: 100vh;overflow: hidden;" ></div>
|
<div id="unityContainer" style="width: 100vw; height: 100vh;overflow: hidden;" ></div>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<div class="back" onclick="home()" style="cursor: pointer"></div>
|
<div class="back" onclick="home()" style="cursor: pointer"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
{
|
{
|
||||||
"liveServer.settings.port": 5501
|
"liveServer.settings.port": 5501
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,16 +1,16 @@
|
||||||
{
|
{
|
||||||
"companyName": "DefaultCompany",
|
"companyName": "DefaultCompany",
|
||||||
"productName": "ShengDaPing",
|
"productName": "ShengDaPing",
|
||||||
"productVersion": "0.1",
|
"productVersion": "0.1",
|
||||||
"dataUrl": "sgs.data.unityweb",
|
"dataUrl": "sgs.data.unityweb",
|
||||||
"wasmCodeUrl": "sgs.wasm.code.unityweb",
|
"wasmCodeUrl": "sgs.wasm.code.unityweb",
|
||||||
"wasmFrameworkUrl": "sgs.wasm.framework.unityweb",
|
"wasmFrameworkUrl": "sgs.wasm.framework.unityweb",
|
||||||
"graphicsAPI": ["WebGL 2.0"],
|
"graphicsAPI": ["WebGL 2.0"],
|
||||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||||
"splashScreenStyle": "Dark",
|
"splashScreenStyle": "Dark",
|
||||||
"backgroundColor": "#231F20",
|
"backgroundColor": "#231F20",
|
||||||
"cacheControl": {"default": "must-revalidate"},
|
"cacheControl": {"default": "must-revalidate"},
|
||||||
"developmentBuild": false,
|
"developmentBuild": false,
|
||||||
"multithreading": false,
|
"multithreading": false,
|
||||||
"unityVersion": "2019.4.36f1c1"
|
"unityVersion": "2019.4.36f1c1"
|
||||||
}
|
}
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
function UnityProgress(unityInstance, progress) {
|
function UnityProgress(unityInstance, progress) {
|
||||||
if (!unityInstance.Module)
|
if (!unityInstance.Module)
|
||||||
return;
|
return;
|
||||||
if (!unityInstance.logo) {
|
if (!unityInstance.logo) {
|
||||||
unityInstance.logo = document.createElement("div");
|
unityInstance.logo = document.createElement("div");
|
||||||
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
||||||
unityInstance.container.appendChild(unityInstance.logo);
|
unityInstance.container.appendChild(unityInstance.logo);
|
||||||
}
|
}
|
||||||
if (!unityInstance.progress) {
|
if (!unityInstance.progress) {
|
||||||
unityInstance.progress = document.createElement("div");
|
unityInstance.progress = document.createElement("div");
|
||||||
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
||||||
unityInstance.progress.empty = document.createElement("div");
|
unityInstance.progress.empty = document.createElement("div");
|
||||||
unityInstance.progress.empty.className = "empty";
|
unityInstance.progress.empty.className = "empty";
|
||||||
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
||||||
unityInstance.progress.full = document.createElement("div");
|
unityInstance.progress.full = document.createElement("div");
|
||||||
unityInstance.progress.full.className = "full";
|
unityInstance.progress.full.className = "full";
|
||||||
unityInstance.progress.appendChild(unityInstance.progress.full);
|
unityInstance.progress.appendChild(unityInstance.progress.full);
|
||||||
unityInstance.container.appendChild(unityInstance.progress);
|
unityInstance.container.appendChild(unityInstance.progress);
|
||||||
}
|
}
|
||||||
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
||||||
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
||||||
if (progress == 1)
|
if (progress == 1)
|
||||||
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
html,body{
|
html,body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#unityContainer{
|
#unityContainer{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.webgl-content * {border: 0; margin: 0; padding: 0;width: 100%; height: 100%;}
|
.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 {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, .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 .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 {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 .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 .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 .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
||||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.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 .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 {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, .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 .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
||||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
||||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; 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 .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,45 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-us">
|
<html lang="en-us">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<title>Unity WebGL Player | ShengDaPing</title>
|
<title>Unity WebGL Player | ShengDaPing</title>
|
||||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||||
<link rel="stylesheet" href="TemplateData/style.css">
|
<link rel="stylesheet" href="TemplateData/style.css">
|
||||||
<script src="TemplateData/UnityProgress.js"></script>
|
<script src="TemplateData/UnityProgress.js"></script>
|
||||||
<script src="Build/UnityLoader.js"></script>
|
<script src="Build/UnityLoader.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/sgs.json", {onProgress: UnityProgress});
|
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/sgs.json", {onProgress: UnityProgress});
|
||||||
function home() {
|
function home() {
|
||||||
window.history.go(-1);
|
window.history.go(-1);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
.back{
|
.back{
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
.home{
|
.home{
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius:5px
|
border-radius:5px
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<div class="webgl-content" style="width:100%;height: 100%;">
|
<div class="webgl-content" style="width:100%;height: 100%;">
|
||||||
<div id="unityContainer"></div>
|
<div id="unityContainer"></div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="webgl-logo"></div>
|
<div class="webgl-logo"></div>
|
||||||
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
|
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
|
||||||
<div class="title">ShengDaPing</div>
|
<div class="title">ShengDaPing</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,203 +1,203 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
|
||||||
<title>思极地图</title>
|
<title>思极地图</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||||
</div> -->
|
</div> -->
|
||||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||||
<script id="mapScript">
|
<script id="mapScript">
|
||||||
var map = null;
|
var map = null;
|
||||||
var defaultLevel = 16;//默认层级
|
var defaultLevel = 16;//默认层级
|
||||||
var defaultArea = "nj";
|
var defaultArea = "nj";
|
||||||
|
|
||||||
var positions = {
|
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" }] },
|
// "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",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" }] },
|
"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 },
|
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 申请的key和sn
|
// 申请的key和sn
|
||||||
SGMap.tokenTask
|
SGMap.tokenTask
|
||||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||||
.then(function () {
|
.then(function () {
|
||||||
initMap();
|
initMap();
|
||||||
});
|
});
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
var area = GetQueryString("area");
|
var area = GetQueryString("area");
|
||||||
var lng = positions[defaultArea].lng;
|
var lng = positions[defaultArea].lng;
|
||||||
var lat = positions[defaultArea].lat;
|
var lat = positions[defaultArea].lat;
|
||||||
if (area != null) {
|
if (area != null) {
|
||||||
defaultArea = area;
|
defaultArea = area;
|
||||||
lng = positions[defaultArea].lng;
|
lng = positions[defaultArea].lng;
|
||||||
lat = positions[defaultArea].lat;
|
lat = positions[defaultArea].lat;
|
||||||
}
|
}
|
||||||
|
|
||||||
map = new SGMap.Map({
|
map = new SGMap.Map({
|
||||||
// 地图绑定的DOM元素ID
|
// 地图绑定的DOM元素ID
|
||||||
container: "map",
|
container: "map",
|
||||||
// 地图样式
|
// 地图样式
|
||||||
// style: "aegis://styles/aegis/Satellite512",
|
// style: "aegis://styles/aegis/Satellite512",
|
||||||
style: "aegis://styles/aegis/Streets",
|
style: "aegis://styles/aegis/Streets",
|
||||||
// 默认缩放层级
|
// 默认缩放层级
|
||||||
zoom: 11,
|
zoom: 11,
|
||||||
|
|
||||||
// 地图中心点
|
// 地图中心点
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
//倾斜角度
|
//倾斜角度
|
||||||
pitch: 45,
|
pitch: 45,
|
||||||
// 地图默认字体
|
// 地图默认字体
|
||||||
localIdeographFontFamily: "Microsoft YoHei"
|
localIdeographFontFamily: "Microsoft YoHei"
|
||||||
});
|
});
|
||||||
|
|
||||||
loadMarkers(defaultArea);
|
loadMarkers(defaultArea);
|
||||||
reportLocation();
|
reportLocation();
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图层级
|
//获取地图层级
|
||||||
function getMapZoom() {
|
function getMapZoom() {
|
||||||
return map.getZoom();
|
return map.getZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图层级
|
//设置地图层级
|
||||||
function setMapZoom(n) {
|
function setMapZoom(n) {
|
||||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||||
map.setZoom(n);
|
map.setZoom(n);
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图中心
|
//设置地图中心
|
||||||
function setMapCenter(lat, lng) {
|
function setMapCenter(lat, lng) {
|
||||||
map.setCenter([lng, lat]);
|
map.setCenter([lng, lat]);
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图当前中心点坐标
|
//获取地图当前中心点坐标
|
||||||
function getMapCenter() {
|
function getMapCenter() {
|
||||||
return map.getCenter();
|
return map.getCenter();
|
||||||
}
|
}
|
||||||
|
|
||||||
//每秒汇报当前中心点坐标
|
//每秒汇报当前中心点坐标
|
||||||
function reportLocation() {
|
function reportLocation() {
|
||||||
var centerPoint = getMapCenter();
|
var centerPoint = getMapCenter();
|
||||||
console.log(centerPoint);
|
console.log(centerPoint);
|
||||||
window.setTimeout("reportLocation()", 1000);
|
window.setTimeout("reportLocation()", 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
//地点跳转
|
//地点跳转
|
||||||
function gotoPosition(posName) {
|
function gotoPosition(posName) {
|
||||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||||
loadMarkers(posName);
|
loadMarkers(posName);
|
||||||
}
|
}
|
||||||
|
|
||||||
//画marker点
|
//画marker点
|
||||||
function addMarker(markerData) {
|
function addMarker(markerData) {
|
||||||
var el = document.createElement("img");
|
var el = document.createElement("img");
|
||||||
el.cusData = markerData;
|
el.cusData = markerData;
|
||||||
el.className = "marker";
|
el.className = "marker";
|
||||||
// 自定义图标
|
// 自定义图标
|
||||||
el.src = markerData.icon;
|
el.src = markerData.icon;
|
||||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||||
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "200px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "200px" : markerData.height + "px";
|
||||||
// 如果不传el，会默认给一个蓝色水滴图标
|
// 如果不传el，会默认给一个蓝色水滴图标
|
||||||
var mk = new SGMap.Marker(el, {
|
var mk = new SGMap.Marker(el, {
|
||||||
// marker相对经纬度点坐标点的位置
|
// marker相对经纬度点坐标点的位置
|
||||||
anchor: "bottom",
|
anchor: "bottom",
|
||||||
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
||||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||||
});
|
});
|
||||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||||
mk.addTo(map);
|
mk.addTo(map);
|
||||||
el.addEventListener("click", function (e) {
|
el.addEventListener("click", function (e) {
|
||||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||||
console.log("跳转" + e.target.cusData.data);
|
console.log("跳转" + e.target.cusData.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
return mk;
|
return mk;
|
||||||
}
|
}
|
||||||
|
|
||||||
//加载图标
|
//加载图标
|
||||||
var markerArray = new Array();
|
var markerArray = new Array();
|
||||||
function loadMarkers(posName) {
|
function loadMarkers(posName) {
|
||||||
for (var i in markerArray) {
|
for (var i in markerArray) {
|
||||||
markerArray[i].remove();
|
markerArray[i].remove();
|
||||||
}
|
}
|
||||||
markerArray = new Array();
|
markerArray = new Array();
|
||||||
|
|
||||||
var markers = positions[posName].markers;
|
var markers = positions[posName].markers;
|
||||||
if (markers != undefined && markers != null) {
|
if (markers != undefined && markers != null) {
|
||||||
for (var i in markers) {
|
for (var i in markers) {
|
||||||
var markerData = markers[i];
|
var markerData = markers[i];
|
||||||
markerArray.push(addMarker(markerData));
|
markerArray.push(addMarker(markerData));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1.获取2个经纬度之间的距离
|
1.获取2个经纬度之间的距离
|
||||||
2.lng1 lat1 经纬度1
|
2.lng1 lat1 经纬度1
|
||||||
3.lng2 lat2 经纬度2
|
3.lng2 lat2 经纬度2
|
||||||
*/
|
*/
|
||||||
function getDisance(lng1, lat1, lng2, lat2) {
|
function getDisance(lng1, lat1, lng2, lat2) {
|
||||||
var dis = 0;
|
var dis = 0;
|
||||||
var radius = 6378137;//地球的半径
|
var radius = 6378137;//地球的半径
|
||||||
var radLat1 = toRad(lat1);
|
var radLat1 = toRad(lat1);
|
||||||
var radLat2 = toRad(lat2);
|
var radLat2 = toRad(lat2);
|
||||||
var deltaLat = radLat1 - radLat2;
|
var deltaLat = radLat1 - radLat2;
|
||||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||||
var dis =
|
var dis =
|
||||||
2 *
|
2 *
|
||||||
Math.asin(
|
Math.asin(
|
||||||
Math.sqrt(
|
Math.sqrt(
|
||||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||||
Math.cos(radLat1) *
|
Math.cos(radLat1) *
|
||||||
Math.cos(radLat2) *
|
Math.cos(radLat2) *
|
||||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
return dis * radius;
|
return dis * radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取URL参数
|
//获取URL参数
|
||||||
function GetQueryString(name) {
|
function GetQueryString(name) {
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||||
var r = window.location.search.substr(1).match(reg);
|
var r = window.location.search.substr(1).match(reg);
|
||||||
if (r != null) return unescape(r[2]); return null;
|
if (r != null) return unescape(r[2]); return null;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,202 +1,202 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
|
||||||
<title>思极地图</title>
|
<title>思极地图</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||||
</div> -->
|
</div> -->
|
||||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||||
<script id="mapScript">
|
<script id="mapScript">
|
||||||
var map = null;
|
var map = null;
|
||||||
var defaultLevel = 5;//默认层级
|
var defaultLevel = 5;//默认层级
|
||||||
var defaultArea = "nj";
|
var defaultArea = "nj";
|
||||||
|
|
||||||
var positions = {
|
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" }] },
|
// "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.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: "江苏省公司大楼" },] },
|
"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 },
|
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 申请的key和sn
|
// 申请的key和sn
|
||||||
SGMap.tokenTask
|
SGMap.tokenTask
|
||||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||||
.then(function () {
|
.then(function () {
|
||||||
initMap();
|
initMap();
|
||||||
});
|
});
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
var area = GetQueryString("area");
|
var area = GetQueryString("area");
|
||||||
var lng = positions[defaultArea].lng;
|
var lng = positions[defaultArea].lng;
|
||||||
var lat = positions[defaultArea].lat;
|
var lat = positions[defaultArea].lat;
|
||||||
if (area != null) {
|
if (area != null) {
|
||||||
defaultArea = area;
|
defaultArea = area;
|
||||||
lng = positions[defaultArea].lng;
|
lng = positions[defaultArea].lng;
|
||||||
lat = positions[defaultArea].lat;
|
lat = positions[defaultArea].lat;
|
||||||
}
|
}
|
||||||
|
|
||||||
map = new SGMap.Map({
|
map = new SGMap.Map({
|
||||||
// 地图绑定的DOM元素ID
|
// 地图绑定的DOM元素ID
|
||||||
container: "map",
|
container: "map",
|
||||||
// 地图样式
|
// 地图样式
|
||||||
style: "aegis://styles/aegis/Streets",
|
style: "aegis://styles/aegis/Streets",
|
||||||
// style: "aegis://styles/aegis/Satellite512",
|
// style: "aegis://styles/aegis/Satellite512",
|
||||||
// 默认缩放层级
|
// 默认缩放层级
|
||||||
zoom: 11,
|
zoom: 11,
|
||||||
// 地图中心点
|
// 地图中心点
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
//倾斜角度
|
//倾斜角度
|
||||||
pitch: 45,
|
pitch: 45,
|
||||||
// 地图默认字体
|
// 地图默认字体
|
||||||
localIdeographFontFamily: "Microsoft YoHei"
|
localIdeographFontFamily: "Microsoft YoHei"
|
||||||
});
|
});
|
||||||
|
|
||||||
loadMarkers(defaultArea);
|
loadMarkers(defaultArea);
|
||||||
reportLocation();
|
reportLocation();
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图层级
|
//获取地图层级
|
||||||
function getMapZoom() {
|
function getMapZoom() {
|
||||||
return map.getZoom();
|
return map.getZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图层级
|
//设置地图层级
|
||||||
function setMapZoom(n) {
|
function setMapZoom(n) {
|
||||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||||
map.setZoom(n);
|
map.setZoom(n);
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图中心
|
//设置地图中心
|
||||||
function setMapCenter(lat, lng) {
|
function setMapCenter(lat, lng) {
|
||||||
map.setCenter([lng, lat]);
|
map.setCenter([lng, lat]);
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图当前中心点坐标
|
//获取地图当前中心点坐标
|
||||||
function getMapCenter() {
|
function getMapCenter() {
|
||||||
return map.getCenter();
|
return map.getCenter();
|
||||||
}
|
}
|
||||||
|
|
||||||
//每秒汇报当前中心点坐标
|
//每秒汇报当前中心点坐标
|
||||||
function reportLocation() {
|
function reportLocation() {
|
||||||
var centerPoint = getMapCenter();
|
var centerPoint = getMapCenter();
|
||||||
console.log(centerPoint);
|
console.log(centerPoint);
|
||||||
window.setTimeout("reportLocation()", 1000);
|
window.setTimeout("reportLocation()", 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
//地点跳转
|
//地点跳转
|
||||||
function gotoPosition(posName) {
|
function gotoPosition(posName) {
|
||||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||||
loadMarkers(posName);
|
loadMarkers(posName);
|
||||||
}
|
}
|
||||||
|
|
||||||
//画marker点
|
//画marker点
|
||||||
function addMarker(markerData) {
|
function addMarker(markerData) {
|
||||||
var el = document.createElement("img");
|
var el = document.createElement("img");
|
||||||
el.cusData = markerData;
|
el.cusData = markerData;
|
||||||
el.className = "marker";
|
el.className = "marker";
|
||||||
// 自定义图标
|
// 自定义图标
|
||||||
el.src = markerData.icon;
|
el.src = markerData.icon;
|
||||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||||
el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||||
el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
||||||
// 如果不传el，会默认给一个蓝色水滴图标
|
// 如果不传el，会默认给一个蓝色水滴图标
|
||||||
var mk = new SGMap.Marker(el, {
|
var mk = new SGMap.Marker(el, {
|
||||||
// marker相对经纬度点坐标点的位置
|
// marker相对经纬度点坐标点的位置
|
||||||
anchor: "bottom",
|
anchor: "bottom",
|
||||||
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
||||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||||
});
|
});
|
||||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||||
mk.addTo(map);
|
mk.addTo(map);
|
||||||
el.addEventListener("click", function (e) {
|
el.addEventListener("click", function (e) {
|
||||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||||
console.log("跳转" + e.target.cusData.data);
|
console.log("跳转" + e.target.cusData.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
return mk;
|
return mk;
|
||||||
}
|
}
|
||||||
|
|
||||||
//加载图标
|
//加载图标
|
||||||
var markerArray = new Array();
|
var markerArray = new Array();
|
||||||
function loadMarkers(posName) {
|
function loadMarkers(posName) {
|
||||||
for (var i in markerArray) {
|
for (var i in markerArray) {
|
||||||
markerArray[i].remove();
|
markerArray[i].remove();
|
||||||
}
|
}
|
||||||
markerArray = new Array();
|
markerArray = new Array();
|
||||||
|
|
||||||
var markers = positions[posName].markers;
|
var markers = positions[posName].markers;
|
||||||
if (markers != undefined && markers != null) {
|
if (markers != undefined && markers != null) {
|
||||||
for (var i in markers) {
|
for (var i in markers) {
|
||||||
var markerData = markers[i];
|
var markerData = markers[i];
|
||||||
markerArray.push(addMarker(markerData));
|
markerArray.push(addMarker(markerData));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1.获取2个经纬度之间的距离
|
1.获取2个经纬度之间的距离
|
||||||
2.lng1 lat1 经纬度1
|
2.lng1 lat1 经纬度1
|
||||||
3.lng2 lat2 经纬度2
|
3.lng2 lat2 经纬度2
|
||||||
*/
|
*/
|
||||||
function getDisance(lng1, lat1, lng2, lat2) {
|
function getDisance(lng1, lat1, lng2, lat2) {
|
||||||
var dis = 0;
|
var dis = 0;
|
||||||
var radius = 6378137;//地球的半径
|
var radius = 6378137;//地球的半径
|
||||||
var radLat1 = toRad(lat1);
|
var radLat1 = toRad(lat1);
|
||||||
var radLat2 = toRad(lat2);
|
var radLat2 = toRad(lat2);
|
||||||
var deltaLat = radLat1 - radLat2;
|
var deltaLat = radLat1 - radLat2;
|
||||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||||
var dis =
|
var dis =
|
||||||
2 *
|
2 *
|
||||||
Math.asin(
|
Math.asin(
|
||||||
Math.sqrt(
|
Math.sqrt(
|
||||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||||
Math.cos(radLat1) *
|
Math.cos(radLat1) *
|
||||||
Math.cos(radLat2) *
|
Math.cos(radLat2) *
|
||||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
return dis * radius;
|
return dis * radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取URL参数
|
//获取URL参数
|
||||||
function GetQueryString(name) {
|
function GetQueryString(name) {
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||||
var r = window.location.search.substr(1).match(reg);
|
var r = window.location.search.substr(1).match(reg);
|
||||||
if (r != null) return unescape(r[2]); return null;
|
if (r != null) return unescape(r[2]); return null;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
[
|
[
|
||||||
{"tudi":"南京市鼓楼区和燕路2号","jd":"栖霞基地","zongbu":"江苏电力公司","fenzhi":"南京供电公司","fangchan":"沿河四村5幢9、10、11、12号","province":"江苏省","city":"南京市","area":"建邺区","position":"118.785821,32.095862"},
|
{"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":"南京市鼓楼区定淮门石头城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":"南京市秦淮区火瓦巷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":"南京市雨花台区雨花南路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":"南京市建邺区奥体大街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":"南京市鼓楼区中山北路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":"南京市鼓楼区峨嵋路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":"南京市鼓楼区龙池庵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":"南京市玄武区中山路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":"南京市江宁区天元中路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":"南京市玄武区中山路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":"南京市浦口区龙华路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":"南京市六合区雄州镇园林西路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":"南京市六合区雄州镇方州路北侧","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":"南京市浦口区泰西路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":"南京市江宁区天印大道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":"南京市江宁区上元大街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":"南京市高淳区北岭路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":"南京市高淳区镇兴路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":"江苏省南京市溧水县永阳镇交通路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":"江苏省南京市溧水县永阳镇珍珠北路16号","jd":"溧水综合办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"锁金四村31幢2单元503室","province":"江苏省","city":"南京市","area":"玄武区","street":"锁金四村","position":"119.03119,31.654953"}
|
||||||
]
|
]
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,268 +1,268 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
|
||||||
<title>思极地图</title>
|
<title>思极地图</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
#car01{
|
#car01{
|
||||||
width: 650px;
|
width: 650px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 70%;
|
top: 70%;
|
||||||
background: #789cd1;
|
background: #789cd1;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
#car02{
|
#car02{
|
||||||
width: 553px;
|
width: 553px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 30%;
|
left: 30%;
|
||||||
top: 65%;
|
top: 65%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #789cd1;
|
background: #789cd1;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display:none
|
display:none
|
||||||
}
|
}
|
||||||
#car03{
|
#car03{
|
||||||
width: 553px;
|
width: 553px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 14%;
|
left: 14%;
|
||||||
top: 36%;
|
top: 36%;
|
||||||
background: #789cd1;
|
background: #789cd1;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display:none
|
display:none
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||||
</div> -->
|
</div> -->
|
||||||
<div id="car01">
|
<div id="car01">
|
||||||
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
|
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
|
||||||
</div>
|
</div>
|
||||||
<div id="car02">
|
<div id="car02">
|
||||||
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
|
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
|
||||||
</div>
|
</div>
|
||||||
<div id="car03">
|
<div id="car03">
|
||||||
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
|
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
|
||||||
</div>
|
</div>
|
||||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||||
<script id="mapScript">
|
<script id="mapScript">
|
||||||
var map = null;
|
var map = null;
|
||||||
var defaultLevel = 16;//默认层级
|
var defaultLevel = 16;//默认层级
|
||||||
var defaultArea = "nj";
|
var defaultArea = "nj";
|
||||||
|
|
||||||
var positions = {
|
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" }] },
|
// "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",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" }] },
|
"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 },
|
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 申请的key和sn
|
// 申请的key和sn
|
||||||
SGMap.tokenTask
|
SGMap.tokenTask
|
||||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||||
.then(function () {
|
.then(function () {
|
||||||
initMap();
|
initMap();
|
||||||
});
|
});
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
var area = GetQueryString("area");
|
var area = GetQueryString("area");
|
||||||
var lng = positions[defaultArea].lng;
|
var lng = positions[defaultArea].lng;
|
||||||
var lat = positions[defaultArea].lat;
|
var lat = positions[defaultArea].lat;
|
||||||
if (area != null) {
|
if (area != null) {
|
||||||
defaultArea = area;
|
defaultArea = area;
|
||||||
lng = positions[defaultArea].lng;
|
lng = positions[defaultArea].lng;
|
||||||
lat = positions[defaultArea].lat;
|
lat = positions[defaultArea].lat;
|
||||||
}
|
}
|
||||||
|
|
||||||
map = new SGMap.Map({
|
map = new SGMap.Map({
|
||||||
// 地图绑定的DOM元素ID
|
// 地图绑定的DOM元素ID
|
||||||
container: "map",
|
container: "map",
|
||||||
// 地图样式
|
// 地图样式
|
||||||
style: "aegis://styles/aegis/Streets",
|
style: "aegis://styles/aegis/Streets",
|
||||||
// style: "aegis://styles/aegis/Satellite512",
|
// style: "aegis://styles/aegis/Satellite512",
|
||||||
// 默认缩放层级
|
// 默认缩放层级
|
||||||
zoom: 11,
|
zoom: 11,
|
||||||
// 地图中心点
|
// 地图中心点
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
//倾斜角度
|
//倾斜角度
|
||||||
pitch: 45,
|
pitch: 45,
|
||||||
// 地图默认字体
|
// 地图默认字体
|
||||||
localIdeographFontFamily: "Microsoft YoHei"
|
localIdeographFontFamily: "Microsoft YoHei"
|
||||||
});
|
});
|
||||||
|
|
||||||
loadMarkers(defaultArea);
|
loadMarkers(defaultArea);
|
||||||
reportLocation();
|
reportLocation();
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图层级
|
//获取地图层级
|
||||||
function getMapZoom() {
|
function getMapZoom() {
|
||||||
return map.getZoom();
|
return map.getZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图层级
|
//设置地图层级
|
||||||
function setMapZoom(n) {
|
function setMapZoom(n) {
|
||||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||||
map.setZoom(n);
|
map.setZoom(n);
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图中心
|
//设置地图中心
|
||||||
function setMapCenter(lat, lng) {
|
function setMapCenter(lat, lng) {
|
||||||
map.setCenter([lng, lat]);
|
map.setCenter([lng, lat]);
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图当前中心点坐标
|
//获取地图当前中心点坐标
|
||||||
function getMapCenter() {
|
function getMapCenter() {
|
||||||
return map.getCenter();
|
return map.getCenter();
|
||||||
}
|
}
|
||||||
|
|
||||||
//每秒汇报当前中心点坐标
|
//每秒汇报当前中心点坐标
|
||||||
function reportLocation() {
|
function reportLocation() {
|
||||||
var centerPoint = getMapCenter();
|
var centerPoint = getMapCenter();
|
||||||
console.log(centerPoint);
|
console.log(centerPoint);
|
||||||
window.setTimeout("reportLocation()", 1000);
|
window.setTimeout("reportLocation()", 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
//地点跳转
|
//地点跳转
|
||||||
function gotoPosition(posName) {
|
function gotoPosition(posName) {
|
||||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||||
loadMarkers(posName);
|
loadMarkers(posName);
|
||||||
}
|
}
|
||||||
|
|
||||||
//画marker点
|
//画marker点
|
||||||
function addMarker(markerData) {
|
function addMarker(markerData) {
|
||||||
var el = document.createElement("img");
|
var el = document.createElement("img");
|
||||||
el.cusData = markerData;
|
el.cusData = markerData;
|
||||||
el.className = "marker";
|
el.className = "marker";
|
||||||
// 自定义图标
|
// 自定义图标
|
||||||
el.src = markerData.icon;
|
el.src = markerData.icon;
|
||||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||||
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||||
// 如果不传el，会默认给一个蓝色水滴图标
|
// 如果不传el，会默认给一个蓝色水滴图标
|
||||||
var mk = new SGMap.Marker(el, {
|
var mk = new SGMap.Marker(el, {
|
||||||
// marker相对经纬度点坐标点的位置
|
// marker相对经纬度点坐标点的位置
|
||||||
anchor: "bottom",
|
anchor: "bottom",
|
||||||
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
||||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||||
});
|
});
|
||||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||||
mk.addTo(map);
|
mk.addTo(map);
|
||||||
el.addEventListener("click", function (e) {
|
el.addEventListener("click", function (e) {
|
||||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||||
console.log("跳转" + e.target.cusData.data);
|
console.log("跳转" + e.target.cusData.data);
|
||||||
if(e.currentTarget.cusData.data=='车辆1'){
|
if(e.currentTarget.cusData.data=='车辆1'){
|
||||||
document.querySelector('#car01').style.display = 'block';
|
document.querySelector('#car01').style.display = 'block';
|
||||||
document.querySelector('#car02').style.display = 'none';
|
document.querySelector('#car02').style.display = 'none';
|
||||||
document.querySelector('#car03').style.display = 'none';
|
document.querySelector('#car03').style.display = 'none';
|
||||||
}else if(e.currentTarget.cusData.data=='车辆2'){
|
}else if(e.currentTarget.cusData.data=='车辆2'){
|
||||||
document.querySelector('#car01').style.display = 'none';
|
document.querySelector('#car01').style.display = 'none';
|
||||||
document.querySelector('#car02').style.display = 'block';
|
document.querySelector('#car02').style.display = 'block';
|
||||||
document.querySelector('#car03').style.display = 'none';
|
document.querySelector('#car03').style.display = 'none';
|
||||||
}else if(e.currentTarget.cusData.data=='车辆3'){
|
}else if(e.currentTarget.cusData.data=='车辆3'){
|
||||||
document.querySelector('#car01').style.display = 'none';
|
document.querySelector('#car01').style.display = 'none';
|
||||||
document.querySelector('#car02').style.display = 'none';
|
document.querySelector('#car02').style.display = 'none';
|
||||||
document.querySelector('#car03').style.display = 'block';
|
document.querySelector('#car03').style.display = 'block';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return mk;
|
return mk;
|
||||||
}
|
}
|
||||||
|
|
||||||
//加载图标
|
//加载图标
|
||||||
var markerArray = new Array();
|
var markerArray = new Array();
|
||||||
function loadMarkers(posName) {
|
function loadMarkers(posName) {
|
||||||
for (var i in markerArray) {
|
for (var i in markerArray) {
|
||||||
markerArray[i].remove();
|
markerArray[i].remove();
|
||||||
}
|
}
|
||||||
markerArray = new Array();
|
markerArray = new Array();
|
||||||
|
|
||||||
var markers = positions[posName].markers;
|
var markers = positions[posName].markers;
|
||||||
if (markers != undefined && markers != null) {
|
if (markers != undefined && markers != null) {
|
||||||
for (var i in markers) {
|
for (var i in markers) {
|
||||||
var markerData = markers[i];
|
var markerData = markers[i];
|
||||||
markerArray.push(addMarker(markerData));
|
markerArray.push(addMarker(markerData));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1.获取2个经纬度之间的距离
|
1.获取2个经纬度之间的距离
|
||||||
2.lng1 lat1 经纬度1
|
2.lng1 lat1 经纬度1
|
||||||
3.lng2 lat2 经纬度2
|
3.lng2 lat2 经纬度2
|
||||||
*/
|
*/
|
||||||
function getDisance(lng1, lat1, lng2, lat2) {
|
function getDisance(lng1, lat1, lng2, lat2) {
|
||||||
var dis = 0;
|
var dis = 0;
|
||||||
var radius = 6378137;//地球的半径
|
var radius = 6378137;//地球的半径
|
||||||
var radLat1 = toRad(lat1);
|
var radLat1 = toRad(lat1);
|
||||||
var radLat2 = toRad(lat2);
|
var radLat2 = toRad(lat2);
|
||||||
var deltaLat = radLat1 - radLat2;
|
var deltaLat = radLat1 - radLat2;
|
||||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||||
var dis =
|
var dis =
|
||||||
2 *
|
2 *
|
||||||
Math.asin(
|
Math.asin(
|
||||||
Math.sqrt(
|
Math.sqrt(
|
||||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||||
Math.cos(radLat1) *
|
Math.cos(radLat1) *
|
||||||
Math.cos(radLat2) *
|
Math.cos(radLat2) *
|
||||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
return dis * radius;
|
return dis * radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取URL参数
|
//获取URL参数
|
||||||
function GetQueryString(name) {
|
function GetQueryString(name) {
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||||
var r = window.location.search.substr(1).match(reg);
|
var r = window.location.search.substr(1).match(reg);
|
||||||
if (r != null) return unescape(r[2]); return null;
|
if (r != null) return unescape(r[2]); return null;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,202 +1,202 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
|
||||||
<title>思极地图</title>
|
<title>思极地图</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||||
</div> -->
|
</div> -->
|
||||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||||
<script id="mapScript">
|
<script id="mapScript">
|
||||||
var map = null;
|
var map = null;
|
||||||
var defaultLevel = 5;//默认层级
|
var defaultLevel = 5;//默认层级
|
||||||
var defaultArea = "nj";
|
var defaultArea = "nj";
|
||||||
|
|
||||||
var positions = {
|
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" }] },
|
// "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",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: "北阴阳营小区" },{ 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: "北阴阳营小区" }] },
|
"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 },
|
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 申请的key和sn
|
// 申请的key和sn
|
||||||
SGMap.tokenTask
|
SGMap.tokenTask
|
||||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||||
.then(function () {
|
.then(function () {
|
||||||
initMap();
|
initMap();
|
||||||
});
|
});
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
var area = GetQueryString("area");
|
var area = GetQueryString("area");
|
||||||
var lng = positions[defaultArea].lng;
|
var lng = positions[defaultArea].lng;
|
||||||
var lat = positions[defaultArea].lat;
|
var lat = positions[defaultArea].lat;
|
||||||
if (area != null) {
|
if (area != null) {
|
||||||
defaultArea = area;
|
defaultArea = area;
|
||||||
lng = positions[defaultArea].lng;
|
lng = positions[defaultArea].lng;
|
||||||
lat = positions[defaultArea].lat;
|
lat = positions[defaultArea].lat;
|
||||||
}
|
}
|
||||||
|
|
||||||
map = new SGMap.Map({
|
map = new SGMap.Map({
|
||||||
// 地图绑定的DOM元素ID
|
// 地图绑定的DOM元素ID
|
||||||
container: "map",
|
container: "map",
|
||||||
// 地图样式
|
// 地图样式
|
||||||
style: "aegis://styles/aegis/Streets",
|
style: "aegis://styles/aegis/Streets",
|
||||||
// 默认缩放层级
|
// 默认缩放层级
|
||||||
zoom: 16,
|
zoom: 16,
|
||||||
// 地图中心点
|
// 地图中心点
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
//倾斜角度
|
//倾斜角度
|
||||||
pitch: 45,
|
pitch: 45,
|
||||||
// 地图默认字体
|
// 地图默认字体
|
||||||
localIdeographFontFamily: "Microsoft YoHei"
|
localIdeographFontFamily: "Microsoft YoHei"
|
||||||
});
|
});
|
||||||
|
|
||||||
loadMarkers(defaultArea);
|
loadMarkers(defaultArea);
|
||||||
reportLocation();
|
reportLocation();
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图层级
|
//获取地图层级
|
||||||
function getMapZoom() {
|
function getMapZoom() {
|
||||||
return map.getZoom();
|
return map.getZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图层级
|
//设置地图层级
|
||||||
function setMapZoom(n) {
|
function setMapZoom(n) {
|
||||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||||
map.setZoom(n);
|
map.setZoom(n);
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置地图中心
|
//设置地图中心
|
||||||
function setMapCenter(lat, lng) {
|
function setMapCenter(lat, lng) {
|
||||||
map.setCenter([lng, lat]);
|
map.setCenter([lng, lat]);
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取地图当前中心点坐标
|
//获取地图当前中心点坐标
|
||||||
function getMapCenter() {
|
function getMapCenter() {
|
||||||
return map.getCenter();
|
return map.getCenter();
|
||||||
}
|
}
|
||||||
|
|
||||||
//每秒汇报当前中心点坐标
|
//每秒汇报当前中心点坐标
|
||||||
function reportLocation() {
|
function reportLocation() {
|
||||||
var centerPoint = getMapCenter();
|
var centerPoint = getMapCenter();
|
||||||
console.log(centerPoint);
|
console.log(centerPoint);
|
||||||
window.setTimeout("reportLocation()", 1000);
|
window.setTimeout("reportLocation()", 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
//地点跳转
|
//地点跳转
|
||||||
function gotoPosition(posName) {
|
function gotoPosition(posName) {
|
||||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||||
loadMarkers(posName);
|
loadMarkers(posName);
|
||||||
}
|
}
|
||||||
|
|
||||||
//画marker点
|
//画marker点
|
||||||
function addMarker(markerData) {
|
function addMarker(markerData) {
|
||||||
var el = document.createElement("img");
|
var el = document.createElement("img");
|
||||||
el.cusData = markerData;
|
el.cusData = markerData;
|
||||||
el.className = "marker";
|
el.className = "marker";
|
||||||
// 自定义图标
|
// 自定义图标
|
||||||
el.src = markerData.icon;
|
el.src = markerData.icon;
|
||||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||||
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||||
// el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
// el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
||||||
// 如果不传el，会默认给一个蓝色水滴图标
|
// 如果不传el，会默认给一个蓝色水滴图标
|
||||||
var mk = new SGMap.Marker(el, {
|
var mk = new SGMap.Marker(el, {
|
||||||
// marker相对经纬度点坐标点的位置
|
// marker相对经纬度点坐标点的位置
|
||||||
anchor: "bottom",
|
anchor: "bottom",
|
||||||
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
||||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||||
});
|
});
|
||||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||||
mk.addTo(map);
|
mk.addTo(map);
|
||||||
el.addEventListener("click", function (e) {
|
el.addEventListener("click", function (e) {
|
||||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||||
console.log("跳转" + e.target.cusData.data);
|
console.log("跳转" + e.target.cusData.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
return mk;
|
return mk;
|
||||||
}
|
}
|
||||||
|
|
||||||
//加载图标
|
//加载图标
|
||||||
var markerArray = new Array();
|
var markerArray = new Array();
|
||||||
function loadMarkers(posName) {
|
function loadMarkers(posName) {
|
||||||
for (var i in markerArray) {
|
for (var i in markerArray) {
|
||||||
markerArray[i].remove();
|
markerArray[i].remove();
|
||||||
}
|
}
|
||||||
markerArray = new Array();
|
markerArray = new Array();
|
||||||
|
|
||||||
var markers = positions[posName].markers;
|
var markers = positions[posName].markers;
|
||||||
if (markers != undefined && markers != null) {
|
if (markers != undefined && markers != null) {
|
||||||
for (var i in markers) {
|
for (var i in markers) {
|
||||||
var markerData = markers[i];
|
var markerData = markers[i];
|
||||||
markerArray.push(addMarker(markerData));
|
markerArray.push(addMarker(markerData));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1.获取2个经纬度之间的距离
|
1.获取2个经纬度之间的距离
|
||||||
2.lng1 lat1 经纬度1
|
2.lng1 lat1 经纬度1
|
||||||
3.lng2 lat2 经纬度2
|
3.lng2 lat2 经纬度2
|
||||||
*/
|
*/
|
||||||
function getDisance(lng1, lat1, lng2, lat2) {
|
function getDisance(lng1, lat1, lng2, lat2) {
|
||||||
var dis = 0;
|
var dis = 0;
|
||||||
var radius = 6378137;//地球的半径
|
var radius = 6378137;//地球的半径
|
||||||
var radLat1 = toRad(lat1);
|
var radLat1 = toRad(lat1);
|
||||||
var radLat2 = toRad(lat2);
|
var radLat2 = toRad(lat2);
|
||||||
var deltaLat = radLat1 - radLat2;
|
var deltaLat = radLat1 - radLat2;
|
||||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||||
var dis =
|
var dis =
|
||||||
2 *
|
2 *
|
||||||
Math.asin(
|
Math.asin(
|
||||||
Math.sqrt(
|
Math.sqrt(
|
||||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||||
Math.cos(radLat1) *
|
Math.cos(radLat1) *
|
||||||
Math.cos(radLat2) *
|
Math.cos(radLat2) *
|
||||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
return dis * radius;
|
return dis * radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取URL参数
|
//获取URL参数
|
||||||
function GetQueryString(name) {
|
function GetQueryString(name) {
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||||
var r = window.location.search.substr(1).match(reg);
|
var r = window.location.search.substr(1).match(reg);
|
||||||
if (r != null) return unescape(r[2]); return null;
|
if (r != null) return unescape(r[2]); return null;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
Binary file not shown.
|
After Width: | Height: | Size: 577 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 520 B |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 839 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 540 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 817 B |
|
|
@ -1,98 +1,98 @@
|
||||||
// 颜色
|
// 颜色
|
||||||
$colors: (
|
$colors: (
|
||||||
"primary": #1A5CD7,
|
"primary": #1A5CD7,
|
||||||
"info-1": #4394e4,
|
"info-1": #4394e4,
|
||||||
"info": #4b67af,
|
"info": #4b67af,
|
||||||
"white": #ffffff,
|
"white": #ffffff,
|
||||||
"light": #f9f9f9,
|
"light": #f9f9f9,
|
||||||
"grey-1": #999999,
|
"grey-1": #999999,
|
||||||
"grey": #666666,
|
"grey": #666666,
|
||||||
"dark-1": #5f5f5f,
|
"dark-1": #5f5f5f,
|
||||||
"dark": #222222,
|
"dark": #222222,
|
||||||
"black-1": #171823,
|
"black-1": #171823,
|
||||||
"black": #000000,
|
"black": #000000,
|
||||||
"icon": #5cd9e8
|
"icon": #5cd9e8
|
||||||
);
|
);
|
||||||
|
|
||||||
// 字体大小
|
// 字体大小
|
||||||
$base-font-size: 0.2rem;
|
$base-font-size: 0.2rem;
|
||||||
$font-sizes: (
|
$font-sizes: (
|
||||||
xxs: 0.1,
|
xxs: 0.1,
|
||||||
//8px
|
//8px
|
||||||
xs: 0.125,
|
xs: 0.125,
|
||||||
//10px
|
//10px
|
||||||
sm: 0.2875,
|
sm: 0.2875,
|
||||||
//12px
|
//12px
|
||||||
md: 0.1625,
|
md: 0.1625,
|
||||||
//13px
|
//13px
|
||||||
lg: 0.175,
|
lg: 0.175,
|
||||||
//14px
|
//14px
|
||||||
xl: 0.2,
|
xl: 0.2,
|
||||||
//16px
|
//16px
|
||||||
xxl: 0.225,
|
xxl: 0.225,
|
||||||
//18px
|
//18px
|
||||||
xxxl: 0.25 //20px,,,,
|
xxxl: 0.25 //20px,,,,
|
||||||
);
|
);
|
||||||
|
|
||||||
// 宽高
|
// 宽高
|
||||||
.w-100 {
|
.w-100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.h-100 {
|
.h-100 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
//flex
|
//flex
|
||||||
.d-flex {
|
.d-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.flex-column {
|
.flex-column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.flex-wrap {
|
.flex-wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.flex-nowrap {
|
.flex-nowrap {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
$flex-jc: (
|
$flex-jc: (
|
||||||
start: flex-start,
|
start: flex-start,
|
||||||
end: flex-end,
|
end: flex-end,
|
||||||
center: center,
|
center: center,
|
||||||
between: space-between,
|
between: space-between,
|
||||||
around: space-around,
|
around: space-around,
|
||||||
evenly: space-evenly,
|
evenly: space-evenly,
|
||||||
);
|
);
|
||||||
|
|
||||||
$flex-ai: (
|
$flex-ai: (
|
||||||
start: flex-start,
|
start: flex-start,
|
||||||
end: flex-end,
|
end: flex-end,
|
||||||
center: center,
|
center: center,
|
||||||
stretch: stretch,
|
stretch: stretch,
|
||||||
);
|
);
|
||||||
|
|
||||||
.flex-1 {
|
.flex-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
//.mt-1 => margin top
|
//.mt-1 => margin top
|
||||||
//spacing
|
//spacing
|
||||||
$spacing-types: (
|
$spacing-types: (
|
||||||
m: margin,
|
m: margin,
|
||||||
p: padding,
|
p: padding,
|
||||||
);
|
);
|
||||||
$spacing-directions: (
|
$spacing-directions: (
|
||||||
t: top,
|
t: top,
|
||||||
r: right,
|
r: right,
|
||||||
b: bottom,
|
b: bottom,
|
||||||
l: left,
|
l: left,
|
||||||
);
|
);
|
||||||
$spacing-base-size: 0.5rem;
|
$spacing-base-size: 0.5rem;
|
||||||
$spacing-sizes: (
|
$spacing-sizes: (
|
||||||
0: 0,
|
0: 0,
|
||||||
1: 0.5,
|
1: 0.5,
|
||||||
2: 1,
|
2: 1,
|
||||||
3: 1.5,
|
3: 1.5,
|
||||||
4: 2,
|
4: 2,
|
||||||
5: 2.5,
|
5: 2.5,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,189 +1,189 @@
|
||||||
@import "./variables";
|
@import "./variables";
|
||||||
#index {
|
#index {
|
||||||
color: #d3d6dd;
|
color: #d3d6dd;
|
||||||
// width: 1920px;
|
// width: 1920px;
|
||||||
// height: 1080px;
|
// height: 1080px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: scale(1, 1) translate(-50%, -50%)!important;
|
transform: scale(1, 1) translate(-50%, -50%)!important;
|
||||||
transform-origin: left top;
|
transform-origin: left top;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0px 0px 0 0px;
|
padding: 0px 0px 0 0px;
|
||||||
// background-image: url("/src/assets/pageBg.png");
|
// background-image: url("/src/assets/pageBg.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
// .body-header {
|
// .body-header {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// height: 244px;
|
// height: 244px;
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// top:0px
|
// top:0px
|
||||||
// }
|
// }
|
||||||
.body-bottom {
|
.body-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 244px;
|
height: 244px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:0px
|
bottom:0px
|
||||||
}
|
}
|
||||||
.body-left {
|
.body-left {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// left: -390px;
|
// left: -390px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
float: left;
|
float: left;
|
||||||
width: 779px;
|
width: 779px;
|
||||||
height: 1080px;
|
height: 1080px;
|
||||||
// background: url(./assets/left.png) no-repeat;
|
// background: url(./assets/left.png) no-repeat;
|
||||||
// background: url('/src/assets/left.png') no-repeat;
|
// background: url('/src/assets/left.png') no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body-right {
|
.body-right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
float: right;
|
float: right;
|
||||||
width: 779px;
|
width: 779px;
|
||||||
height: 1080px;
|
height: 1080px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.host-body {
|
.host-body {
|
||||||
|
|
||||||
.dv-dec-10,
|
.dv-dec-10,
|
||||||
.dv-dec-10-s {
|
.dv-dec-10-s {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-dec-10-s {
|
.dv-dec-10-s {
|
||||||
transform: rotateY(180deg);
|
transform: rotateY(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-dec-8 {
|
.dv-dec-8 {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%);
|
transform: translate(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-dec-6 {
|
.dv-dec-6 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -30px;
|
bottom: -30px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
transform: translate(-50%);
|
transform: translate(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 第二行
|
// 第二行
|
||||||
.aside-width {
|
.aside-width {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-r-s,
|
.react-r-s,
|
||||||
.react-l-s {
|
.react-l-s {
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 平行四边形
|
// 平行四边形
|
||||||
.react-right {
|
.react-right {
|
||||||
&.react-l-s {
|
&.react-l-s {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: skewX(-45deg);
|
transform: skewX(-45deg);
|
||||||
|
|
||||||
.react-after {
|
.react-after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -25px;
|
right: -25px;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-left {
|
.react-left {
|
||||||
&.react-l-s {
|
&.react-l-s {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg);
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
|
|
||||||
.react-left {
|
.react-left {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -25px;
|
left: -25px;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background-color: #0f1325;
|
background-color: #0f1325;
|
||||||
transform: skewX(-45deg);
|
transform: skewX(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform: skewX(-45deg);
|
transform: skewX(-45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body-box {
|
.body-box {
|
||||||
margin-top: -55px;
|
margin-top: -55px;
|
||||||
// margin-top: 16px;
|
// margin-top: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
//下方区域的布局
|
//下方区域的布局
|
||||||
.content-box {
|
.content-box {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
|
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 底部数据
|
// 底部数据
|
||||||
.bottom-box {
|
.bottom-box {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 50%);
|
grid-template-columns: repeat(2, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,326 +1,326 @@
|
||||||
@import "./variables";
|
@import "./variables";
|
||||||
|
|
||||||
// 全局样式
|
// 全局样式
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
// background-color: #f1f1f1;
|
// background-color: #f1f1f1;
|
||||||
// background-color: #0d131f;
|
// background-color: #0d131f;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #343440;
|
color: #343440;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
height: 0;
|
height: 0;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//浮动
|
//浮动
|
||||||
.float-r {
|
.float-r {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
//浮动
|
//浮动
|
||||||
.float-l {
|
.float-l {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字体加粗
|
// 字体加粗
|
||||||
.fw-b {
|
.fw-b {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
//文章一行显示，多余省略号显示
|
//文章一行显示，多余省略号显示
|
||||||
.title-item {
|
.title-item {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 返回按钮 */
|
/* 返回按钮 */
|
||||||
.back-button a {
|
.back-button a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 22px;
|
right: 22px;
|
||||||
top: 41px;
|
top: 41px;
|
||||||
width: 55px;
|
width: 55px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-image: url('../bt-02.png');
|
background-image: url('../bt-02.png');
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button a:hover {
|
.back-button a:hover {
|
||||||
background-image: url('../bt-002.png');
|
background-image: url('../bt-002.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-color-black {
|
.bg-color-black {
|
||||||
background-color: rgba(19, 25, 47, 0.6);
|
background-color: rgba(19, 25, 47, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-color-blue {
|
.bg-color-blue {
|
||||||
background-color: #1a5cd7;
|
background-color: #1a5cd7;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换按钮样式
|
// 切换按钮样式
|
||||||
.tabs_datag {
|
.tabs_datag {
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 30px 0 0;
|
margin: 0 30px 0 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 4px;
|
line-height: 4px;
|
||||||
background: #09304a;
|
background: #09304a;
|
||||||
border: 1px solid #0b5593;
|
border: 1px solid #0b5593;
|
||||||
color: #8ebbcd;
|
color: #8ebbcd;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:nth-child(1) {
|
li:nth-child(1) {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 4px;
|
line-height: 4px;
|
||||||
background: #0b4471;
|
background: #0b4471;
|
||||||
border: 1px solid #0e8bff;
|
border: 1px solid #0e8bff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover {
|
li:hover {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 4px;
|
line-height: 4px;
|
||||||
background: #0b4471;
|
background: #0b4471;
|
||||||
border: 1px solid #0e8bff;
|
border: 1px solid #0e8bff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 切换按钮样式
|
// 切换按钮样式
|
||||||
.tabs_datag1 {
|
.tabs_datag1 {
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 30px 0 0;
|
margin: 0 30px 0 0;
|
||||||
li {
|
li {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
//background: #09304a;
|
//background: #09304a;
|
||||||
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
|
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
|
||||||
//border: 1px solid transparent;
|
//border: 1px solid transparent;
|
||||||
color: #8ebbcd;
|
color: #8ebbcd;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:nth-child(1) {
|
li:nth-child(1) {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
//background: #0b4471;
|
//background: #0b4471;
|
||||||
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
||||||
//border: 1px solid transparent;
|
//border: 1px solid transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover {
|
li:hover {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: 66px;
|
width: 66px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
//background: #0b4471;
|
//background: #0b4471;
|
||||||
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
|
||||||
//border: 1px solid transparent;
|
//border: 1px solid transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorBlack {
|
.colorBlack {
|
||||||
color: #272727 !important;
|
color: #272727 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #272727 !important;
|
color: #272727 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorGrass {
|
.colorGrass {
|
||||||
color: #33cea0;
|
color: #33cea0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #33cea0 !important;
|
color: #33cea0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorRed {
|
.colorRed {
|
||||||
color: #ff5722;
|
color: #ff5722;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ff5722 !important;
|
color: #ff5722 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorText {
|
.colorText {
|
||||||
color: #d3d6dd !important;
|
color: #d3d6dd !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #d3d6dd !important;
|
color: #d3d6dd !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorBlue {
|
.colorBlue {
|
||||||
color: #257dff !important;
|
color: #257dff !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #257dff !important;
|
color: #257dff !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorCyan {
|
.colorCyan {
|
||||||
color: #5fbae9 !important;
|
color: #5fbae9 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #5fbae9 !important;
|
color: #5fbae9 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorWhi {
|
.colorWhi {
|
||||||
color: #b3def2 !important;
|
color: #b3def2 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #b3def2 !important;
|
color: #b3def2 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//颜色
|
//颜色
|
||||||
@each $colorkey,
|
@each $colorkey,
|
||||||
$color in $colors {
|
$color in $colors {
|
||||||
.text-#{$colorkey} {
|
.text-#{$colorkey} {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-#{$colorkey} {
|
.bg-#{$colorkey} {
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//对齐
|
//对齐
|
||||||
@each $var in (left, center, right) {
|
@each $var in (left, center, right) {
|
||||||
.text-#{$var} {
|
.text-#{$var} {
|
||||||
text-align: $var !important;
|
text-align: $var !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//flex
|
//flex
|
||||||
@each $key,
|
@each $key,
|
||||||
$value in $flex-jc {
|
$value in $flex-jc {
|
||||||
.jc-#{$key} {
|
.jc-#{$key} {
|
||||||
justify-content: $value;
|
justify-content: $value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $key,
|
@each $key,
|
||||||
$value in $flex-ai {
|
$value in $flex-ai {
|
||||||
.ai-#{$key} {
|
.ai-#{$key} {
|
||||||
align-items: $value;
|
align-items: $value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//字体
|
//字体
|
||||||
@each $fontkey,
|
@each $fontkey,
|
||||||
$fontvalue in $font-sizes {
|
$fontvalue in $font-sizes {
|
||||||
.fs-#{$fontkey} {
|
.fs-#{$fontkey} {
|
||||||
font-size: $fontvalue * $base-font-size;
|
font-size: $fontvalue * $base-font-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//.mt-1 => margin top
|
//.mt-1 => margin top
|
||||||
//spacing
|
//spacing
|
||||||
|
|
||||||
@each $typekey,
|
@each $typekey,
|
||||||
$type in $spacing-types {
|
$type in $spacing-types {
|
||||||
|
|
||||||
//.m-1
|
//.m-1
|
||||||
@each $sizekey,
|
@each $sizekey,
|
||||||
$size in $spacing-sizes {
|
$size in $spacing-sizes {
|
||||||
.#{$typekey}-#{$sizekey} {
|
.#{$typekey}-#{$sizekey} {
|
||||||
#{$type}: $size * $spacing-base-size;
|
#{$type}: $size * $spacing-base-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//.mx-1
|
//.mx-1
|
||||||
@each $sizekey,
|
@each $sizekey,
|
||||||
$size in $spacing-sizes {
|
$size in $spacing-sizes {
|
||||||
.#{$typekey}x-#{$sizekey} {
|
.#{$typekey}x-#{$sizekey} {
|
||||||
#{$type}-left: $size * $spacing-base-size;
|
#{$type}-left: $size * $spacing-base-size;
|
||||||
#{$type}-right: $size * $spacing-base-size;
|
#{$type}-right: $size * $spacing-base-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$typekey}y-#{$sizekey} {
|
.#{$typekey}y-#{$sizekey} {
|
||||||
#{$type}-top: $size * $spacing-base-size;
|
#{$type}-top: $size * $spacing-base-size;
|
||||||
#{$type}-bottom: $size * $spacing-base-size;
|
#{$type}-bottom: $size * $spacing-base-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//.mt-1
|
//.mt-1
|
||||||
@each $directionkey,
|
@each $directionkey,
|
||||||
$direction in $spacing-directions {
|
$direction in $spacing-directions {
|
||||||
|
|
||||||
@each $sizekey,
|
@each $sizekey,
|
||||||
$size in $spacing-sizes {
|
$size in $spacing-sizes {
|
||||||
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
||||||
#{$type}-#{$direction}: $size * $spacing-base-size;
|
#{$type}-#{$direction}: $size * $spacing-base-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$typekey} {
|
.#{$typekey} {
|
||||||
#{$type}: 0;
|
#{$type}: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,69 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import tdTheme from './theme.json' // 引入默认主题
|
import tdTheme from './theme.json' // 引入默认主题
|
||||||
import '../map/fujian.js'
|
import '../map/fujian.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'echart',
|
name: 'echart',
|
||||||
props: {
|
props: {
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '100%'
|
default: '100%'
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '2.5rem'
|
default: '2.5rem'
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
options: {
|
options: {
|
||||||
handler(options) {
|
handler(options) {
|
||||||
|
|
||||||
// 设置true清空echart缓存
|
// 设置true清空echart缓存
|
||||||
this.chart.setOption(options, true)
|
this.chart.setOption(options, true)
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("options", this.options)
|
console.log("options", this.options)
|
||||||
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||||
this.initChart();
|
this.initChart();
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
console.log("$el", this.$el)
|
console.log("$el", this.$el)
|
||||||
// 初始化echart
|
// 初始化echart
|
||||||
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
||||||
this.chart.setOption(this.options, true)
|
this.chart.setOption(this.options, true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,490 +1,490 @@
|
||||||
{
|
{
|
||||||
"color": [
|
"color": [
|
||||||
"#2d8cf0",
|
"#2d8cf0",
|
||||||
"#19be6b",
|
"#19be6b",
|
||||||
"#ff9900",
|
"#ff9900",
|
||||||
"#E46CBB",
|
"#E46CBB",
|
||||||
"#9A66E4",
|
"#9A66E4",
|
||||||
"#ed3f14"
|
"#ed3f14"
|
||||||
],
|
],
|
||||||
"backgroundColor": "rgba(0,0,0,0)",
|
"backgroundColor": "rgba(0,0,0,0)",
|
||||||
"textStyle": {},
|
"textStyle": {},
|
||||||
"title": {
|
"title": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#516b91"
|
"color": "#516b91"
|
||||||
},
|
},
|
||||||
"subtextStyle": {
|
"subtextStyle": {
|
||||||
"color": "#93b7e3"
|
"color": "#93b7e3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"line": {
|
"line": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": "2"
|
"borderWidth": "2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"width": "2"
|
"width": "2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"symbolSize": "6",
|
"symbolSize": "6",
|
||||||
"symbol": "emptyCircle",
|
"symbol": "emptyCircle",
|
||||||
"smooth": true
|
"smooth": true
|
||||||
},
|
},
|
||||||
"radar": {
|
"radar": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": "2"
|
"borderWidth": "2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"width": "2"
|
"width": "2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"symbolSize": "6",
|
"symbolSize": "6",
|
||||||
"symbol": "emptyCircle",
|
"symbol": "emptyCircle",
|
||||||
"smooth": true
|
"smooth": true
|
||||||
},
|
},
|
||||||
"bar": {
|
"bar": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"barBorderWidth": 0,
|
"barBorderWidth": 0,
|
||||||
"barBorderColor": "#ccc"
|
"barBorderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"barBorderWidth": 0,
|
"barBorderWidth": 0,
|
||||||
"barBorderColor": "#ccc"
|
"barBorderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"pie": {
|
"pie": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scatter": {
|
"scatter": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"boxplot": {
|
"boxplot": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"parallel": {
|
"parallel": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"sankey": {
|
"sankey": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"funnel": {
|
"funnel": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"gauge": {
|
"gauge": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"candlestick": {
|
"candlestick": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"color": "#edafda",
|
"color": "#edafda",
|
||||||
"color0": "transparent",
|
"color0": "transparent",
|
||||||
"borderColor": "#d680bc",
|
"borderColor": "#d680bc",
|
||||||
"borderColor0": "#8fd3e8",
|
"borderColor0": "#8fd3e8",
|
||||||
"borderWidth": "2"
|
"borderWidth": "2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"graph": {
|
"graph": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderWidth": 0,
|
"borderWidth": 0,
|
||||||
"borderColor": "#ccc"
|
"borderColor": "#ccc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"width": 1,
|
"width": 1,
|
||||||
"color": "#aaa"
|
"color": "#aaa"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"symbolSize": "6",
|
"symbolSize": "6",
|
||||||
"symbol": "emptyCircle",
|
"symbol": "emptyCircle",
|
||||||
"smooth": true,
|
"smooth": true,
|
||||||
"color": [
|
"color": [
|
||||||
"#2d8cf0",
|
"#2d8cf0",
|
||||||
"#19be6b",
|
"#19be6b",
|
||||||
"#f5ae4a",
|
"#f5ae4a",
|
||||||
"#9189d5",
|
"#9189d5",
|
||||||
"#56cae2",
|
"#56cae2",
|
||||||
"#cbb0e3"
|
"#cbb0e3"
|
||||||
],
|
],
|
||||||
"label": {
|
"label": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#eee"
|
"color": "#eee"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"map": {
|
"map": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"areaColor": "#f3f3f3",
|
"areaColor": "#f3f3f3",
|
||||||
"borderColor": "#516b91",
|
"borderColor": "#516b91",
|
||||||
"borderWidth": 0.5
|
"borderWidth": 0.5
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"areaColor": "rgba(165,231,240,1)",
|
"areaColor": "rgba(165,231,240,1)",
|
||||||
"borderColor": "#516b91",
|
"borderColor": "#516b91",
|
||||||
"borderWidth": 1
|
"borderWidth": 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#000"
|
"color": "#000"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "rgb(81,107,145)"
|
"color": "rgb(81,107,145)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"geo": {
|
"geo": {
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"areaColor": "#f3f3f3",
|
"areaColor": "#f3f3f3",
|
||||||
"borderColor": "#516b91",
|
"borderColor": "#516b91",
|
||||||
"borderWidth": 0.5
|
"borderWidth": 0.5
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"areaColor": "rgba(165,231,240,1)",
|
"areaColor": "rgba(165,231,240,1)",
|
||||||
"borderColor": "#516b91",
|
"borderColor": "#516b91",
|
||||||
"borderWidth": 1
|
"borderWidth": 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#000"
|
"color": "#000"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "rgb(81,107,145)"
|
"color": "rgb(81,107,145)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"categoryAxis": {
|
"categoryAxis": {
|
||||||
"axisLine": {
|
"axisLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#cccccc"
|
"color": "#cccccc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisTick": {
|
"axisTick": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#333"
|
"color": "#333"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#fff"
|
"color": "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"#eeeeee"
|
"#eeeeee"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitArea": {
|
"splitArea": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"areaStyle": {
|
"areaStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"rgba(250,250,250,0.05)",
|
"rgba(250,250,250,0.05)",
|
||||||
"rgba(200,200,200,0.02)"
|
"rgba(200,200,200,0.02)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"valueAxis": {
|
"valueAxis": {
|
||||||
"axisLine": {
|
"axisLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#cccccc"
|
"color": "#cccccc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisTick": {
|
"axisTick": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#333"
|
"color": "#333"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#fff"
|
"color": "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"#eeeeee"
|
"#eeeeee"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitArea": {
|
"splitArea": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"areaStyle": {
|
"areaStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"rgba(250,250,250,0.05)",
|
"rgba(250,250,250,0.05)",
|
||||||
"rgba(200,200,200,0.02)"
|
"rgba(200,200,200,0.02)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"logAxis": {
|
"logAxis": {
|
||||||
"axisLine": {
|
"axisLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#cccccc"
|
"color": "#cccccc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisTick": {
|
"axisTick": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#333"
|
"color": "#333"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#999999"
|
"color": "#999999"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"#eeeeee"
|
"#eeeeee"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitArea": {
|
"splitArea": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"areaStyle": {
|
"areaStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"rgba(250,250,250,0.05)",
|
"rgba(250,250,250,0.05)",
|
||||||
"rgba(200,200,200,0.02)"
|
"rgba(200,200,200,0.02)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"timeAxis": {
|
"timeAxis": {
|
||||||
"axisLine": {
|
"axisLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#cccccc"
|
"color": "#cccccc"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisTick": {
|
"axisTick": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#333"
|
"color": "#333"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#999999"
|
"color": "#999999"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"show": true,
|
"show": true,
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"#eeeeee"
|
"#eeeeee"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"splitArea": {
|
"splitArea": {
|
||||||
"show": false,
|
"show": false,
|
||||||
"areaStyle": {
|
"areaStyle": {
|
||||||
"color": [
|
"color": [
|
||||||
"rgba(250,250,250,0.05)",
|
"rgba(250,250,250,0.05)",
|
||||||
"rgba(200,200,200,0.02)"
|
"rgba(200,200,200,0.02)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"toolbox": {
|
"toolbox": {
|
||||||
"iconStyle": {
|
"iconStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"borderColor": "#999"
|
"borderColor": "#999"
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"borderColor": "#666"
|
"borderColor": "#666"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"legend": {
|
"legend": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#fff"
|
"color": "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tooltip": {
|
"tooltip": {
|
||||||
"axisPointer": {
|
"axisPointer": {
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#ccc",
|
"color": "#ccc",
|
||||||
"width": 1
|
"width": 1
|
||||||
},
|
},
|
||||||
"crossStyle": {
|
"crossStyle": {
|
||||||
"color": "#ccc",
|
"color": "#ccc",
|
||||||
"width": 1
|
"width": 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"timeline": {
|
"timeline": {
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#8fd3e8",
|
"color": "#8fd3e8",
|
||||||
"width": 1
|
"width": 1
|
||||||
},
|
},
|
||||||
"itemStyle": {
|
"itemStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"color": "#8fd3e8",
|
"color": "#8fd3e8",
|
||||||
"borderWidth": 1
|
"borderWidth": 1
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"color": "#8fd3e8"
|
"color": "#8fd3e8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"controlStyle": {
|
"controlStyle": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"color": "#8fd3e8",
|
"color": "#8fd3e8",
|
||||||
"borderColor": "#8fd3e8",
|
"borderColor": "#8fd3e8",
|
||||||
"borderWidth": 0.5
|
"borderWidth": 0.5
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"color": "#8fd3e8",
|
"color": "#8fd3e8",
|
||||||
"borderColor": "#8fd3e8",
|
"borderColor": "#8fd3e8",
|
||||||
"borderWidth": 0.5
|
"borderWidth": 0.5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"checkpointStyle": {
|
"checkpointStyle": {
|
||||||
"color": "#8fd3e8",
|
"color": "#8fd3e8",
|
||||||
"borderColor": "rgba(138,124,168,0.37)"
|
"borderColor": "rgba(138,124,168,0.37)"
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#8fd3e8"
|
"color": "#8fd3e8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#8fd3e8"
|
"color": "#8fd3e8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"visualMap": {
|
"visualMap": {
|
||||||
"color": [
|
"color": [
|
||||||
"#516b91",
|
"#516b91",
|
||||||
"#59c4e6",
|
"#59c4e6",
|
||||||
"#a5e7f0"
|
"#a5e7f0"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dataZoom": {
|
"dataZoom": {
|
||||||
"backgroundColor": "rgba(0,0,0,0)",
|
"backgroundColor": "rgba(0,0,0,0)",
|
||||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||||
"fillerColor": "rgba(167,183,204,0.4)",
|
"fillerColor": "rgba(167,183,204,0.4)",
|
||||||
"handleColor": "#a7b7cc",
|
"handleColor": "#a7b7cc",
|
||||||
"handleSize": "100%",
|
"handleSize": "100%",
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#333"
|
"color": "#333"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"markPoint": {
|
"markPoint": {
|
||||||
"label": {
|
"label": {
|
||||||
"normal": {
|
"normal": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#eee"
|
"color": "#eee"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"emphasis": {
|
"emphasis": {
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#eee"
|
"color": "#eee"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
$title-color: #B2E7FD;
|
$title-color: #B2E7FD;
|
||||||
$default-font-color: #9ECEE4;
|
$default-font-color: #9ECEE4;
|
||||||
$border-color: #29a3d3a1;
|
$border-color: #29a3d3a1;
|
||||||
$table-header-color: #5FB7E7;
|
$table-header-color: #5FB7E7;
|
||||||
$table-header-bg:#0B2F45
|
$table-header-bg:#0B2F45
|
||||||
|
|
@ -1,129 +1,129 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}</span>
|
<span class="left">{{ item.key }}</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
// background: rgba(16,29,37,0.8);
|
// background: rgba(16,29,37,0.8);
|
||||||
// border: 2px solid $border-color;
|
// border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-left: -12px;
|
margin-left: -12px;
|
||||||
background: url('~@/assets/leftthree.png') no-repeat;
|
background: url('~@/assets/leftthree.png') no-repeat;
|
||||||
background-size: 92%;
|
background-size: 92%;
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// max-width: 542px;
|
// max-width: 542px;
|
||||||
// // font-family: monospace;
|
// // font-family: monospace;
|
||||||
// height: 22px;
|
// height: 22px;
|
||||||
// color: $title-color;
|
// color: $title-color;
|
||||||
// font-size: 20px;
|
// font-size: 20px;
|
||||||
// padding-left: 50px;
|
// padding-left: 50px;
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
// line-height: 40px;
|
// line-height: 40px;
|
||||||
// background: url('~@/assets/tit.png') no-repeat center;
|
// background: url('~@/assets/tit.png') no-repeat center;
|
||||||
width: 92%;
|
width: 92%;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
line-height: 59px;
|
line-height: 59px;
|
||||||
/* padding-left: 9px; */
|
/* padding-left: 9px; */
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
/* position: absolute; */
|
/* position: absolute; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 68%;
|
width: 68%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,127 +1,127 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<ul v-if="dataSource" >
|
<ul v-if="dataSource" >
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}</span>
|
<span class="left">{{ item.key }}</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<img src="~@/assets/landRes/line.png" alt="" width="100%" height="100%">
|
<img src="~@/assets/landRes/line.png" alt="" width="100%" height="100%">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// max-width: 542px;
|
// max-width: 542px;
|
||||||
// // font-family: monospace;
|
// // font-family: monospace;
|
||||||
// height: 22px;
|
// height: 22px;
|
||||||
// color: $title-color;
|
// color: $title-color;
|
||||||
// font-size: 20px;
|
// font-size: 20px;
|
||||||
// padding-left: 50px;
|
// padding-left: 50px;
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
// line-height: 40px;
|
// line-height: 40px;
|
||||||
// background: url('~@/assets/tit.png') no-repeat center;
|
// background: url('~@/assets/tit.png') no-repeat center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
// width: 68%;
|
// width: 68%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,131 +1,131 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}</span>
|
<span class="left">{{ item.key }}</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding: 18px 0px!important;
|
padding: 18px 0px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// max-width: 542px;
|
// max-width: 542px;
|
||||||
// // font-family: monospace;
|
// // font-family: monospace;
|
||||||
// height: 22px;
|
// height: 22px;
|
||||||
// color: $title-color;
|
// color: $title-color;
|
||||||
// font-size: 20px;
|
// font-size: 20px;
|
||||||
// padding-left: 50px;
|
// padding-left: 50px;
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
// line-height: 40px;
|
// line-height: 40px;
|
||||||
// background: url('~@/assets/tit.png') no-repeat center;
|
// background: url('~@/assets/tit.png') no-repeat center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 68%;
|
width: 68%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,252 +1,252 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div>
|
<!-- <div>
|
||||||
<template>
|
<template>
|
||||||
<el-select v-model="valueData" class="timeStle1">
|
<el-select v-model="valueData" class="timeStle1">
|
||||||
<el-option
|
<el-option
|
||||||
class="timeStle"
|
class="timeStle"
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="search-middle">
|
<div class="search-middle">
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<el-input type="text" name="" id="cha" placeholder="请输入部门点击查询" class="inputStyle"
|
<el-input type="text" name="" id="cha" placeholder="请输入部门点击查询" class="inputStyle"
|
||||||
v-model="inputInfo.departnew">
|
v-model="inputInfo.departnew">
|
||||||
</el-input>
|
</el-input>
|
||||||
<button @click="search()">搜索</button>
|
<button @click="search()">搜索</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}</span>
|
<span class="left">{{ item.key }}</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
valueData: {
|
valueData: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return{
|
return{
|
||||||
inputInfo: {
|
inputInfo: {
|
||||||
departnew: '',
|
departnew: '',
|
||||||
jdnew: '',
|
jdnew: '',
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
search() {
|
search() {
|
||||||
this.$emit('inputData', this.inputInfo.departnew)
|
this.$emit('inputData', this.inputInfo.departnew)
|
||||||
this.$parent.sreach()
|
this.$parent.sreach()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
.timeStle1 {
|
.timeStle1 {
|
||||||
// width: 150px !important;
|
// width: 150px !important;
|
||||||
// position: relative;
|
// position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
margin: 7px 0;
|
margin: 7px 0;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
color: #0e8bff;
|
color: #0e8bff;
|
||||||
// .el-input__inner {
|
// .el-input__inner {
|
||||||
// background: transparent;
|
// background: transparent;
|
||||||
// border: 0;
|
// border: 0;
|
||||||
// height: 23px;
|
// height: 23px;
|
||||||
// line-height: 23px;
|
// line-height: 23px;
|
||||||
// color: #0e8bff;
|
// color: #0e8bff;
|
||||||
// padding: 0 3px;
|
// padding: 0 3px;
|
||||||
// }
|
// }
|
||||||
// .el-input__inner {
|
// .el-input__inner {
|
||||||
// padding: 0 3px;
|
// padding: 0 3px;
|
||||||
// }
|
// }
|
||||||
// .el-input__inner:hover {
|
// .el-input__inner:hover {
|
||||||
// color: #0e8bff;
|
// color: #0e8bff;
|
||||||
// }
|
// }
|
||||||
// .el-input__prefix {
|
// .el-input__prefix {
|
||||||
// display: none;
|
// display: none;
|
||||||
// top: -8px;
|
// top: -8px;
|
||||||
// left: 2px;
|
// left: 2px;
|
||||||
// }
|
// }
|
||||||
// .el-input__suffix {
|
// .el-input__suffix {
|
||||||
// top: -8px;
|
// top: -8px;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// max-width: 542px;
|
// max-width: 542px;
|
||||||
// // font-family: monospace;
|
// // font-family: monospace;
|
||||||
// height: 22px;
|
// height: 22px;
|
||||||
// color: $title-color;
|
// color: $title-color;
|
||||||
// font-size: 20px;
|
// font-size: 20px;
|
||||||
// padding-left: 50px;
|
// padding-left: 50px;
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
// line-height: 40px;
|
// line-height: 40px;
|
||||||
// background: url('~@/assets/tit.png') no-repeat center;
|
// background: url('~@/assets/tit.png') no-repeat center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 68%;
|
width: 68%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.search-middle {
|
.search-middle {
|
||||||
height: 45px;
|
height: 45px;
|
||||||
background: rgba(16, 29, 37, 0.8);
|
background: rgba(16, 29, 37, 0.8);
|
||||||
border: 2px solid #29a3d3a1;
|
border: 2px solid #29a3d3a1;
|
||||||
// width: 80%;
|
// width: 80%;
|
||||||
width: 95.6%;
|
width: 95.6%;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-middle .search-container {
|
.search-middle .search-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-middle .search-container input:focus {
|
.search-middle .search-container input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-middle .search-container input::-webkit-input-placeholder {
|
.search-middle .search-container input::-webkit-input-placeholder {
|
||||||
color: rgb(211, 245, 255);
|
color: rgb(211, 245, 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-middle .search-container button {
|
.search-middle .search-container button {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background: 10px 10px url(../../assets/search-button.png) no-repeat;
|
background: 10px 10px url(../../assets/search-button.png) no-repeat;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
color: #b4e9ff;
|
color: #b4e9ff;
|
||||||
}
|
}
|
||||||
.inputStyle{
|
.inputStyle{
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background: rgba(16, 29, 37, 0.8);
|
background: rgba(16, 29, 37, 0.8);
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
// width: 80%;
|
// width: 80%;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
// float: right;
|
// float: right;
|
||||||
// margin-right: 2%;
|
// margin-right: 2%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,140 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<div class="imgurl">
|
<div class="imgurl">
|
||||||
<img src="@/assets/landRes/floor.png" alt="">
|
<img src="@/assets/landRes/floor.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}：</span>
|
<span class="left">{{ item.key }}：</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: right;
|
float: right;
|
||||||
max-height: 860px;
|
max-height: 860px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
max-height: 644px;
|
max-height: 644px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
ul::-webkit-scrollbar {
|
ul::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
background: url('~@/assets/landRes/1.png') no-repeat;
|
background: url('~@/assets/landRes/1.png') no-repeat;
|
||||||
// background-size: contain;
|
// background-size: contain;
|
||||||
background-size:100%;
|
background-size:100%;
|
||||||
padding: 22px 0px!important;
|
padding: 22px 0px!important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.imgurl{
|
.imgurl{
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 38%;
|
width: 38%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 62%;
|
width: 62%;
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,208 +1,208 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<div class="imgurl">
|
<div class="imgurl">
|
||||||
<img src="@/assets/landIndex/imgC.png" alt="">
|
<img src="@/assets/landIndex/imgC.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<!-- <div style="padding-left: 20px;color: #8ec1d8;
|
<!-- <div style="padding-left: 20px;color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div> -->
|
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div> -->
|
||||||
<!-- <ul v-if="dataSource">
|
<!-- <ul v-if="dataSource">
|
||||||
|
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="img">
|
<span class="img">
|
||||||
<img src="@/assets/landIndex/scyf.png" alt="" >
|
<img src="@/assets/landIndex/scyf.png" alt="" >
|
||||||
</span>
|
</span>
|
||||||
<span class="left">{{ item.key }}：</span>
|
<span class="left">{{ item.key }}：</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul> -->
|
</ul> -->
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<!-- <div class="titMiddle">公司简介</div> -->
|
<!-- <div class="titMiddle">公司简介</div> -->
|
||||||
<div style="padding: 15px;color: #8ec1d8;
|
<div style="padding: 15px;color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div>
|
font-size: 16px;">截至2022年初，国网南京供电公司拥有房产资源如下：</div>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
|
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="img">
|
<span class="img">
|
||||||
<img src="@/assets/landIndex/scyf.png" alt="" >
|
<img src="@/assets/landIndex/scyf.png" alt="" >
|
||||||
</span>
|
</span>
|
||||||
<span class="left">{{ item.key }}：</span>
|
<span class="left">{{ item.key }}：</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<!-- <div class="middle">
|
<!-- <div class="middle">
|
||||||
<div class="titMin">
|
<div class="titMin">
|
||||||
<img src="@/assets/landIndex/tit2.png" alt="">
|
<img src="@/assets/landIndex/tit2.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<p>国网南京供电公司后勤房地资源数量多，种类杂，散落分布在主城六区及江北新区、江宁区、高淳区、溧水区。经统计，现有办公用房21处，建筑面积20.01万平方米，其中本部11处，区公司10处；公有住房285套，建筑面积1万余平方米，其中本部240套，占比84.2%，江北33套，江宁4套，高淳4套，溧水4套。除此之外，还有79套苏逸权属房屋作为主业集体宿舍使用，位于江宁区伦敦城。</p>
|
<p>国网南京供电公司后勤房地资源数量多，种类杂，散落分布在主城六区及江北新区、江宁区、高淳区、溧水区。经统计，现有办公用房21处，建筑面积20.01万平方米，其中本部11处，区公司10处；公有住房285套，建筑面积1万余平方米，其中本部240套，占比84.2%，江北33套，江宁4套，高淳4套，溧水4套。除此之外，还有79套苏逸权属房屋作为主业集体宿舍使用，位于江宁区伦敦城。</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
<!-- <div class="titMiddle">系统简介</div>
|
<!-- <div class="titMiddle">系统简介</div>
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
<div class="titMin">
|
<div class="titMin">
|
||||||
<img src="@/assets/landIndex/tit2.png" alt="">
|
<img src="@/assets/landIndex/tit2.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<p>信息化，可视化地展示国网南京供电公司的房地资源，并对生产用房，辅助用房等房产资源进行数据的管理，统计与分析。</p>
|
<p>信息化，可视化地展示国网南京供电公司的房地资源，并对生产用房，辅助用房等房产资源进行数据的管理，统计与分析。</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: right;
|
float: right;
|
||||||
max-height: 860px;
|
max-height: 860px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
max-height: 644px;
|
max-height: 644px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
ul::-webkit-scrollbar {
|
ul::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
background: url('~@/assets/landRes/1.png') no-repeat;
|
background: url('~@/assets/landRes/1.png') no-repeat;
|
||||||
// background-size: contain;
|
// background-size: contain;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
padding: 22px 0px!important;
|
padding: 22px 0px!important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: 30px url('~@/assets/landIndex/tit.png') no-repeat;
|
background: 30px url('~@/assets/landIndex/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.imgurl{
|
.imgurl{
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
.bottom{
|
.bottom{
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
.titMiddle{
|
.titMiddle{
|
||||||
height: 55px;
|
height: 55px;
|
||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
padding-left: 42px;
|
padding-left: 42px;
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: url('~@/assets/landIndex/tit1.png') no-repeat;
|
background: url('~@/assets/landIndex/tit1.png') no-repeat;
|
||||||
}
|
}
|
||||||
.middle{
|
.middle{
|
||||||
padding-right: 22px;
|
padding-right: 22px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.titMin{
|
.titMin{
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
display: inline;
|
display: inline;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.img{
|
.img{
|
||||||
width: 20%;
|
width: 20%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:15%
|
left:15%
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:50%
|
left:50%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,149 +1,149 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span class="icon"></span> -->
|
<!-- <span class="icon"></span> -->
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
||||||
<select v-model="selected" v-if="optList">
|
<select v-model="selected" v-if="optList">
|
||||||
<option v-for="(item, index) in optList" :key="index">
|
<option v-for="(item, index) in optList" :key="index">
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
||||||
<ul style="justify-content: flex-start;">
|
<ul style="justify-content: flex-start;">
|
||||||
<li>昨日</li>
|
<li>昨日</li>
|
||||||
<li>本月</li>
|
<li>本月</li>
|
||||||
<li>本年</li>
|
<li>本年</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<slot name="top"></slot>
|
<slot name="top"></slot>
|
||||||
<ul v-if="dataSource">
|
<ul v-if="dataSource">
|
||||||
<li v-for="(item, index) in dataSource " :key="index">
|
<li v-for="(item, index) in dataSource " :key="index">
|
||||||
<span class="left">{{ item.key }}</span>
|
<span class="left">{{ item.key }}</span>
|
||||||
<span class="right">{{ item.value }}</span>
|
<span class="right">{{ item.value }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
default: () => "",
|
default: () => "",
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
dataSource: {
|
dataSource: {
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
optList:{
|
optList:{
|
||||||
default: () => false,
|
default: () => false,
|
||||||
type: [Array, Boolean],
|
type: [Array, Boolean],
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
|
||||||
selected: '',
|
selected: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
@import "~@/assets/scss/index.scss";
|
@import "~@/assets/scss/index.scss";
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// max-width: 542px;
|
// max-width: 542px;
|
||||||
// // font-family: monospace;
|
// // font-family: monospace;
|
||||||
// height: 22px;
|
// height: 22px;
|
||||||
// color: $title-color;
|
// color: $title-color;
|
||||||
// font-size: 20px;
|
// font-size: 20px;
|
||||||
// padding-left: 50px;
|
// padding-left: 50px;
|
||||||
// height: 40px;
|
// height: 40px;
|
||||||
// line-height: 40px;
|
// line-height: 40px;
|
||||||
// background: url('~@/assets/tit.png') no-repeat center;
|
// background: url('~@/assets/tit.png') no-repeat center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
color: #5FB7E7;
|
color: #5FB7E7;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 68%;
|
width: 68%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="customDvScrollBoard">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => "css"
|
default: () => "css"
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => { },
|
default: () => { },
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
defaultconfig: {
|
defaultconfig: {
|
||||||
oddRowBGC: "#081E29",
|
oddRowBGC: "#081E29",
|
||||||
evenRowBGC: "transparent",
|
evenRowBGC: "transparent",
|
||||||
waitTime: 2000000000000000000,
|
waitTime: 2000000000000000000,
|
||||||
indexHeader: "排名",
|
indexHeader: "排名",
|
||||||
index: true,
|
index: true,
|
||||||
header: ['费用类别', '车型', '车均费用'],
|
header: ['费用类别', '车型', '车均费用'],
|
||||||
// columnWidth: [50],
|
// columnWidth: [50],
|
||||||
rowNum: 4,
|
rowNum: 4,
|
||||||
data: [
|
data: [
|
||||||
|
|
||||||
],
|
],
|
||||||
...this.config
|
...this.config
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
span.index {
|
span.index {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-scroll-board .header {
|
.dv-scroll-board .header {
|
||||||
background-color: $table-header-bg !important;
|
background-color: $table-header-bg !important;
|
||||||
color: $table-header-color !important;
|
color: $table-header-color !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
.board {
|
.board {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.dv-scroll-board .index {
|
.dv-scroll-board .index {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,103 +1,103 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="customDvScrollBoard">
|
<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" /> -->
|
||||||
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
|
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => "css"
|
default: () => "css"
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => { },
|
default: () => { },
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
// header: {
|
// header: {
|
||||||
// type: Object,
|
// type: Object,
|
||||||
// default: () => { },
|
// default: () => { },
|
||||||
// required: true
|
// required: true
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// configd:'',
|
// configd:'',
|
||||||
defaultconfig: {
|
defaultconfig: {
|
||||||
oddRowBGC: "#081E29",
|
oddRowBGC: "#081E29",
|
||||||
evenRowBGC: "transparent",
|
evenRowBGC: "transparent",
|
||||||
waitTime: 2000000000000000000,
|
waitTime: 2000000000000000000,
|
||||||
indexHeader: "序号",
|
indexHeader: "序号",
|
||||||
index: true,
|
index: true,
|
||||||
// header: [],
|
// header: [],
|
||||||
// header: ['规划用途', '全省数量', '全省占比'],
|
// header: ['规划用途', '全省数量', '全省占比'],
|
||||||
header: ['规划用途', '数量', '占比'],
|
header: ['规划用途', '数量', '占比'],
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
rowNum: 4,
|
rowNum: 4,
|
||||||
data: [
|
data: [
|
||||||
|
|
||||||
],
|
],
|
||||||
...this.config
|
...this.config
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
||||||
config(val) {
|
config(val) {
|
||||||
|
|
||||||
this.defaultconfig.data = val;
|
this.defaultconfig.data = val;
|
||||||
|
|
||||||
console.log("111",val);
|
console.log("111",val);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
span.index {
|
span.index {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-scroll-board .header {
|
.dv-scroll-board .header {
|
||||||
background-color: $table-header-bg !important;
|
background-color: $table-header-bg !important;
|
||||||
color: $table-header-color !important;
|
color: $table-header-color !important;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows {
|
.dv-scroll-board .rows {
|
||||||
/* overflow: hidden; */
|
/* overflow: hidden; */
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows::-webkit-scrollbar{
|
.dv-scroll-board .rows::-webkit-scrollbar{
|
||||||
display: none
|
display: none
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows .ceil {
|
.dv-scroll-board .rows .ceil {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .header .header-item {
|
.dv-scroll-board .header .header-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
.board {
|
.board {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.dv-scroll-board .index {
|
.dv-scroll-board .index {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="customDvScrollBoard">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => "css"
|
default: () => "css"
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => { },
|
default: () => { },
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
defaultconfig: {
|
defaultconfig: {
|
||||||
oddRowBGC: "#081E29",
|
oddRowBGC: "#081E29",
|
||||||
evenRowBGC: "transparent",
|
evenRowBGC: "transparent",
|
||||||
waitTime: 2000000000000000000,
|
waitTime: 2000000000000000000,
|
||||||
indexHeader: "序号",
|
indexHeader: "序号",
|
||||||
index: true,
|
index: true,
|
||||||
// header: ['使用年份', '全省数量', '全省占比'],
|
// header: ['使用年份', '全省数量', '全省占比'],
|
||||||
header: ['使用年份', '数量', '占比'],
|
header: ['使用年份', '数量', '占比'],
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
rowNum: 4,
|
rowNum: 4,
|
||||||
data: [
|
data: [
|
||||||
|
|
||||||
],
|
],
|
||||||
...this.config
|
...this.config
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
||||||
config(val) {
|
config(val) {
|
||||||
|
|
||||||
this.defaultconfig.data = val;
|
this.defaultconfig.data = val;
|
||||||
|
|
||||||
console.log("111",val);
|
console.log("111",val);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
span.index {
|
span.index {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dv-scroll-board .header {
|
.dv-scroll-board .header {
|
||||||
background-color: $table-header-bg !important;
|
background-color: $table-header-bg !important;
|
||||||
color: $table-header-color !important;
|
color: $table-header-color !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
.board {
|
.board {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.dv-scroll-board .index {
|
.dv-scroll-board .index {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,123 +1,123 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="customDvScrollBoard">
|
<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" /> -->
|
||||||
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" @click="rowClick" />
|
<dv-scroll-board headerBGC="#0C3046" class="board" :class="className" :config="defaultconfig" @click="rowClick" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => "css"
|
default: () => "css"
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => { },
|
default: () => { },
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
// header: {
|
// header: {
|
||||||
// type: Object,
|
// type: Object,
|
||||||
// default: () => { },
|
// default: () => { },
|
||||||
// required: true
|
// required: true
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
rowFloor:'',
|
rowFloor:'',
|
||||||
defaultconfig: {
|
defaultconfig: {
|
||||||
oddRowBGC: "#081E29",
|
oddRowBGC: "#081E29",
|
||||||
evenRowBGC: "transparent",
|
evenRowBGC: "transparent",
|
||||||
waitTime: 2000000000000000000,
|
waitTime: 2000000000000000000,
|
||||||
indexHeader: "序号",
|
indexHeader: "序号",
|
||||||
index: true,
|
index: true,
|
||||||
// header: [],
|
// header: [],
|
||||||
// header: ['规划用途', '全省数量', '全省占比'],
|
// header: ['规划用途', '全省数量', '全省占比'],
|
||||||
header: ['部门', '楼层', '房号','名称'],
|
header: ['部门', '楼层', '房号','名称'],
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
rowNum: 5,
|
rowNum: 5,
|
||||||
|
|
||||||
data: [
|
data: [
|
||||||
|
|
||||||
],
|
],
|
||||||
...this.config
|
...this.config
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
||||||
config(val) {
|
config(val) {
|
||||||
|
|
||||||
this.defaultconfig.data = val;
|
this.defaultconfig.data = val;
|
||||||
|
|
||||||
console.log("111",val);
|
console.log("111",val);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
rowClick(data){
|
rowClick(data){
|
||||||
console.log("rowClick",data.row[2])
|
console.log("rowClick",data.row[2])
|
||||||
this.rowFloor=data.row[2]
|
this.rowFloor=data.row[2]
|
||||||
this.$emit('rowFloor', this.rowFloor)
|
this.$emit('rowFloor', this.rowFloor)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
|
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
span.index {
|
span.index {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
.dv-scroll-board {
|
.dv-scroll-board {
|
||||||
|
|
||||||
height: 94%!important;
|
height: 94%!important;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .header {
|
.dv-scroll-board .header {
|
||||||
background-color: $table-header-bg!important;
|
background-color: $table-header-bg!important;
|
||||||
color: $table-header-color!important;
|
color: $table-header-color!important;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows {
|
.dv-scroll-board .rows {
|
||||||
/* overflow: hidden; */
|
/* overflow: hidden; */
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows::-webkit-scrollbar{
|
.dv-scroll-board .rows::-webkit-scrollbar{
|
||||||
display: none
|
display: none
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows .ceil {
|
.dv-scroll-board .rows .ceil {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
word-break:keep-all;/* 不换行 */
|
word-break:keep-all;/* 不换行 */
|
||||||
white-space:nowrap;/* 不换行 */
|
white-space:nowrap;/* 不换行 */
|
||||||
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
|
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
|
||||||
text-overflow:ellipsis;
|
text-overflow:ellipsis;
|
||||||
}
|
}
|
||||||
.dv-scroll-board .rows .ceil:hover {
|
.dv-scroll-board .rows .ceil:hover {
|
||||||
overflow: visible; /* 鼠标放上去显示全部文字 */
|
overflow: visible; /* 鼠标放上去显示全部文字 */
|
||||||
}
|
}
|
||||||
.dv-scroll-board .header .header-item {
|
.dv-scroll-board .header .header-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.customDvScrollBoard {
|
.customDvScrollBoard {
|
||||||
.board {
|
.board {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.dv-scroll-board .index {
|
.dv-scroll-board .index {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,479 +1,479 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div class="box1">
|
<div class="box1">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- {{ title }} -->
|
<!-- {{ title }} -->
|
||||||
基地部门楼层数据展示
|
基地部门楼层数据展示
|
||||||
<span style="float: right;
|
<span style="float: right;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding-right: 19px;" @click="close">X</span>
|
padding-right: 19px;" @click="close">X</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
|
<el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
|
||||||
<el-form-item label="部门" prop="departnew">
|
<el-form-item label="部门" prop="departnew">
|
||||||
<el-input v-model="ruleForm.departnew" placeholder="输入部门"></el-input>
|
<el-input v-model="ruleForm.departnew" placeholder="输入部门"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="基地" prop="jdnew">
|
<el-form-item label="基地" prop="jdnew">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="ruleForm.jdnew"
|
v-model="ruleForm.jdnew"
|
||||||
placeholder="输入基地"/>
|
placeholder="输入基地"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-table
|
<el-table
|
||||||
ref="multipleTable"
|
ref="multipleTable"
|
||||||
:data="tables.slice(
|
:data="tables.slice(
|
||||||
(queryInfo.pagenum - 1) * queryInfo.pagesize,
|
(queryInfo.pagenum - 1) * queryInfo.pagesize,
|
||||||
queryInfo.pagenum * queryInfo.pagesize)"
|
queryInfo.pagenum * queryInfo.pagesize)"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
:row-class-name="tableRowClassName"
|
:row-class-name="tableRowClassName"
|
||||||
:header-cell-style="{
|
:header-cell-style="{
|
||||||
background: '#0B2F45',
|
background: '#0B2F45',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
}"
|
}"
|
||||||
@cell-mouse-enter="rowHover"
|
@cell-mouse-enter="rowHover"
|
||||||
@cell-mouse-leave="leave"
|
@cell-mouse-leave="leave"
|
||||||
@row-click="rowclick"
|
@row-click="rowclick"
|
||||||
>
|
>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="depart"
|
prop="depart"
|
||||||
label="部门">
|
label="部门">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="jd"
|
prop="jd"
|
||||||
label="基地">
|
label="基地">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="room"
|
prop="room"
|
||||||
label="房号">
|
label="房号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="name"
|
prop="name"
|
||||||
label="名称">
|
label="名称">
|
||||||
</el-table-column> -->
|
</el-table-column> -->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|
||||||
label="全口径人数" prop="peopleM">
|
label="全口径人数" prop="peopleM">
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="people"
|
prop="people"
|
||||||
label="全民">
|
label="全民">
|
||||||
</el-table-column> -->
|
</el-table-column> -->
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="other"
|
prop="other"
|
||||||
label="其他">
|
label="其他">
|
||||||
</el-table-column> -->
|
</el-table-column> -->
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|
||||||
label="所属楼层" prop="floorM">
|
label="所属楼层" prop="floorM">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="square"
|
prop="square"
|
||||||
label="面积(㎡)">
|
label="面积(㎡)">
|
||||||
</el-table-column> -->
|
</el-table-column> -->
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
:current-page="queryInfo.pagenum"
|
:current-page="queryInfo.pagenum"
|
||||||
:page-sizes="[10, 15, 20]"
|
:page-sizes="[10, 15, 20]"
|
||||||
:page-size="queryInfo.pagesize"
|
:page-size="queryInfo.pagesize"
|
||||||
:pager-count="5"
|
:pager-count="5"
|
||||||
layout="total, sizes, pager, next"
|
layout="total, sizes, pager, next"
|
||||||
:total="tables.length"
|
:total="tables.length"
|
||||||
style="margin:15px 0px;"
|
style="margin:15px 0px;"
|
||||||
background
|
background
|
||||||
></el-pagination>
|
></el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
// title: {
|
// title: {
|
||||||
// default: () => "",
|
// default: () => "",
|
||||||
// type: String,
|
// type: String,
|
||||||
// required: true
|
// required: true
|
||||||
// },
|
// },
|
||||||
// dataSource: {
|
// dataSource: {
|
||||||
// default: () => false,
|
// default: () => false,
|
||||||
// type: [Array, Boolean],
|
// type: [Array, Boolean],
|
||||||
// required: true
|
// required: true
|
||||||
// },
|
// },
|
||||||
|
|
||||||
},
|
},
|
||||||
name: "dialogComponent",
|
name: "dialogComponent",
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
detailVisible:true,
|
detailVisible:true,
|
||||||
tableData: [],
|
tableData: [],
|
||||||
formInline: {
|
formInline: {
|
||||||
depart: '',
|
depart: '',
|
||||||
jd: '',
|
jd: '',
|
||||||
people:'',
|
people:'',
|
||||||
other:'',
|
other:'',
|
||||||
square:'',
|
square:'',
|
||||||
},
|
},
|
||||||
jdNameNew:'',
|
jdNameNew:'',
|
||||||
jdNameNewN:'',
|
jdNameNewN:'',
|
||||||
jdNameOther:'',
|
jdNameOther:'',
|
||||||
ruleForm:{
|
ruleForm:{
|
||||||
departnew:'',
|
departnew:'',
|
||||||
jdnew:'',
|
jdnew:'',
|
||||||
},
|
},
|
||||||
departnew:'',
|
departnew:'',
|
||||||
jdnew:'',
|
jdnew:'',
|
||||||
queryInfo: {
|
queryInfo: {
|
||||||
query: "",
|
query: "",
|
||||||
pagenum: 1,
|
pagenum: 1,
|
||||||
pagesize: 10,
|
pagesize: 10,
|
||||||
},
|
},
|
||||||
jdName:"",
|
jdName:"",
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
jdNameNew:{
|
jdNameNew:{
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// console.log("newVal",newVal)
|
// console.log("newVal",newVal)
|
||||||
this.jdNameOther=newVal
|
this.jdNameOther=newVal
|
||||||
this.$emit('jdNameData',newVal)
|
this.$emit('jdNameData',newVal)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
jdNameNewN:{
|
jdNameNewN:{
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// console.log("newVal",newVal)
|
// console.log("newVal",newVal)
|
||||||
this.$emit('jdNameDataClick',newVal)
|
this.$emit('jdNameDataClick',newVal)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// departnew(newVal, oldVal) {
|
// departnew(newVal, oldVal) {
|
||||||
// console.log("newVal",newVal)
|
// console.log("newVal",newVal)
|
||||||
// if (newVal == "") {
|
// if (newVal == "") {
|
||||||
// //这个方法是获取后台数据，自己根据自己的要求调用
|
// //这个方法是获取后台数据，自己根据自己的要求调用
|
||||||
// this.getJsonData();
|
// this.getJsonData();
|
||||||
// }else{
|
// }else{
|
||||||
// this.query();
|
// this.query();
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
// jdnew(newVal, oldVal) {
|
// jdnew(newVal, oldVal) {
|
||||||
// if (newVal == "") {
|
// if (newVal == "") {
|
||||||
// //这个方法是获取后台数据，自己根据自己的要求调用
|
// //这个方法是获取后台数据，自己根据自己的要求调用
|
||||||
// this.getJsonData();
|
// this.getJsonData();
|
||||||
|
|
||||||
// }else{
|
// }else{
|
||||||
// this.query();
|
// this.query();
|
||||||
// // this.queryjd()
|
// // this.queryjd()
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
console.log('submit!');
|
console.log('submit!');
|
||||||
},
|
},
|
||||||
rowHover(row){
|
rowHover(row){
|
||||||
// console.log('row',row.jd);
|
// console.log('row',row.jd);
|
||||||
this.jdNameNew=row.jd
|
this.jdNameNew=row.jd
|
||||||
},
|
},
|
||||||
leave(){
|
leave(){
|
||||||
this.jdNameNew=''
|
this.jdNameNew=''
|
||||||
},
|
},
|
||||||
rowclick(row){
|
rowclick(row){
|
||||||
this.jdNameNewN=row
|
this.jdNameNewN=row
|
||||||
},
|
},
|
||||||
//3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
|
//3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
|
||||||
init(data){
|
init(data){
|
||||||
// this.detailVisible=true;
|
// this.detailVisible=true;
|
||||||
//data是父组件弹窗传递过来的值，我们可以打印看看
|
//data是父组件弹窗传递过来的值，我们可以打印看看
|
||||||
console.log(data);
|
console.log(data);
|
||||||
this.getJsonData()
|
this.getJsonData()
|
||||||
},
|
},
|
||||||
close:function(){
|
close:function(){
|
||||||
this.detailVisible=false
|
this.detailVisible=false
|
||||||
this.$emit('transfer',this.detailVisible)//触发transfer方法，this.user 为向父组件传递的数据
|
this.$emit('transfer',this.detailVisible)//触发transfer方法，this.user 为向父组件传递的数据
|
||||||
},
|
},
|
||||||
getJsonData(){
|
getJsonData(){
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
axios.get('/json/departJd.json')
|
axios.get('/json/departJd.json')
|
||||||
.then(result => {
|
.then(result => {
|
||||||
for (var i = 0; i < result.data.length; i++) {
|
for (var i = 0; i < result.data.length; i++) {
|
||||||
this.tableData.push(result.data[i])
|
this.tableData.push(result.data[i])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
// axios.get('/json/城南基地.json')
|
// axios.get('/json/城南基地.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/公司大楼.json')
|
// axios.get('/json/公司大楼.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/健康中心（安仁街变）.json')
|
// axios.get('/json/健康中心（安仁街变）.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/老卫生所.json')
|
// axios.get('/json/老卫生所.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/龙吟广场.json')
|
// axios.get('/json/龙吟广场.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/栖霞基地.json')
|
// axios.get('/json/栖霞基地.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
// axios.get('/json/雨花基地.json')
|
// axios.get('/json/雨花基地.json')
|
||||||
// .then(result => {
|
// .then(result => {
|
||||||
// for (var i = 0; i < result.data.length; i++) {
|
// for (var i = 0; i < result.data.length; i++) {
|
||||||
// this.tableData.push(result.data[i])
|
// this.tableData.push(result.data[i])
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// })
|
// })
|
||||||
// .catch(error => {
|
// .catch(error => {
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSizeChange(newSize) {
|
handleSizeChange(newSize) {
|
||||||
this.queryInfo.pagesize = newSize;
|
this.queryInfo.pagesize = newSize;
|
||||||
},
|
},
|
||||||
|
|
||||||
tableRowClassName({ row, rowIndex }) {
|
tableRowClassName({ row, rowIndex }) {
|
||||||
if (rowIndex % 2 === 0) {
|
if (rowIndex % 2 === 0) {
|
||||||
return "row_color";
|
return "row_color";
|
||||||
} else {
|
} else {
|
||||||
return "row_color_none";
|
return "row_color_none";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleCurrentChange(newPage) {
|
handleCurrentChange(newPage) {
|
||||||
this.queryInfo.pagenum = newPage;
|
this.queryInfo.pagenum = newPage;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 模糊搜索
|
// 模糊搜索
|
||||||
tables () {
|
tables () {
|
||||||
const departnew = this.ruleForm.departnew
|
const departnew = this.ruleForm.departnew
|
||||||
const jdnew = this.ruleForm.jdnew
|
const jdnew = this.ruleForm.jdnew
|
||||||
|
|
||||||
var that = this
|
var that = this
|
||||||
|
|
||||||
if (departnew || jdnew) {
|
if (departnew || jdnew) {
|
||||||
return this.tableData.filter(data => {
|
return this.tableData.filter(data => {
|
||||||
// return Object.keys(data).some(key => {
|
// return Object.keys(data).some(key => {
|
||||||
// return String(data[key]).toLowerCase().indexOf(departnew||jdnew) > -1
|
// return String(data[key]).toLowerCase().indexOf(departnew||jdnew) > -1
|
||||||
// })
|
// })
|
||||||
|
|
||||||
let inputTrue = Object.keys(data).some(key =>{
|
let inputTrue = Object.keys(data).some(key =>{
|
||||||
if(key=='depart'){
|
if(key=='depart'){
|
||||||
return String(data[key]).toLowerCase().indexOf(departnew)>-1
|
return String(data[key]).toLowerCase().indexOf(departnew)>-1
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
let input2True = Object.keys(data).some(key =>{
|
let input2True = Object.keys(data).some(key =>{
|
||||||
|
|
||||||
|
|
||||||
if(key =='jd'){
|
if(key =='jd'){
|
||||||
|
|
||||||
if (String(data[key]).toLowerCase().indexOf(jdnew)>-1) {
|
if (String(data[key]).toLowerCase().indexOf(jdnew)>-1) {
|
||||||
let jd =''
|
let jd =''
|
||||||
jd = data.jd
|
jd = data.jd
|
||||||
that.jdName = jd
|
that.jdName = jd
|
||||||
// that.$emit('jdNameData',that.jdName)
|
// that.$emit('jdNameData',that.jdName)
|
||||||
}
|
}
|
||||||
return String(data[key]).toLowerCase().indexOf(jdnew)>-1
|
return String(data[key]).toLowerCase().indexOf(jdnew)>-1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
// if (data.jd.toLowerCase().indexOf(jdnew) !== -1 ) {
|
// if (data.jd.toLowerCase().indexOf(jdnew) !== -1 ) {
|
||||||
// let jd =''
|
// let jd =''
|
||||||
// jd = data.jd
|
// jd = data.jd
|
||||||
// that.jdName = jd
|
// that.jdName = jd
|
||||||
// that.$emit('jdNameData',that.jdName)
|
// that.$emit('jdNameData',that.jdName)
|
||||||
// }
|
// }
|
||||||
return inputTrue && input2True
|
return inputTrue && input2True
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// console.log("that.jdName",that.jdName)
|
// console.log("that.jdName",that.jdName)
|
||||||
|
|
||||||
return that.tableData
|
return that.tableData
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "~@/common/var.scss";
|
@import "~@/common/var.scss";
|
||||||
.box1 {
|
.box1 {
|
||||||
|
|
||||||
// background: #11223289;
|
// background: #11223289;
|
||||||
background: rgba(16,29,37,0.8);
|
background: rgba(16,29,37,0.8);
|
||||||
border: 2px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: right;
|
float: right;
|
||||||
max-height: 860px;
|
max-height: 860px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
// ul {
|
// ul {
|
||||||
// padding-bottom: 10px;
|
// padding-bottom: 10px;
|
||||||
// max-height: 644px;
|
// max-height: 644px;
|
||||||
// overflow-y: scroll;
|
// overflow-y: scroll;
|
||||||
// }
|
// }
|
||||||
// ul::-webkit-scrollbar {
|
// ul::-webkit-scrollbar {
|
||||||
// display: none;
|
// display: none;
|
||||||
// }
|
// }
|
||||||
// li {
|
// li {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// display: block;
|
// display: block;
|
||||||
// position: relative;
|
// position: relative;
|
||||||
// height: 65px;
|
// height: 65px;
|
||||||
// background: url('~@/assets/landRes/1.png') no-repeat;
|
// background: url('~@/assets/landRes/1.png') no-repeat;
|
||||||
// // background-size: contain;
|
// // background-size: contain;
|
||||||
// background-size:100%;
|
// background-size:100%;
|
||||||
// padding: 22px 0px!important;
|
// padding: 22px 0px!important;
|
||||||
|
|
||||||
// }
|
// }
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
background: -15px url('~@/assets/tit.png') no-repeat;
|
background: -15px url('~@/assets/tit.png') no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
.icon {
|
.icon {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #20BBD2;
|
background-color: #20BBD2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.box1::-webkit-scrollbar {
|
.box1::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.v-modal {
|
.v-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: .0;
|
opacity: .0;
|
||||||
background: #fff!important;
|
background: #fff!important;
|
||||||
}
|
}
|
||||||
.el-table thead{
|
.el-table thead{
|
||||||
background-color: $table-header-bg !important;
|
background-color: $table-header-bg !important;
|
||||||
color: $table-header-color !important;
|
color: $table-header-color !important;
|
||||||
}
|
}
|
||||||
.el-dialog{
|
.el-dialog{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
// background:transparent;
|
// background:transparent;
|
||||||
// background-color:rgba(7, 11, 66, 0.15);
|
// background-color:rgba(7, 11, 66, 0.15);
|
||||||
background: #0B2F45 !important;
|
background: #0B2F45 !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
.el-form-item__label{
|
.el-form-item__label{
|
||||||
color: #fff!important;
|
color: #fff!important;
|
||||||
}
|
}
|
||||||
.el-input__inner{
|
.el-input__inner{
|
||||||
background: rgba(7, 11, 66, 0.15) !important;
|
background: rgba(7, 11, 66, 0.15) !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
.el-form--inline .el-form-item {
|
.el-form--inline .el-form-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
.el-form--inline .el-form-item__content {
|
.el-form--inline .el-form-item__content {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 78%;
|
width: 78%;
|
||||||
}
|
}
|
||||||
.el-table tr {
|
.el-table tr {
|
||||||
// background: rgba(16, 29, 37, 0.8)!important;
|
// background: rgba(16, 29, 37, 0.8)!important;
|
||||||
background: #0B2F45!important;
|
background: #0B2F45!important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
// .el-table tr:hover{
|
// .el-table tr:hover{
|
||||||
// color: #0B2F45;
|
// color: #0B2F45;
|
||||||
// background: rgba(7, 11, 66, 0.15)!important;
|
// background: rgba(7, 11, 66, 0.15)!important;
|
||||||
// }
|
// }
|
||||||
.el-table .cell{
|
.el-table .cell{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
::v-deep .row_color {
|
::v-deep .row_color {
|
||||||
// background: #5FB7E7 !important;
|
// background: #5FB7E7 !important;
|
||||||
background: rgba(7, 11, 66, 0.15) !important;
|
background: rgba(7, 11, 66, 0.15) !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
// 双行颜色
|
// 双行颜色
|
||||||
::v-deep .row_color_none {
|
::v-deep .row_color_none {
|
||||||
background: #0B2F45 !important;
|
background: #0B2F45 !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.el-dialog__title{
|
.el-dialog__title{
|
||||||
color: #fff!important;
|
color: #fff!important;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
||||||
background: rgba(16, 29, 37, 0.8)!important;
|
background: rgba(16, 29, 37, 0.8)!important;
|
||||||
color: #8ec1d8;
|
color: #8ec1d8;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,150 +1,150 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 年度开工率 -->
|
<!-- 年度开工率 -->
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="bottomLeftChart"
|
id="bottomLeftChart"
|
||||||
height="480px"
|
height="480px"
|
||||||
width="100%"
|
width="100%"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
backgroundColor: "rgba(255,255,255,0.1)",
|
backgroundColor: "rgba(255,255,255,0.1)",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: "shadow",
|
type: "shadow",
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
backgroundColor: "#7B7DDC"
|
backgroundColor: "#7B7DDC"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["已贯通", "计划贯通", "贯通率"],
|
data: ["已贯通", "计划贯通", "贯通率"],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#B4B4B4"
|
color: "#B4B4B4"
|
||||||
},
|
},
|
||||||
top: "0%"
|
top: "0%"
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
x: "8%",
|
x: "8%",
|
||||||
width: "88%",
|
width: "88%",
|
||||||
y: "4%"
|
y: "4%"
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: newData.category,
|
data: newData.category,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: "#B4B4B4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: "#B4B4B4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value} "
|
formatter: "{value} "
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#B4B4B4"
|
color: "#B4B4B4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value} "
|
formatter: "{value} "
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "贯通率",
|
name: "贯通率",
|
||||||
type: "line",
|
type: "line",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
showAllSymbol: true,
|
showAllSymbol: true,
|
||||||
symbol: "emptyCircle",
|
symbol: "emptyCircle",
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#F02FC2"
|
color: "#F02FC2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: newData.rateData
|
data: newData.rateData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "已贯通",
|
name: "已贯通",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
barBorderRadius: 5,
|
barBorderRadius: 5,
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#956FD4" },
|
{ offset: 0, color: "#956FD4" },
|
||||||
{ offset: 1, color: "#3EACE5" }
|
{ offset: 1, color: "#3EACE5" }
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: newData.barData
|
data: newData.barData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "计划贯通",
|
name: "计划贯通",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barGap: "-100%",
|
barGap: "-100%",
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
barBorderRadius: 5,
|
barBorderRadius: 5,
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
z: -12,
|
z: -12,
|
||||||
data: newData.lineData
|
data: newData.lineData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,141 +1,141 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue'
|
import Chart from './chart.vue'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
category: [
|
category: [
|
||||||
"市区",
|
"市区",
|
||||||
"万州",
|
"万州",
|
||||||
"江北",
|
"江北",
|
||||||
"南岸",
|
"南岸",
|
||||||
"北碚",
|
"北碚",
|
||||||
"綦南",
|
"綦南",
|
||||||
"长寿",
|
"长寿",
|
||||||
"永川",
|
"永川",
|
||||||
"璧山",
|
"璧山",
|
||||||
"江津",
|
"江津",
|
||||||
"城口",
|
"城口",
|
||||||
"大足",
|
"大足",
|
||||||
"垫江",
|
"垫江",
|
||||||
"丰都",
|
"丰都",
|
||||||
"奉节",
|
"奉节",
|
||||||
"合川",
|
"合川",
|
||||||
"江津区",
|
"江津区",
|
||||||
"开州",
|
"开州",
|
||||||
"南川",
|
"南川",
|
||||||
"彭水",
|
"彭水",
|
||||||
"黔江",
|
"黔江",
|
||||||
"石柱",
|
"石柱",
|
||||||
"铜梁",
|
"铜梁",
|
||||||
"潼南",
|
"潼南",
|
||||||
"巫山",
|
"巫山",
|
||||||
"巫溪",
|
"巫溪",
|
||||||
"武隆",
|
"武隆",
|
||||||
"秀山",
|
"秀山",
|
||||||
"酉阳",
|
"酉阳",
|
||||||
"云阳",
|
"云阳",
|
||||||
"忠县",
|
"忠县",
|
||||||
"川东",
|
"川东",
|
||||||
"检修"
|
"检修"
|
||||||
],
|
],
|
||||||
lineData: [
|
lineData: [
|
||||||
18092,
|
18092,
|
||||||
20728,
|
20728,
|
||||||
24045,
|
24045,
|
||||||
28348,
|
28348,
|
||||||
32808,
|
32808,
|
||||||
36097,
|
36097,
|
||||||
39867,
|
39867,
|
||||||
44715,
|
44715,
|
||||||
48444,
|
48444,
|
||||||
50415,
|
50415,
|
||||||
56061,
|
56061,
|
||||||
62677,
|
62677,
|
||||||
59521,
|
59521,
|
||||||
67560,
|
67560,
|
||||||
18092,
|
18092,
|
||||||
20728,
|
20728,
|
||||||
24045,
|
24045,
|
||||||
28348,
|
28348,
|
||||||
32808,
|
32808,
|
||||||
36097,
|
36097,
|
||||||
39867,
|
39867,
|
||||||
44715,
|
44715,
|
||||||
48444,
|
48444,
|
||||||
50415,
|
50415,
|
||||||
36097,
|
36097,
|
||||||
39867,
|
39867,
|
||||||
44715,
|
44715,
|
||||||
48444,
|
48444,
|
||||||
50415,
|
50415,
|
||||||
50061,
|
50061,
|
||||||
32677,
|
32677,
|
||||||
49521,
|
49521,
|
||||||
32808
|
32808
|
||||||
],
|
],
|
||||||
barData: [
|
barData: [
|
||||||
4600,
|
4600,
|
||||||
5000,
|
5000,
|
||||||
5500,
|
5500,
|
||||||
6500,
|
6500,
|
||||||
7500,
|
7500,
|
||||||
8500,
|
8500,
|
||||||
9900,
|
9900,
|
||||||
12500,
|
12500,
|
||||||
14000,
|
14000,
|
||||||
21500,
|
21500,
|
||||||
23200,
|
23200,
|
||||||
24450,
|
24450,
|
||||||
25250,
|
25250,
|
||||||
33300,
|
33300,
|
||||||
4600,
|
4600,
|
||||||
5000,
|
5000,
|
||||||
5500,
|
5500,
|
||||||
6500,
|
6500,
|
||||||
7500,
|
7500,
|
||||||
8500,
|
8500,
|
||||||
9900,
|
9900,
|
||||||
22500,
|
22500,
|
||||||
14000,
|
14000,
|
||||||
21500,
|
21500,
|
||||||
8500,
|
8500,
|
||||||
9900,
|
9900,
|
||||||
12500,
|
12500,
|
||||||
14000,
|
14000,
|
||||||
21500,
|
21500,
|
||||||
23200,
|
23200,
|
||||||
24450,
|
24450,
|
||||||
25250,
|
25250,
|
||||||
7500
|
7500
|
||||||
],
|
],
|
||||||
rateData: []
|
rateData: []
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.setData();
|
this.setData();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 根据自己的业务情况修改
|
// 根据自己的业务情况修改
|
||||||
setData () {
|
setData () {
|
||||||
for (let i = 0; i < this.cdata.barData.length -1; i++) {
|
for (let i = 0; i < this.cdata.barData.length -1; i++) {
|
||||||
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
||||||
this.cdata.rateData.push(rate.toFixed(2));
|
this.cdata.rateData.push(rate.toFixed(2));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,358 +1,358 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="480px"
|
height="480px"
|
||||||
width="100%"
|
width="100%"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
// 定义颜色
|
// 定义颜色
|
||||||
colorList: {
|
colorList: {
|
||||||
linearYtoG: {
|
linearYtoG: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 1,
|
x2: 1,
|
||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#f5b44d'
|
color: '#f5b44d'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#28f8de'
|
color: '#28f8de'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
linearGtoB: {
|
linearGtoB: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 1,
|
x2: 1,
|
||||||
y2: 0,
|
y2: 0,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#43dfa2'
|
color: '#43dfa2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#28f8de'
|
color: '#28f8de'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
linearBtoG: {
|
linearBtoG: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 1,
|
x2: 1,
|
||||||
y2: 0,
|
y2: 0,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#1c98e8'
|
color: '#1c98e8'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#28f8de'
|
color: '#28f8de'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
areaBtoG: {
|
areaBtoG: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: 'rgba(35,184,210,.2)'
|
color: 'rgba(35,184,210,.2)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: 'rgba(35,184,210,0)'
|
color: 'rgba(35,184,210,0)'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart
|
Echart
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
title: {
|
title: {
|
||||||
text: '',
|
text: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#D3D6DD',
|
color: '#D3D6DD',
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
fontWeight: 'normal'
|
fontWeight: 'normal'
|
||||||
},
|
},
|
||||||
subtext: newData.year + '/' + newData.weekCategory[6],
|
subtext: newData.year + '/' + newData.weekCategory[6],
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
},
|
},
|
||||||
top: 50,
|
top: 50,
|
||||||
left: 80
|
left: 80
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
top: 120,
|
top: 120,
|
||||||
left: 80,
|
left: 80,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
itemGap: 15,
|
itemGap: 15,
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 12,
|
itemHeight: 12,
|
||||||
data: ['平均指标', '我的指标'],
|
data: ['平均指标', '我的指标'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
radar: {
|
radar: {
|
||||||
center: ['68%', '27%'],
|
center: ['68%', '27%'],
|
||||||
radius: '40%',
|
radius: '40%',
|
||||||
name: {
|
name: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
splitNumber: 8,
|
splitNumber: 8,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: this.colorList.linearYtoG,
|
color: this.colorList.linearYtoG,
|
||||||
opacity: 0.6
|
opacity: 0.6
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: this.colorList.linearYtoG,
|
color: this.colorList.linearYtoG,
|
||||||
opacity: 0.6
|
opacity: 0.6
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
opacity: 0.1,
|
opacity: 0.1,
|
||||||
shadowBlur: 25,
|
shadowBlur: 25,
|
||||||
shadowColor: '#000',
|
shadowColor: '#000',
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowOffsetY: 5
|
shadowOffsetY: 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
indicator: [
|
indicator: [
|
||||||
{
|
{
|
||||||
name: '服务态度',
|
name: '服务态度',
|
||||||
max: newData.maxData
|
max: newData.maxData
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '产品质量',
|
name: '产品质量',
|
||||||
max: 10
|
max: 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '任务效率',
|
name: '任务效率',
|
||||||
max: 12
|
max: 12
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '售后保障',
|
name: '售后保障',
|
||||||
max: 3.5
|
max: 3.5
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 90,
|
left: 90,
|
||||||
right: 80,
|
right: 80,
|
||||||
bottom: 40,
|
bottom: 40,
|
||||||
top: '60%'
|
top: '60%'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
axisLine: true,
|
axisLine: true,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: 'rgba(255,255,255,.8)',
|
color: 'rgba(255,255,255,.8)',
|
||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
data: newData.weekCategory
|
data: newData.weekCategory
|
||||||
},
|
},
|
||||||
// 下方Y轴
|
// 下方Y轴
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '工单',
|
name: '工单',
|
||||||
nameLocation: 'end',
|
nameLocation: 'end',
|
||||||
nameGap: 24,
|
nameGap: 24,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,.5)',
|
color: 'rgba(255,255,255,.5)',
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
max: newData.maxData,
|
max: newData.maxData,
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: 'rgba(255,255,255,.8)',
|
color: 'rgba(255,255,255,.8)',
|
||||||
fontSize: 12
|
fontSize: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '',
|
name: '',
|
||||||
type: 'radar',
|
type: 'radar',
|
||||||
symbolSize: 0,
|
symbolSize: 0,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: newData.radarDataAvg[6],
|
value: newData.radarDataAvg[6],
|
||||||
name: '平均指标',
|
name: '平均指标',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#f8d351'
|
color: '#f8d351'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#f8d351',
|
color: '#f8d351',
|
||||||
shadowBlur: 25,
|
shadowBlur: 25,
|
||||||
shadowColor: 'rgba(248,211,81,.3)',
|
shadowColor: 'rgba(248,211,81,.3)',
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowOffsetY: -10,
|
shadowOffsetY: -10,
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: newData.radarData[6],
|
value: newData.radarData[6],
|
||||||
name: '我的指标',
|
name: '我的指标',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#43dfa2'
|
color: '#43dfa2'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: this.colorList.linearGtoB,
|
color: this.colorList.linearGtoB,
|
||||||
shadowBlur: 15,
|
shadowBlur: 15,
|
||||||
shadowColor: 'rgba(0,0,0,.2)',
|
shadowColor: 'rgba(0,0,0,.2)',
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowOffsetY: 5,
|
shadowOffsetY: 5,
|
||||||
opacity: 0.8
|
opacity: 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '',
|
name: '',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
symbol: 'emptyCircle',
|
symbol: 'emptyCircle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: this.colorList.linearBtoG,
|
color: this.colorList.linearBtoG,
|
||||||
width: 3
|
width: 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: this.colorList.areaBtoG
|
color: this.colorList.areaBtoG
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: newData.weekLineData,
|
data: newData.weekLineData,
|
||||||
lineSmooth: true,
|
lineSmooth: true,
|
||||||
markLine: {
|
markLine: {
|
||||||
silent: true,
|
silent: true,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'average',
|
type: 'average',
|
||||||
name: '平均值'
|
name: '平均值'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
precision: 0,
|
precision: 0,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
formatter: '平均值: \n {c}'
|
formatter: '平均值: \n {c}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: 'rgba(248,211,81,.7)'
|
color: 'rgba(248,211,81,.7)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
position: 'top',
|
position: 'top',
|
||||||
formatter: '{c} m',
|
formatter: '{c} m',
|
||||||
backgroundColor: 'rgba(28,152,232,.2)',
|
backgroundColor: 'rgba(28,152,232,.2)',
|
||||||
padding: 6
|
padding: 6
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '占位背景',
|
name: '占位背景',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#000',
|
color: '#000',
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
silent: true,
|
silent: true,
|
||||||
barWidth: '50%',
|
barWidth: '50%',
|
||||||
data: newData.weekMaxData,
|
data: newData.weekMaxData,
|
||||||
animation: false
|
animation: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,89 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue'
|
import Chart from './chart.vue'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
drawTiming: null,
|
drawTiming: null,
|
||||||
cdata: {
|
cdata: {
|
||||||
year: null,
|
year: null,
|
||||||
weekCategory: [],
|
weekCategory: [],
|
||||||
radarData: [],
|
radarData: [],
|
||||||
radarDataAvg: [],
|
radarDataAvg: [],
|
||||||
maxData: 12000,
|
maxData: 12000,
|
||||||
weekMaxData: [],
|
weekMaxData: [],
|
||||||
weekLineData: []
|
weekLineData: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.drawTimingFn();
|
this.drawTimingFn();
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
clearInterval(this.drawTiming);
|
clearInterval(this.drawTiming);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
drawTimingFn () {
|
drawTimingFn () {
|
||||||
this.setData();
|
this.setData();
|
||||||
this.drawTiming = setInterval(() => {
|
this.drawTiming = setInterval(() => {
|
||||||
this.setData();
|
this.setData();
|
||||||
}, 6000);
|
}, 6000);
|
||||||
},
|
},
|
||||||
setData () {
|
setData () {
|
||||||
// 清空轮询数据
|
// 清空轮询数据
|
||||||
this.cdata.weekCategory = [];
|
this.cdata.weekCategory = [];
|
||||||
this.cdata.weekMaxData = [];
|
this.cdata.weekMaxData = [];
|
||||||
this.cdata.weekLineData = [];
|
this.cdata.weekLineData = [];
|
||||||
this.cdata.radarData = [];
|
this.cdata.radarData = [];
|
||||||
this.cdata.radarDataAvg = [];
|
this.cdata.radarDataAvg = [];
|
||||||
|
|
||||||
let dateBase = new Date();
|
let dateBase = new Date();
|
||||||
this.cdata.year = dateBase.getFullYear();
|
this.cdata.year = dateBase.getFullYear();
|
||||||
// 周数据
|
// 周数据
|
||||||
for (let i = 0; i < 7; i++) {
|
for (let i = 0; i < 7; i++) {
|
||||||
// 日期
|
// 日期
|
||||||
let date = new Date();
|
let date = new Date();
|
||||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||||
|
|
||||||
// 折线图数据
|
// 折线图数据
|
||||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||||
let distance = Math.round(Math.random() * 11000 + 500);
|
let distance = Math.round(Math.random() * 11000 + 500);
|
||||||
this.cdata.weekLineData.push(distance);
|
this.cdata.weekLineData.push(distance);
|
||||||
|
|
||||||
// 雷达图数据
|
// 雷达图数据
|
||||||
// 我的指标
|
// 我的指标
|
||||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||||
this.cdata.radarData.unshift(radarDayData);
|
this.cdata.radarData.unshift(radarDayData);
|
||||||
|
|
||||||
// 平均指标
|
// 平均指标
|
||||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||||
let radarDayDataAvg = [
|
let radarDayDataAvg = [
|
||||||
distanceAvg,
|
distanceAvg,
|
||||||
averageSpeedAvg,
|
averageSpeedAvg,
|
||||||
maxSpeedAvg,
|
maxSpeedAvg,
|
||||||
hourAvg
|
hourAvg
|
||||||
];
|
];
|
||||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="280px"
|
height="280px"
|
||||||
width="430px"
|
width="430px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
"#37a2da",
|
||||||
"#32c5e9",
|
"#32c5e9",
|
||||||
"#9fe6b8",
|
"#9fe6b8",
|
||||||
"#ffdb5c",
|
"#ffdb5c",
|
||||||
"#ff9f7f",
|
"#ff9f7f",
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: "center",
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: "通过率统计",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: [10, 50],
|
radius: [10, 50],
|
||||||
roseType: "area",
|
roseType: "area",
|
||||||
center: ["50%", "40%"],
|
center: ["50%", "40%"],
|
||||||
data: newData.seriesData
|
data: newData.seriesData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from "./chart.vue";
|
import Chart from "./chart.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["终端安装数", "终端安装率", "终端在线率",],
|
xData: ["终端安装数", "终端安装率", "终端在线率",],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "终端安装数" },
|
{ value: 10, name: "终端安装数" },
|
||||||
{ value: 5, name: "终端安装率" },
|
{ value: 5, name: "终端安装率" },
|
||||||
{ value: 15, name: "终端在线率" },
|
{ value: 15, name: "终端在线率" },
|
||||||
// { value: 25, name: "data4" },
|
// { value: 25, name: "data4" },
|
||||||
// { value: 20, name: "data5" },
|
// { value: 20, name: "data5" },
|
||||||
// { value: 35, name: "data6" },
|
// { value: 35, name: "data6" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="280px"
|
height="280px"
|
||||||
width="430px"
|
width="430px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
"#37a2da",
|
||||||
"#32c5e9",
|
"#32c5e9",
|
||||||
"#9fe6b8",
|
"#9fe6b8",
|
||||||
"#ffdb5c",
|
"#ffdb5c",
|
||||||
"#ff9f7f",
|
"#ff9f7f",
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: "center",
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: "通过率统计",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: [10, 50],
|
radius: [10, 50],
|
||||||
roseType: "area",
|
roseType: "area",
|
||||||
center: ["50%", "40%"],
|
center: ["50%", "40%"],
|
||||||
data: newData.seriesData
|
data: newData.seriesData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from "./chart.vue";
|
import Chart from "./chart.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["新增车辆", "变更车辆", "处置车辆",],
|
xData: ["新增车辆", "变更车辆", "处置车辆",],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "新增车辆" },
|
{ value: 10, name: "新增车辆" },
|
||||||
{ value: 5, name: "变更车辆" },
|
{ value: 5, name: "变更车辆" },
|
||||||
{ value: 15, name: "处置车辆" },
|
{ value: 15, name: "处置车辆" },
|
||||||
// { value: 25, name: "data4" },
|
// { value: 25, name: "data4" },
|
||||||
// { value: 20, name: "data5" },
|
// { value: 20, name: "data5" },
|
||||||
// { value: 35, name: "data6" },
|
// { value: 35, name: "data6" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,149 +1,149 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <Echart
|
<!-- <Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="200px"
|
height="200px"
|
||||||
width="560px"
|
width="560px"
|
||||||
></Echart> -->
|
></Echart> -->
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="230px"
|
height="230px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from "@/common/echart";
|
import Echart from "@/common/echart";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
// 固定样式数据
|
// 固定样式数据
|
||||||
let lineStyle = {
|
let lineStyle = {
|
||||||
normal: {
|
normal: {
|
||||||
width: 1,
|
width: 1,
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.options = {
|
this.options = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: "shadow",
|
type: "shadow",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "15%",
|
top: "15%",
|
||||||
right: "3%",
|
right: "3%",
|
||||||
left: "9%",
|
left: "9%",
|
||||||
bottom: "15%",
|
bottom: "15%",
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
data: [
|
data: [
|
||||||
"车型1",
|
"车型1",
|
||||||
"车型2",
|
"车型2",
|
||||||
"车型3",
|
"车型3",
|
||||||
"车型4",
|
"车型4",
|
||||||
"车型5",
|
"车型5",
|
||||||
],
|
],
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.12)'
|
color: 'rgba(255,255,255,0.12)'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
margin: 10,
|
margin: 10,
|
||||||
color: '#e2e9ff',
|
color: '#e2e9ff',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
color: '#e2e9ff',
|
color: '#e2e9ff',
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.12)'
|
color: 'rgba(255,255,255,0.12)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: [80, 80, 97, 53, 95, 26, 72],
|
data: [80, 80, 97, 53, 95, 26, 72],
|
||||||
barWidth: "15px",
|
barWidth: "15px",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new this.$echarts.graphic.LinearGradient(
|
color: new this.$echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
1,
|
1,
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
),
|
),
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
shadowColor: "rgba(0,160,221,1)",
|
||||||
shadowBlur: 4,
|
shadowBlur: 4,
|
||||||
barBorderRadius: 9,
|
barBorderRadius: 9,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
lineHeight: 30,
|
lineHeight: 30,
|
||||||
formatter: "{c}",
|
formatter: "{c}",
|
||||||
position: "top",
|
position: "top",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#00D6F9",
|
color: "#00D6F9",
|
||||||
fontSize: 15,
|
fontSize: 15,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,113 +1,113 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <Echart
|
<!-- <Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="200px"
|
height="200px"
|
||||||
width="560px"
|
width="560px"
|
||||||
></Echart> -->
|
></Echart> -->
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="230px"
|
height="230px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from "@/common/echart";
|
import Echart from "@/common/echart";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {
|
options: {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
series: [{
|
series: [{
|
||||||
name: '库存情况',
|
name: '库存情况',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: '68%',
|
radius: '68%',
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
clockwise: false,
|
clockwise: false,
|
||||||
data: [{
|
data: [{
|
||||||
value: 45,
|
value: 45,
|
||||||
name: 'CARD'
|
name: 'CARD'
|
||||||
}, {
|
}, {
|
||||||
value: 25,
|
value: 25,
|
||||||
name: 'SSD'
|
name: 'SSD'
|
||||||
}, {
|
}, {
|
||||||
value: 15,
|
value: 15,
|
||||||
name: 'U盘'
|
name: 'U盘'
|
||||||
}, {
|
}, {
|
||||||
value: 8,
|
value: 8,
|
||||||
name: '嵌入式'
|
name: '嵌入式'
|
||||||
}, {
|
}, {
|
||||||
value: 7,
|
value: 7,
|
||||||
name: 'FLASH'
|
name: 'FLASH'
|
||||||
}],
|
}],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
normal: {
|
normal: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
borderWidth: 4,
|
borderWidth: 4,
|
||||||
borderColor: '#ffffff',
|
borderColor: '#ffffff',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
color: [
|
color: [
|
||||||
'#00acee',
|
'#00acee',
|
||||||
'#52cdd5',
|
'#52cdd5',
|
||||||
'#79d9f1',
|
'#79d9f1',
|
||||||
'#a7e7ff',
|
'#a7e7ff',
|
||||||
'#c8efff'
|
'#c8efff'
|
||||||
],
|
],
|
||||||
backgroundColor: '#fff'
|
backgroundColor: '#fff'
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// cdata: {
|
// cdata: {
|
||||||
// handler(newData) {
|
// handler(newData) {
|
||||||
// // 固定样式数据
|
// // 固定样式数据
|
||||||
// let lineStyle = {
|
// let lineStyle = {
|
||||||
// normal: {
|
// normal: {
|
||||||
// width: 1,
|
// width: 1,
|
||||||
// opacity: 0.5,
|
// opacity: 0.5,
|
||||||
// },
|
// },
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// this.options =
|
// this.options =
|
||||||
// },
|
// },
|
||||||
// immediate: true,
|
// immediate: true,
|
||||||
// deep: true,
|
// deep: true,
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,172 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="241px"
|
height="241px"
|
||||||
width="460px"
|
width="460px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from "@/common/echart";
|
import Echart from "@/common/echart";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
seriesData: [80, 80, 97, 53, 95, 26, 72],
|
seriesData: [80, 80, 97, 53, 95, 26, 72],
|
||||||
barLinearColors: [
|
barLinearColors: [
|
||||||
new this.$echarts.graphic.LinearGradient(
|
new this.$echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
1,
|
1,
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#00a0ff", // 0% 处的颜色
|
color: "#00a0ff", // 0% 处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#0f4eac", // 100% 处的颜色
|
color: "#0f4eac", // 100% 处的颜色
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
false
|
false
|
||||||
),
|
),
|
||||||
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#47ddf5" },
|
{ offset: 0, color: "#47ddf5" },
|
||||||
{ offset: 1, color: "#21879b" },
|
{ offset: 1, color: "#21879b" },
|
||||||
]),
|
]),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
rankBarColor(cData) {
|
rankBarColor(cData) {
|
||||||
let tempData = [];
|
let tempData = [];
|
||||||
cData.forEach((item, index) => {
|
cData.forEach((item, index) => {
|
||||||
tempData.push({
|
tempData.push({
|
||||||
value: item,
|
value: item,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color:
|
color:
|
||||||
index % 2 == 0
|
index % 2 == 0
|
||||||
? this.barLinearColors[0]
|
? this.barLinearColors[0]
|
||||||
: this.barLinearColors[1],
|
: this.barLinearColors[1],
|
||||||
// shadowColor: "rgba(0,160,221,1)",
|
// shadowColor: "rgba(0,160,221,1)",
|
||||||
// shadowBlur: 4,
|
// shadowBlur: 4,
|
||||||
barBorderRadius: 9,
|
barBorderRadius: 9,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return tempData;
|
return tempData;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
|
color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
// backgroundColor: "rgba(50,50,50,.3)",
|
// backgroundColor: "rgba(50,50,50,.3)",
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
// color: "#222",
|
// color: "#222",
|
||||||
// },
|
// },
|
||||||
formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
|
formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "3%",
|
top: "3%",
|
||||||
right: "19%",
|
right: "19%",
|
||||||
left: "9%",
|
left: "9%",
|
||||||
bottom: "9%",
|
bottom: "9%",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
// orient: "hori",
|
// orient: "hori",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
itemWidth: 10,
|
itemWidth: 10,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "攻击次数",
|
name: "攻击次数",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
clockwise: false,
|
clockwise: false,
|
||||||
radius: "59%",
|
radius: "59%",
|
||||||
center: ["50%", "45%"],
|
center: ["50%", "45%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
roseType: "radius",
|
roseType: "radius",
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 335,
|
value: 335,
|
||||||
name: "会议室",
|
name: "会议室",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 310,
|
value: 310,
|
||||||
name: "办公室",
|
name: "办公室",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 234,
|
value: 234,
|
||||||
name: "机房",
|
name: "机房",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 135,
|
value: 135,
|
||||||
name: "设备间",
|
name: "设备间",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
borderColor: "#38f6c8",
|
borderColor: "#38f6c8",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "outside",
|
position: "outside",
|
||||||
formatter: "{a|{b}：{d}%}\n{hr|}",
|
formatter: "{a|{b}：{d}%}\n{hr|}",
|
||||||
rich: {
|
rich: {
|
||||||
hr: {
|
hr: {
|
||||||
backgroundColor: "t",
|
backgroundColor: "t",
|
||||||
borderRadius: 100,
|
borderRadius: 100,
|
||||||
width: 0,
|
width: 0,
|
||||||
height: 6,
|
height: 6,
|
||||||
padding: [3, 3, 0, -12],
|
padding: [3, 3, 0, -12],
|
||||||
shadowColor: "#1c1b3a",
|
shadowColor: "#1c1b3a",
|
||||||
shadowBlur: 1,
|
shadowBlur: 1,
|
||||||
shadowOffsetX: 1,
|
shadowOffsetX: 1,
|
||||||
shadowOffsetY: 2,
|
shadowOffsetY: 2,
|
||||||
},
|
},
|
||||||
a: {
|
a: {
|
||||||
padding: [-35, 15, -20, 5],
|
padding: [-35, 15, -20, 5],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
normal: {
|
normal: {
|
||||||
length: 10,
|
length: 10,
|
||||||
length2: 16,
|
length2: 16,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0.5,
|
width: 0.5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 通过率/达标率 -->
|
<!-- 通过率/达标率 -->
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
:id="id"
|
:id="id"
|
||||||
height="100px"
|
height="100px"
|
||||||
width="100px"
|
width="100px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
default: "chartRate"
|
default: "chartRate"
|
||||||
},
|
},
|
||||||
tips: {
|
tips: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
default: 50
|
default: 50
|
||||||
},
|
},
|
||||||
colorObj: {
|
colorObj: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: function () {
|
default: function () {
|
||||||
return {
|
return {
|
||||||
textStyle: "#3fc0fb",
|
textStyle: "#3fc0fb",
|
||||||
series: {
|
series: {
|
||||||
color: ["#00bcd44a", "transparent"],
|
color: ["#00bcd44a", "transparent"],
|
||||||
dataColor: {
|
dataColor: {
|
||||||
normal: "#03a9f4",
|
normal: "#03a9f4",
|
||||||
shadowColor: "#97e2f5"
|
shadowColor: "#97e2f5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// tips 是会变更的数据，所以进行监听
|
// tips 是会变更的数据，所以进行监听
|
||||||
tips: {
|
tips: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
title:{
|
title:{
|
||||||
text: newData * 1 + "%",
|
text: newData * 1 + "%",
|
||||||
x: "center",
|
x: "center",
|
||||||
y: "center",
|
y: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: this.colorObj.textStyle,
|
color: this.colorObj.textStyle,
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ["75%", "80%"],
|
radius: ["75%", "80%"],
|
||||||
center: ["50%", "50%"],
|
center: ["50%", "50%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
color: this.colorObj.series.color,
|
color: this.colorObj.series.color,
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: newData,
|
value: newData,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: this.colorObj.series.dataColor.normal,
|
color: this.colorObj.series.dataColor.normal,
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowColor: this.colorObj.series.dataColor.shadowColor
|
shadowColor: this.colorObj.series.dataColor.shadowColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 100 - newData
|
value: 100 - newData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="220px"
|
height="220px"
|
||||||
width="260px"
|
width="260px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
"#37a2da",
|
||||||
"#32c5e9",
|
"#32c5e9",
|
||||||
"#9fe6b8",
|
"#9fe6b8",
|
||||||
"#ffdb5c",
|
"#ffdb5c",
|
||||||
"#ff9f7f",
|
"#ff9f7f",
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: "center",
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: "通过率统计",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: [10, 50],
|
radius: [10, 50],
|
||||||
roseType: "area",
|
roseType: "area",
|
||||||
center: ["50%", "40%"],
|
center: ["50%", "40%"],
|
||||||
data: newData.seriesData
|
data: newData.seriesData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from "./chart.vue";
|
import Chart from "./chart.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "data1" },
|
{ value: 10, name: "data1" },
|
||||||
{ value: 5, name: "data2" },
|
{ value: 5, name: "data2" },
|
||||||
{ value: 15, name: "data3" },
|
{ value: 15, name: "data3" },
|
||||||
{ value: 25, name: "data4" },
|
{ value: 25, name: "data4" },
|
||||||
{ value: 20, name: "data5" },
|
{ value: 20, name: "data5" },
|
||||||
{ value: 35, name: "data6" },
|
{ value: 35, name: "data6" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,290 +1,290 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
id="centreLeft2Chart"
|
id="centreLeft2Chart"
|
||||||
ref="centreLeft2ChartRef"
|
ref="centreLeft2ChartRef"
|
||||||
:options="options"
|
:options="options"
|
||||||
height="360px"
|
height="360px"
|
||||||
width="330px"
|
width="330px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart';
|
import Echart from '@/common/echart';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler(newData) {
|
handler(newData) {
|
||||||
// 设置点的位置(经纬度)
|
// 设置点的位置(经纬度)
|
||||||
const geoCoordMap = {
|
const geoCoordMap = {
|
||||||
厦门市: [118.11022, 24.490474, 20],
|
厦门市: [118.11022, 24.490474, 20],
|
||||||
福州市: [119.206239, 26.275302, 20],
|
福州市: [119.206239, 26.275302, 20],
|
||||||
泉州市: [118.589421, 24.908853, 20],
|
泉州市: [118.589421, 24.908853, 20],
|
||||||
漳州市: [117.561801, 24.510897, 20],
|
漳州市: [117.561801, 24.510897, 20],
|
||||||
龙岩市: [116.82978, 25.391603, 20],
|
龙岩市: [116.82978, 25.391603, 20],
|
||||||
莆田市: [119.007558, 25.591011, 20],
|
莆田市: [119.007558, 25.591011, 20],
|
||||||
三明市: [117.435001, 26.465444, 20],
|
三明市: [117.435001, 26.465444, 20],
|
||||||
南平市: [118.178459, 27.535627, 20],
|
南平市: [118.178459, 27.535627, 20],
|
||||||
宁德市: [119.527082, 27.15924, 20],
|
宁德市: [119.527082, 27.15924, 20],
|
||||||
};
|
};
|
||||||
let seriesData = [
|
let seriesData = [
|
||||||
{
|
{
|
||||||
name: '厦门市',
|
name: '厦门市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '福州市',
|
name: '福州市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '泉州市',
|
name: '泉州市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '漳州市',
|
name: '漳州市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '龙岩市',
|
name: '龙岩市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '莆田市',
|
name: '莆田市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '三明市',
|
name: '三明市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '南平市',
|
name: '南平市',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '宁德市',
|
name: '宁德市',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
let convertData = function (data) {
|
let convertData = function (data) {
|
||||||
let scatterData = [];
|
let scatterData = [];
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
var geoCoord = geoCoordMap[data[i].name];
|
var geoCoord = geoCoordMap[data[i].name];
|
||||||
if (geoCoord) {
|
if (geoCoord) {
|
||||||
scatterData.push({
|
scatterData.push({
|
||||||
name: data[i].name,
|
name: data[i].name,
|
||||||
value: geoCoord.concat(data[i].value),
|
value: geoCoord.concat(data[i].value),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return scatterData;
|
return scatterData;
|
||||||
};
|
};
|
||||||
this.options = {
|
this.options = {
|
||||||
showLegendSymbol: true,
|
showLegendSymbol: true,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
lineHeight: 22,
|
lineHeight: 22,
|
||||||
},
|
},
|
||||||
position: point => {
|
position: point => {
|
||||||
// 固定在顶部
|
// 固定在顶部
|
||||||
return [point[0] + 50, point[1] - 20];
|
return [point[0] + 50, point[1] - 20];
|
||||||
},
|
},
|
||||||
// 如果需要自定义 tooltip样式，需要使用formatter
|
// 如果需要自定义 tooltip样式，需要使用formatter
|
||||||
/*
|
/*
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
return `<div style=""> ... </div>`
|
return `<div style=""> ... </div>`
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
},
|
},
|
||||||
visualMap: {
|
visualMap: {
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 10,
|
max: 10,
|
||||||
show: false,
|
show: false,
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
// 颜色
|
// 颜色
|
||||||
inRange: {
|
inRange: {
|
||||||
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 底部背景
|
// 底部背景
|
||||||
geo: {
|
geo: {
|
||||||
show: true,
|
show: true,
|
||||||
aspectScale: 0.85, //长宽比
|
aspectScale: 0.85, //长宽比
|
||||||
zoom: 1.2,
|
zoom: 1.2,
|
||||||
top: '10%',
|
top: '10%',
|
||||||
left: '16%',
|
left: '16%',
|
||||||
map: '福建',
|
map: '福建',
|
||||||
roam: false,
|
roam: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
areaColor: 'rgba(0,0,0,0)',
|
areaColor: 'rgba(0,0,0,0)',
|
||||||
shadowColor: 'rgba(7,114,204, .8)',
|
shadowColor: 'rgba(7,114,204, .8)',
|
||||||
shadowOffsetX: 5,
|
shadowOffsetX: 5,
|
||||||
shadowOffsetY: 5,
|
shadowOffsetY: 5,
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
areaColor: '#00aeef',
|
areaColor: '#00aeef',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '相关指数',
|
name: '相关指数',
|
||||||
type: 'map',
|
type: 'map',
|
||||||
aspectScale: 0.85, //长宽比
|
aspectScale: 0.85, //长宽比
|
||||||
zoom: 1.2,
|
zoom: 1.2,
|
||||||
mapType: '福建', // 自定义扩展图表类型
|
mapType: '福建', // 自定义扩展图表类型
|
||||||
top: '10%',
|
top: '10%',
|
||||||
left: '16%',
|
left: '16%',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: 'red',
|
color: 'red',
|
||||||
areaColor: 'rgba(19,54,162, .5)',
|
areaColor: 'rgba(19,54,162, .5)',
|
||||||
borderColor: 'rgba(0,242,252,.3)',
|
borderColor: 'rgba(0,242,252,.3)',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
shadowBlur: 7,
|
shadowBlur: 7,
|
||||||
shadowColor: '#00f2fc',
|
shadowColor: '#00f2fc',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
areaColor: '#4f7fff',
|
areaColor: '#4f7fff',
|
||||||
borderColor: 'rgba(0,242,252,.6)',
|
borderColor: 'rgba(0,242,252,.6)',
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowColor: '#00f2fc',
|
shadowColor: '#00f2fc',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
formatter: params => `${params.name}`,
|
formatter: params => `${params.name}`,
|
||||||
show: true,
|
show: true,
|
||||||
position: 'insideRight',
|
position: 'insideRight',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: '#efefef',
|
color: '#efefef',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: newData,
|
data: newData,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'effectScatter',
|
type: 'effectScatter',
|
||||||
coordinateSystem: 'geo',
|
coordinateSystem: 'geo',
|
||||||
symbolSize: 7,
|
symbolSize: 7,
|
||||||
effectType: 'ripple',
|
effectType: 'ripple',
|
||||||
legendHoverLink: false,
|
legendHoverLink: false,
|
||||||
showEffectOn: 'render',
|
showEffectOn: 'render',
|
||||||
rippleEffect: {
|
rippleEffect: {
|
||||||
period: 4,
|
period: 4,
|
||||||
scale: 2.5,
|
scale: 2.5,
|
||||||
brushType: 'stroke',
|
brushType: 'stroke',
|
||||||
},
|
},
|
||||||
zlevel: 1,
|
zlevel: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#99FBFE',
|
color: '#99FBFE',
|
||||||
shadowBlur: 5,
|
shadowBlur: 5,
|
||||||
shadowColor: '#fff',
|
shadowColor: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: convertData(seriesData),
|
data: convertData(seriesData),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
// 重新选择区域
|
// 重新选择区域
|
||||||
this.handleMapRandomSelect();
|
this.handleMapRandomSelect();
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 开启定时器
|
// 开启定时器
|
||||||
startInterval() {
|
startInterval() {
|
||||||
const _self = this;
|
const _self = this;
|
||||||
// 应通过接口获取配置时间，暂时写死5s
|
// 应通过接口获取配置时间，暂时写死5s
|
||||||
const time = 2000;
|
const time = 2000;
|
||||||
if (this.intervalId !== null) {
|
if (this.intervalId !== null) {
|
||||||
clearInterval(this.intervalId);
|
clearInterval(this.intervalId);
|
||||||
}
|
}
|
||||||
this.intervalId = setInterval(() => {
|
this.intervalId = setInterval(() => {
|
||||||
_self.reSelectMapRandomArea();
|
_self.reSelectMapRandomArea();
|
||||||
}, time);
|
}, time);
|
||||||
},
|
},
|
||||||
// 重新随机选中地图区域
|
// 重新随机选中地图区域
|
||||||
reSelectMapRandomArea() {
|
reSelectMapRandomArea() {
|
||||||
const length = 9;
|
const length = 9;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
try {
|
try {
|
||||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||||
let index = Math.floor(Math.random() * length);
|
let index = Math.floor(Math.random() * length);
|
||||||
while (index === this.preSelectMapIndex || index >= length) {
|
while (index === this.preSelectMapIndex || index >= length) {
|
||||||
index = Math.floor(Math.random() * length);
|
index = Math.floor(Math.random() * length);
|
||||||
}
|
}
|
||||||
map.dispatchAction({
|
map.dispatchAction({
|
||||||
type: 'mapUnSelect',
|
type: 'mapUnSelect',
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
dataIndex: this.preSelectMapIndex,
|
dataIndex: this.preSelectMapIndex,
|
||||||
});
|
});
|
||||||
map.dispatchAction({
|
map.dispatchAction({
|
||||||
type: 'showTip',
|
type: 'showTip',
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
dataIndex: index,
|
dataIndex: index,
|
||||||
});
|
});
|
||||||
map.dispatchAction({
|
map.dispatchAction({
|
||||||
type: 'mapSelect',
|
type: 'mapSelect',
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
dataIndex: index,
|
dataIndex: index,
|
||||||
});
|
});
|
||||||
this.preSelectMapIndex = index;
|
this.preSelectMapIndex = index;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleMapRandomSelect() {
|
handleMapRandomSelect() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
try {
|
try {
|
||||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||||
const _self = this;
|
const _self = this;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
_self.reSelectMapRandomArea();
|
_self.reSelectMapRandomArea();
|
||||||
}, 0);
|
}, 0);
|
||||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
// 移入区域，清除定时器、取消之前选中并选中当前
|
||||||
map.on('mouseover', function (params) {
|
map.on('mouseover', function (params) {
|
||||||
clearInterval(_self.intervalId);
|
clearInterval(_self.intervalId);
|
||||||
map.dispatchAction({
|
map.dispatchAction({
|
||||||
type: 'mapUnSelect',
|
type: 'mapUnSelect',
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
dataIndex: _self.preSelectMapIndex,
|
dataIndex: _self.preSelectMapIndex,
|
||||||
});
|
});
|
||||||
map.dispatchAction({
|
map.dispatchAction({
|
||||||
type: 'mapSelect',
|
type: 'mapSelect',
|
||||||
seriesIndex: 0,
|
seriesIndex: 0,
|
||||||
dataIndex: params.dataIndex,
|
dataIndex: params.dataIndex,
|
||||||
});
|
});
|
||||||
_self.preSelectMapIndex = params.dataIndex;
|
_self.preSelectMapIndex = params.dataIndex;
|
||||||
});
|
});
|
||||||
// 移出区域重新随机选中地图区域，并开启定时器
|
// 移出区域重新随机选中地图区域，并开启定时器
|
||||||
map.on('globalout', function () {
|
map.on('globalout', function () {
|
||||||
_self.reSelectMapRandomArea();
|
_self.reSelectMapRandomArea();
|
||||||
_self.startInterval();
|
_self.startInterval();
|
||||||
});
|
});
|
||||||
this.startInterval();
|
this.startInterval();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,67 +1,67 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue';
|
import Chart from './chart.vue';
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cdata: [
|
cdata: [
|
||||||
{
|
{
|
||||||
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
||||||
name: '福州市',
|
name: '福州市',
|
||||||
value: 10,
|
value: 10,
|
||||||
elseData:{
|
elseData:{
|
||||||
// 这里放置地图 tooltip 里想显示的数据
|
// 这里放置地图 tooltip 里想显示的数据
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '厦门市',
|
name: '厦门市',
|
||||||
value: 9,
|
value: 9,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '漳州市',
|
name: '漳州市',
|
||||||
value: 8,
|
value: 8,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '泉州市',
|
name: '泉州市',
|
||||||
value: 7,
|
value: 7,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '三明市',
|
name: '三明市',
|
||||||
value: 6,
|
value: 6,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '莆田市',
|
name: '莆田市',
|
||||||
value: 5,
|
value: 5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '南平市',
|
name: '南平市',
|
||||||
value: 4,
|
value: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '龙岩市',
|
name: '龙岩市',
|
||||||
value: 3,
|
value: 3,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '宁德市',
|
name: '宁德市',
|
||||||
value: 2,
|
value: 2,
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,132 +1,132 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreRight2Chart1"
|
id="centreRight2Chart1"
|
||||||
height="200px"
|
height="200px"
|
||||||
width="260px"
|
width="260px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
// 固定样式数据
|
// 固定样式数据
|
||||||
let lineStyle = {
|
let lineStyle = {
|
||||||
normal: {
|
normal: {
|
||||||
width: 1,
|
width: 1,
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.options = {
|
this.options = {
|
||||||
radar: {
|
radar: {
|
||||||
indicator: newData.indicatorData,
|
indicator: newData.indicatorData,
|
||||||
shape: "circle",
|
shape: "circle",
|
||||||
splitNumber: 5,
|
splitNumber: 5,
|
||||||
radius: ["0%", "65%"],
|
radius: ["0%", "65%"],
|
||||||
name: {
|
name: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "rgb(238, 197, 102)"
|
color: "rgb(238, 197, 102)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: [
|
color: [
|
||||||
"rgba(238, 197, 102, 0.1)",
|
"rgba(238, 197, 102, 0.1)",
|
||||||
"rgba(238, 197, 102, 0.2)",
|
"rgba(238, 197, 102, 0.2)",
|
||||||
"rgba(238, 197, 102, 0.4)",
|
"rgba(238, 197, 102, 0.4)",
|
||||||
"rgba(238, 197, 102, 0.6)",
|
"rgba(238, 197, 102, 0.6)",
|
||||||
"rgba(238, 197, 102, 0.8)",
|
"rgba(238, 197, 102, 0.8)",
|
||||||
"rgba(238, 197, 102, 1)"
|
"rgba(238, 197, 102, 1)"
|
||||||
].reverse()
|
].reverse()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(238, 197, 102, 0.5)"
|
color: "rgba(238, 197, 102, 0.5)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "北京",
|
name: "北京",
|
||||||
type: "radar",
|
type: "radar",
|
||||||
lineStyle: lineStyle,
|
lineStyle: lineStyle,
|
||||||
data: newData.dataBJ,
|
data: newData.dataBJ,
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#F9713C"
|
color: "#F9713C"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "上海",
|
name: "上海",
|
||||||
type: "radar",
|
type: "radar",
|
||||||
lineStyle: lineStyle,
|
lineStyle: lineStyle,
|
||||||
data: newData.dataSH,
|
data: newData.dataSH,
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#B3E4A1"
|
color: "#B3E4A1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
opacity: 0.05
|
opacity: 0.05
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "广州",
|
name: "广州",
|
||||||
type: "radar",
|
type: "radar",
|
||||||
lineStyle: lineStyle,
|
lineStyle: lineStyle,
|
||||||
data: newData.dataGZ,
|
data: newData.dataGZ,
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "rgb(238, 197, 102)"
|
color: "rgb(238, 197, 102)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
opacity: 0.05
|
opacity: 0.05
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} //end
|
} //end
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,55 +1,55 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from './chart.vue';
|
import Chart from './chart.vue';
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
indicatorData: [
|
indicatorData: [
|
||||||
{ name: "data1", max: 300 },
|
{ name: "data1", max: 300 },
|
||||||
{ name: "data2", max: 250 },
|
{ name: "data2", max: 250 },
|
||||||
{ name: "data3", max: 300 },
|
{ name: "data3", max: 300 },
|
||||||
{ name: "data4", max: 5},
|
{ name: "data4", max: 5},
|
||||||
{ name: "data5", max: 200 },
|
{ name: "data5", max: 200 },
|
||||||
{ name: "data6", max: 100 }
|
{ name: "data6", max: 100 }
|
||||||
],
|
],
|
||||||
dataBJ: [
|
dataBJ: [
|
||||||
[94, 69, 114, 2.08, 73, 39, 22],
|
[94, 69, 114, 2.08, 73, 39, 22],
|
||||||
[99, 73, 110, 2.43, 76, 48, 23],
|
[99, 73, 110, 2.43, 76, 48, 23],
|
||||||
[31, 12, 30, 0.5, 32, 16, 24],
|
[31, 12, 30, 0.5, 32, 16, 24],
|
||||||
[42, 27, 43, 1, 53, 22, 25],
|
[42, 27, 43, 1, 53, 22, 25],
|
||||||
[154, 117, 157, 3.05, 92, 58, 26],
|
[154, 117, 157, 3.05, 92, 58, 26],
|
||||||
[234, 185, 230, 4.09, 123, 69, 27],
|
[234, 185, 230, 4.09, 123, 69, 27],
|
||||||
[160, 120, 186, 2.77, 91, 50, 28]
|
[160, 120, 186, 2.77, 91, 50, 28]
|
||||||
],
|
],
|
||||||
dataGZ: [
|
dataGZ: [
|
||||||
[84, 94, 140, 2.238, 68, 18, 22],
|
[84, 94, 140, 2.238, 68, 18, 22],
|
||||||
[93, 77, 104, 1.165, 53, 7, 23],
|
[93, 77, 104, 1.165, 53, 7, 23],
|
||||||
[99, 130, 227, 3.97, 55, 15, 24],
|
[99, 130, 227, 3.97, 55, 15, 24],
|
||||||
[146, 84, 139, 1.094, 40, 17, 25],
|
[146, 84, 139, 1.094, 40, 17, 25],
|
||||||
[113, 108, 137, 1.481, 48, 15, 26],
|
[113, 108, 137, 1.481, 48, 15, 26],
|
||||||
[81, 48, 62, 1.619, 26, 3, 27],
|
[81, 48, 62, 1.619, 26, 3, 27],
|
||||||
[56, 48, 68, 1.336, 37, 9, 28]
|
[56, 48, 68, 1.336, 37, 9, 28]
|
||||||
],
|
],
|
||||||
dataSH: [
|
dataSH: [
|
||||||
[91, 45, 125, 0.82, 34, 23, 1],
|
[91, 45, 125, 0.82, 34, 23, 1],
|
||||||
[65, 27, 78, 0.86, 45, 29, 2],
|
[65, 27, 78, 0.86, 45, 29, 2],
|
||||||
[83, 60, 84, 1.09, 73, 27, 3],
|
[83, 60, 84, 1.09, 73, 27, 3],
|
||||||
[109, 81, 121, 1.28, 68, 51, 4],
|
[109, 81, 121, 1.28, 68, 51, 4],
|
||||||
[106, 77, 114, 1.07, 55, 51, 5],
|
[106, 77, 114, 1.07, 55, 51, 5],
|
||||||
[109, 81, 121, 1.28, 68, 51, 6],
|
[109, 81, 121, 1.28, 68, 51, 6],
|
||||||
[106, 77, 114, 1.07, 55, 51, 7]
|
[106, 77, 114, 1.07, 55, 51, 7]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="280px"
|
height="280px"
|
||||||
width="430px"
|
width="430px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
"#37a2da",
|
||||||
"#32c5e9",
|
"#32c5e9",
|
||||||
"#9fe6b8",
|
"#9fe6b8",
|
||||||
"#ffdb5c",
|
"#ffdb5c",
|
||||||
"#ff9f7f",
|
"#ff9f7f",
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: "center",
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: "通过率统计",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: [10, 50],
|
radius: [10, 50],
|
||||||
roseType: "area",
|
roseType: "area",
|
||||||
center: ["50%", "40%"],
|
center: ["50%", "40%"],
|
||||||
data: newData.seriesData
|
data: newData.seriesData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from "./chart.vue";
|
import Chart from "./chart.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["终端安装数", "终端安装率", "终端在线率",],
|
xData: ["终端安装数", "终端安装率", "终端在线率",],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "终端安装数" },
|
{ value: 10, name: "终端安装数" },
|
||||||
{ value: 5, name: "终端安装率" },
|
{ value: 5, name: "终端安装率" },
|
||||||
{ value: 15, name: "终端在线率" },
|
{ value: 15, name: "终端在线率" },
|
||||||
// { value: 25, name: "data4" },
|
// { value: 25, name: "data4" },
|
||||||
// { value: 20, name: "data5" },
|
// { value: 20, name: "data5" },
|
||||||
// { value: 35, name: "data6" },
|
// { value: 35, name: "data6" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,82 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<Echart
|
||||||
:options="options"
|
:options="options"
|
||||||
id="centreLeft1Chart"
|
id="centreLeft1Chart"
|
||||||
height="280px"
|
height="280px"
|
||||||
width="430px"
|
width="430px"
|
||||||
></Echart>
|
></Echart>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Echart from '@/common/echart'
|
import Echart from '@/common/echart'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
options: {},
|
options: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echart,
|
Echart,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cdata: {
|
cdata: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cdata: {
|
cdata: {
|
||||||
handler (newData) {
|
handler (newData) {
|
||||||
this.options = {
|
this.options = {
|
||||||
|
|
||||||
color: [
|
color: [
|
||||||
"#37a2da",
|
"#37a2da",
|
||||||
"#32c5e9",
|
"#32c5e9",
|
||||||
"#9fe6b8",
|
"#9fe6b8",
|
||||||
"#ffdb5c",
|
"#ffdb5c",
|
||||||
"#ff9f7f",
|
"#ff9f7f",
|
||||||
"#fb7293",
|
"#fb7293",
|
||||||
"#e7bcf3",
|
"#e7bcf3",
|
||||||
"#8378ea"
|
"#8378ea"
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
legend: {
|
legend: {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
x: "center",
|
x: "center",
|
||||||
data: newData.xData,
|
data: newData.xData,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "通过率统计",
|
name: "通过率统计",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: [10, 50],
|
radius: [10, 50],
|
||||||
roseType: "area",
|
roseType: "area",
|
||||||
center: ["50%", "40%"],
|
center: ["50%", "40%"],
|
||||||
data: newData.seriesData
|
data: newData.seriesData
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Chart :cdata="cdata" />
|
<Chart :cdata="cdata" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from "./chart.vue";
|
import Chart from "./chart.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cdata: {
|
cdata: {
|
||||||
xData: ["费用1","费用2","费用3","费用4","费用5","费用6","费用7","费用8"],
|
xData: ["费用1","费用2","费用3","费用4","费用5","费用6","费用7","费用8"],
|
||||||
seriesData: [
|
seriesData: [
|
||||||
{ value: 10, name: "费用1" },
|
{ value: 10, name: "费用1" },
|
||||||
{ value: 5, name: "费用2" },
|
{ value: 5, name: "费用2" },
|
||||||
{ value: 15, name: "费用3" },
|
{ value: 15, name: "费用3" },
|
||||||
{ value: 25, name: "费用4" },
|
{ value: 25, name: "费用4" },
|
||||||
{ value: 20, name: "费用5" },
|
{ value: 20, name: "费用5" },
|
||||||
{ value: 35, name: "费用6" },
|
{ value: 35, name: "费用6" },
|
||||||
{ value: 20, name: "费用7" },
|
{ value: 20, name: "费用7" },
|
||||||
{ value: 35, name: "费用8" },
|
{ value: 35, name: "费用8" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue