|
@@ -7,12 +7,7 @@
|
|
|
<div class="toolsBar">
|
|
|
<a-form ref="searchForm" :model="searchForm" layout="inline">
|
|
|
<a-form-item props="queryWord" label="统计区间">
|
|
|
- <a-range-picker
|
|
|
- style="width: 220px;"
|
|
|
- @change="dateChange"
|
|
|
- v-model.trim="searchForm.queryWord"
|
|
|
- :disabledDate="disabledDate"
|
|
|
- />
|
|
|
+ <a-range-picker style="width: 220px;" @change="dateChange" v-model.trim="searchForm.queryWord" :disabledDate="disabledDate" />
|
|
|
</a-form-item>
|
|
|
<a-form-item props="storeIds" label="清运网点">
|
|
|
<a-select
|
|
@@ -22,11 +17,10 @@
|
|
|
v-model="searchForm.storeIdList"
|
|
|
style="width: 200px"
|
|
|
option-filter-prop="children"
|
|
|
- :filter-option="filterOption">
|
|
|
- <a-select-option :disabled="!isStationAll&&searchForm.storeIdList.length>0" value="all" key="all">全部</a-select-option>
|
|
|
- <a-select-option :disabled="isStationAll" v-for="item in stationList" :value="item.stationNo" :key="item.id">
|
|
|
- {{ item.name }}
|
|
|
- </a-select-option>
|
|
|
+ :filter-option="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option :disabled="!isStationAll && searchForm.storeIdList.length > 0" value="all" key="all">全部</a-select-option>
|
|
|
+ <a-select-option :disabled="isStationAll" v-for="item in stationList" :value="item.stationNo" :key="item.id">{{ item.name }}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
@@ -35,11 +29,9 @@
|
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
|
快捷筛选:
|
|
|
- <span
|
|
|
- :class="['searchItem',curentType==item.type?'active':'']"
|
|
|
- v-for="(item,index) in tabList"
|
|
|
- :key="index"
|
|
|
- @click="getCurentSearchTime(item)">{{ item.name }}</span>
|
|
|
+ <span :class="['searchItem', curentType == item.type ? 'active' : '']" v-for="(item, index) in tabList" :key="index" @click="getCurentSearchTime(item)">
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</div>
|
|
@@ -57,7 +49,8 @@
|
|
|
:xAxisRotate="resize"
|
|
|
:xAxisData="XdaysData"
|
|
|
:seriesData="clearnChartData"
|
|
|
- text="" />
|
|
|
+ text=""
|
|
|
+ />
|
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
|
</a-card>
|
|
|
<!-- 各回收物类型数据 -->
|
|
@@ -65,7 +58,7 @@
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :md="24" :lg="24">
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
- <div v-for="(item,index) in qyTotalPieData" :key="index" class="module-list" :style="{background:washTypePieColor[index]}">
|
|
|
+ <div v-for="(item, index) in qyTotalPieData" :key="index" class="module-list" :style="{ background: washTypePieColor[index] }">
|
|
|
<p>{{ item.name }}</p>
|
|
|
<span>{{ item.value }} kg</span>
|
|
|
</div>
|
|
@@ -75,35 +68,37 @@
|
|
|
<!-- 各回收物类型数据图表展示 -->
|
|
|
<a-row :gutter="24">
|
|
|
<a-col class="tab-card">
|
|
|
- <span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
|
|
|
- <span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
|
|
|
+ <span :class="['tab-card-item', currentTabChart == 'tab1' ? 'checked-item' : '']" @click="currentTabChart = 'tab1'">详情数据</span>
|
|
|
+ <span :class="['tab-card-item', currentTabChart == 'tab2' ? 'checked-item' : '']" @click="currentTabChart = 'tab2'">变化趋势</span>
|
|
|
</a-col>
|
|
|
<!-- 详情数据 -->
|
|
|
- <a-col span="24" v-if="currentTabChart=='tab1'">
|
|
|
+ <a-col span="24" v-if="currentTabChart == 'tab1'">
|
|
|
<chart-bar
|
|
|
ref="ChartBar"
|
|
|
style="height: 300px;"
|
|
|
color="#6C6FBE"
|
|
|
:xAxisRotate="resize"
|
|
|
- :yMax="1000000"
|
|
|
+ :yMax="100000"
|
|
|
yUnit="kg"
|
|
|
:xAxisData="XdaysData1"
|
|
|
:seriesData="hswTypeBarData"
|
|
|
- text="" />
|
|
|
+ text=""
|
|
|
+ />
|
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
|
</a-col>
|
|
|
<!-- 变化趋势 -->
|
|
|
- <a-col span="24" v-if="currentTabChart=='tab2'">
|
|
|
+ <a-col span="24" v-if="currentTabChart == 'tab2'">
|
|
|
<chart-line
|
|
|
ref="ChartLine"
|
|
|
style="height: 300px;"
|
|
|
color="#6C6FBE"
|
|
|
yUnit="kg"
|
|
|
- :yMax="1000000"
|
|
|
+ :yMax="100000"
|
|
|
:xAxisRotate="resize"
|
|
|
:xAxisData="XdaysData1"
|
|
|
:seriesData="hswTypeLineData"
|
|
|
- text="" />
|
|
|
+ text=""
|
|
|
+ />
|
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -119,7 +114,8 @@
|
|
|
:total="totalGroupRubbiData.cleanWeight"
|
|
|
:color="washTypePieColor"
|
|
|
:xAxisRotate="resize"
|
|
|
- text="" />
|
|
|
+ text=""
|
|
|
+ />
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col span="12">
|
|
@@ -133,7 +129,8 @@
|
|
|
:total="totalGroupUserData.cleanWeight"
|
|
|
:color="couponColor"
|
|
|
:xAxisRotate="resize"
|
|
|
- text="" />
|
|
|
+ text=""
|
|
|
+ />
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -172,7 +169,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- isStationAll () { // 是否选择全部网点
|
|
|
+ isStationAll () {
|
|
|
+ // 是否选择全部网点
|
|
|
let boolean
|
|
|
if (this.searchForm.storeIdList.length > 0) {
|
|
|
if (this.searchForm.storeIdList.indexOf('all') >= 0) {
|
|
@@ -186,7 +184,6 @@ export default {
|
|
|
return boolean
|
|
|
},
|
|
|
resize () {
|
|
|
- console.log(this.screenWidth, 'this.screenWidth')
|
|
|
if (this.screenWidth < 1640) {
|
|
|
return 40
|
|
|
} else {
|
|
@@ -234,22 +231,23 @@ export default {
|
|
|
storeIdList: [] // 已选清运网点
|
|
|
},
|
|
|
// 快速删选tab
|
|
|
- tabList: [{
|
|
|
- name: '今天',
|
|
|
- type: 'today'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '本周',
|
|
|
- type: 'thisWeek'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '上周',
|
|
|
- type: 'lastWeek'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '本月',
|
|
|
- type: 'thisMonth'
|
|
|
- }
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ name: '今天',
|
|
|
+ type: 'today'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本周',
|
|
|
+ type: 'thisWeek'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '上周',
|
|
|
+ type: 'lastWeek'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本月',
|
|
|
+ type: 'thisMonth'
|
|
|
+ }
|
|
|
],
|
|
|
curentType: 'thisWeek', // 当前所选时间查询类型
|
|
|
beginDate: null, // 开始时间
|
|
@@ -296,12 +294,10 @@ export default {
|
|
|
},
|
|
|
// 不可选日期
|
|
|
disabledDate (date) {
|
|
|
- return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
|
|
|
+ return (date && date.valueOf() > Date.now()) || date.valueOf() < Date.now() - 90 * 24 * 60 * 60 * 1000
|
|
|
},
|
|
|
filterOption (input, option) {
|
|
|
- return (
|
|
|
- option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
- )
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
},
|
|
|
// 查询分类数据字典
|
|
|
getTypeCode (params) {
|
|
@@ -370,7 +366,7 @@ export default {
|
|
|
// 格式化时间
|
|
|
exitTime (time) {
|
|
|
const D = new Date(time)
|
|
|
- const RES_DATE = D.getFullYear() + '-' + this.p((D.getMonth() + 1)) + '-' + this.p(D.getDate())
|
|
|
+ const RES_DATE = D.getFullYear() + '-' + this.p(D.getMonth() + 1) + '-' + this.p(D.getDate())
|
|
|
return RES_DATE
|
|
|
},
|
|
|
// p为不够10添加0的函数
|
|
@@ -455,8 +451,11 @@ export default {
|
|
|
for (const key in data) {
|
|
|
this.XdaysData1.push(key)
|
|
|
}
|
|
|
- this.formAtGroupDateAndRubbishType(data, this.hswTypeBarData)
|
|
|
- this.formAtGroupDateAndRubbishType(data, this.hswTypeLineData)
|
|
|
+
|
|
|
+ // this.hswTypeBarData = this.formAtGroupDateAndRubbishType(data, this.hswTypeBarData)
|
|
|
+ this.hswTypeLineData = this.formAtGroupDateAndRubbishType(data, this.hswTypeLineData)
|
|
|
+ console.log(JSON.stringify(this.hswTypeBarData), 'hswTypeBarData')
|
|
|
+ console.log(JSON.stringify(this.hswTypeLineData), 'hswTypeLineData')
|
|
|
} else {
|
|
|
this.isNoData = true
|
|
|
}
|
|
@@ -469,11 +468,11 @@ export default {
|
|
|
for (const key in data) {
|
|
|
const leve2 = data[key]
|
|
|
const row = leve2[item.code]
|
|
|
- ret.push(row ? (Number(row.cleanWeight / 1000).toFixed(2)) : 0)
|
|
|
+ ret.push(row ? Number(row.cleanWeight / 1000).toFixed(2) : 0)
|
|
|
}
|
|
|
item.data = ret
|
|
|
})
|
|
|
- console.log(obj, 'obj')
|
|
|
+ return obj
|
|
|
}
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
@@ -497,95 +496,94 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .home{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .report-page {
|
|
|
- margin-top: 10px;
|
|
|
- overflow-y: scroll;
|
|
|
- overflow-x: hidden;
|
|
|
- .search-panel {
|
|
|
- .ivu-card-body>div {
|
|
|
- display: inline-block;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+.home {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.report-page {
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .search-panel {
|
|
|
+ .ivu-card-body > div {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
|
|
|
- .searchItem {
|
|
|
- padding: 8px 20px;
|
|
|
- border: 1px dashed #EEEEEE;
|
|
|
- margin: 0 5px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+ .desc {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- background-color: #ff9900;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ .searchItem {
|
|
|
+ padding: 8px 20px;
|
|
|
+ border: 1px dashed #eeeeee;
|
|
|
+ margin: 0 5px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
- .panel {
|
|
|
- margin-top: 10px;
|
|
|
- background-color: #FFFFFF;
|
|
|
+ .active {
|
|
|
+ background-color: #ff9900;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .noData {
|
|
|
- background-color: rgba(50, 50, 50, 0.7);
|
|
|
- color: #fff;
|
|
|
- padding: 15px 30px;
|
|
|
- position: absolute;
|
|
|
- top: 40%;
|
|
|
- left: 40%;
|
|
|
- }
|
|
|
- .chartPie-box{
|
|
|
- height: 300px;
|
|
|
- max-width: 600px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- .panel-title {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- padding-bottom: 5px;
|
|
|
- }
|
|
|
+ .panel {
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
|
- .tab-card {
|
|
|
- float: right;
|
|
|
+ .noData {
|
|
|
+ background-color: rgba(50, 50, 50, 0.7);
|
|
|
+ color: #fff;
|
|
|
+ padding: 15px 30px;
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 40%;
|
|
|
+ }
|
|
|
+ .chartPie-box {
|
|
|
+ height: 300px;
|
|
|
+ max-width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .panel-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .tab-card-item {
|
|
|
- padding: 5px 10px;
|
|
|
- border: 1px solid #eee;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .tab-card {
|
|
|
+ float: right;
|
|
|
|
|
|
- .checked-item {
|
|
|
- border-color: #2d8cf0;
|
|
|
- color: #2d8cf0;
|
|
|
- }
|
|
|
+ .tab-card-item {
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .module-list {
|
|
|
- color: #FFFFFF;
|
|
|
- height: 100px;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- margin: 5px;
|
|
|
- span {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 20px;
|
|
|
+ .checked-item {
|
|
|
+ border-color: #2d8cf0;
|
|
|
+ color: #2d8cf0;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .module-icon {
|
|
|
- width: 52px;
|
|
|
- height: 54px;
|
|
|
-
|
|
|
+ .module-list {
|
|
|
+ color: #ffffff;
|
|
|
+ height: 100px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 5px;
|
|
|
+ span {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .module-icon {
|
|
|
+ width: 52px;
|
|
|
+ height: 54px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|