173 lines
4.3 KiB
Vue
173 lines
4.3 KiB
Vue
<template>
|
||
<div class="trend">
|
||
<content-title title="部门发布能力被调用趋势">
|
||
<div class="button">
|
||
<div
|
||
v-for="(item, idx) in titles"
|
||
:key="item"
|
||
@click="handleTitleSwitch(idx)"
|
||
class="top-title"
|
||
:class="{ active: idx == selectedTitle }"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</content-title>
|
||
<div id="trendId" class="trend-echart"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { trendLineChart } from './lineOption'
|
||
import contentTitle from './content-title'
|
||
import * as Apis from '../api'
|
||
import moment from 'moment'
|
||
export default {
|
||
data () {
|
||
return {
|
||
titles: ['近七日', '月度'],
|
||
selectedTitle: 0,
|
||
trendChartData: {},
|
||
startDate: '',
|
||
endDate: Math.round(new Date() / 1000),
|
||
ydata: [],
|
||
xaxis: []
|
||
}
|
||
},
|
||
components: {
|
||
contentTitle
|
||
},
|
||
mounted () {
|
||
this.initChart()
|
||
},
|
||
watch: {
|
||
selectedTitle: {
|
||
handler: function (newVal, oldVal) {
|
||
this.startDate = this.getData(newVal == 0 ? 7 : 30)
|
||
this.ydata = this.getday2(this.selectedTitle === 0 ? 7 : 30)
|
||
this.ydata.map((item) => {
|
||
this.xaxis.push(0)
|
||
})
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回最近七天的日期
|
||
getday2 (index) {
|
||
const days = []
|
||
var Dates = new Date()
|
||
for (let i = 0; i <= 24 * (index - 1); i += 24) {
|
||
// 今天加上前6天
|
||
const dateItem = new Date(Dates.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
|
||
const y = dateItem.getFullYear() // 获取年份
|
||
let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
|
||
let d = dateItem.getDate() // 获取日期
|
||
m = this.addDate0(m) // 给为单数的月份补零
|
||
d = this.addDate0(d) // 给为单数的日期补零
|
||
const valueItem = y + '-' + m + '-' + d // 组合
|
||
days.unshift(valueItem) // 添加至数组
|
||
}
|
||
|
||
return days
|
||
},
|
||
|
||
// 给日期加0
|
||
addDate0 (time) {
|
||
if (time.toString().length == 1) {
|
||
time = '0' + time.toString()
|
||
}
|
||
return time
|
||
},
|
||
// 发布动态
|
||
initChart () {
|
||
Apis.getByDept(
|
||
{
|
||
startDate: this.startDate,
|
||
endDate: this.endDate
|
||
},
|
||
(res) => {
|
||
if (res.data.data && res.data.data.length > 0) {
|
||
this.data = res.data.data[0].values
|
||
this.data.map((item) => {
|
||
const time = moment(item[0] * 1000).format('YYYY-MM-DD')
|
||
this.ydata.map((itemSon, indexSon) => {
|
||
if (itemSon === time) {
|
||
this.xaxis[indexSon] = parseInt(item[1])
|
||
}
|
||
})
|
||
})
|
||
this.trendChartData = {
|
||
xaxis: this.ydata,
|
||
ydata: this.xaxis
|
||
}
|
||
} else {
|
||
this.trendChartData = {
|
||
xaxis: this.ydata,
|
||
ydata: this.xaxis
|
||
}
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
trendLineChart('trendId', this.trendChartData)
|
||
})
|
||
},
|
||
(err) => {
|
||
|
||
}
|
||
)
|
||
},
|
||
handleTitleSwitch (idx) {
|
||
this.selectedTitle = idx
|
||
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30)
|
||
|
||
this.initChart()
|
||
},
|
||
getData (aa) {
|
||
const date1 = new Date()
|
||
const time1 =
|
||
date1.getFullYear() +
|
||
'-' +
|
||
(date1.getMonth() + 1) +
|
||
'-' +
|
||
date1.getDate() // time1表示当前时间
|
||
const date2 = new Date(date1)
|
||
date2.setDate(date1.getDate() - aa)
|
||
const time2 = Math.round(date2 / 1000)
|
||
return time2
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.trend {
|
||
width: 516px;
|
||
height: 335px;
|
||
background: #fff;
|
||
margin-right: 4px;
|
||
padding: 0 20px 0 20px;
|
||
.trend-echart {
|
||
height: 280px;
|
||
width: 500px;
|
||
margin: 0 auto;
|
||
}
|
||
.button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 110px;
|
||
|
||
.top-title {
|
||
font-size: 16px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
&.active {
|
||
color: #0058e1;
|
||
font-weight: bold;
|
||
border-bottom: 2px solid #0058e1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|