|
@@ -3,63 +3,138 @@
|
|
|
<div style="padding: 10px 10px">
|
|
|
<span style="color: #000; font-size: 18px">用车次数</span>
|
|
|
<div style="margin-top: 60px; width: 100px; text-align: center">
|
|
|
- <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">168</div>
|
|
|
+ <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ totalVehicle }}</div>
|
|
|
<div style="color: #000; font-size: 14px">总体用车次数</div>
|
|
|
</div>
|
|
|
<div style="margin-top: 20px; width: 100px; text-align: center">
|
|
|
- <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">13</div>
|
|
|
+ <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ deptVehicle }}</div>
|
|
|
<div style="color: #000; font-size: 14px">本机构用车次数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="padding: 10px 10px 10px 0">
|
|
|
- <div style="display: flex;">
|
|
|
- <a-radio-group name="radioGroup" :default-value="1">
|
|
|
+ <div style="display: flex">
|
|
|
+ <a-radio-group name="radioGroup" :default-value="1" @change="changaTime">
|
|
|
<a-radio :value="1"> 日 </a-radio>
|
|
|
<a-radio :value="2"> 周 </a-radio>
|
|
|
<a-radio :value="3"> 月 </a-radio>
|
|
|
<a-radio :value="4"> 年 </a-radio>
|
|
|
+ <a-radio :value="5"> 自定义 </a-radio>
|
|
|
</a-radio-group>
|
|
|
- <a-range-picker
|
|
|
- :value="[startDate,endDate]"
|
|
|
- disabled
|
|
|
- style="width: 100%"
|
|
|
- v-model="daterangeCreateTime"
|
|
|
- valueFormat="YYYY-MM-DD"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- allow-clear
|
|
|
- />
|
|
|
+ <div>
|
|
|
+ <a-range-picker
|
|
|
+ @change="changaPicker"
|
|
|
+ :disabled="disabled"
|
|
|
+ v-model="daterangeCreateTime"
|
|
|
+ valueFormat="YYYY-MM-DD"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ allow-clear
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div ref="chart" class="item" style="width: 380px; height: 260px" />
|
|
|
+ <a-spin :spinning="spinning" size="large">
|
|
|
+ <div ref="chart" class="item" style="width: 440px; height: 260px" />
|
|
|
+ </a-spin>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
-import moment from 'moment';
|
|
|
+import moment from 'moment'
|
|
|
+import { getUseCarStatistics } from '@/api/iot'
|
|
|
export default {
|
|
|
+ props: { OfDeptId: String },
|
|
|
data() {
|
|
|
return {
|
|
|
- daterangeCreateTime: [],
|
|
|
- dateFormat:'YYYY-MM-DD',
|
|
|
- startDate :'2023-08-28',
|
|
|
- endDate:'2023-08-28',
|
|
|
- moment: moment
|
|
|
+ daterangeCreateTime: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
|
|
|
+ dateFormat: 'YYYY-MM-DD',
|
|
|
+ startDate: moment().week(moment().week()).startOf('week').format('YYYY-MM-DD'),
|
|
|
+ endDate: moment().week(moment().week()).endOf('week').format('YYYY-MM-DD'),
|
|
|
+ moment: moment,
|
|
|
+ disabled: true,
|
|
|
+ deptId: '',
|
|
|
+ list: [],
|
|
|
+ spinning: false,
|
|
|
+ totalVehicle: 0, //总体
|
|
|
+ deptVehicle: 0,
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ OfDeptId: {
|
|
|
+ handler(val) {
|
|
|
+ if (val.indexOf('dept' > 0)) {
|
|
|
+ this.deptId = val.substring(5)
|
|
|
+ }else{
|
|
|
+ this.deptId ='100'
|
|
|
+ }
|
|
|
+ console.log(this.deptId);
|
|
|
+ this.funOfCarNum()
|
|
|
+ },
|
|
|
+ immediate:true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // created() {
|
|
|
+ // this.funOfCarNum()
|
|
|
+ // },
|
|
|
mounted() {
|
|
|
// 获取dom容器
|
|
|
- const chartDom = this.$refs.chart
|
|
|
- // 初始化图表实例
|
|
|
- this.chart = echarts.init(chartDom)
|
|
|
- this.initChart()
|
|
|
- // console.log("da======ta", this.processData, this.maxNum);
|
|
|
+ this.funOfCarNum()
|
|
|
+ if (this.list.length > 0) {
|
|
|
+ const chartDom = this.$refs.chart
|
|
|
+ // 初始化图表实例
|
|
|
+ this.chart = echarts.init(chartDom)
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- initChart() {
|
|
|
- const data = [220, 182, 191, 234, 290, 330, 310]
|
|
|
- const sideData = data.map((item) => item + 4.5)
|
|
|
+ changaTime(val) {
|
|
|
+ if (val.target.value == 1) {
|
|
|
+ this.daterangeCreateTime = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
|
|
|
+ this.startDate = moment().format('YYYY-MM-DD')
|
|
|
+ this.endDate = moment().format('YYYY-MM-DD')
|
|
|
+ this.funOfCarNum()
|
|
|
+ } else if (val.target.value == 2) {
|
|
|
+ this.daterangeCreateTime = [
|
|
|
+ moment().week(moment().week()).startOf('week').format('YYYY-MM-DD 00:00:00'),
|
|
|
+ moment().week(moment().week()).endOf('week').format('YYYY-MM-DD 23:59:59'),
|
|
|
+ ]
|
|
|
+ this.funOfCarNum()
|
|
|
+ this.startDate = moment().week(moment().week()).startOf('week').format('YYYY-MM-DD')
|
|
|
+ this.endDate = moment().week(moment().week()).endOf('week').format('YYYY-MM-DD')
|
|
|
+ } else if (val.target.value == 3) {
|
|
|
+ this.daterangeCreateTime = [
|
|
|
+ moment().month(moment().month()).startOf('month').format('YYYY-MM-DD 00:00:00'),
|
|
|
+ moment().month(moment().month()).endOf('month').format('YYYY-MM-DD 23:59:59'),
|
|
|
+ ]
|
|
|
+ this.startDate = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD')
|
|
|
+ this.endDate = moment().month(moment().month()).endOf('month').format('YYYY-MM-DD')
|
|
|
+ this.funOfCarNum()
|
|
|
+ } else if (val.target.value == 4) {
|
|
|
+ this.daterangeCreateTime = [
|
|
|
+ moment().year(moment().year()).startOf('year').format('YYYY-MM-DD 00:00:00'),
|
|
|
+ moment().year(moment().year()).endOf('year').format('YYYY-MM-DD 23:59:59'),
|
|
|
+ ]
|
|
|
+ ;(this.startDate = moment().year(moment().year()).startOf('year').format('YYYY-MM-DD')),
|
|
|
+ (this.endDate = moment().year(moment().year()).endOf('year').format('YYYY-MM-DD'))
|
|
|
+ this.funOfCarNum()
|
|
|
+ } else if (val.target.value == 5) {
|
|
|
+ this.daterangeCreateTime = []
|
|
|
+ this.disabled = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changaPicker(ev) {
|
|
|
+ let startTime=`${ev[0]} 00:00:00`
|
|
|
+ let endTime=`${ev[1]} 23:59:59`
|
|
|
+ this.daterangeCreateTime = [startTime,endTime]
|
|
|
+ this.funOfCarNum()
|
|
|
+ },
|
|
|
+ initChart(datas) {
|
|
|
+ const data = datas.map((item) => {
|
|
|
+ return item.value
|
|
|
+ })
|
|
|
+ // const sideData = datas.map((item) => {
|
|
|
+ // return item.value
|
|
|
+ // })
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -70,15 +145,9 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: [
|
|
|
- '两江支队',
|
|
|
- '鸳鸯消防救援站',
|
|
|
- '翠云消防救援站',
|
|
|
- '龙头寺消防救援站',
|
|
|
- '大竹林特勤站',
|
|
|
- '礼嘉消防救援站',
|
|
|
- '奥园消防救援站',
|
|
|
- ],
|
|
|
+ data: datas.map((v) => {
|
|
|
+ return v.deptName
|
|
|
+ }),
|
|
|
//坐标轴
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
@@ -89,7 +158,7 @@ export default {
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
interval: 0,
|
|
|
- rotate: 30,
|
|
|
+ rotate: 0,
|
|
|
textStyle: {
|
|
|
color: '#3eb2e8',
|
|
|
fontSize: 12,
|
|
@@ -119,10 +188,10 @@ export default {
|
|
|
{
|
|
|
name: 'a',
|
|
|
tooltip: {
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
},
|
|
|
type: 'bar',
|
|
|
- barWidth: 14.5,
|
|
|
+ barWidth: 18.5,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
@@ -151,68 +220,45 @@ export default {
|
|
|
data: data,
|
|
|
barGap: 0,
|
|
|
},
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- barWidth: 0,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#09337C', // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.6,
|
|
|
- color: '#0761C0', // 60% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#0575DE', // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- false
|
|
|
- ),
|
|
|
- },
|
|
|
- },
|
|
|
- barGap: 0,
|
|
|
- data: sideData,
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: 'b',
|
|
|
- // tooltip: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // type: 'pictorialBar',
|
|
|
- // itemStyle: {
|
|
|
- // borderWidth: 1,
|
|
|
- // borderColor: '#0571D5',
|
|
|
- // color: '#1779E0',
|
|
|
- // },
|
|
|
- // symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
|
|
|
- // symbolSize: ['30', '12'],
|
|
|
- // symbolOffset: ['0', '-11'],
|
|
|
- // //symbolRotate: -5,
|
|
|
- // symbolPosition: 'end',
|
|
|
- // data: data,
|
|
|
- // z: 3,
|
|
|
- // },
|
|
|
],
|
|
|
}
|
|
|
-
|
|
|
this.chart.setOption(option)
|
|
|
},
|
|
|
+ funOfCarNum() {
|
|
|
+ this.spinning = true
|
|
|
+ const params = {
|
|
|
+ deptId: this.deptId || '100',
|
|
|
+ startTime: this.daterangeCreateTime[0],
|
|
|
+ endTime: this.daterangeCreateTime[1],
|
|
|
+ }
|
|
|
+ getUseCarStatistics(params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.list = res.data.data
|
|
|
+ ;(this.totalVehicle = res.data.totalUseCount), //总体
|
|
|
+ (this.deptVehicle = res.data.selfDeptUseCount)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 获取dom容器
|
|
|
+ const chartDom = this.$refs.chart
|
|
|
+ // 初始化图表实例
|
|
|
+ this.chart = echarts.init(chartDom)
|
|
|
+ this.initChart(this.list)
|
|
|
+ })
|
|
|
+ // this.initChart(this.list)
|
|
|
+ this.spinning = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.spinning = false
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.lun-main {
|
|
|
- width: 400px;
|
|
|
+ width: 500px;
|
|
|
height: 300px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|