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 @@ ...@@ -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",
...@@ -105,4 +119,4 @@ export default { ...@@ -105,4 +119,4 @@ export default {
}, },
}, },
}; };
</script> </script>
\ No newline at end of file
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() { mounted() {
let res = await getStatisticSexual() this.getData();
if (res.code != 1) return
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,13 +104,13 @@ export default { ...@@ -87,13 +104,13 @@ export default {
rich_green: { rich_green: {
color: "#50CCCB", color: "#50CCCB",
}, },
} },
},
label: {
normal: {
formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
},
}, },
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: { labelLine: {
length: 10, length: 10,
length2: 60, length2: 60,
...@@ -119,4 +136,4 @@ export default { ...@@ -119,4 +136,4 @@ export default {
}, },
}, },
}; };
</script> </script>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataAdmin/components/serviceDataAnalyse/crowdPortrait.vue
View file @ 18854792
<template> <template>
<div class="CrowdPortrait-Container"> <div class="CrowdPortrait-Container">
<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"
</a-range-picker> class="range_picker_style"
<a-select v-model="day"> @change="rangePickerChange"
<a-select-option value="0"> 今天 </a-select-option> v-model="BegindAndEndTime"
<a-select-option value="1"> 近7天 </a-select-option> v-if="day == 5"
<a-select-option value="2"> 近30天 </a-select-option> >
<a-select-option value="3"> 近90天 </a-select-option> </a-range-picker>
<a-select-option value="4"> 近180天 </a-select-option> <a-select v-model="day">
<a-select-option value="5"> 自定义 </a-select-option> <a-select-option value="0"> 今天 </a-select-option>
</a-select> <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> <a-button type="primary" class="addclass" @click="searchData"
</template> >搜索</a-button
</Head> >
<div class="diyufenbu_box"> </template>
<div class="_left"> </Head>
<div ref="chart" style="width: 100%;height: 100%;"></div> <div class="diyufenbu_box">
</div> <div class="_left">
<ul class="_right"> <div ref="chart" style="width: 100%; height: 100%"></div>
<li class="list"> </div>
<span style="margin-right: 20px;">排名</span> <ul class="_right">
<i>地区</i> <li class="list">
<b>预约热度</b> <span style="margin-right: 20px">排名</span>
</li> <i>地区</i>
<li class="list" v-for="item,index in area" :key="index"> <b>预约热度</b>
<span style="margin-right: 20px;">NO.{{ index+1 }}</span> </li>
<i>{{item.area}}</i> <li class="list" v-for="(item, index) in area" :key="index">
<b> <span style="margin-right: 20px">NO.{{ index + 1 }}</span>
<a-progress :percent="item.nums" :show-info="false" status="active" /></b> <i>{{ item.area }}</i>
</li> <b>
</ul> <a-progress
</div> :percent="item.nums"
</div> :show-info="false"
<div class="center_box"> status="active"
<div class="nianling"> /></b>
<Head :title="'年龄分布'"> </Head> </li>
<NianlingBar class="echarts" /> </ul>
</div> </div>
<div class="xingbie"> </div>
<Head :title="'性别分布'"> </Head> <div class="center_box">
<XingbiePie class="echarts" /> <div class="nianling">
</div> <Head :title="'年龄分布'"> </Head>
</div> <NianlingBar class="echarts" :day="dayValue" />
<div class="bottom_box"> </div>
<Head :title="'签到准时率'"> </Head> <div class="xingbie">
<div class="echarts"> <Head :title="'性别分布'"> </Head>
<QiandaoPie class="list" :info="item" v-for="item,index in sign" :key="index" /> <XingbiePie class="echarts" :day="dayValue" ref="ageChild" />
</div> </div>
</div> </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> </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' name: "PortalAdminVueCrowdPortrait",
import china from "@/assets/json/china.json"; data() {
export default { return {
name: "PortalAdminVueCrowdPortrait", day: "0",
data() { BegindAndEndTime: [],
return { area: [],
day: '0', sign: [],
BegindAndEndTime: [], chart: null,
area: [], dayValue: "",
sign: [], };
chart: null },
}; components: {
}, Head,
components: { NianlingBar,
Head, XingbiePie,
NianlingBar, QiandaoPie,
XingbiePie, },
QiandaoPie, mounted() {
}, this.init(china);
mounted() { this.getStatisticArea();
this.init(china) this.getStatisticSignin();
this.getStatisticArea() this.dayValue = this.day;
this.getStatisticSignin() },
}, 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;
async getStatisticSignin() { this.area = res.data;
let res = await getStatisticSignin() },
if (res.code != 1) return async getStatisticSignin() {
this.sign = res.data let res = await getStatisticSignin({
}, selected: this.day == 5 ? null : this.day,
//初始化 });
init(data) { if (res.code != 1) return;
if (this.chart == null) { this.sign = res.data;
this.chart = echarts.init(this.$refs.chart); },
} //初始化
echarts.registerMap('china', data); init(data) {
var geoGpsMap = [104.64, 28.75]; if (this.chart == null) {
var geoCoordMap = { this.chart = echarts.init(this.$refs.chart);
'江苏': [118.8062, 31.9208], }
'黑龙江': [127.9688, 45.368], echarts.registerMap("china", data);
'内蒙古': [110.3467, 41.4899], var geoGpsMap = [104.64, 28.75];
'吉林': [125.8154, 44.2584], var geoCoordMap = {
'北京': [116.4551, 40.2539], 江苏: [118.8062, 31.9208],
'辽宁': [123.1238, 42.1216], 黑龙江: [127.9688, 45.368],
'河北': [114.4995, 38.1006], 内蒙古: [110.3467, 41.4899],
'天津': [117.4219, 39.4189], 吉林: [125.8154, 44.2584],
'山西': [112.3352, 37.9413], 北京: [116.4551, 40.2539],
'陕西': [109.1162, 34.2004], 辽宁: [123.1238, 42.1216],
'甘肃': [103.5901, 36.3043], 河北: [114.4995, 38.1006],
'宁夏': [106.3586, 38.1775], 天津: [117.4219, 39.4189],
'青海': [101.4038, 36.8207], 山西: [112.3352, 37.9413],
'新疆': [87.9236, 43.5883], 陕西: [109.1162, 34.2004],
'四川': [103.9526, 30.7617], 甘肃: [103.5901, 36.3043],
'重庆': [108.384366, 30.439702], 宁夏: [106.3586, 38.1775],
'山东': [117.1582, 36.8701], 青海: [101.4038, 36.8207],
'河南': [113.4668, 34.6234], 新疆: [87.9236, 43.5883],
'安徽': [117.29, 32.0581], 四川: [103.9526, 30.7617],
'湖北': [114.3896, 30.6628], 重庆: [108.384366, 30.439702],
'浙江': [119.5313, 29.8773], 山东: [117.1582, 36.8701],
'福建': [119.4543, 25.9222], 河南: [113.4668, 34.6234],
'江西': [116.0046, 28.6633], 安徽: [117.29, 32.0581],
'湖南': [113.0823, 28.2568], 湖北: [114.3896, 30.6628],
'贵州': [106.6992, 26.7682], 浙江: [119.5313, 29.8773],
'云南': [102.9199, 25.4663], 福建: [119.4543, 25.9222],
'广东': [113.12244, 23.009505], 江西: [116.0046, 28.6633],
'广西': [108.479, 23.1152], 湖南: [113.0823, 28.2568],
'海南': [110.3893, 19.8516], 贵州: [106.6992, 26.7682],
'上海': [121.4648, 31.2891], 云南: [102.9199, 25.4663],
'西藏': [91.141017, 29.668461], 广东: [113.12244, 23.009505],
'台湾': [121.509062, 25.044332] 广西: [108.479, 23.1152],
}; 海南: [110.3893, 19.8516],
var data = []; 上海: [121.4648, 31.2891],
var mapData = []; 西藏: [91.141017, 29.668461],
for (var key in geoCoordMap) { 台湾: [121.509062, 25.044332],
if (name.includes(key)) { };
geoGpsMap = geoCoordMap[key]; var data = [];
} var mapData = [];
const keys = key; for (var key in geoCoordMap) {
const filters = data.filter(item => { if (name.includes(key)) {
return item.name.includes(keys); geoGpsMap = geoCoordMap[key];
})[0]; }
const keys = key;
const filters = data.filter((item) => {
return item.name.includes(keys);
})[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 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 = []; type: "effectScatter",
for (var i = 0; i < data.length; i++) { coordinateSystem: "geo",
var geoCoord = geoCoordMap[data[i].name]; zlevel: 2,
if (geoCoord) { rippleEffect: {
res.push({ period: 4,
name: data[i].name, brushType: "fill",
value: geoCoord.concat(data[i].value) scale: 4,
}); color: "#ff0000",
} },
} label: {
return res; normal: {
}; show: false,
var convertToLineData = function(data, gps) { position: "top",
var res = []; // offset: [5, 0], //偏移设置
for (var i = 0; i < data.length; i++) { color: "#ff0000",
var dataItem = data[i]; formatter: "宜宾市",
var fromCoord = geoCoordMap[dataItem.name]; textStyle: {
var toCoord = gps; // gps：‘中心点’ color: "#fff",
if (fromCoord && toCoord) { fontSize: "16px",
res.push({ },
fromName: gps, },
toName: dataItem.name, emphasis: {
coords: [ show: true,
fromCoord, },
toCoord },
] symbol: "circle",
}); symbolSize: 5,
} itemStyle: {
} normal: {
return res; show: true,
}; color: "#ff0000",
},
},
data: [
{
name: "宜宾市",
value: [104.64, 28.75],
},
],
},
let option = { // 地图？
// backgroundColor: '#01193f', {
color: ['#3BD8FF'], //飞线的颜色 type: "map",
series: [ mapType: "china",
// 地图线的动画效果 top: "30%",
{ left: "25%",
type: 'lines', zoom: 1.7,
zlevel: 2, label: {
effect: { // 地图上的文字
show: true, normal: {
period: 4, show: false,
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 textStyle: {
symbol: 'circle', //箭头图标 color: "#ffffff",
symbolSize: 5, //图标大小 },
}, },
lineStyle: { },
normal: { itemStyle: {
width: 2, normal: {
opacity: 0.05, //尾迹线条透明度 areaColor: {
curveness: 0.01 //尾迹线条曲直度 image: require("@/assets/images/Banner.png"), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
} repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}, },
tooltip: { borderColor: "#76C6E7",
show: false borderWidth: 1,
}, shadowColor: "#CCEAFD",
data: convertToLineData(mapData, geoGpsMap) shadowOffsetX: 0,
}, shadowOffsetY: 0,
// 地图点的动画效果 shadowBlur: 0,
{ },
type: 'effectScatter', },
coordinateSystem: 'geo', emphasis: {
zlevel: 2, // 高亮时区域颜色
data: convertData(mapData).map(item => { itemStyle: {
return { areaColor: "#1890FF",
name: item.name, },
value: item.value.splice(0, 2) label: {
}; color: "#ffffff",
}), },
// showEffectOn: 'render', },
rippleEffect: { select: {
period: 6, //动画时间，值越小速度越快 itemStyle: {
brushType: 'fill', //波纹绘制方式 stroke, fill areaColor: "#1890FF",
scale: 4, //波纹圆环最大限制，值越大波纹越大 },
color: '#3BD8FF' label: {
}, color: "#ffffff",
// hoverAnimation: true, },
symbol: 'circle', },
symbolSize: 5, data: data.map((item, index) => {
itemStyle: { return {
normal: { name: item.name,
show: true, value: item.value,
color: '#3BD8FF', itemStyle: {
// shadowBlur: 20, areaColor: item.value > 10 ? colors[1] : colors[0],
// shadowColor: '#333' },
} };
} }),
}, },
],
{ geo: {
type: "effectScatter", map: "china",
coordinateSystem: "geo", top: "30%",
zlevel: 2, aspectScale: 0.75, // 长宽比
rippleEffect: { left: "25%",
period: 4, zoom: 1.7,
brushType: "fill", roam: false,
scale: 4, itemStyle: {
color: '#ff0000' normal: {
}, shadowColor: "#CCEAFD",
label: { shadowOffsetX: 0,
normal: { shadowOffsetY: 0,
show: false, },
position: "top", },
// offset: [5, 0], //偏移设置 regions: [
color: "#ff0000", {
formatter: "宜宾市", name: "南海诸岛",
textStyle: { itemStyle: {
color: "#fff", normal: {
fontSize: '16px' opacity: 0,
} label: {
}, show: false,
emphasis: { },
show: true },
} },
}, },
symbol: "circle", ],
symbolSize: 5, },
itemStyle: { };
normal: { this.chart.setOption(option);
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);
}
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.CrowdPortrait-Container { .CrowdPortrait-Container {
background: #f0f2f5; background: #f0f2f5;
& > .diyufenbu {
background: #fff;
&>.diyufenbu { .diyufenbu_box {
background: #fff; display: flex;
align-items: stretch;
justify-content: space-between;
.diyufenbu_box { & > ._left {
display: flex; flex: 1;
align-items: stretch; height: 440px;
justify-content: space-between; // background: #fac;
}
&>._left { & > ._right {
flex: 1; width: 40%;
height: 440px; padding: 15px;
// background: #fac;
}
&>._right { .list {
width: 40%; & + .list {
padding: 15px; margin-top: 15px;
}
.list { &:last-child {
&+.list { // padding-bottom: 20px;
margin-top: 15px; // border-bottom: 1px solid #eee;
} }
&:last-child { display: flex;
// padding-bottom: 20px; justify-content: flex-start;
// border-bottom: 1px solid #eee; align-items: center;
}
display: flex; span {
justify-content: flex-start; text-align: left;
align-items: center; width: 10%;
}
span { i {
text-align: left; font-style: normal;
width: 10%; text-align: left;
} width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i { b {
font-style: normal; font-weight: normal;
text-align: left; text-align: left;
width: 30%; width: 60%;
overflow: hidden; }
text-overflow: ellipsis; }
white-space: nowrap; }
} }
}
b { & > .center_box {
font-weight: normal; display: flex;
text-align: left; justify-content: space-between;
width: 60%; align-items: stretch;
} margin-top: 20px;
}
}
}
}
&>.center_box { & > .nianling {
display: flex; height: 430px;
justify-content: space-between; width: 50%;
align-items: stretch; background: #fff;
margin-top: 20px; margin-right: 20px;
display: flex;
flex-direction: column;
&>.nianling { .echarts {
height: 430px; flex: 1;
width: 50%; }
background: #fff; }
margin-right: 20px;
display: flex;
flex-direction: column;
.echarts { & > .xingbie {
flex: 1; width: 50%;
} width: 50%;
} background: #fff;
display: flex;
flex-direction: column;
&>.xingbie { .echarts {
width: 50%; flex: 1;
width: 50%; }
background: #fff; }
display: flex; }
flex-direction: column;
.echarts { & > .bottom_box {
flex: 1; height: 480px;
} margin-top: 20px;
} width: 100%;
} background: #fff;
display: flex;
flex-direction: column;
&>.bottom_box { .echarts {
height: 480px; flex: 1;
margin-top: 20px; display: flex;
width: 100%; flex-wrap: wrap;
background: #fff;
display: flex;
flex-direction: column;
.echarts { // align-items: stretch;
flex: 1; .list {
display: flex; // background: #caf;
flex-wrap: wrap; 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; &:active {
.list { letter-spacing: 3px;
// background: #caf; background-color: #7d5cf9;
display: inline-block !important; color: hsl(0, 0%, 100%);
width: 20%; box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
height: 50%; transform: translateY(2px);
// margin: 10px; transition: 100ms;
// width: 333px; }
// height: 216px; }
} }
} </style>
}
.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
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
...@@ -8,23 +8,25 @@ ...@@ -8,23 +8,25 @@
class="range_picker_style" class="range_picker_style"
@change="rangePickerChange" @change="rangePickerChange"
v-model="BegindAndEndTime" v-model="BegindAndEndTime"
v-if="day == 5" 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="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">
...@@ -36,11 +38,13 @@ ...@@ -36,11 +38,13 @@
:pagination="false" :pagination="false"
:columns="tableHeaders" :columns="tableHeaders"
:dataSource="tableSourceData" :dataSource="tableSourceData"
:scroll="{ y: 590 }" :scroll="{ y: 590 }"
> >
</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,33 +103,33 @@ export default { ...@@ -99,33 +103,33 @@ 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,
开放预约天数: res.data.openday, 开放预约天数: res.data.openday,
预约日均值: res.data.prev_num, 预约日均值: res.data.prev_num,
整体同比: res.data.tbi, 整体同比: res.data.tbi,
整体环比: res.data.hbi, 整体环比: res.data.hbi,
}); });
}) });
}, },
rangePickerChange(val) { rangePickerChange(val) {
console.log(val); console.log(val);
}, },
...@@ -234,4 +238,4 @@ export default { ...@@ -234,4 +238,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
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