cb/front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏展示功能

Browse Source
This commit is contained in:
coco1986509808 2024-01-12 14:58:09 +08:00
parent 4cf5a6c10a
commit 09017036ce
9 changed files with 1449 additions and 18776 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18766
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -26,8 +26,10 @@
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"html2canvas": "^1.0.0-rc.5",
"iview": "^3.1.3",
"js-cookie": "^2.2.0",
"jspdf": "^1.5.3",
"less": "^3.0.0",
"lodash": "^4.17.15",
"node-sass": "^4.12.0",
"qs": "^6.7.0",
@ -50,7 +52,11 @@
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.1.0",
"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",
"vue-template-compiler": "^2.6.10"
},

16
src/main.js
View File

@ -24,7 +24,15 @@ import {
import cloneDeep from 'lodash/cloneDeep'
import VueAMap from 'vue-amap';
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, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'XU9gTXgUHGApN6ahuwuvUBRcIX1razMG'
@ -43,8 +51,12 @@ VueAMap.initAMapApiLoader({
});
//引入 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// import echarts from '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(renSelect)

690
src/views/modules/monitoring/bigdata.vue Normal file
View File

@ -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>

692
src/views/modules/monitoring/bigdata2.vue Normal file
View File

@ -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>

9
src/views/modules/monitoring/home.vue
View File

@ -3,9 +3,9 @@
<el-container>
<el-header>
<div class="home_content">
<div>
<p class="home_title">欢迎登录，{{$store.state.user.name}}&nbsp;!</p>
<p class="home_data">系统已经安全运行<span>&nbsp;{{homeData.daysOfOperation}}&nbsp;</span>天</p>
<div >
<p class="home_title" style="color: blue">欢迎登录，{{$store.state.user.name}}&nbsp;!</p>
<p class="home_data" style="color: blue">系统已经安全运行<span>&nbsp;{{homeData.daysOfOperation}}&nbsp;</span>天</p>
</div>
</div>
</el-header>
@ -105,7 +105,8 @@
width: 1632px;
color: #fff;
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 {

24
src/views/modules/monitoring/ifarm.vue Normal file
View File

@ -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>

13
src/views/modules/monitoring/map.vue
View File

@ -42,11 +42,11 @@
<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.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:220px"> 摄像机类型：{{ item.type }}</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>
</bm-info-window>
</bm-marker>
@ -69,7 +69,7 @@ export default {
type:"华为",
content:"这是一个摄像头",
name:"摄像头1",
animal:"BMAP_ANIMATION_DROP"
animal:"BMAP_ANIMATION_BOUNCE"
},
{
position: { lng: 103.831057, lat: 30.755467 },
@ -229,9 +229,16 @@ export default {
/deep/ .BMap_bubble_content .info-window .address{
color: #fff;
}
/*窗体阴影*/
/deep/ .BMap_shadow {
/*margin-left: -1100px !important;*/
display: none;
}
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
/deep/ .BMap_pop div:nth-child(8) {
background-color: rgb(255, 255, 255, 0) !important;
/*display: none;*/
/*color: white !important;*/
/*!/设置透明度*!*!*/
/*opacity: 0.6;*/

9
vue.config.js
View File

@ -3,7 +3,14 @@
*/
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
lintOnSave: false,
lintOnSave: false,//关闭语法检查，避免不必要的语法报错
// css: {
// loaderOptions: {
// less: {
// javascriptEnabled: true
// }
// }
// },
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()