xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新

master
luyisha 3 years ago
parent
a4ce7b3c2a
commit
5314097769
4 changed files with 961 additions and 1121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/config.js
  2. 92
      src/views/cultrue/index.vue
  3. 138
      src/views/index.vue
  4. 136
      src/views/ty/index.vue

2
public/config.js
View File

@ -1,4 +1,6 @@
window.publicConfig={
BASE_API:"http://192.168.66.16/api",
// BASE_API:"http://10.97.121.2/api",
// socket url
WS_URL: 'ws://10.97.121.2/ws'
}

92
src/views/cultrue/index.vue
View File

@ -87,7 +87,7 @@ import * as echarts from "echarts";
// 引入api
import * as homeApi from '@/api/home'
let lineChart1 = null, lineChart2 = null, barChart = null;
export default {
data() {
return {
@ -156,6 +156,9 @@ export default {
let that = this;
var chartDom = document.getElementById("dinschart");
// var option;
lineChart1 = echarts.init(chartDom);
function run(){
var xData = that.data24hX;
var data = that.data24h;
@ -170,7 +173,7 @@ export default {
dataLenArr.push(0);// 获取和数据一样长度的图形数组
dataBGArr.push(max);// 数组最大值做背景柱形
})
// var data = [Math.random() * 300]
var option = {
tooltip: {
trigger: 'axis',
@ -300,59 +303,24 @@ export default {
},
]
}
function run(myChart){
that.getData24h();
var data = that.data24h;
let max=data[0];
for (let i = 0; i < data.length; i++) {
if (data[i]>max) {
max = data[i];
}
option && lineChart1.setOption(option);
}
let dataLenArr = [], dataBGArr = [];
data.map(item=>{
dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
dataBGArr.push(max);// 数组最大值做背景柱形
})
myChart.setOption({
animation: true,
xAxis: {
data: that.data24hX
},
series: [{
type: 'bar',
data: data,
},
{
type: 'scatter',
data: dataLenArr
},
{
name: '背景',
type: 'bar',
data: dataBGArr
},
]
});
}
// 加延时器使图像绘制获取元素宽高最新的值2
setTimeout(() => {
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
run();
that.timer1 = setInterval(function () {
myChart.clear();
option && myChart.setOption(option);
run(myChart);
lineChart1.clear();
run();
}, 3000);
}, 200);
},
// 各场馆服务人次趋势
cultrue_bar2() {
let that = this;
var chartDom = document.getElementById("pcgchart");
lineChart2 = echarts.init(chartDom);
var option
function run(){
var xData = that.rsqsXData;
var name = that.rsqsDataName;
// console.log(that.rsqsDataName, 'that.rsqsDataName')
@ -515,21 +483,14 @@ export default {
},
series: series,
}
function run(myChart){
// 获取新数据-处理
myChart.setOption({
series: series
});
option && lineChart2.setOption(option);
}
setTimeout(() => {
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
run();
that.timer2 = setInterval(function () {
myChart.clear();
option && myChart.setOption(option);
run(myChart);
lineChart2.clear();
run();
}, 3000);
}, 200);
},
// 图书馆统计图数据
@ -548,10 +509,10 @@ export default {
cultrue_bar3() {
let that = this;
var chartDom = document.getElementById("tsgchart");
barChart = echarts.init(chartDom);
var option;
function run(myChart){
// 获取新数据-处理
function run(){
var data = [{
name: '今日办证人数',
icon: '../../assets/wh/wh_right3.png',
@ -806,17 +767,14 @@ export default {
}
}]
};
option && myChart.setOption(option);
option && barChart.setOption(option);
}
setTimeout(() => {
var myChart = echarts.init(chartDom);
run(myChart);
run();
that.timer3 = setInterval(function () {
myChart.clear();
that.getLibraryData();
run(myChart);
barChart.clear();
run();
}, 3000);
}, 200);
},
addNumber(start, end, id) {
var o = document.getElementById(id);

138
src/views/index.vue
View File

@ -152,7 +152,7 @@ import * as echarts from "echarts";
// 引入api
import * as homeApi from '@/api/home'
let barChart = null, lineChart = null, pieChart = null;
export default {
data() {
return {
@ -199,22 +199,24 @@ export default {
mounted() {
this.getStat();
this.btgetdata();
this.getPieData();
this.getInfoDatas();
this.getGcgNumDatas();
this.autoTimer0();
setTimeout(() => {
// 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据
this.home_bar();
this.line_zone();
this.index_pie1();
}, 1000)
this.autoTimer0();
this.getsckdata();
},
methods: {
autoTimer0(){
let that = this;
this.btgetdata();
clearInterval(that.timer0);
that.timer0 = setInterval(() => {
if(this.klselt == 'y'){
@ -269,11 +271,12 @@ export default {
home_bar() {
let that = this;
var chartDom = document.getElementById("homebar");
var myChart = echarts.init(chartDom);
var option;
barChart = echarts.init(chartDom);
let xData = this.klqsXDatas.slice(-8,this.klqsXDatas.length);
var data = this.klqsDatas.slice(-8,this.klqsDatas.length);
function run() {
let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
var data = that.klqsDatas.slice(-8,that.klqsDatas.length);
let max=data[0];
for (let i = 0; i < data.length; i++) {
if (data[i]>max) {
@ -447,58 +450,13 @@ export default {
},
};
option && myChart.setOption(option);
function run(myChart) {
if(that.klselt == 'd'){
that.btgetdata();
}else if(that.klselt == 'm'){
that.btgetdata()
}else if(that.klselt == 'y'){
that.btgetdata()
option && barChart.setOption(option);
}
let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
let data = that.klqsDatas.slice(-8,that.klqsDatas.length);
let max=data[0];
for (let i = 0; i < data.length; i++) {
if (data[i]>max) {
max = data[i];
}
}
let dataLenArr = [], dataBGArr = [];
data.map(item=>{
dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
dataBGArr.push(max);// 数组最大值做背景柱形
})
myChart.setOption({
xAxis: {
data: xData
},
series: [
{
type: 'bar',
data: data
},
{
type: 'pictorialBar',
data: data
},
{
type: 'bar',
data: dataBGArr
},
{
type: 'pictorialBar',
data: dataBGArr
}
]
});
}
clearInterval(that.timer1);//这个定时器看似多余，但是注释会影响效果，先保留
run();
clearInterval(that.timer1);
that.timer1 = setInterval(function () {
myChart.clear();
option && myChart.setOption(option);
run(myChart);
barChart.clear();
run();
}, 5000);
},
@ -507,11 +465,12 @@ export default {
let that = this;
var chartDom = document.getElementById("kl-line");
var option;
lineChart = echarts.init(chartDom);
function run(){
// 获取新数据-处理--改用ws处理数据
// that.getGcgNumDatas();
function run(myChart){
// 获取新数据-处理
that.getGcgNumDatas();
setTimeout(() => {
var xData = that.rsqsXData;
var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];
@ -667,17 +626,14 @@ export default {
},
series: series,
}
option && myChart.setOption(option);
}, 200);
option && lineChart.setOption(option);
}
setTimeout(()=>{
var myChart = echarts.init(chartDom);
run(myChart);
run();
that.timer3 = setInterval(function () {
myChart.clear();
run(myChart);
lineChart.clear();
run();
}, 3000);
}, 200)
},
addNumber(start, end, id) {
@ -794,6 +750,8 @@ export default {
},
index_pie1(){
let that = this;
var pieDom1 = document.getElementById("indexPie1");
pieChart = echarts.init(pieDom1);
// var dataP = [
// {name: '体育场',value: 5,},
// {name: '体育馆',value: 20,},
@ -818,9 +776,8 @@ export default {
);
}
function run(myChart){
function run(){
var dataP = that.dataP;
// 获取新数据-处理
let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00'];
let color1=[], color2=[], color3=[];
// 设置每层圆环颜色和添加间隔的透明色
@ -916,20 +873,41 @@ export default {
},
],
}
option && myChart.setOption(option);
option && pieChart.setOption(option);
}
// 加延时器使图像绘制获取元素宽高最新的值
setTimeout(()=>{
var pieDom1 = document.getElementById("indexPie1");
var myChart = echarts.init(pieDom1);
run(myChart);
run();
that.timer4 = setInterval(function () {
myChart.clear();
that.getPieData();
run(myChart);
pieChart.clear();
run();
}, 4000);
}, 200)
},
// 获取实时数据
getsckdata(){
let that = this;
// websocket
const ws = new WebSocket("ws://192.168.66.16/rt");
ws.onopen = function() {
// console.log("ws connected success!")
};
ws.onmessage = (e)=> {
var jstr = JSON.parse(e.data)
// console.log("11111", jstr, e);
if(!jstr){
return;
}
const pieData = jstr.realTimeData.data;
that.proportionData = [];that.groupNameData=[];that.dataP=[];
pieData.forEach((item) => {
that.proportionData.push(item.proportion);
that.groupNameData.push(item.groupName);
that.dataP.push({
name:item.groupName,
value:item.proportion.split('%')[0]
})
})
};
},
},
beforeDestroy(){

136
src/views/ty/index.vue
View File

@ -153,7 +153,7 @@ import * as echarts from "echarts";
// 引入api
import * as homeApi from '@/api/home'
let lineChart1 = null, lineChart2 = null;
export default {
components: {
@ -241,7 +241,7 @@ export default {
this.ty_bar1()//24小时总服务
this.ty_pieDo()//右上角占比
this.ty_bar3()//右下角趋势图
}, 200);
}, 500);
})
@ -264,7 +264,9 @@ export default {
ty_bar1() {
let that = this;
// var xData = that.data24hX;
lineChart1 = echarts.init(this.$refs.dinschart);
function run(){
var data24h = that.data24h;
let max=data24h[0];
for (let i = 0; i < data24h.length; i++) {
@ -396,59 +398,24 @@ export default {
},
]
}
function run(myChart){
that.getData24h();
let data24h = that.data24h;
let max=data24h[0];
for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) {
max = data24h[i];
}
}
let dataLenArr = [], dataBGArr = [];
data24h.map(item=>{
dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
dataBGArr.push(max);// 数组最大值做背景柱形
})
myChart.setOption({
animation: true,
xAxis: {
data: that.data24hX
},
series: [{
type: 'bar',
data: data24h,
},
{
type: 'scatter',
data: dataLenArr
},
{
name: '背景',
type: 'bar',
data: dataBGArr
},
]
});
option && lineChart1.setOption(option);
}
// 加延时器使图像绘制获取元素宽高最新的值2
setTimeout(()=>{
var myChart = echarts.init(this.$refs.dinschart);
option && myChart.setOption(option);
run();
that.timer1 = setInterval(function () {
myChart.clear();
option && myChart.setOption(option);
run(myChart);
lineChart1.clear();
run();
}, 3000);
}, 200)
},
ty_bar3() {
let that = this;
var chartDom = document.getElementById("pcgchart2");
lineChart2 = echarts.init(chartDom);
var option;
function run(){
// 获取新数据-处理--改用ws处理数据
var option
var xData = that.rsqsXData;
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = that.rsqsDataName
@ -623,81 +590,16 @@ export default {
},
series: series,
}
function run(myChart){
// 获取新数据-处理
// that.getGcgNumDatas();
setTimeout(() => {
// var xData = this.rsqsXData;
var data = that.rsqsDataAll;
var series = [];
for (var i = 0; i < data.length; i++) {
series.push({
name: name[i],
type: "line",
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //是否平滑曲线显示
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: color[i]
}, {
offset: 0.8,
color: 'rgba(255,255,255,0)'
}], false),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3,
}
},
itemStyle: {
normal: {
color: color[i],
lineStyle: {
width: 1,
type: 'solid' //'dotted'虚线 'solid'实线
},
borderColor: color[i], //图形的描边颜色。支持的格式同 color
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
barBorderRadius: 0,
label: {
show: false,
},
opacity: 0.5,
option && lineChart2.setOption(option);
}
},
markPoint: {
data: [
{
name: '最大值',
type: 'max'
}
]
},
data: data[i],
})
}
myChart.setOption({
xAxis: [{data: xData}],
series: series
});
}, 200);
run();
}
setTimeout(()=>{
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
that.timer2 = setInterval(function () {
myChart.clear();
option && myChart.setOption(option);
run(myChart);
}, 2000);
}, 600)
lineChart2.clear();
run();
}, 3000);
},
ty_pieDo(){
let that = this;

Write Preview
Loading…
Cancel
Save