大屏展示功能
parent
4cf5a6c10a
commit
09017036ce
File diff suppressed because it is too large
Load Diff
|
|
@ -26,8 +26,10 @@
|
||||||
"gulp-rename": "^1.4.0",
|
"gulp-rename": "^1.4.0",
|
||||||
"gulp-sass": "^4.0.2",
|
"gulp-sass": "^4.0.2",
|
||||||
"html2canvas": "^1.0.0-rc.5",
|
"html2canvas": "^1.0.0-rc.5",
|
||||||
|
"iview": "^3.1.3",
|
||||||
"js-cookie": "^2.2.0",
|
"js-cookie": "^2.2.0",
|
||||||
"jspdf": "^1.5.3",
|
"jspdf": "^1.5.3",
|
||||||
|
"less": "^3.0.0",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
"qs": "^6.7.0",
|
"qs": "^6.7.0",
|
||||||
|
|
@ -50,7 +52,11 @@
|
||||||
"@vue/cli-plugin-eslint": "^3.10.0",
|
"@vue/cli-plugin-eslint": "^3.10.0",
|
||||||
"@vue/cli-service": "^3.10.0",
|
"@vue/cli-service": "^3.10.0",
|
||||||
"@vue/eslint-config-standard": "^4.0.0",
|
"@vue/eslint-config-standard": "^4.0.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
"element-theme-chalk": "^2.11.1",
|
"element-theme-chalk": "^2.11.1",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"less-loader": "^5.0.0",
|
||||||
"natives": "^1.1.6",
|
"natives": "^1.1.6",
|
||||||
"vue-template-compiler": "^2.6.10"
|
"vue-template-compiler": "^2.6.10"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
16
src/main.js
16
src/main.js
|
|
@ -24,7 +24,15 @@ import {
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
import VueAMap from 'vue-amap';
|
import VueAMap from 'vue-amap';
|
||||||
import BaiduMap from 'vue-baidu-map'
|
import BaiduMap from 'vue-baidu-map'
|
||||||
|
import iView from 'iview'
|
||||||
|
import img from './lib/img'
|
||||||
|
import utils from "./lib/utils"
|
||||||
|
// import './assets/less/index.less';
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(utils)
|
||||||
|
Vue.prototype.$images = img
|
||||||
|
Vue.use(iView)
|
||||||
Vue.use(BaiduMap, {
|
Vue.use(BaiduMap, {
|
||||||
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
|
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
|
||||||
ak: 'XU9gTXgUHGApN6ahuwuvUBRcIX1razMG'
|
ak: 'XU9gTXgUHGApN6ahuwuvUBRcIX1razMG'
|
||||||
|
|
@ -43,8 +51,12 @@ VueAMap.initAMapApiLoader({
|
||||||
});
|
});
|
||||||
|
|
||||||
//引入 echarts
|
//引入 echarts
|
||||||
import echarts from 'echarts'
|
// import echarts from 'echarts'
|
||||||
Vue.prototype.$echarts = echarts
|
// Vue.prototype.$echarts = echarts
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
Vue.prototype.$echarts = function (el) {
|
||||||
|
return echarts.init(el, null, {renderer: 'svg'})
|
||||||
|
}
|
||||||
|
|
||||||
Vue.use(renRadioGroup)
|
Vue.use(renRadioGroup)
|
||||||
Vue.use(renSelect)
|
Vue.use(renSelect)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,690 @@
|
||||||
|
<template>
|
||||||
|
<div class="page1">
|
||||||
|
<Row class="listTop">
|
||||||
|
<Col span="7">
|
||||||
|
<div class="leftTop">
|
||||||
|
<span class='title'><span class="title-gradient">模块一分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="left1">
|
||||||
|
<chart1 :selectRangeDate="selectRangeDate" ref='chart1'></chart1>
|
||||||
|
</div>
|
||||||
|
<div class="left2">
|
||||||
|
<chart2 ref="chart2" :data="data1"></chart2>
|
||||||
|
<div style="width: 40%;float: left;height: 100%;">
|
||||||
|
<pie ref="chart3" id="left_2_2" :data="data2"></pie>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="left3">
|
||||||
|
<chart2 ref="chart4" :data="data3"></chart2>
|
||||||
|
<div style="width: 40%;float: left;height: 100%;">
|
||||||
|
<pie ref="chart5" id="left_3_2" :data="data4"></pie>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="10">
|
||||||
|
<center ref="chart6"></center>
|
||||||
|
</Col>
|
||||||
|
<Col span="7">
|
||||||
|
<div class="rightTop-1">
|
||||||
|
<span class='title'><span class="title-gradient">世界地图分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<world-map ref="chart7"></world-map>
|
||||||
|
</div>
|
||||||
|
<div class="rightTop-2">
|
||||||
|
<span class='title'><span class="title-gradient">模块六分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="rightTop-list">
|
||||||
|
<div class="list">
|
||||||
|
<chart3 ref="chart8"></chart3>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<chart4 ref="chart9" :data="data5"></chart4>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<chart4 ref="chart10" :data="data6"></chart4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="listBottom">
|
||||||
|
<Col span='9'>
|
||||||
|
<div class="content">
|
||||||
|
<span class="title"><span class="title-gradient">模块二分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<Row class="topLine">
|
||||||
|
<Col span="24">
|
||||||
|
<chart5 ref="chart11"></chart5>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="bottomPie">
|
||||||
|
<Col span="12">
|
||||||
|
<chart6 ref="chart12" :data="data7"></chart6>
|
||||||
|
</Col>
|
||||||
|
<Col span="12">
|
||||||
|
<chart6 ref="chart13" :data="data8"></chart6>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span='4'>
|
||||||
|
<div class="content">
|
||||||
|
<span class="title"><span class="title-gradient">模块三分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="behavior">
|
||||||
|
<area-chart style="height: 55%" ref="chart14" :select-range-date="selectRangeDate"
|
||||||
|
:config="configData9"></area-chart>
|
||||||
|
<chart7 ref="chart15" :data="colorsData"></chart7>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span='4'>
|
||||||
|
<div class="content">
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<span class="title"><span class="title-gradient">模块四分析</span></span>
|
||||||
|
<chart8 ref="chart16"></chart8>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span='7'>
|
||||||
|
<div class="content">
|
||||||
|
<span class="title"><span class="title-gradient">模块五分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="appUse">
|
||||||
|
<chart9 ref="chart17"></chart9>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const chart1 = () => import('./components/page1/chart1');
|
||||||
|
const chart2 = () => import('./components/page1/chart2');
|
||||||
|
const chart4 = () => import('./components/page1/chart4');
|
||||||
|
const chart3 = () => import('./components/page1/chart3');
|
||||||
|
const chart5 = () => import('./components/page1/chart5');
|
||||||
|
const chart6 = () => import('./components/page1/chart6');
|
||||||
|
const chart7 = () => import('./components/page1/chart7');
|
||||||
|
const chart8 = () => import('./components/page1/chart8');
|
||||||
|
const chart9 = () => import('./components/page1/chart9');
|
||||||
|
const areaChart = () => import('./components/areaChart');
|
||||||
|
const pie = () => import('./components/pie')
|
||||||
|
const worldMap = () => import('./components/page1/worldMap');
|
||||||
|
const center = () => import('./components/page1/center');
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'page1',
|
||||||
|
props: {
|
||||||
|
selectRangeDate: Array
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
center,// 中心
|
||||||
|
chart1, // 面积图
|
||||||
|
chart2, // 柱图
|
||||||
|
pie, // 饼图
|
||||||
|
worldMap, // 世界地图
|
||||||
|
chart4, // 圆环
|
||||||
|
chart3, // 柱图
|
||||||
|
chart5, //折线图
|
||||||
|
chart6, // 饼环图
|
||||||
|
chart7,// 柱图
|
||||||
|
chart8, // 漏斗图
|
||||||
|
chart9, //柱图
|
||||||
|
areaChart // 面积图
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
data1: { // 柱图数据1
|
||||||
|
name: '柱图数据1',
|
||||||
|
number: '100次',
|
||||||
|
data: ["排行1", "排行2", "排行3", "排行4", "排行5"],
|
||||||
|
color: '192,35,42',
|
||||||
|
value: [60, 50, 40, 30, 20]
|
||||||
|
},
|
||||||
|
data2: {// 饼图数据1
|
||||||
|
title: "饼图数据1分类占比",
|
||||||
|
color: '#BE232A',
|
||||||
|
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: '分类1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#a262f2'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: '分类2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2ca8fe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '分类3',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#feac2c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '分类4',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c0232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '分类5',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2cd9fe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '分类6',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff787e'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 30,
|
||||||
|
name: '其他',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#252448'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data3: { // 柱图数据2
|
||||||
|
name: '柱图数据2',
|
||||||
|
number: '100次',
|
||||||
|
data: ["排行1", "排行2", "排行3", "排行4", "排行5"],
|
||||||
|
color: '40,112,232',
|
||||||
|
value: [6, 5, 4, 3, 2]
|
||||||
|
},
|
||||||
|
// 饼图数据2
|
||||||
|
data4: {
|
||||||
|
title: "饼图数据2分类占比",
|
||||||
|
color: '#2C7BFE',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: '分类1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#feed2c'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: '分类2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2ca8fe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '分类3',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#feac2c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '分类4',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2c7bfe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: '其他',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#252448'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 环形图数据
|
||||||
|
data5: {
|
||||||
|
title: '环形图数据1',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 335,
|
||||||
|
name: '模拟1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#252448'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 310,
|
||||||
|
name: '模拟2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2ca8fe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 234,
|
||||||
|
name: '模拟3',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#feed2c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 135,
|
||||||
|
name: '其他',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2871ea'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 200,
|
||||||
|
name: '模拟4',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fe672c'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 环形数据2
|
||||||
|
data6: {
|
||||||
|
title: '环形数据2',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 335,
|
||||||
|
name: '模拟1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#69f262'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 310,
|
||||||
|
name: '模拟2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c0232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 234,
|
||||||
|
name: '模拟3',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2cfcfe'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 135,
|
||||||
|
name: '其他',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#252448'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 200,
|
||||||
|
name: '模拟4',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#a262f2'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块二数据
|
||||||
|
data7: {
|
||||||
|
title: '标题',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 70,
|
||||||
|
name: '数据1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c0232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: '数据2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2870e8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data1: [
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '方式1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c0232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: '方式2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2870e8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块二数据
|
||||||
|
data8: {
|
||||||
|
title: '标题',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '数据1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c0232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: '数据2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2870e8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data1: [
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '方式1',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c2232a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: '方式2',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fe672c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
name: '方式3',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#a262f2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: '方式4',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2870e8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '方式5',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#feed2c'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块三面积图
|
||||||
|
configData9: {
|
||||||
|
title: '【标题】',
|
||||||
|
color: '#75deef',
|
||||||
|
name: ['（人）', '（人）'],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '数据1',
|
||||||
|
color: ['#feed2c', '#353103'],
|
||||||
|
data: [240, 132, 101, 134, 90, 170, 110]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据2',
|
||||||
|
color: ['#2871ea', '#0a1b41'],
|
||||||
|
data: [20, 102, 101, 134, 190, 150, 120]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据3',
|
||||||
|
color: ['#935adf', '#230f3e'],
|
||||||
|
data: [100, 32, 101, 134, 150, 110, 180]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据4',
|
||||||
|
color: ['#e65f2d', '#551f0b'],
|
||||||
|
data: [120, 122, 141, 144, 60, 220, 120]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块三柱图
|
||||||
|
colorsData: [
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2c7bfe",
|
||||||
|
|
||||||
|
},
|
||||||
|
name: '数据1',
|
||||||
|
value: 255
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#c2232a",
|
||||||
|
|
||||||
|
},
|
||||||
|
name: '数据2',
|
||||||
|
value: 212
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#feed2c",
|
||||||
|
|
||||||
|
},
|
||||||
|
name: '数据3',
|
||||||
|
value: 155
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#a262f2",
|
||||||
|
|
||||||
|
},
|
||||||
|
name: '数据4',
|
||||||
|
value: 55
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#62d5f2",
|
||||||
|
},
|
||||||
|
name: '数据5',
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#fe672c",
|
||||||
|
},
|
||||||
|
name: '数据6',
|
||||||
|
value: 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#69f262",
|
||||||
|
},
|
||||||
|
name: '数据7',
|
||||||
|
value: 114
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2ca8fe",
|
||||||
|
},
|
||||||
|
name: '数据8',
|
||||||
|
value: 20
|
||||||
|
},
|
||||||
|
],
|
||||||
|
resizeFn: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
watch: {
|
||||||
|
selectRangeDate: function () {
|
||||||
|
for (let i = 1; i < 18; i++) {
|
||||||
|
this.$refs['chart' + i].setChart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.resizeFn = this.$debounce(() => {
|
||||||
|
// 通过捕获系统的onresize事件触发我们需要执行的事件
|
||||||
|
for (let i = 1; i < 18; i++) {
|
||||||
|
this.$refs['chart' + i].setChart();
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
|
window.addEventListener('resize', this.resizeFn)
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.resizeFn)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.page1 {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 20px 20px;
|
||||||
|
background: #03044A;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.listTop {
|
||||||
|
height: 60%;
|
||||||
|
|
||||||
|
.ivu-col {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.leftTop {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.left1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left2, .left3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 30%;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTop-1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 55%;
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTop-2 {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5%;
|
||||||
|
height: 40%;
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.rightTop-list {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listBottom {
|
||||||
|
height: 40%;
|
||||||
|
|
||||||
|
.ivu-col-span-9 {
|
||||||
|
width: 33.5%;
|
||||||
|
margin-right: 0.6667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-col-span-4 {
|
||||||
|
width: 17.66667%;
|
||||||
|
margin-right: 0.6667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-col {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 30px;
|
||||||
|
height: calc(~"100% - 30px");
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.ivu-row {
|
||||||
|
&.topLine {
|
||||||
|
height: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottomPie {
|
||||||
|
height: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-col {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.charts-list {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.behavior {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appUse {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,692 @@
|
||||||
|
<template>
|
||||||
|
<div class="page2">
|
||||||
|
<Row class='content'>
|
||||||
|
<Col span="8">
|
||||||
|
<div class="list">
|
||||||
|
<div class="left">
|
||||||
|
<span class='title'><span class="title-gradient">模块一分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="chart-68">
|
||||||
|
<area-chart ref="chart1" id="left_1" :select-range-date="selectRangeDate" :config="cnfigData1"></area-chart>
|
||||||
|
</div>
|
||||||
|
<div class="chart-32">
|
||||||
|
<radar-chart ref="chart2" id="left_2" :data="chatRadarData"></radar-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="left">
|
||||||
|
<span class='title'><span class="title-gradient">模块二分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="chart-68">
|
||||||
|
<chart1 ref="chart3" id="left_3" :config="configData2"></chart1>
|
||||||
|
</div>
|
||||||
|
<div class="chart-32">
|
||||||
|
<radar-chart ref="chart4" id="left_4" :data="officeRadarData"></radar-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Col>
|
||||||
|
<Col span="8">
|
||||||
|
<div class="circlePie" id="circlePie">
|
||||||
|
<canvas id="main" width="500" height="500"></canvas>
|
||||||
|
<canvas id="dot"></canvas>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="8">
|
||||||
|
<div class="list">
|
||||||
|
<div class="right">
|
||||||
|
<span class='title'><span class="title-gradient">模块三分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="chart-32">
|
||||||
|
<radar-chart ref="chart5" id="right_1" :data="friendRadarData"></radar-chart>
|
||||||
|
</div>
|
||||||
|
<div class="chart-68">
|
||||||
|
<chart2 ref="chart6"></chart2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="right">
|
||||||
|
<span class='title'><span class="title-gradient">模块四分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<div class="chart-32">
|
||||||
|
<radar-chart ref="chart7" id="right_3" :data="momentsRadarData"></radar-chart>
|
||||||
|
</div>
|
||||||
|
<div class="chart-68">
|
||||||
|
<chart3 ref="chart8" :selectRangeDate="selectRangeDate" id="right_4"></chart3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="bottom-list">
|
||||||
|
<Col span="16">
|
||||||
|
<div class="list">
|
||||||
|
<div class="bottom">
|
||||||
|
<span class='title'><span class="title-gradient">模块五分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<chart4 ref="chart9" id="bottom_1"></chart4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="bottom">
|
||||||
|
<span class='title'><span class="title-gradient">模块六分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<chart5 ref="chart10" id="bottom_2"></chart5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="bottom">
|
||||||
|
<span class='title'><span class="title-gradient">模块七分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<chart6 ref="chart11" id="bottom_3"></chart6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="8">
|
||||||
|
<div class="list right-bottom">
|
||||||
|
<div class="bottom bottom1">
|
||||||
|
<span class='title'><span class="title-gradient">模块八分析</span></span>
|
||||||
|
<span class="angle1"></span>
|
||||||
|
<span class="angle2"></span>
|
||||||
|
<span class="angle3"></span>
|
||||||
|
<span class="angle4"></span>
|
||||||
|
<chart7 ref="chart12" id="bottom_4"></chart7>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const chart1 = () => import('./components/page2/chart1');
|
||||||
|
const chart2 = ()=> import('./components/page2/chart2');
|
||||||
|
const chart3 = () => import('./components/page2/chart3');
|
||||||
|
const chart4 = () => import('./components/page2/chart4');
|
||||||
|
const chart5 = () => import('./components/page2/chart5');
|
||||||
|
const chart6 = () => import('./components/page2/chart6');
|
||||||
|
const chart7 = () => import('./components/page2/chart7');
|
||||||
|
const areaChart = ()=> import('./components/areaChart');
|
||||||
|
const radarChart = () => import('./components/radar');
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'page2',
|
||||||
|
props: ['selectRangeDate'],
|
||||||
|
components: {
|
||||||
|
areaChart,
|
||||||
|
radarChart,
|
||||||
|
chart1,
|
||||||
|
chart2,
|
||||||
|
chart3,
|
||||||
|
chart4,
|
||||||
|
chart5,
|
||||||
|
chart6,
|
||||||
|
chart7
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
everyPer: 0,
|
||||||
|
xOffset: 0,
|
||||||
|
circle: {
|
||||||
|
x: 250,
|
||||||
|
y: 250,
|
||||||
|
radius: 218
|
||||||
|
},
|
||||||
|
title: ['数据1:456,789', '数据2:123,12', '数据3:134,23', '数据4:234,234', '数据5:123,123', '数据6:678,123'],
|
||||||
|
// 模块一面积图数据
|
||||||
|
cnfigData1: {
|
||||||
|
color: '#5CB1C1',
|
||||||
|
name: ['（次）', '（人）'],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '次数',
|
||||||
|
color: ['#9e70ff', '#6e5eff'],
|
||||||
|
data: [200, 12, 21, 54, 260, 130, 210],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '人数',
|
||||||
|
color: ['#48cefd', '#5356f1'],
|
||||||
|
data: [50, 182, 234, 191, 190, 30, 10],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
configData2: {
|
||||||
|
data: [213, 190, 137, 99, 63, 196, 248, 212, 248, 112]
|
||||||
|
},
|
||||||
|
// 模块一雷达图数据
|
||||||
|
chatRadarData: {
|
||||||
|
title: '标题',
|
||||||
|
position: ['center', '85%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
indicator: [
|
||||||
|
{text: '分类1'},
|
||||||
|
{text: '分类2'},
|
||||||
|
{text: '分类3'},
|
||||||
|
{text: '分类4'},
|
||||||
|
{text: '分类5'},
|
||||||
|
{text: '分类6'}
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '次数',
|
||||||
|
color: '#0DF5F8',
|
||||||
|
value: [100, 8, 0.40, -80, 2000, 332],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '人数',
|
||||||
|
color: '#7921AD',
|
||||||
|
value: [60, 5, 0.30, -100, 1500, 221],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块二雷达图数据
|
||||||
|
officeRadarData: {
|
||||||
|
title: '标题',
|
||||||
|
position: ['center', '85%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
indicator: [
|
||||||
|
{text: '分类1'},
|
||||||
|
{text: '分类2'},
|
||||||
|
{text: '分类3'},
|
||||||
|
{text: '分类4'},
|
||||||
|
{text: '分类5'},
|
||||||
|
{text: '分类6'},
|
||||||
|
{text: '分类7'},
|
||||||
|
{text: '分类8'},
|
||||||
|
{text: '分类9'},
|
||||||
|
{text: '分类10'}
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '数据',
|
||||||
|
color: '#55D35B',
|
||||||
|
value: [213, 190, 137, 99, 63, 196, 248, 212, 248, 112],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块三雷达图数据
|
||||||
|
friendRadarData: {
|
||||||
|
title: '分类标题',
|
||||||
|
position: ['center', '85%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
indicator: [
|
||||||
|
{text: '分类1'},
|
||||||
|
{text: '分类2'},
|
||||||
|
{text: '分类3'},
|
||||||
|
{text: '分类4'},
|
||||||
|
{text: '分类5'},
|
||||||
|
{text: '分类6'}
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '数据',
|
||||||
|
color: '#FA8486',
|
||||||
|
value: [100, 8, 0.40, -80, 2000, 332],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 模块四雷达图数据
|
||||||
|
momentsRadarData: {
|
||||||
|
title: '标题',
|
||||||
|
position: ['center', '85%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
indicator: [
|
||||||
|
{text: '分类1'},
|
||||||
|
{text: '分类2'},
|
||||||
|
{text: '分类3'},
|
||||||
|
{text: '分类4'},
|
||||||
|
{text: '分类5'},
|
||||||
|
{text: '分类6'}
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '个数',
|
||||||
|
color: '#D91748',
|
||||||
|
value: [100, 8, 0.40, -80, 2000, 332],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
warea: {x: 250, y: 250, max: 700},
|
||||||
|
dots: [],
|
||||||
|
resizeFn: null,
|
||||||
|
animationFrame1:null,
|
||||||
|
animationFrame2: null,
|
||||||
|
centerBox: {
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawDot() {
|
||||||
|
let canvas = document.getElementById('dot');
|
||||||
|
canvas.width = document.querySelector('#circlePie').offsetWidth;
|
||||||
|
canvas.height = document.querySelector('#circlePie').offsetHeight;
|
||||||
|
let ctx = canvas.getContext('2d');
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
// 将鼠标坐标添加进去，产生一个用于比对距离的点数组
|
||||||
|
let ndots = [this.warea].concat(this.dots);
|
||||||
|
this.dots.forEach((dot)=> {
|
||||||
|
// 粒子位移
|
||||||
|
dot.x += dot.xa;
|
||||||
|
dot.y += dot.ya;
|
||||||
|
// 遇到边界将加速度反向
|
||||||
|
dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
|
||||||
|
dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
|
||||||
|
// 绘制点
|
||||||
|
ctx.fillStyle = '#ffffff';
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(dot.x - 0.5, dot.y - 0.5, 2, 0, 2 * Math.PI, true);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
// 循环比对粒子间的距离
|
||||||
|
for (let i = 0; i < ndots.length; i++) {
|
||||||
|
let d2 = ndots[i];
|
||||||
|
if (dot === d2 || d2.x === null || d2.y === null) continue;
|
||||||
|
let xc = dot.x - d2.x;
|
||||||
|
let yc = dot.y - d2.y;
|
||||||
|
// 两个粒子之间的距离
|
||||||
|
let dis =Math.sqrt(xc * xc + yc * yc);
|
||||||
|
// 距离比
|
||||||
|
let ratio;
|
||||||
|
// 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线
|
||||||
|
if (dis < d2.max) {
|
||||||
|
// 计算距离比
|
||||||
|
ratio = (d2.max - dis) / d2.max;
|
||||||
|
// 画线
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.lineWidth = ratio / 2;
|
||||||
|
if (d2 === this.warea) {
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0)';
|
||||||
|
} else {
|
||||||
|
// 距离变大 连线颜色变浅
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,' + (ratio + 0.2) + ')';
|
||||||
|
}
|
||||||
|
ctx.moveTo(dot.x, dot.y);
|
||||||
|
ctx.lineTo(d2.x, d2.y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 将已经计算过的粒子从数组中删除
|
||||||
|
ndots.splice(ndots.indexOf(dot), 1);
|
||||||
|
});
|
||||||
|
this.animationFrame1 = window.requestAnimationFrame(this.drawDot);
|
||||||
|
},
|
||||||
|
rads(x) { // 弧度转换
|
||||||
|
return Math.PI * x / 180;
|
||||||
|
},
|
||||||
|
act() {
|
||||||
|
//清空画布
|
||||||
|
const canvas = document.querySelector('#main');
|
||||||
|
canvas.style.width = this.centerBox.height + 'px';
|
||||||
|
canvas.style.height = this.centerBox.height + 'px';
|
||||||
|
const context = canvas.getContext('2d');
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
this.drawPie(this.everyPer, context);
|
||||||
|
this.animationFrame2 = window.requestAnimationFrame(this.act);
|
||||||
|
this.everyPer += Math.PI / 180;
|
||||||
|
let speed = 0.07; //波浪速度，数越大速度越快
|
||||||
|
this.xOffset += speed;
|
||||||
|
},
|
||||||
|
drawPie(everyPer, context) {
|
||||||
|
context.save();
|
||||||
|
context.fillStyle = 'rgba(18,55,88,.2)';
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(this.circle.x, this.circle.y, 245, 0, 2 * Math.PI, true);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
context.restore();
|
||||||
|
|
||||||
|
//外圆
|
||||||
|
context.save();
|
||||||
|
context.shadowBlur = 50;
|
||||||
|
context.shadowColor = "#123959";
|
||||||
|
context.fillStyle = '#080D27';
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(this.circle.x, this.circle.y, 235, 0, 2 * Math.PI, true);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
context.restore();
|
||||||
|
for (let i = 0; i < this.title.length; i++) {//绘制文字。
|
||||||
|
context.save()
|
||||||
|
// 画文字
|
||||||
|
this.drawCircularText(this.circle, this.title[i], this.rads(i * 60 - 110), this.rads(i * 60 - 65), i, context);
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
// 旋转小球
|
||||||
|
let x = 240 * Math.cos(everyPer);
|
||||||
|
let y = 240 * Math.sin(everyPer);
|
||||||
|
context.save();
|
||||||
|
context.fillStyle = 'rgb(56,252,253)';
|
||||||
|
context.shadowBlur = 80;
|
||||||
|
context.shadowColor = "#39E9EE";
|
||||||
|
context.translate(this.circle.x, this.circle.y);
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(x,y,5,0,2*Math.PI);
|
||||||
|
context.arc(-x,-y,5,0,2*Math.PI);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
context.restore();
|
||||||
|
//
|
||||||
|
context.save();
|
||||||
|
context.fillStyle = '#153776';
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(this.circle.x, this.circle.y, 200, 0, 2 * Math.PI, true);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
|
||||||
|
context.fillStyle = "#121535";
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(this.circle.x, this.circle.y, 190, 0, 2 * Math.PI, true);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
//内圆
|
||||||
|
let nowRange = 36;
|
||||||
|
context.save();
|
||||||
|
this.drawCircle(context);
|
||||||
|
this.drawSin(this.xOffset, context, nowRange);
|
||||||
|
this.drawText(context, nowRange);
|
||||||
|
context.restore();
|
||||||
|
for (let i = 0; i < 6; i++) {//绘制刻度。
|
||||||
|
context.save();
|
||||||
|
context.translate(this.circle.x, this.circle.y);
|
||||||
|
context.rotate((-Math.PI / 2 + Math.PI / 6) + i * Math.PI / 3); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(190, 0);
|
||||||
|
context.lineTo(200, 0);
|
||||||
|
context.lineWidth = 4;
|
||||||
|
context.strokeStyle = '#0A122D';
|
||||||
|
context.stroke();
|
||||||
|
context.closePath();
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawCircle(ctx) { // 画圆 中心圆
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = '#209ADF';
|
||||||
|
ctx.arc(this.circle.x, this.circle.y, 120, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.circle.x, this.circle.y, 120, 0, 2 * Math.PI);
|
||||||
|
ctx.clip();
|
||||||
|
},
|
||||||
|
drawSin(xOffset, ctx, nowRange) { //画sin 曲线函数
|
||||||
|
let mW = 240;
|
||||||
|
let mH = 240;
|
||||||
|
let sX = 0;
|
||||||
|
let axisLength = mW; //轴长
|
||||||
|
let waveWidth = 0.04; //波浪宽度,数越小越宽
|
||||||
|
let waveHeight = 12; //波浪高度,数越大越高
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(130, 130);
|
||||||
|
let points = []; //用于存放绘制Sin曲线的点
|
||||||
|
ctx.beginPath();
|
||||||
|
//在整个轴长上取点
|
||||||
|
for (let x = sX; x < sX + axisLength; x += 20 / axisLength) {
|
||||||
|
//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
|
||||||
|
let y = -Math.sin((sX + x) * waveWidth + xOffset);
|
||||||
|
let dY = mH * (1 - nowRange / 100);
|
||||||
|
points.push([x, dY, dY + y * waveHeight]);
|
||||||
|
ctx.lineTo(x, dY + y * waveHeight);
|
||||||
|
}
|
||||||
|
//封闭路径
|
||||||
|
ctx.lineTo(axisLength, mH);
|
||||||
|
ctx.lineTo(sX, mH);
|
||||||
|
ctx.lineTo(points[0][0], points[0][1]);
|
||||||
|
ctx.fillStyle = '#2C50B1';
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
// 中心显示文字
|
||||||
|
drawText(ctx, nowRange) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(130, 130);
|
||||||
|
let size = 50;
|
||||||
|
ctx.font = size + 'px Microsoft Yahei';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillStyle = "#95EFFF";
|
||||||
|
ctx.fillText(nowRange + '%', 120, 120 - size / 2);
|
||||||
|
ctx.restore();
|
||||||
|
ctx.save()
|
||||||
|
size = 25;
|
||||||
|
ctx.translate(130, 130);
|
||||||
|
ctx.font = size + 'px Microsoft Yahei';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillStyle = "#95EFFF";
|
||||||
|
ctx.fillText("平均值", 120, 120 + size);
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
// 旋转的文字
|
||||||
|
drawCircularText(s, string, startAngle, endAngle, n, context) {
|
||||||
|
let radius = s.radius, // 文字环绕的中心圆半径
|
||||||
|
angleDecrement, // 一个文字所占的角度
|
||||||
|
angle = parseFloat(startAngle), // 文字的起始角度
|
||||||
|
index = 0, // 文字的索引值
|
||||||
|
character; // 当前要画的文字
|
||||||
|
let arr = string.split(':')
|
||||||
|
context.save();
|
||||||
|
context.fillStyle = '#fff';
|
||||||
|
context.font = '12px 微软雅黑 ';
|
||||||
|
context.textAlign = 'center';
|
||||||
|
context.textBaseline = 'middle';
|
||||||
|
if (n < 2 || n === 5) { // 上三个不需要反转的文字
|
||||||
|
while (index < string.length) {
|
||||||
|
character = string.charAt(index);
|
||||||
|
if (arr[0].indexOf(character) >= 0) {
|
||||||
|
if (arr[0].length > 6) {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length - 3)
|
||||||
|
} else {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length - 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length + 6)
|
||||||
|
}
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.translate(s.x + Math.cos(angle) * radius,
|
||||||
|
s.y + Math.sin(angle) * radius);
|
||||||
|
context.rotate(Math.PI / 2 + angle);
|
||||||
|
context.fillText(character, 0, 0);
|
||||||
|
angle -= angleDecrement;
|
||||||
|
index++;
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
} else { // 下面三个需要反转的文字
|
||||||
|
while (index < string.length) {
|
||||||
|
character = string.split("").reverse().join("").charAt(index);// 字符串反转
|
||||||
|
if (arr[1].indexOf(character) >= 0) {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length + 6)
|
||||||
|
} else {
|
||||||
|
if (arr[0].length > 6) {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length - 3)
|
||||||
|
} else {
|
||||||
|
angleDecrement = (startAngle - endAngle) / (string.length - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.translate(s.x + Math.cos(angle) * radius,
|
||||||
|
s.y + Math.sin(angle) * radius);
|
||||||
|
context.rotate(-Math.PI / 2 + angle);// 旋转文字
|
||||||
|
context.fillText(character, 0, 0);
|
||||||
|
angle -= angleDecrement;
|
||||||
|
index++;
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
context.restore();
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.centerBox = {
|
||||||
|
width: document.querySelector('#circlePie').offsetWidth,
|
||||||
|
height: document.querySelector('#circlePie').offsetHeight
|
||||||
|
}
|
||||||
|
for (let i = 0; i < 200; i++) {
|
||||||
|
// 随机200个运动的圆点
|
||||||
|
let x = Math.random() * this.centerBox.width; // 随机的x偏移量
|
||||||
|
let y = Math.random() * this.centerBox.height; // 随机y轴偏移量
|
||||||
|
let xa = Math.random() * 2 - 1; // x轴运动速度
|
||||||
|
let ya = Math.random() * 2 - 1; // y轴运动速度
|
||||||
|
this.dots.push({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
xa: xa,
|
||||||
|
ya: ya,
|
||||||
|
// 两个圆点之间需要连线的距离
|
||||||
|
max: 40
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.act();
|
||||||
|
this.drawDot();
|
||||||
|
this.resizeFn = this.$debounce(()=> {
|
||||||
|
// 通过捕获系统的onresize事件触发我们需要执行的事件
|
||||||
|
this.centerBox = {
|
||||||
|
width: document.querySelector('#circlePie').offsetWidth,
|
||||||
|
height: document.querySelector('#circlePie').offsetHeight
|
||||||
|
}
|
||||||
|
for (let i = 1; i < 13; i++) {
|
||||||
|
this.$refs['chart' + i].setChart();
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
|
window.addEventListener('resize', this.resizeFn)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.resizeFn)
|
||||||
|
window.cancelAnimationFrame(this.animationFrame1)
|
||||||
|
window.cancelAnimationFrame(this.animationFrame2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.page2 {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 20px 20px;
|
||||||
|
background: #03044A;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 65%;
|
||||||
|
|
||||||
|
.ivu-col {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circlePie {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 0 40px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#dot {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
height: 48%;
|
||||||
|
|
||||||
|
.left, .right {
|
||||||
|
background: #0D1341;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left, .right, .center {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
#left1, #left2, #left3, #right1, #right2, #right3, #center2 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-68 {
|
||||||
|
width: 68%;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-32 {
|
||||||
|
width: 32%;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-list {
|
||||||
|
height: 35%;
|
||||||
|
|
||||||
|
.ivu-col {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
height: 100%;
|
||||||
|
width: 33.3333%;
|
||||||
|
padding-right: 1.5%;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
#bottom_4 {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #0D2451;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 0;
|
||||||
|
|
||||||
|
.bottom1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="home_content">
|
<div class="home_content">
|
||||||
<div>
|
<div >
|
||||||
<p class="home_title">欢迎登录，{{$store.state.user.name}} !</p>
|
<p class="home_title" style="color: blue">欢迎登录，{{$store.state.user.name}} !</p>
|
||||||
<p class="home_data">系统已经安全运行<span> {{homeData.daysOfOperation}} </span>天</p>
|
<p class="home_data" style="color: blue">系统已经安全运行<span> {{homeData.daysOfOperation}} </span>天</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
|
|
@ -105,7 +105,8 @@
|
||||||
width: 1632px;
|
width: 1632px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: url(~@/assets/img/home_bgc0.png) no-repeat;
|
/*background: url(~@/assets/img/home_bgc0.png) no-repeat;*/
|
||||||
|
background: url("~@/assets/images/sensitive_bg.png") ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_content {
|
.home_content {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<template>
|
||||||
|
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
|
||||||
|
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
|
||||||
|
<!-- <iframe src="../../../../public/index.html" width="100%" :style="{height:calHeight}" ></iframe>-->
|
||||||
|
<iframe src=" http://localhost:8080" width="100%" :style="{height:calHeight}" ></iframe>
|
||||||
|
<!-- <div class="baidu-page">-->
|
||||||
|
<!-- <h1>嵌套百度页面</h1>-->
|
||||||
|
<!-- <iframe src="https://www.baidu.com" frameborder="0"></iframe>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BaiduPage',
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
calHeight :"850px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -42,11 +42,11 @@
|
||||||
<div style="margin-top:10px;width:300px"> 所属组织：{{ item.origin }}</div>
|
<div style="margin-top:10px;width:300px"> 所属组织：{{ item.origin }}</div>
|
||||||
<div style="margin-top:5px;width:300px"> 详细地址：{{ item.address }}</div>
|
<div style="margin-top:5px;width:300px"> 详细地址：{{ item.address }}</div>
|
||||||
<div style="margin-top:5px;width:300px"> 经度：{{ item.position.lng }}</div>
|
<div style="margin-top:5px;width:300px"> 经度：{{ item.position.lng }}</div>
|
||||||
<div style="margin-top:5px;width:300px"> 纬度：{{ item.position.lng }}</div>
|
<div style="margin-top:5px;width:300px"> 纬度：{{ item.position.lat }}</div>
|
||||||
<div style="margin-top:5px;width:300px"> IP地址：{{ item.ip }}</div>
|
<div style="margin-top:5px;width:300px"> IP地址：{{ item.ip }}</div>
|
||||||
<div style="margin-top:5px;width:220px"> 摄像机类型：{{ item.type }}</div>
|
<div style="margin-top:5px;width:220px"> 摄像机类型：{{ item.type }}</div>
|
||||||
<div style="margin-top:5px;width:220px"> 备注：{{ item.name }}</div>
|
<div style="margin-top:5px;width:220px"> 备注：{{ item.name }}</div>
|
||||||
<!-- <img :src="iconUrl.url" style="width:100%" />-->
|
<img :src="iconUrl.url" style="width:10%" />
|
||||||
</div>
|
</div>
|
||||||
</bm-info-window>
|
</bm-info-window>
|
||||||
</bm-marker>
|
</bm-marker>
|
||||||
|
|
@ -69,7 +69,7 @@ export default {
|
||||||
type:"华为",
|
type:"华为",
|
||||||
content:"这是一个摄像头",
|
content:"这是一个摄像头",
|
||||||
name:"摄像头1",
|
name:"摄像头1",
|
||||||
animal:"BMAP_ANIMATION_DROP"
|
animal:"BMAP_ANIMATION_BOUNCE"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
position: { lng: 103.831057, lat: 30.755467 },
|
position: { lng: 103.831057, lat: 30.755467 },
|
||||||
|
|
@ -229,9 +229,16 @@ export default {
|
||||||
/deep/ .BMap_bubble_content .info-window .address{
|
/deep/ .BMap_bubble_content .info-window .address{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
/*窗体阴影*/
|
||||||
|
/deep/ .BMap_shadow {
|
||||||
|
/*margin-left: -1100px !important;*/
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
|
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
|
||||||
/deep/ .BMap_pop div:nth-child(8) {
|
/deep/ .BMap_pop div:nth-child(8) {
|
||||||
background-color: rgb(255, 255, 255, 0) !important;
|
background-color: rgb(255, 255, 255, 0) !important;
|
||||||
|
/*display: none;*/
|
||||||
/*color: white !important;*/
|
/*color: white !important;*/
|
||||||
/*!/设置透明度*!*!*/
|
/*!/设置透明度*!*!*/
|
||||||
/*opacity: 0.6;*/
|
/*opacity: 0.6;*/
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,14 @@
|
||||||
*/
|
*/
|
||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
|
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
|
||||||
lintOnSave: false,
|
lintOnSave: false,//关闭语法检查，避免不必要的语法报错
|
||||||
|
// css: {
|
||||||
|
// loaderOptions: {
|
||||||
|
// less: {
|
||||||
|
// javascriptEnabled: true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
chainWebpack: config => {
|
chainWebpack: config => {
|
||||||
const svgRule = config.module.rule('svg')
|
const svgRule = config.module.rule('svg')
|
||||||
svgRule.uses.clear()
|
svgRule.uses.clear()
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue