Skip to content

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

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

parent 5e8a5879
Show 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 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import { deepClone } from "@/utils/js/common.js"; import { deepClone } from "@/utils/js/common.js";
import lodash from "lodash"; import lodash from "lodash";
import{getStatisticAges} from '@/api/dataAdmin.js' import { getStatisticAges } from "@/api/dataAdmin.js";
export default { export default {
props: { props: {
info: { info: {
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
default: () => [ default: () => [
{ {
value: 200, value: 200,
name: "20一下", name: "20以下",
}, },
{ {
value: 400, value: 400,
...@@ -40,16 +40,30 @@ export default { ...@@ -40,16 +40,30 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
},
}, },
async mounted() { async mounted() {
let res = await getStatisticAges() this.getData();
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);
}, },
methods: { 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 myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts; const echarts = this.$echarts;
let option = { let option = {
...@@ -72,9 +86,9 @@ export default { ...@@ -72,9 +86,9 @@ export default {
xAxis: { xAxis: {
type: "category", type: "category",
data: label, data: label,
axisTick:{ axisTick: {
show:false show: false,
} },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
......
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/components/pie.vue
View file @ 18854792
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import { deepClone } from "@/utils/js/common.js"; import { deepClone } from "@/utils/js/common.js";
import lodash from "lodash"; import lodash from "lodash";
import{getStatisticSexual} from '@/api/dataAdmin.js' import { getStatisticSexual } from "@/api/dataAdmin.js";
export default { export default {
props: { props: {
info: { info: {
...@@ -24,14 +24,31 @@ export default { ...@@ -24,14 +24,31 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
day: {
type: String,
default: () => "0",
},
},
watch: {
day(newval, oldval) {
newval ? this.getData() : "";
}, },
async mounted() { },
let res = await getStatisticSexual() mounted() {
if (res.code != 1) return this.getData();
let value = res.data.map(({idcard_Sex,nums})=>({name:idcard_Sex,value:nums}))
this._initEcharts(value);
}, },
methods: { 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) { _initEcharts(value) {
const myChart = this.$echarts.init(this.$el); const myChart = this.$echarts.init(this.$el);
const echarts = this.$echarts; const echarts = this.$echarts;
...@@ -87,12 +104,12 @@ export default { ...@@ -87,12 +104,12 @@ export default {
rich_green: { rich_green: {
color: "#50CCCB", color: "#50CCCB",
}, },
} },
}, },
label: { label: {
normal: { normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
} },
}, },
labelLine: { labelLine: {
length: 10, length: 10,
......
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/crowdPortrait.vue
View file @ 18854792
...@@ -3,36 +3,47 @@ ...@@ -3,36 +3,47 @@
<div class="diyufenbu"> <div class="diyufenbu">
<Head :title="'地域分布'"> <Head :title="'地域分布'">
<template slot="operation"> <template slot="operation">
<a-range-picker valueFormat="YYYY-MM-DD" class="range_picker_style" @change="rangePickerChange" <a-range-picker
v-model="BegindAndEndTime" v-if="day == 5"> valueFormat="YYYY-MM-DD"
class="range_picker_style"
@change="rangePickerChange"
v-model="BegindAndEndTime"
v-if="day == 5"
>
</a-range-picker> </a-range-picker>
<a-select v-model="day"> <a-select v-model="day">
<a-select-option value="0"> 今天 </a-select-option> <a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </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="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option> <a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option> <a-select-option value="4"> 本年度 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option> <!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select> </a-select>
<a-button type="primary" class="addclass" @click="searchData">搜索</a-button> <a-button type="primary" class="addclass" @click="searchData"
>搜索</a-button
>
</template> </template>
</Head> </Head>
<div class="diyufenbu_box"> <div class="diyufenbu_box">
<div class="_left"> <div class="_left">
<div ref="chart" style="width: 100%;height: 100%;"></div> <div ref="chart" style="width: 100%; height: 100%"></div>
</div> </div>
<ul class="_right"> <ul class="_right">
<li class="list"> <li class="list">
<span style="margin-right: 20px;">排名</span> <span style="margin-right: 20px">排名</span>
<i>地区</i> <i>地区</i>
<b>预约热度</b> <b>预约热度</b>
</li> </li>
<li class="list" v-for="item,index in area" :key="index"> <li class="list" v-for="(item, index) in area" :key="index">
<span style="margin-right: 20px;">NO.{{ index+1 }}</span> <span style="margin-right: 20px">NO.{{ index + 1 }}</span>
<i>{{item.area}}</i> <i>{{ item.area }}</i>
<b> <b>
<a-progress :percent="item.nums" :show-info="false" status="active" /></b> <a-progress
:percent="item.nums"
:show-info="false"
status="active"
/></b>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -40,43 +51,46 @@ ...@@ -40,43 +51,46 @@
<div class="center_box"> <div class="center_box">
<div class="nianling"> <div class="nianling">
<Head :title="'年龄分布'"> </Head> <Head :title="'年龄分布'"> </Head>
<NianlingBar class="echarts" /> <NianlingBar class="echarts" :day="dayValue" />
</div> </div>
<div class="xingbie"> <div class="xingbie">
<Head :title="'性别分布'"> </Head> <Head :title="'性别分布'"> </Head>
<XingbiePie class="echarts" /> <XingbiePie class="echarts" :day="dayValue" ref="ageChild" />
</div> </div>
</div> </div>
<div class="bottom_box"> <div class="bottom_box">
<Head :title="'签到准时率'"> </Head> <Head :title="'签到准时率'"> </Head>
<div class="echarts"> <div class="echarts">
<QiandaoPie class="list" :info="item" v-for="item,index in sign" :key="index" /> <QiandaoPie
class="list"
:info="item"
v-for="(item, index) in sign"
:key="index"
/>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import NianlingBar from "./components/bar.vue"; import NianlingBar from "./components/bar.vue";
import XingbiePie from "./components/pie.vue"; import XingbiePie from "./components/pie.vue";
import QiandaoPie from "./components/pie2.vue"; import QiandaoPie from "./components/pie2.vue";
import Head from "./components/header.vue"; import Head from "./components/header.vue";
import { import { getStatisticArea, getStatisticSignin } from "@/api/dataAdmin.js";
getStatisticArea, import axios from "axios";
getStatisticSignin import * as echarts from "echarts";
} from '@/api/dataAdmin.js' import china from "@/assets/json/china.json";
import axios from 'axios' export default {
import * as echarts from 'echarts'
import china from "@/assets/json/china.json";
export default {
name: "PortalAdminVueCrowdPortrait", name: "PortalAdminVueCrowdPortrait",
data() { data() {
return { return {
day: '0', day: "0",
BegindAndEndTime: [], BegindAndEndTime: [],
area: [], area: [],
sign: [], sign: [],
chart: null chart: null,
dayValue: "",
}; };
}, },
components: { components: {
...@@ -86,66 +100,72 @@ ...@@ -86,66 +100,72 @@
QiandaoPie, QiandaoPie,
}, },
mounted() { mounted() {
this.init(china) this.init(china);
this.getStatisticArea() this.getStatisticArea();
this.getStatisticSignin() this.getStatisticSignin();
this.dayValue = this.day;
}, },
methods: { methods: {
// 搜索 // 搜索
searchData() { searchData() {
this.getStatisticArea() this.getStatisticArea();
this.getStatisticSignin() this.getStatisticSignin();
this.dayValue = this.day;
}, },
async getStatisticArea() { async getStatisticArea() {
let res = await getStatisticArea() let res = await getStatisticArea({
if (res.code != 1) return selected: this.day == 5 ? null : this.day,
this.area = res.data });
if (res.code != 1) return;
this.area = res.data;
}, },
async getStatisticSignin() { async getStatisticSignin() {
let res = await getStatisticSignin() let res = await getStatisticSignin({
if (res.code != 1) return selected: this.day == 5 ? null : this.day,
this.sign = res.data });
if (res.code != 1) return;
this.sign = res.data;
}, },
//初始化 //初始化
init(data) { init(data) {
if (this.chart == null) { if (this.chart == null) {
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
} }
echarts.registerMap('china', data); echarts.registerMap("china", data);
var geoGpsMap = [104.64, 28.75]; var geoGpsMap = [104.64, 28.75];
var geoCoordMap = { var geoCoordMap = {
'江苏': [118.8062, 31.9208], 江苏: [118.8062, 31.9208],
'黑龙江': [127.9688, 45.368], 黑龙江: [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899], 内蒙古: [110.3467, 41.4899],
'吉林': [125.8154, 44.2584], 吉林: [125.8154, 44.2584],
'北京': [116.4551, 40.2539], 北京: [116.4551, 40.2539],
'辽宁': [123.1238, 42.1216], 辽宁: [123.1238, 42.1216],
'河北': [114.4995, 38.1006], 河北: [114.4995, 38.1006],
'天津': [117.4219, 39.4189], 天津: [117.4219, 39.4189],
'山西': [112.3352, 37.9413], 山西: [112.3352, 37.9413],
'陕西': [109.1162, 34.2004], 陕西: [109.1162, 34.2004],
'甘肃': [103.5901, 36.3043], 甘肃: [103.5901, 36.3043],
'宁夏': [106.3586, 38.1775], 宁夏: [106.3586, 38.1775],
'青海': [101.4038, 36.8207], 青海: [101.4038, 36.8207],
'新疆': [87.9236, 43.5883], 新疆: [87.9236, 43.5883],
'四川': [103.9526, 30.7617], 四川: [103.9526, 30.7617],
'重庆': [108.384366, 30.439702], 重庆: [108.384366, 30.439702],
'山东': [117.1582, 36.8701], 山东: [117.1582, 36.8701],
'河南': [113.4668, 34.6234], 河南: [113.4668, 34.6234],
'安徽': [117.29, 32.0581], 安徽: [117.29, 32.0581],
'湖北': [114.3896, 30.6628], 湖北: [114.3896, 30.6628],
'浙江': [119.5313, 29.8773], 浙江: [119.5313, 29.8773],
'福建': [119.4543, 25.9222], 福建: [119.4543, 25.9222],
'江西': [116.0046, 28.6633], 江西: [116.0046, 28.6633],
'湖南': [113.0823, 28.2568], 湖南: [113.0823, 28.2568],
'贵州': [106.6992, 26.7682], 贵州: [106.6992, 26.7682],
'云南': [102.9199, 25.4663], 云南: [102.9199, 25.4663],
'广东': [113.12244, 23.009505], 广东: [113.12244, 23.009505],
'广西': [108.479, 23.1152], 广西: [108.479, 23.1152],
'海南': [110.3893, 19.8516], 海南: [110.3893, 19.8516],
'上海': [121.4648, 31.2891], 上海: [121.4648, 31.2891],
'西藏': [91.141017, 29.668461], 西藏: [91.141017, 29.668461],
'台湾': [121.509062, 25.044332] 台湾: [121.509062, 25.044332],
}; };
var data = []; var data = [];
var mapData = []; var mapData = [];
...@@ -154,36 +174,34 @@ ...@@ -154,36 +174,34 @@
geoGpsMap = geoCoordMap[key]; geoGpsMap = geoCoordMap[key];
} }
const keys = key; const keys = key;
const filters = data.filter(item => { const filters = data.filter((item) => {
return item.name.includes(keys); return item.name.includes(keys);
})[0]; })[0];
mapData.push({ mapData.push({
name: key, name: key,
value: filters ? filters.value : 0 value: filters ? filters.value : 0,
}); });
} }
mapData.sort((a, b) => { mapData.sort((a, b) => {
return a.value - b.value; return a.value - b.value;
}); });
const colors = ['#4a99de', '#1890FF']; const colors = ["#4a99de", "#1890FF"];
var convertData = function(data) { var convertData = function (data) {
var res = []; var res = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]; var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) { if (geoCoord) {
res.push({ res.push({
name: data[i].name, name: data[i].name,
value: geoCoord.concat(data[i].value) value: geoCoord.concat(data[i].value),
}); });
} }
} }
return res; return res;
}; };
var convertToLineData = function(data, gps) { var convertToLineData = function (data, gps) {
var res = []; var res = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var dataItem = data[i]; var dataItem = data[i];
...@@ -193,10 +211,7 @@ ...@@ -193,10 +211,7 @@
res.push({ res.push({
fromName: gps, fromName: gps,
toName: dataItem.name, toName: dataItem.name,
coords: [ coords: [fromCoord, toCoord],
fromCoord,
toCoord
]
}); });
} }
} }
...@@ -205,60 +220,60 @@ ...@@ -205,60 +220,60 @@
let option = { let option = {
// backgroundColor: '#01193f', // backgroundColor: '#01193f',
color: ['#3BD8FF'], //飞线的颜色 color: ["#3BD8FF"], //飞线的颜色
series: [ series: [
// 地图线的动画效果 // 地图线的动画效果
{ {
type: 'lines', type: "lines",
zlevel: 2, zlevel: 2,
effect: { effect: {
show: true, show: true,
period: 4, period: 4,
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'circle', //箭头图标 symbol: "circle", //箭头图标
symbolSize: 5, //图标大小 symbolSize: 5, //图标大小
}, },
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
opacity: 0.05, //尾迹线条透明度 opacity: 0.05, //尾迹线条透明度
curveness: 0.01 //尾迹线条曲直度 curveness: 0.01, //尾迹线条曲直度
} },
}, },
tooltip: { tooltip: {
show: false show: false,
}, },
data: convertToLineData(mapData, geoGpsMap) data: convertToLineData(mapData, geoGpsMap),
}, },
// 地图点的动画效果 // 地图点的动画效果
{ {
type: 'effectScatter', type: "effectScatter",
coordinateSystem: 'geo', coordinateSystem: "geo",
zlevel: 2, zlevel: 2,
data: convertData(mapData).map(item => { data: convertData(mapData).map((item) => {
return { return {
name: item.name, name: item.name,
value: item.value.splice(0, 2) value: item.value.splice(0, 2),
}; };
}), }),
// showEffectOn: 'render', // showEffectOn: 'render',
rippleEffect: { rippleEffect: {
period: 6, //动画时间，值越小速度越快 period: 6, //动画时间，值越小速度越快
brushType: 'fill', //波纹绘制方式 stroke, fill brushType: "fill", //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大 scale: 4, //波纹圆环最大限制，值越大波纹越大
color: '#3BD8FF' color: "#3BD8FF",
}, },
// hoverAnimation: true, // hoverAnimation: true,
symbol: 'circle', symbol: "circle",
symbolSize: 5, symbolSize: 5,
itemStyle: { itemStyle: {
normal: { normal: {
show: true, show: true,
color: '#3BD8FF', color: "#3BD8FF",
// shadowBlur: 20, // shadowBlur: 20,
// shadowColor: '#333' // shadowColor: '#333'
} },
} },
}, },
{ {
...@@ -269,7 +284,7 @@ ...@@ -269,7 +284,7 @@
period: 4, period: 4,
brushType: "fill", brushType: "fill",
scale: 4, scale: 4,
color: '#ff0000' color: "#ff0000",
}, },
label: { label: {
normal: { normal: {
...@@ -280,122 +295,127 @@ ...@@ -280,122 +295,127 @@
formatter: "宜宾市", formatter: "宜宾市",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: '16px' fontSize: "16px",
} },
}, },
emphasis: { emphasis: {
show: true show: true,
} },
}, },
symbol: "circle", symbol: "circle",
symbolSize: 5, symbolSize: 5,
itemStyle: { itemStyle: {
normal: { normal: {
show: true, show: true,
color: "#ff0000" color: "#ff0000",
}
}, },
data: [{ },
name: '宜宾市', data: [
value: [104.64, 28.75] {
}], name: "宜宾市",
value: [104.64, 28.75],
},
],
}, },
// 地图？ // 地图？
{ {
type: 'map', type: "map",
mapType: 'china', mapType: "china",
top: '30%', top: "30%",
left: '25%', left: "25%",
zoom: 1.7, zoom: 1.7,
label: { // 地图上的文字 label: {
// 地图上的文字
normal: { normal: {
show: false, show: false,
textStyle: { textStyle: {
color: '#ffffff' color: "#ffffff",
} },
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: { areaColor: {
image: require('@/assets/images/Banner.png'), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 image: require("@/assets/images/Banner.png"), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}, },
borderColor: '#76C6E7', borderColor: "#76C6E7",
borderWidth: 1, borderWidth: 1,
shadowColor: '#CCEAFD', shadowColor: "#CCEAFD",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
emphasis: { // 高亮时区域颜色 emphasis: {
// 高亮时区域颜色
itemStyle: { itemStyle: {
areaColor: '#1890FF', areaColor: "#1890FF",
}, },
label: { label: {
color: '#ffffff' color: "#ffffff",
} },
}, },
select: { select: {
itemStyle: { itemStyle: {
areaColor: '#1890FF' areaColor: "#1890FF",
}, },
label: { label: {
color: '#ffffff' color: "#ffffff",
} },
}, },
data: data.map((item, index) => { data: data.map((item, index) => {
return { return {
name: item.name, name: item.name,
value: item.value, value: item.value,
itemStyle: { itemStyle: {
areaColor: item.value > 10 ? colors[1] : colors[0] areaColor: item.value > 10 ? colors[1] : colors[0],
} },
}; };
}),
}) },
}
], ],
geo: { geo: {
map: 'china', map: "china",
top: '30%', top: "30%",
aspectScale: 0.75, // 长宽比 aspectScale: 0.75, // 长宽比
left: '25%', left: "25%",
zoom: 1.7, zoom: 1.7,
roam: false, roam: false,
itemStyle: { itemStyle: {
normal: { normal: {
shadowColor: '#CCEAFD', shadowColor: "#CCEAFD",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0 shadowOffsetY: 0,
} },
}, },
regions: [{ regions: [
name: '南海诸岛', {
name: "南海诸岛",
itemStyle: { itemStyle: {
normal: { normal: {
opacity: 0, opacity: 0,
label: { label: {
show: false show: false,
} },
} },
} },
}] },
} ],
},
}; };
this.chart.setOption(option); this.chart.setOption(option);
}
}, },
}; },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.CrowdPortrait-Container { .CrowdPortrait-Container {
background: #f0f2f5; background: #f0f2f5;
&>.diyufenbu { & > .diyufenbu {
background: #fff; background: #fff;
.diyufenbu_box { .diyufenbu_box {
...@@ -403,18 +423,18 @@ ...@@ -403,18 +423,18 @@
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
&>._left { & > ._left {
flex: 1; flex: 1;
height: 440px; height: 440px;
// background: #fac; // background: #fac;
} }
&>._right { & > ._right {
width: 40%; width: 40%;
padding: 15px; padding: 15px;
.list { .list {
&+.list { & + .list {
margin-top: 15px; margin-top: 15px;
} }
...@@ -451,13 +471,13 @@ ...@@ -451,13 +471,13 @@
} }
} }
&>.center_box { & > .center_box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
margin-top: 20px; margin-top: 20px;
&>.nianling { & > .nianling {
height: 430px; height: 430px;
width: 50%; width: 50%;
background: #fff; background: #fff;
...@@ -470,7 +490,7 @@ ...@@ -470,7 +490,7 @@
} }
} }
&>.xingbie { & > .xingbie {
width: 50%; width: 50%;
width: 50%; width: 50%;
background: #fff; background: #fff;
...@@ -483,7 +503,7 @@ ...@@ -483,7 +503,7 @@
} }
} }
&>.bottom_box { & > .bottom_box {
height: 480px; height: 480px;
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
...@@ -587,5 +607,5 @@ ...@@ -587,5 +607,5 @@
transition: 100ms; transition: 100ms;
} }
} }
} }
</style> </style>
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/heatRanking.vue
View file @ 18854792
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
<a-select-option value="0"> 今天 </a-select-option> <a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </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="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option> <a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option> <a-select-option value="4"> 本年度 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option> <!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select> </a-select>
<a-button type="primary" class="addclass" @click="getData">搜索</a-button> <a-button type="primary" class="addclass" @click="getData">搜索</a-button>
......
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/makeTrendResearch.vue
View file @ 18854792
...@@ -15,16 +15,18 @@ ...@@ -15,16 +15,18 @@
<a-select-option value="0"> 今天 </a-select-option> <a-select-option value="0"> 今天 </a-select-option>
<a-select-option value="1"> 近7天 </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="2"> 近30天 </a-select-option>
<a-select-option value="3"> 近90天 </a-select-option> <a-select-option value="3"> 近3月 </a-select-option>
<a-select-option value="4"> 近180天 </a-select-option> <a-select-option value="4"> 本年度 </a-select-option>
<a-select-option value="5"> 自定义 </a-select-option> <!-- <a-select-option value="5"> 自定义 </a-select-option> -->
</a-select> </a-select>
<a-button type="primary" class="addclass" @click="getData">搜索</a-button> <a-button type="primary" class="addclass" @click="getData"
>搜索</a-button
>
</template> </template>
</Head> </Head>
<div class="echarts"> <div class="echarts">
<Brokenline :info="chartsData" v-if="chartsData"/> <Brokenline :info="chartsData" v-if="chartsData" />
</div> </div>
</div> </div>
<div class="fx"> <div class="fx">
...@@ -40,7 +42,9 @@ ...@@ -40,7 +42,9 @@
> >
</a-table> </a-table>
<p class="updateTime"> <p class="updateTime">
<i class="fa fa-info-circle"></i>数据更新时间：{{date}}，受数据波动影响，可能会有延迟。 <i class="fa fa-info-circle"></i>数据更新时间：{{
date
}}，受数据波动影响，可能会有延迟。
</p> </p>
</div> </div>
</div> </div>
...@@ -50,16 +54,16 @@ ...@@ -50,16 +54,16 @@
<script> <script>
import Head from "./components/header.vue"; import Head from "./components/header.vue";
import Brokenline from "./components/line.vue"; import Brokenline from "./components/line.vue";
import {getTrend} from '@/api/dataAdmin.js' import { getTrend } from "@/api/dataAdmin.js";
import moment from 'moment' import moment from "moment";
export default { export default {
name: "PortalAdminVueMakeDataAnalyse", name: "PortalAdminVueMakeDataAnalyse",
data() { data() {
return { return {
day:'0', day: "0",
date:'', date: "",
BegindAndEndTime: [], BegindAndEndTime: [],
chartsData:null, chartsData: null,
tableSourceData: [], tableSourceData: [],
tableHeaders: [ tableHeaders: [
{ {
...@@ -99,23 +103,23 @@ export default { ...@@ -99,23 +103,23 @@ export default {
Head, Head,
Brokenline, Brokenline,
}, },
watch:{ watch: {
day(val){ day(val) {
if (val != 5) this.BegindAndEndTime = [] if (val != 5) this.BegindAndEndTime = [];
} },
}, },
mounted() { mounted() {
this.date = moment().format('yyyy-MM-DD hh:mm:ss') this.date = moment().format("yyyy-MM-DD hh:mm:ss");
this.getData() this.getData();
}, },
methods: { methods: {
getData(){ getData() {
getTrend({ getTrend({
selected:this.day == 5 ? null : this.day, selected: this.day == 5 ? null : this.day,
time:this.BegindAndEndTime time: this.BegindAndEndTime,
}).then(res=>{ }).then((res) => {
this.chartsData = res.data.list this.chartsData = res.data.list;
this.tableSourceData.push({ this.tableSourceData.push({
研究对象: `预约次数`, 研究对象: `预约次数`,
预约总量: res.data.orderAll, 预约总量: res.data.orderAll,
...@@ -124,7 +128,7 @@ export default { ...@@ -124,7 +128,7 @@ export default {
整体同比: res.data.tbi, 整体同比: res.data.tbi,
整体环比: res.data.hbi, 整体环比: res.data.hbi,
}); });
}) });
}, },
rangePickerChange(val) { rangePickerChange(val) {
console.log(val); console.log(val);
......
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