liupopo
1 year ago
7 changed files with 913 additions and 305 deletions
@ -0,0 +1,453 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="main-content"> |
|||
<el-row :gutter="40" class="panel-group"> |
|||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> |
|||
<div class="card-panel-icon-wrapper icon-people"> |
|||
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> |
|||
</div> |
|||
<div class="card-panel-description"> |
|||
<div class="card-panel-text"> |
|||
正式客户 |
|||
</div> |
|||
<count-to :start-val="0" :end-val="pgData.zskh" :duration="2600" class="card-panel-num" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|||
<div class="card-panel" @click="handleSetLineChartData('messages')"> |
|||
<div class="card-panel-icon-wrapper icon-message"> |
|||
<svg-icon icon-class="tree-table" class-name="card-panel-icon" /> |
|||
</div> |
|||
<div class="card-panel-description"> |
|||
<div class="card-panel-text"> |
|||
有效电站数 |
|||
</div> |
|||
<count-to :start-val="0" :end-val="pgData.yxdzs" :duration="3000" class="card-panel-num" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|||
<div class="card-panel" @click="handleSetLineChartData('purchases')"> |
|||
<div class="card-panel-icon-wrapper icon-money"> |
|||
<svg-icon icon-class="nested" class-name="card-panel-icon" /> |
|||
</div> |
|||
<div class="card-panel-description"> |
|||
<div class="card-panel-text"> |
|||
完工规模 |
|||
</div> |
|||
<count-to :start-val="0" :end-val="pgData.wggm" :duration="3200" class="card-panel-num" />MW |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|||
<div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
|||
<div class="card-panel-icon-wrapper icon-shopping"> |
|||
<svg-icon icon-class="list" class-name="card-panel-icon" /> |
|||
</div> |
|||
<div class="card-panel-description"> |
|||
<div class="card-panel-text"> |
|||
在库规模 |
|||
</div> |
|||
<count-to :start-val="0" :end-val="pgData.zkgm" :duration="3600" class="card-panel-num" />MW |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-card class="box-card" shadow="hover"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>有效电站量</span> |
|||
</div> |
|||
<div> |
|||
<div ref="charta" style="height:330px; width: 100%" /> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card class="box-card" shadow="hover"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>各地区电站对比</span> |
|||
</div> |
|||
<div> |
|||
<div ref="chartb" style="height:330px; width: 100%;" /> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card class="box-card" shadow="hover"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>节点占比</span> |
|||
</div> |
|||
<div> |
|||
<div ref="chartc" style="height:330px; width: 100%;" /> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-card class="box-card" shadow="hover"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>项目占比</span> |
|||
</div> |
|||
<div> |
|||
<div ref="chartd" style="height:330px; width: 100%;" /> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/gfApi/home' |
|||
import CountTo from 'vue-count-to' |
|||
import * as echarts from 'echarts' |
|||
export default { |
|||
components: { |
|||
CountTo |
|||
}, |
|||
data() { |
|||
return { |
|||
pgData: { |
|||
zskh: 0, |
|||
yxdzs: 0, |
|||
wggm: 0, |
|||
zkgm: 0 |
|||
}, |
|||
charta: null, |
|||
chartb: null, |
|||
chartc: null, |
|||
chartd: null |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.charta) { |
|||
this.charta.dispose() |
|||
this.charta = null |
|||
} |
|||
if (this.chartb) { |
|||
this.chartb.dispose() |
|||
this.chartb = null |
|||
} |
|||
if (this.chartc) { |
|||
this.chartc.dispose() |
|||
this.chartc = null |
|||
} |
|||
if (this.chartd) { |
|||
this.chartd.dispose() |
|||
this.chartd = null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initCharta() |
|||
this.initChartb() |
|||
this.initChartc() |
|||
this.initChartd() |
|||
}) |
|||
}, |
|||
created() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
req.statistichomepage().then(resp => { |
|||
this.pgData = resp.data |
|||
}).catch(e => console.log(e)) |
|||
}, |
|||
initCharta() { |
|||
req.statisticgroup_new_data().then(resp => { |
|||
const _dataX = resp.data.listx |
|||
const _dataY1 = resp.data.listy |
|||
this.charta = echarts.init(this.$refs.charta) |
|||
this.charta.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: _dataX |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
grid: { |
|||
left: 45 |
|||
}, |
|||
series: [{ |
|||
data: _dataY1, |
|||
type: 'line' |
|||
}] |
|||
}) |
|||
}) |
|||
}, |
|||
initChartb() { |
|||
req.statisticgroup_area().then(resp => { |
|||
const _dataX = [] |
|||
const _dataY1 = [] |
|||
for (var i = 0; i < resp.data.length; i++) { |
|||
_dataX.push(resp.data[i].name) |
|||
_dataY1.push(resp.data[i].count) |
|||
} |
|||
this.chartb = echarts.init(this.$refs.chartb) |
|||
this.chartb.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: _dataX |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
// nameTextStyle: { |
|||
// align: 'center' |
|||
// } |
|||
}, |
|||
grid: { |
|||
left: 40 |
|||
}, |
|||
series: [{ |
|||
data: _dataY1, |
|||
type: 'bar' |
|||
}] |
|||
}) |
|||
}) |
|||
}, |
|||
initChartc() { |
|||
req.statisticgroup_node().then(resp => { |
|||
const _dataX = [] |
|||
// const _dataY1 = [] |
|||
for (var i = 0; i < resp.data.length; i++) { |
|||
const v = { |
|||
value: resp.data[i].count, |
|||
name: resp.data[i].name |
|||
} |
|||
_dataX.push(v) |
|||
} |
|||
this.chartc = echarts.init(this.$refs.chartc) |
|||
this.chartc.setOption({ |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
top: 'center', |
|||
left: '1%', |
|||
orient: 'vertical' |
|||
}, |
|||
series: [{ |
|||
name: '节点占比', |
|||
left: '30%', |
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 10, |
|||
borderColor: '#fff', |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: _dataX |
|||
}] |
|||
}) |
|||
}) |
|||
}, |
|||
initChartd() { |
|||
req.statisticgroup_dataid().then(resp => { |
|||
const _dataX = [] |
|||
// const _dataY1 = [] |
|||
for (var i = 0; i < resp.data.length; i++) { |
|||
const v = { |
|||
value: resp.data[i].count, |
|||
name: resp.data[i].name |
|||
} |
|||
_dataX.push(v) |
|||
} |
|||
this.chartd = echarts.init(this.$refs.chartd) |
|||
this.chartd.setOption({ |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
top: 'center', |
|||
left: '1%', |
|||
orient: 'vertical' |
|||
}, |
|||
series: [{ |
|||
name: '项目占比', |
|||
left: '30%', |
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 10, |
|||
borderColor: '#fff', |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: _dataX |
|||
}] |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.chart-wrapper { |
|||
background: #fff; |
|||
padding: 16px 16px 0; |
|||
margin-bottom: 32px; |
|||
} |
|||
|
|||
.chart { |
|||
margin-left: 10px; |
|||
background-color: rgb(255, 255, 255); |
|||
width: 100%; |
|||
} |
|||
|
|||
.panel-group { |
|||
margin-top: 18px; |
|||
|
|||
.card-panel-col { |
|||
margin-bottom: 32px; |
|||
} |
|||
|
|||
.card-panel { |
|||
height: 108px; |
|||
cursor: pointer; |
|||
font-size: 12px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
color: #666; |
|||
background: #fff; |
|||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); |
|||
border-color: rgba(0, 0, 0, .05); |
|||
|
|||
&:hover { |
|||
.card-panel-icon-wrapper { |
|||
color: #fff; |
|||
} |
|||
|
|||
.icon-people { |
|||
background: #40c9c6; |
|||
} |
|||
|
|||
.icon-message { |
|||
background: #36a3f7; |
|||
} |
|||
|
|||
.icon-money { |
|||
background: #f4516c; |
|||
} |
|||
|
|||
.icon-shopping { |
|||
background: #34bfa3 |
|||
} |
|||
} |
|||
|
|||
.icon-people { |
|||
color: #40c9c6; |
|||
} |
|||
|
|||
.icon-message { |
|||
color: #36a3f7; |
|||
} |
|||
|
|||
.icon-money { |
|||
color: #f4516c; |
|||
} |
|||
|
|||
.icon-shopping { |
|||
color: #34bfa3 |
|||
} |
|||
|
|||
.card-panel-icon-wrapper { |
|||
float: left; |
|||
margin: 14px 0 0 14px; |
|||
padding: 16px; |
|||
transition: all 0.38s ease-out; |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
.card-panel-icon { |
|||
float: left; |
|||
font-size: 48px; |
|||
} |
|||
|
|||
.card-panel-description { |
|||
float: right; |
|||
font-weight: bold; |
|||
margin: 26px; |
|||
margin-left: 0px; |
|||
|
|||
.card-panel-text { |
|||
line-height: 18px; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
font-size: 16px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.card-panel-num { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (max-width:550px) { |
|||
.card-panel-description { |
|||
display: none; |
|||
} |
|||
|
|||
.card-panel-icon-wrapper { |
|||
float: none !important; |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0 !important; |
|||
|
|||
.svg-icon { |
|||
display: block; |
|||
margin: 14px auto !important; |
|||
float: none !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar ref="btnbar" view-title="电站列表" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="queryParams" :model="listQuery" :inline="true" class="tab-header"> |
|||
<el-form-item label="录单日期"><el-date-picker |
|||
v-model="listQuery.search_time" |
|||
type="daterange" |
|||
align="right" |
|||
unlink-panels |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
:picker-options="pickerOptions" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="代理商"> |
|||
<el-select v-model="listQuery.agent_id" placeholder="请选择代理商" clearable class="addinputw"> |
|||
<el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="区域项目"> |
|||
<el-select v-model="listQuery.witch_data" placeholder="数据分组" clearable class="addinputw"> |
|||
<el-option v-for="item in groupList" :key="item.data_id" :label="item.name" :value="item.data_id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="流程状态"> |
|||
<el-select v-model="listQuery.workflow" placeholder="请选择流程状态" clearable class="addinputw"> |
|||
<el-option v-for="item in workflowList" :key="item.unique_name" :label="item.name" :value="item.unique_name" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table v-loading="tableloading" :data="logList" style="width: 100%" border> |
|||
<el-table-column align="center" prop="id" label="电站id" width="90" /> |
|||
<el-table-column align="center" prop="order_no" label="电站编码" width="150" /> |
|||
<el-table-column align="center" prop="all_power" label="电站功率" width="100" /> |
|||
<el-table-column align="center" prop="agent_name" label="代理商名称" /> |
|||
<el-table-column align="center" prop="address" label="电站地址" width="160" /> |
|||
<el-table-column align="center" prop="company_name" label="所属公司名称" width="200" /> |
|||
<el-table-column align="center" prop="user_name" label="客户姓名" width="90" /> |
|||
<el-table-column align="center" prop="user_phone" label="用户电话" width="90" /> |
|||
<el-table-column align="center" prop="data_id" label="分组" width="90" /> |
|||
<el-table-column align="center" prop="product_name" label="产品" width="100" /> |
|||
<el-table-column align="center" prop="workflow_name" label="目前状态" width="100" /> |
|||
<el-table-column align="center" prop="sign" label="是否签署合同" width="100"> |
|||
<template slot-scope="scope"><div>{{ scope.row.sign==1?'已经签署':'未签署' }}</div></template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination v-show="logList.length > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" class="pagination" @pagination="loadLogList" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/gfApi' |
|||
import Pagination from '@/components/pagination' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination |
|||
}, |
|||
data() { |
|||
return { |
|||
tableloading: false, |
|||
pickerOptions: { |
|||
shortcuts: [{ |
|||
text: '最近一周', |
|||
onClick(picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}, { |
|||
text: '最近一个月', |
|||
onClick(picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}, { |
|||
text: '最近三个月', |
|||
onClick(picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}] |
|||
}, |
|||
viewState: 1, |
|||
tabActiveName: 'uplog', |
|||
index: '0', |
|||
isSearchShow: false, |
|||
editDialog: false, |
|||
searchxianshitit: '显示查询条件', |
|||
btndisabled: false, |
|||
btnList: [{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
}], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
agent_id: '', |
|||
search_time: [], |
|||
witch_data: '', |
|||
workflow: '' |
|||
}, |
|||
queryInfo: { |
|||
page: 1, |
|||
limit: 10, |
|||
ident_id: '' |
|||
}, |
|||
total: 0, |
|||
count: 0, |
|||
jmdListQuery: { |
|||
contractNumber: '', |
|||
date: '' |
|||
}, |
|||
agentList: [], |
|||
groupList: [], |
|||
workflowList: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init() |
|||
this.loadLogList() |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList() |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
supplier_name: '' |
|||
} |
|||
this.total = 0 |
|||
this.loadLogList() |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'doClose': // 关闭 |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
init() { |
|||
req.getAgentList().then((res) => { |
|||
this.agentList = res.data.data |
|||
}) |
|||
req.groupDataidList().then((res) => { |
|||
this.groupList = res.data.data |
|||
}) |
|||
req.workflowList().then((res) => { |
|||
this.workflowList = res.data.data |
|||
}) |
|||
}, |
|||
loadLogList() { |
|||
this.tableloading = true |
|||
req.listPagePowerStation(this.listQuery).then((res) => { |
|||
this.tableloading = false |
|||
if (res.code == 200) { |
|||
console.log('======', res) |
|||
this.total = res.data.total |
|||
this.logList = res.data.records |
|||
} |
|||
}).catch(e => { this.tableloading = false }) |
|||
}, |
|||
LookStorehousedialog(row) { |
|||
this.queryInfo.ident_id = row.id |
|||
req.getContract(this.queryInfo).then((res) => { |
|||
if (res.code == 200) { |
|||
this.editDialog = true |
|||
this.tempList = res.data.data.list |
|||
this.count = res.data.data.count |
|||
} |
|||
}) |
|||
}, |
|||
LookStoreDialog() { |
|||
req.getContract(this.queryInfo).then((res) => { |
|||
if (res.code == 200) { |
|||
this.tempList = res.data.data.list |
|||
this.count = res.data.data.count |
|||
} |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1 |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
Loading…
Reference in new issue