master
刘翔宇-旅管家
3 years ago
parent
a2ecf5a97a
commit
1a5cce0c8d
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function inspectionChart(data) {
|
||||
return request({
|
||||
url: '/api/admin/rain-inspection/chart',
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function maintainsChart(data) {
|
||||
return request({
|
||||
url: '/api/admin/rain-maintains/chart',
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
@ -1,87 +1,101 @@
|
||||
import axios from 'axios'
|
||||
import { MessageBox, Message } from 'element-ui'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 50000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// do something before request is sent
|
||||
|
||||
if (store.getters.token) {
|
||||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
//config.headers['X-Token'] = getToken();
|
||||
|
||||
config.headers['Authorization'] ="Bearer "+getToken()
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// do something with request error
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
/**
|
||||
* If you want to get http information such as headers or status
|
||||
* Please return response => response
|
||||
*/
|
||||
|
||||
/**
|
||||
* Determine the request status by custom code
|
||||
* Here is just an example
|
||||
* You can also judge the status by HTTP Status Code
|
||||
*/
|
||||
response => {
|
||||
const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.errcode) {
|
||||
Message({
|
||||
message: res.errmsg || 'Error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
if (res.errcode === 50008 || res.errcode === 50012 || res.errcode === 50014) {
|
||||
// to re-login
|
||||
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
|
||||
confirmButtonText: 'Re-Login',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
store.dispatch('user/resetToken').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
return Promise.reject(new Error(res.errmsg || 'Error'))
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error) // for debug
|
||||
Message({
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
import axios from 'axios'
|
||||
import {
|
||||
MessageBox,
|
||||
Message,
|
||||
Loading
|
||||
} from 'element-ui'
|
||||
import store from '@/store'
|
||||
import {
|
||||
getToken
|
||||
} from '@/utils/auth'
|
||||
let loading;
|
||||
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 50000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// do something before request is sent
|
||||
loading = Loading.service({
|
||||
lock: true,
|
||||
background: "rgba(0,0,0,0.4)",
|
||||
text: "正在加载中..."
|
||||
})
|
||||
if (store.getters.token) {
|
||||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
//config.headers['X-Token'] = getToken();
|
||||
|
||||
config.headers['Authorization'] = "Bearer " + getToken()
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// do something with request error
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
/**
|
||||
* If you want to get http information such as headers or status
|
||||
* Please return response => response
|
||||
*/
|
||||
|
||||
/**
|
||||
* Determine the request status by custom code
|
||||
* Here is just an example
|
||||
* You can also judge the status by HTTP Status Code
|
||||
*/
|
||||
response => {
|
||||
const res = response.data
|
||||
|
||||
loading.close()
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.errcode) {
|
||||
Message({
|
||||
message: res.errmsg || 'Error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
if (res.errcode === 50008 || res.errcode === 50012 || res.errcode === 50014) {
|
||||
// to re-login
|
||||
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again',
|
||||
'Confirm logout', {
|
||||
confirmButtonText: 'Re-Login',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
store.dispatch('user/resetToken').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
return Promise.reject(new Error(res.errmsg || 'Error'))
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
},
|
||||
error => {
|
||||
loading.close()
|
||||
console.log('err' + error) // for debug
|
||||
Message({
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div style="padding: 0px 20px">
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="巡查内容统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div class="searchFields">
|
||||
|
||||
<DatePicker type="datetimerange" v-model="searchFields.daterange" format="yyyy-MM-dd" placeholder="选择时间范围"
|
||||
style="width: 250px;" @on-ok="handleDaterange"></DatePicker>
|
||||
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
|
||||
<Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
|
||||
|
||||
</div>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
<div class="table-tree" v-if="showData">
|
||||
<el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
|
||||
<el-table-column type="index" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="巡查内容" sortable width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="巡查次数" sortable>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else>
|
||||
<line-chart :chartData="rptData" :height="chartHeight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import LineChart from "./components/LineChart.vue"
|
||||
import {
|
||||
inspectionChart
|
||||
} from '../../../api/rain/report/inspectionContentReport.js'
|
||||
export default {
|
||||
components: {
|
||||
LxHeader,
|
||||
LineChart
|
||||
},
|
||||
created() {
|
||||
|
||||
this.initLoad();
|
||||
var sdate = this.$moment().format("yyyy-01-01");
|
||||
this.searchFields.daterange.push(sdate)
|
||||
this.searchFields.daterange.push(this.$moment(sdate).add(1, 'years').add(-1, "days").format("yyyy-MM-DD"));
|
||||
|
||||
this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
|
||||
this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
|
||||
this.load();
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
showData: false,
|
||||
searchFields: {
|
||||
start_date: "",
|
||||
end_date: "",
|
||||
daterange: []
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 0,
|
||||
chartHeight: "",
|
||||
btnText: "数据展示",
|
||||
dataArr: [],
|
||||
rptData: {
|
||||
xArr: [],
|
||||
series: {},
|
||||
legendArr: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleDaterange() {
|
||||
this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
|
||||
this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
|
||||
},
|
||||
formatdate(date) {
|
||||
return this.$moment(date).format("YYYY-MM-DD")
|
||||
},
|
||||
viewPart() {
|
||||
this.showData = !this.showData;
|
||||
this.btnText = this.showData ? "图表展示" : "数据展示"
|
||||
},
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 96.5; //查询 头部
|
||||
var paginationHeight = 37; //分页的高度
|
||||
var topHeight = 50; //页面 头部
|
||||
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
|
||||
that.tableHeight = tableHeight;
|
||||
that.chartHeight = tableHeight + "px"
|
||||
|
||||
},
|
||||
handleSelectSClient(item) {
|
||||
this.searchFields.material_client_id = item.id;
|
||||
},
|
||||
handleSelectUser(item) {
|
||||
this.searchFields.user_original_id = item.id;
|
||||
},
|
||||
load() {
|
||||
// this.showData = true;
|
||||
var planarr = [];
|
||||
var xArr = [];
|
||||
var usearr = [];
|
||||
var tableArr = [];
|
||||
inspectionChart({
|
||||
...this.searchFields
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
for (var m of res) {
|
||||
xArr.push(m.ask_content_name);
|
||||
planarr.push(
|
||||
m.ask_content_id_count
|
||||
)
|
||||
tableArr.push({
|
||||
userName: m.ask_content_name,
|
||||
total: m.ask_content_id_count,
|
||||
})
|
||||
}
|
||||
this.rptData.series = [{
|
||||
name: "巡查次数",
|
||||
type: 'bar',
|
||||
data: planarr,
|
||||
barMaxWidth: 20, // 每一个都要设置
|
||||
}]
|
||||
this.rptData.xArr = xArr;
|
||||
this.rptData.legendArr = xArr;
|
||||
this.tableData = tableArr;
|
||||
}).catch((res) => {})
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.searchFields .el-input__inner {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div style="padding: 0px 20px">
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="养护内容统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div class="searchFields">
|
||||
<el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择所属片区">
|
||||
<el-option v-for="item in rainTypes" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<DatePicker type="datetimerange" v-model="searchFields.daterange" format="yyyy-MM-dd" placeholder="选择时间范围"
|
||||
style="width: 250px;margin-left: 15px;" @on-ok="handleDaterange"></DatePicker>
|
||||
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
|
||||
<Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
|
||||
|
||||
</div>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
<div class="table-tree" v-if="showData">
|
||||
<el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
|
||||
<el-table-column type="index" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="养护内容" sortable width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="养护次数" sortable>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else>
|
||||
<line-chart :chartData="rptData" :height="chartHeight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import LineChart from "./components/LineChart.vue"
|
||||
import {
|
||||
maintainsChart
|
||||
} from '../../../api/rain/report/maintainContentReport.js'
|
||||
export default {
|
||||
components: {
|
||||
LxHeader,
|
||||
LineChart
|
||||
},
|
||||
created() {
|
||||
|
||||
this.initLoad();
|
||||
var sdate = this.$moment().format("yyyy-01-01");
|
||||
this.searchFields.daterange.push(sdate)
|
||||
this.searchFields.daterange.push(this.$moment(sdate).add(1, 'years').add(-1, "days").format("yyyy-MM-DD"));
|
||||
|
||||
this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
|
||||
this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
|
||||
this.load();
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
showData: false,
|
||||
searchFields: {
|
||||
start_date: "",
|
||||
end_date: "",
|
||||
daterange: [],
|
||||
type: 1
|
||||
},
|
||||
rainTypes: [{
|
||||
id: 1,
|
||||
name: "雨水管道疏挖"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "雨水管道疏通"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "汛期助排"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "出水口排查"
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
tableHeight: 0,
|
||||
chartHeight: "",
|
||||
btnText: "数据展示",
|
||||
dataArr: [],
|
||||
rptData: {
|
||||
xArr: [],
|
||||
series: {},
|
||||
legendArr: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleDaterange() {
|
||||
this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
|
||||
this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
|
||||
},
|
||||
formatdate(date) {
|
||||
return this.$moment(date).format("YYYY-MM-DD")
|
||||
},
|
||||
viewPart() {
|
||||
this.showData = !this.showData;
|
||||
this.btnText = this.showData ? "图表展示" : "数据展示"
|
||||
},
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 96.5; //查询 头部
|
||||
var paginationHeight = 37; //分页的高度
|
||||
var topHeight = 50; //页面 头部
|
||||
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
|
||||
that.tableHeight = tableHeight;
|
||||
that.chartHeight = tableHeight + "px"
|
||||
|
||||
},
|
||||
handleSelectSClient(item) {
|
||||
this.searchFields.material_client_id = item.id;
|
||||
},
|
||||
handleSelectUser(item) {
|
||||
this.searchFields.user_original_id = item.id;
|
||||
},
|
||||
load() {
|
||||
// this.showData = true;
|
||||
var planarr = [];
|
||||
var xArr = [];
|
||||
var usearr = [];
|
||||
var tableArr = [];
|
||||
maintainsChart({
|
||||
...this.searchFields
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
for (var m of res) {
|
||||
xArr.push(m.title_name);
|
||||
planarr.push(
|
||||
m.title_id_count
|
||||
)
|
||||
tableArr.push({
|
||||
userName: m.title_name,
|
||||
total: m.title_id_count,
|
||||
})
|
||||
}
|
||||
this.rptData.series = [{
|
||||
name: "养护次数",
|
||||
type: 'bar',
|
||||
data: planarr,
|
||||
barMaxWidth: 20, // 每一个都要设置
|
||||
}]
|
||||
this.rptData.xArr = xArr;
|
||||
this.rptData.legendArr = xArr;
|
||||
this.tableData = tableArr;
|
||||
}).catch((res) => {})
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.searchFields .el-input__inner {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.vm10 input {
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue