Skip to content

S
smart_gov_platform
Commit 18854792 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

推，预约数据分析接口对接，调整日期搜索的显示文本和时间范围

parent 5e8a5879
Hide whitespace changes
Inline Side-by-side
Showing with 680 additions and 625 deletions
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/components/bar.vue
View file @ 18854792
......@@ -4,7 +4,7 @@
<script>
import { deepClone } from "@/utils/js/common.js";
import lodash from "lodash";
import{getStatisticAges} from '@/api/dataAdmin.js'
import { getStatisticAges } from "@/api/dataAdmin.js";
export default {
props: {
info: {
......@@ -12,7 +12,7 @@ export default {
default: () => [
{
value: 200,
name: "20一下",
name: "20以下",
},
{
value: 400,
......@@ -40,16 +40,30 @@ export default {
type: Object,
default: () => {},
},
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
},
},
async mounted() {
let res = await getStatisticAges()
if (res.code != 1) return
let label = res.data.map(item=> item.age_area)
let value = res.data.map(item=> item.nums)
this._initEcharts(label,value);
this.getData();
},
methods: {
_initEcharts(label,value) {
async getData() {
let res = await getStatisticAges({
selected: this.day == 5 ? null : this.day,
});
if (res.code != 1) return;
let label = res.data.map((item) => item.age_area);
let value = res.data.map((item) => item.nums);
this._initEcharts(label, value);
},
_initEcharts(label, value) {
const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts;
let option = {
......@@ -72,9 +86,9 @@ export default {
xAxis: {
type: "category",
data: label,
axisTick:{
show:false
}
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
......@@ -105,4 +119,4 @@ export default {
},
},
};
</script>
\ No newline at end of file
</script>
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/components/pie.vue
View file @ 18854792
......@@ -4,7 +4,7 @@
<script>
import { deepClone } from "@/utils/js/common.js";
import lodash from "lodash";
import{getStatisticSexual} from '@/api/dataAdmin.js'
import { getStatisticSexual } from "@/api/dataAdmin.js";
export default {
props: {
info: {
......@@ -24,14 +24,31 @@ export default {
type: Object,
default: () => {},
},
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
},
},
async mounted() {
let res = await getStatisticSexual()
if (res.code != 1) return
let value = res.data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums}))
this._initEcharts(value);
mounted() {
this.getData();
},
methods: {
async getData() {
let res = await getStatisticSexual({
selected: this.day == 5 ? null : this.day,
});
if (res.code != 1) return;
let value = res.data.map(({ idcard_Sex, nums }) => ({
name: idcard_Sex,
value: nums,
}));
this._initEcharts(value);
},
_initEcharts(value) {
const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts;
......@@ -87,13 +104,13 @@ export default {
rich_green: {
color: "#50CCCB",
},
}
},
},
label: {
normal: {
formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
},
},
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
length: 10,
length2: 60,
......@@ -119,4 +136,4 @@ export default {
},
},
};
</script>
\ No newline at end of file
</script>
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/crowdPortrait.vue
View file @ 18854792
<template>
<div class="CrowdPortrait-Container">
<div class="diyufenbu">
<Head :title="'地域分布'">
<template slot="operation">
<a-range-picker valueFormat="YYYY-MM-DD" class="range_picker_style" @change="rangePickerChange"
v-model="BegindAndEndTime" v-if="day == 5">
</a-range-picker>
<a-select v-model="day">
<a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option>
</a-select>
<div class="CrowdPortrait-Container">
<div class="diyufenbu">
<Head :title="'地域分布'">
<template slot="operation">
<a-range-picker
valueFormat="YYYY-MM-DD"
class="range_picker_style"
@change="rangePickerChange"
v-model="BegindAndEndTime"
v-if="day == 5"
>
</a-range-picker>
<a-select v-model="day">
<a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 本年度 </a-select-option>
<!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select>
<a-button type="primary" class="addclass" @click="searchData">搜索</a-button>
</template>
</Head>
<div class="diyufenbu_box">
<div class="_left">
<div ref="chart" style="width: 100%;height: 100%;"></div>
</div>
<ul class="_right">
<li class="list">
<span style="margin-right: 20px;">排名</span>
<i>地区</i>
<b>预约热度</b>
</li>
<li class="list" v-for="item,index in area" :key="index">
<span style="margin-right: 20px;">NO.{{ index+1 }}</span>
<i>{{item.area}}</i>
<b>
<a-progress :percent="item.nums" :show-info="false" status="active" /></b>
</li>
</ul>
</div>
</div>
<div class="center_box">
<div class="nianling">
<Head :title="'年龄分布'"> </Head>
<NianlingBar class="echarts" />
</div>
<div class="xingbie">
<Head :title="'性别分布'"> </Head>
<XingbiePie class="echarts" />
</div>
</div>
<div class="bottom_box">
<Head :title="'签到准时率'"> </Head>
<div class="echarts">
<QiandaoPie class="list" :info="item" v-for="item,index in sign" :key="index" />
</div>
</div>
</div>
<a-button type="primary" class="addclass" @click="searchData"
>搜索</a-button
>
</template>
</Head>
<div class="diyufenbu_box">
<div class="_left">
<div ref="chart" style="width: 100%; height: 100%"></div>
</div>
<ul class="_right">
<li class="list">
<span style="margin-right: 20px">排名</span>
<i>地区</i>
<b>预约热度</b>
</li>
<li class="list" v-for="(item, index) in area" :key="index">
<span style="margin-right: 20px">NO.{{ index + 1 }}</span>
<i>{{ item.area }}</i>
<b>
<a-progress
:percent="item.nums"
:show-info="false"
status="active"
/></b>
</li>
</ul>
</div>
</div>
<div class="center_box">
<div class="nianling">
<Head :title="'年龄分布'"> </Head>
<NianlingBar class="echarts" :day="dayValue" />
</div>
<div class="xingbie">
<Head :title="'性别分布'"> </Head>
<XingbiePie class="echarts" :day="dayValue" ref="ageChild" />
</div>
</div>
<div class="bottom_box">
<Head :title="'签到准时率'"> </Head>
<div class="echarts">
<QiandaoPie
class="list"
:info="item"
v-for="(item, index) in sign"
:key="index"
/>
</div>
</div>
</div>
</template>
<script>
import NianlingBar from "./components/bar.vue";
import XingbiePie from "./components/pie.vue";
import QiandaoPie from "./components/pie2.vue";
import Head from "./components/header.vue";
import {
getStatisticArea,
getStatisticSignin
} from '@/api/dataAdmin.js'
import axios from 'axios'
import * as echarts from 'echarts'
import china from "@/assets/json/china.json";
export default {
name: "PortalAdminVueCrowdPortrait",
data() {
return {
day: '0',
BegindAndEndTime: [],
area: [],
sign: [],
chart: null
};
},
components: {
Head,
NianlingBar,
XingbiePie,
QiandaoPie,
},
mounted() {
this.init(china)
this.getStatisticArea()
this.getStatisticSignin()
},
methods: {
// 搜索
searchData() {
this.getStatisticArea()
this.getStatisticSignin()
},
async getStatisticArea() {
let res = await getStatisticArea()
if (res.code != 1) return
this.area = res.data
},
async getStatisticSignin() {
let res = await getStatisticSignin()
if (res.code != 1) return
this.sign = res.data
},
//初始化
init(data) {
if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart);
}
echarts.registerMap('china', data);
var geoGpsMap = [104.64, 28.75];
var geoCoordMap = {
'江苏': [118.8062, 31.9208],
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
'吉林': [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
'辽宁': [123.1238, 42.1216],
'河北': [114.4995, 38.1006],
'天津': [117.4219, 39.4189],
'山西': [112.3352, 37.9413],
'陕西': [109.1162, 34.2004],
'甘肃': [103.5901, 36.3043],
'宁夏': [106.3586, 38.1775],
'青海': [101.4038, 36.8207],
'新疆': [87.9236, 43.5883],
'四川': [103.9526, 30.7617],
'重庆': [108.384366, 30.439702],
'山东': [117.1582, 36.8701],
'河南': [113.4668, 34.6234],
'安徽': [117.29, 32.0581],
'湖北': [114.3896, 30.6628],
'浙江': [119.5313, 29.8773],
'福建': [119.4543, 25.9222],
'江西': [116.0046, 28.6633],
'湖南': [113.0823, 28.2568],
'贵州': [106.6992, 26.7682],
'云南': [102.9199, 25.4663],
'广东': [113.12244, 23.009505],
'广西': [108.479, 23.1152],
'海南': [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
'西藏': [91.141017, 29.668461],
'台湾': [121.509062, 25.044332]
};
var data = [];
var mapData = [];
for (var key in geoCoordMap) {
if (name.includes(key)) {
geoGpsMap = geoCoordMap[key];
}
const keys = key;
const filters = data.filter(item => {
return item.name.includes(keys);
})[0];
import NianlingBar from "./components/bar.vue";
import XingbiePie from "./components/pie.vue";
import QiandaoPie from "./components/pie2.vue";
import Head from "./components/header.vue";
import { getStatisticArea, getStatisticSignin } from "@/api/dataAdmin.js";
import axios from "axios";
import * as echarts from "echarts";
import china from "@/assets/json/china.json";
export default {
name: "PortalAdminVueCrowdPortrait",
data() {
return {
day: "0",
BegindAndEndTime: [],
area: [],
sign: [],
chart: null,
dayValue: "",
};
},
components: {
Head,
NianlingBar,
XingbiePie,
QiandaoPie,
},
mounted() {
this.init(china);
this.getStatisticArea();
this.getStatisticSignin();
this.dayValue = this.day;
},
methods: {
// 搜索
searchData() {
this.getStatisticArea();
this.getStatisticSignin();
this.dayValue = this.day;
},
async getStatisticArea() {
let res = await getStatisticArea({
selected: this.day == 5 ? null : this.day,
});
if (res.code != 1) return;
this.area = res.data;
},
async getStatisticSignin() {
let res = await getStatisticSignin({
selected: this.day == 5 ? null : this.day,
});
if (res.code != 1) return;
this.sign = res.data;
},
//初始化
init(data) {
if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart);
}
echarts.registerMap("china", data);
var geoGpsMap = [104.64, 28.75];
var geoCoordMap = {
江苏: [118.8062, 31.9208],
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
西藏: [91.141017, 29.668461],
台湾: [121.509062, 25.044332],
};
var data = [];
var mapData = [];
for (var key in geoCoordMap) {
if (name.includes(key)) {
geoGpsMap = geoCoordMap[key];
}
const keys = key;
const filters = data.filter((item) => {
return item.name.includes(keys);
})[0];
mapData.push({
name: key,
value: filters ? filters.value : 0
});
}
mapData.sort((a, b) => {
return a.value - b.value;
});
const colors = ['#4a99de', '#1890FF'];
mapData.push({
name: key,
value: filters ? filters.value : 0,
});
}
mapData.sort((a, b) => {
return a.value - b.value;
});
const colors = ["#4a99de", "#1890FF"];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
var convertToLineData = function (data, gps) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem.name];
var toCoord = gps; // gps：‘中心点’
if (fromCoord && toCoord) {
res.push({
fromName: gps,
toName: dataItem.name,
coords: [fromCoord, toCoord],
});
}
}
return res;
};
let option = {
// backgroundColor: '#01193f',
color: ["#3BD8FF"], //飞线的颜色
series: [
// 地图线的动画效果
{
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "circle", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 2,
opacity: 0.05, //尾迹线条透明度
curveness: 0.01, //尾迹线条曲直度
},
},
tooltip: {
show: false,
},
data: convertToLineData(mapData, geoGpsMap),
},
// 地图点的动画效果
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
data: convertData(mapData).map((item) => {
return {
name: item.name,
value: item.value.splice(0, 2),
};
}),
// showEffectOn: 'render',
rippleEffect: {
period: 6, //动画时间，值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
color: "#3BD8FF",
},
// hoverAnimation: true,
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
show: true,
color: "#3BD8FF",
// shadowBlur: 20,
// shadowColor: '#333'
},
},
},
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var convertToLineData = function(data, gps) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem.name];
var toCoord = gps; // gps：‘中心点’
if (fromCoord && toCoord) {
res.push({
fromName: gps,
toName: dataItem.name,
coords: [
fromCoord,
toCoord
]
});
}
}
return res;
};
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "fill",
scale: 4,
color: "#ff0000",
},
label: {
normal: {
show: false,
position: "top",
// offset: [5, 0], //偏移设置
color: "#ff0000",
formatter: "宜宾市",
textStyle: {
color: "#fff",
fontSize: "16px",
},
},
emphasis: {
show: true,
},
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
show: true,
color: "#ff0000",
},
},
data: [
{
name: "宜宾市",
value: [104.64, 28.75],
},
],
},
let option = {
// backgroundColor: '#01193f',
color: ['#3BD8FF'], //飞线的颜色
series: [
// 地图线的动画效果
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'circle', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 2,
opacity: 0.05, //尾迹线条透明度
curveness: 0.01 //尾迹线条曲直度
}
},
tooltip: {
show: false
},
data: convertToLineData(mapData, geoGpsMap)
},
// 地图点的动画效果
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
data: convertData(mapData).map(item => {
return {
name: item.name,
value: item.value.splice(0, 2)
};
}),
// showEffectOn: 'render',
rippleEffect: {
period: 6, //动画时间，值越小速度越快
brushType: 'fill', //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
color: '#3BD8FF'
},
// hoverAnimation: true,
symbol: 'circle',
symbolSize: 5,
itemStyle: {
normal: {
show: true,
color: '#3BD8FF',
// shadowBlur: 20,
// shadowColor: '#333'
}
}
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "fill",
scale: 4,
color: '#ff0000'
},
label: {
normal: {
show: false,
position: "top",
// offset: [5, 0], //偏移设置
color: "#ff0000",
formatter: "宜宾市",
textStyle: {
color: "#fff",
fontSize: '16px'
}
},
emphasis: {
show: true
}
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
show: true,
color: "#ff0000"
}
},
data: [{
name: '宜宾市',
value: [104.64, 28.75]
}],
},
// 地图？
{
type: 'map',
mapType: 'china',
top: '30%',
left: '25%',
zoom: 1.7,
label: { // 地图上的文字
normal: {
show: false,
textStyle: {
color: '#ffffff'
}
}
},
itemStyle: {
normal: {
areaColor: {
image: require('@/assets/images/Banner.png'), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: '#76C6E7',
borderWidth: 1,
shadowColor: '#CCEAFD',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
},
},
emphasis: { // 高亮时区域颜色
itemStyle: {
areaColor: '#1890FF',
},
label: {
color: '#ffffff'
}
},
select: {
itemStyle: {
areaColor: '#1890FF'
},
label: {
color: '#ffffff'
}
},
data: data.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
areaColor: item.value > 10 ? colors[1] : colors[0]
}
};
})
}
],
geo: {
map: 'china',
top: '30%',
aspectScale: 0.75, // 长宽比
left: '25%',
zoom: 1.7,
roam: false,
itemStyle: {
normal: {
shadowColor: '#CCEAFD',
shadowOffsetX: 0,
shadowOffsetY: 0
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}]
}
};
this.chart.setOption(option);
}
},
};
// 地图？
{
type: "map",
mapType: "china",
top: "30%",
left: "25%",
zoom: 1.7,
label: {
// 地图上的文字
normal: {
show: false,
textStyle: {
color: "#ffffff",
},
},
},
itemStyle: {
normal: {
areaColor: {
image: require("@/assets/images/Banner.png"), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: "#76C6E7",
borderWidth: 1,
shadowColor: "#CCEAFD",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
},
},
emphasis: {
// 高亮时区域颜色
itemStyle: {
areaColor: "#1890FF",
},
label: {
color: "#ffffff",
},
},
select: {
itemStyle: {
areaColor: "#1890FF",
},
label: {
color: "#ffffff",
},
},
data: data.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
areaColor: item.value > 10 ? colors[1] : colors[0],
},
};
}),
},
],
geo: {
map: "china",
top: "30%",
aspectScale: 0.75, // 长宽比
left: "25%",
zoom: 1.7,
roam: false,
itemStyle: {
normal: {
shadowColor: "#CCEAFD",
shadowOffsetX: 0,
shadowOffsetY: 0,
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
},
],
},
};
this.chart.setOption(option);
},
},
};
</script>
<style lang="less" scoped>
.CrowdPortrait-Container {
background: #f0f2f5;
.CrowdPortrait-Container {
background: #f0f2f5;
& > .diyufenbu {
background: #fff;
&>.diyufenbu {
background: #fff;
.diyufenbu_box {
display: flex;
align-items: stretch;
justify-content: space-between;
.diyufenbu_box {
display: flex;
align-items: stretch;
justify-content: space-between;
& > ._left {
flex: 1;
height: 440px;
// background: #fac;
}
&>._left {
flex: 1;
height: 440px;
// background: #fac;
}
& > ._right {
width: 40%;
padding: 15px;
&>._right {
width: 40%;
padding: 15px;
.list {
& + .list {
margin-top: 15px;
}
.list {
&+.list {
margin-top: 15px;
}
&:last-child {
// padding-bottom: 20px;
// border-bottom: 1px solid #eee;
}
&:last-child {
// padding-bottom: 20px;
// border-bottom: 1px solid #eee;
}
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
span {
text-align: left;
width: 10%;
}
span {
text-align: left;
width: 10%;
}
i {
font-style: normal;
text-align: left;
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
font-style: normal;
text-align: left;
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
b {
font-weight: normal;
text-align: left;
width: 60%;
}
}
}
}
}
b {
font-weight: normal;
text-align: left;
width: 60%;
}
}
}
}
}
& > .center_box {
display: flex;
justify-content: space-between;
align-items: stretch;
margin-top: 20px;
&>.center_box {
display: flex;
justify-content: space-between;
align-items: stretch;
margin-top: 20px;
& > .nianling {
height: 430px;
width: 50%;
background: #fff;
margin-right: 20px;
display: flex;
flex-direction: column;
&>.nianling {
height: 430px;
width: 50%;
background: #fff;
margin-right: 20px;
display: flex;
flex-direction: column;
.echarts {
flex: 1;
}
}
.echarts {
flex: 1;
}
}
& > .xingbie {
width: 50%;
width: 50%;
background: #fff;
display: flex;
flex-direction: column;
&>.xingbie {
width: 50%;
width: 50%;
background: #fff;
display: flex;
flex-direction: column;
.echarts {
flex: 1;
}
}
}
.echarts {
flex: 1;
}
}
}
& > .bottom_box {
height: 480px;
margin-top: 20px;
width: 100%;
background: #fff;
display: flex;
flex-direction: column;
&>.bottom_box {
height: 480px;
margin-top: 20px;
width: 100%;
background: #fff;
display: flex;
flex-direction: column;
.echarts {
flex: 1;
display: flex;
flex-wrap: wrap;
.echarts {
flex: 1;
display: flex;
flex-wrap: wrap;
// align-items: stretch;
.list {
// background: #caf;
display: inline-block !important;
width: 20%;
height: 50%;
// margin: 10px;
// width: 333px;
// height: 216px;
}
}
}
.range_picker_style {
margin-right: 20px;
// color: #32a6fb !important;
.ant-calendar-picker-input {
// background: transparent !important;
// border-color: #32a6fb !important;
// color: #32a6fb !important;
}
.ant-calendar-range-picker-separator {
// color: #32a6fb !important;
}
::-webkit-input-placeholder {
/* WebKit browsers，webkit内核浏览器 */
// color: #32a6fb;
// font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
// color: #32a6fb;
// font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
// color: #32a6fb;
// font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
// color: #32a6fb;
// font-size: 16px;
}
}
/deep/.ant-input-affix-wrapper {
width: 17rem !important;
margin-right: 1rem !important;
}
/deep/.ant-input {
height: 2.3rem !important;
}
/deep/.ant-select-selection {
width: 170px !important;
height: 2.3rem !important;
margin-right: 1rem !important;
}
/deep/.ant-select-selection__rendered {
height: 100% !important;
}
/deep/.ant-select-selection-selected-value {
height: 100% !important;
line-height: 2.3rem !important;
}
.search_btn {
padding: 0.8rem 1.2rem;
border: 0;
border-radius: 5px;
background: #1890ff;
box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.8rem;
color: hsl(0, 0%, 100%);
transition: all 0.5s ease;
cursor: pointer;
&:hover {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 2px 10px 0px;
}
// align-items: stretch;
.list {
// background: #caf;
display: inline-block !important;
width: 20%;
height: 50%;
// margin: 10px;
// width: 333px;
// height: 216px;
}
}
}
.range_picker_style {
margin-right: 20px;
// color: #32a6fb !important;
.ant-calendar-picker-input {
// background: transparent !important;
// border-color: #32a6fb !important;
// color: #32a6fb !important;
}
.ant-calendar-range-picker-separator {
// color: #32a6fb !important;
}
::-webkit-input-placeholder {
/* WebKit browsers，webkit内核浏览器 */
// color: #32a6fb;
// font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
// color: #32a6fb;
// font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
// color: #32a6fb;
// font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
// color: #32a6fb;
// font-size: 16px;
}
}
/deep/.ant-input-affix-wrapper {
width: 17rem !important;
margin-right: 1rem !important;
}
/deep/.ant-input {
height: 2.3rem !important;
}
/deep/.ant-select-selection {
width: 170px !important;
height: 2.3rem !important;
margin-right: 1rem !important;
}
/deep/.ant-select-selection__rendered {
height: 100% !important;
}
/deep/.ant-select-selection-selected-value {
height: 100% !important;
line-height: 2.3rem !important;
}
.search_btn {
padding: 0.8rem 1.2rem;
border: 0;
border-radius: 5px;
background: #1890ff;
box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.8rem;
color: hsl(0, 0%, 100%);
transition: all 0.5s ease;
cursor: pointer;
&:hover {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 2px 10px 0px;
}
&:active {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
transform: translateY(2px);
transition: 100ms;
}
}
}
</style>
\ No newline at end of file
&:active {
letter-spacing: 3px;
background-color: #7d5cf9;
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
transform: translateY(2px);
transition: 100ms;
}
}
}
</style>
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/heatRanking.vue
View file @ 18854792
......@@ -15,9 +15,9 @@
<a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option>
<a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 本年度 </a-select-option>
<!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select>
<a-button type="primary" class="addclass" @click="getData">搜索</a-button>
......
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/makeTrendResearch.vue
View file @ 18854792
......@@ -8,23 +8,25 @@
class="range_picker_style"
@change="rangePickerChange"
v-model="BegindAndEndTime"
v-if="day == 5"
v-if="day == 5"
>
</a-range-picker>
<a-select v-model="day">
<a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option>
<a-select-option value="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 本年度 </a-select-option>
<!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select>
<a-button type="primary" class="addclass" @click="getData">搜索</a-button>
<a-button type="primary" class="addclass" @click="getData"
>搜索</a-button
>
</template>
</Head>
<div class="echarts">
<Brokenline :info="chartsData" v-if="chartsData"/>
<Brokenline :info="chartsData" v-if="chartsData" />
</div>
</div>
<div class="fx">
......@@ -36,11 +38,13 @@
:pagination="false"
:columns="tableHeaders"
:dataSource="tableSourceData"
:scroll="{ y: 590 }"
:scroll="{ y: 590 }"
>
</a-table>
<p class="updateTime">
<i class="fa fa-info-circle"></i>数据更新时间：{{date}}，受数据波动影响，可能会有延迟。
<i class="fa fa-info-circle"></i>数据更新时间：{{
date
}}，受数据波动影响，可能会有延迟。
</p>
</div>
</div>
......@@ -50,16 +54,16 @@
<script>
import Head from "./components/header.vue";
import Brokenline from "./components/line.vue";
import {getTrend} from '@/api/dataAdmin.js'
import moment from 'moment'
import { getTrend } from "@/api/dataAdmin.js";
import moment from "moment";
export default {
name: "PortalAdminVueMakeDataAnalyse",
data() {
return {
day:'0',
date:'',
day: "0",
date: "",
BegindAndEndTime: [],
chartsData:null,
chartsData: null,
tableSourceData: [],
tableHeaders: [
{
......@@ -99,33 +103,33 @@ export default {
Head,
Brokenline,
},
watch:{
day(val){
if (val != 5) this.BegindAndEndTime = []
}
watch: {
day(val) {
if (val != 5) this.BegindAndEndTime = [];
},
},
mounted() {
this.date = moment().format('yyyy-MM-DD hh:mm:ss')
this.getData()
this.date = moment().format("yyyy-MM-DD hh:mm:ss");
this.getData();
},
methods: {
getData(){
getTrend({
selected:this.day == 5 ? null : this.day,
time:this.BegindAndEndTime
}).then(res=>{
this.chartsData = res.data.list
this.tableSourceData.push({
研究对象: `预约次数`,
预约总量: res.data.orderAll,
开放预约天数: res.data.openday,
预约日均值: res.data.prev_num,
整体同比: res.data.tbi,
整体环比: res.data.hbi,
});
})
},
getData() {
getTrend({
selected: this.day == 5 ? null : this.day,
time: this.BegindAndEndTime,
}).then((res) => {
this.chartsData = res.data.list;
this.tableSourceData.push({
研究对象: `预约次数`,
预约总量: res.data.orderAll,
开放预约天数: res.data.openday,
预约日均值: res.data.prev_num,
整体同比: res.data.tbi,
整体环比: res.data.hbi,
});
});
},
rangePickerChange(val) {
console.log(val);
},
......@@ -234,4 +238,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment