定时5秒切换视图
This commit is contained in:
熊丽君
@ -3,12 +3,12 @@
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<!-- <div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="bg1"></div> -->
|
||||
|
||||
<div class="center1">
|
||||
<!-- <div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center2">
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
|
||||
@ -5,16 +5,28 @@
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
<div style="text-align: right; padding-right: 20px">
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
:page-size="7"
|
||||
:current-page.sync="currentPage1"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<!-- <div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>总完成任务/完成率</span>
|
||||
<i class="num"
|
||||
>{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
|
||||
>
|
||||
<progressBar :percentage="res.map.cate" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
@ -54,6 +66,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 1,
|
||||
total: 30,
|
||||
titData: [],
|
||||
valData: [],
|
||||
time: null,
|
||||
data: [
|
||||
{ value: 154, name: "类别一" },
|
||||
{ value: 775, name: "类别二" },
|
||||
@ -78,73 +95,57 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
this.start();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
beforeDestroy() {
|
||||
this.end();
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.time = setInterval(() => {
|
||||
let size = this.currentPage1 + 1;
|
||||
if (size * 6 > this.total) size = 1;
|
||||
this.handleCurrentChange(size);
|
||||
}, 5000);
|
||||
},
|
||||
end() {
|
||||
if (this.time) {
|
||||
clearInterval(this.time);
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage1 = val;
|
||||
this.setPageData(val);
|
||||
},
|
||||
setOptions(val) {
|
||||
request({
|
||||
url: "/hx/cockpitOverview/businessResponsibility",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
this.res = res.data;
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
for (let i = 0; i < this.res.list.length; i++) {
|
||||
const item = this.res.list[i];
|
||||
titData.push(item.indicator_name);
|
||||
valData.push({ value: item.cate, name: item.indicator_name });
|
||||
this.titData.push(item.indicator_name);
|
||||
this.valData.push({ value: item.cate, name: item.indicator_name });
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, "macarons");
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
data: titData,
|
||||
orient: "vertical",
|
||||
// left: '60%',
|
||||
right: "10%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
pageIconColor: "#fff",
|
||||
pageIconInactiveColor: "#ccc",
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "概括",
|
||||
type: "pie",
|
||||
radius: [0, "85%"],
|
||||
center: ["35%", "50%"],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "inner",
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: valData,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.setPageData(val);
|
||||
});
|
||||
},
|
||||
|
||||
setPageData(val) {
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
if (!val) {
|
||||
titData = this.titData.slice(0, 7);
|
||||
valData = this.valData.slice(0, 7);
|
||||
} else {
|
||||
titData = this.titData.slice((val - 1) * 7, 7 * val);
|
||||
valData = this.valData.slice((val - 1) * 7, 7 * val);
|
||||
}
|
||||
|
||||
const calcAverageValue = (data, name) => {
|
||||
const items = data.filter((d) => d.name === name);
|
||||
@ -152,7 +153,54 @@ export default {
|
||||
? items.reduce((a, b) => a + b.value, 0) / items.length
|
||||
: "-";
|
||||
};
|
||||
this.chart = echarts.init(this.$refs.left1, "macarons");
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
data: titData,
|
||||
orient: "vertical",
|
||||
// left: '60%',
|
||||
right: "10%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
pageIconColor: "#fff",
|
||||
pageIconInactiveColor: "#ccc",
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "概括",
|
||||
type: "pie",
|
||||
radius: [0, "85%"],
|
||||
center: ["35%", "50%"],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "inner",
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: valData,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
|
||||
initLine() {
|
||||
request({
|
||||
url: "/hx/cockpitOverview/revenueProfile",
|
||||
@ -325,6 +373,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-pagination button {
|
||||
display: none;
|
||||
color: #fff !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
::v-deep.el-pagination button:disabled {
|
||||
color: #ccc !important;
|
||||
}
|
||||
::v-deep.el-pagination.is-background .el-pager li {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
background: rgba(145, 213, 254, 0.2) !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%) !important;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
layout="prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
:page-size="2"
|
||||
:page-size="1"
|
||||
:current-page.sync="currentPage1"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
@ -165,6 +165,7 @@ export default {
|
||||
currentPage1: 1,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
time: null,
|
||||
index: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
@ -179,9 +180,12 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
this.start();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
beforeDestroy() {
|
||||
this.end();
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
@ -196,6 +200,18 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.time = setInterval(() => {
|
||||
let size = this.currentPage1 + 1;
|
||||
if (size > this.total) size = 1;
|
||||
this.handleCurrentChange(size);
|
||||
}, 5000);
|
||||
},
|
||||
end() {
|
||||
if (this.time) {
|
||||
clearInterval(this.time);
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.request({
|
||||
url: "/hx/operating/getHxStrategyIndexPic",
|
||||
@ -206,6 +222,7 @@ export default {
|
||||
this.dataList = res.data;
|
||||
if (this.total == 0) return false;
|
||||
this.setData(res.data.slice(0, 2));
|
||||
this.setOddEchars(res.data.slice(0, 1));
|
||||
// if (res.data.length > 2) {
|
||||
// list = res.data.splice(0, 2);
|
||||
// } else {
|
||||
@ -216,8 +233,10 @@ export default {
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage1 = val;
|
||||
const data = this.dataList.slice(val * 2 - 2, val * 2);
|
||||
this.setData(data);
|
||||
// const data = this.dataList.slice(val * 2 - 2, val * 2);
|
||||
const data = this.dataList.slice(val - 1, val);
|
||||
// this.setData(data);
|
||||
this.setOddEchars(data);
|
||||
},
|
||||
|
||||
setData(list) {
|
||||
|
||||
Reference in New Issue
Block a user