You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
788 lines
22 KiB
788 lines
22 KiB
<template>
|
|
<div class="warning-box">
|
|
<cpt-card>
|
|
<div class="card-title">
|
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
|
|
<div class="title-label">
|
|
<el-cascader
|
|
v-model="selectAgency"
|
|
:options="propTree"
|
|
:props="{ checkStrictly: true }"
|
|
:show-all-levels="false"
|
|
clearable
|
|
@change="handleCascader">
|
|
</el-cascader>
|
|
</div>
|
|
<div class="title-time">
|
|
<div class="title-time-label">选择时间</div>
|
|
<div class="second-select">
|
|
<!-- <el-date-picker
|
|
v-model="value2"
|
|
type="month"
|
|
placeholder="选择月">
|
|
</el-date-picker> -->
|
|
<el-date-picker v-model="timeRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
value-format="yyyy-MM-dd"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="card-echart">
|
|
<div class="card-left">
|
|
<div class="echart-wr">
|
|
<div class="echart-cicle"></div>
|
|
<div id="echartOrg" class="echart-org"></div>
|
|
</div>
|
|
<div class="echarts-tips">
|
|
<div class="tips-list">
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">为民服务</div>
|
|
</div>
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">社会治安综合</div>
|
|
</div>
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">社会治安综合</div>
|
|
</div>
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">卫生计生监管执法</div>
|
|
</div>
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">卫生计生监管执法</div>
|
|
</div>
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">建设管理</div>
|
|
</div>
|
|
|
|
<div class="tips-item">
|
|
<div class="tips-item-icon"></div>
|
|
<div class="tips-item-text">为民服务</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-left">
|
|
<div class="echart-wr">
|
|
<div class="echart-cicle"></div>
|
|
<div id="echartType" class="echart-org"></div>
|
|
</div>
|
|
<div class="echarts-tips echarts-tips-wd50">
|
|
<div class="tips-lists">
|
|
<div class="tips-items">
|
|
<div class="tips-items-title">
|
|
<div>志愿者</div>
|
|
</div>
|
|
<div class="tips-items-num">
|
|
<div class="tips-item-count">17513</div>
|
|
<div class="tips-item-has">（服务次数：2430）</div>
|
|
</div>
|
|
</div>
|
|
<div class="tips-items">
|
|
<div class="tips-items-title">
|
|
<div>志愿者</div>
|
|
</div>
|
|
<div class="tips-items-num">
|
|
<div class="tips-item-count">17</div>
|
|
<div class="tips-item-has">（服务次数：2430）</div>
|
|
</div>
|
|
</div>
|
|
<div class="tips-items">
|
|
<div class="tips-items-title">
|
|
<div>志愿者</div>
|
|
</div>
|
|
<div class="tips-items-num">
|
|
<div class="tips-item-count">175</div>
|
|
<div class="tips-item-has">（服务次数：2430）</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="echarts-container">
|
|
<div id="echartsBox" class="echarts-boxs"></div>
|
|
</div>
|
|
<div class="ecahrts-button">
|
|
<el-button type="warning" size="small" @click="handleExport">导出</el-button>
|
|
</div>
|
|
<div class="warning-box-bottom">
|
|
<screen-table
|
|
:headerList="headerList"
|
|
:tableData="tableData"
|
|
:visibleLoading="visibleLoading"
|
|
@look="handleLook"
|
|
></screen-table>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
:current-page="pageNo"
|
|
:page-size="pageSize"
|
|
background
|
|
layout="prev, pager, next"
|
|
@size-change="pageSizeChangeHandleNew"
|
|
@current-change="pageCurrentChangeHandleNew"
|
|
:total="total"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</cpt-card>
|
|
<dialog-info
|
|
v-if="showedMoreInfo"
|
|
:demandId="detailInfo.demandRecId"
|
|
:query-origin="'demand-analysis'"
|
|
@close="showedMoreInfo = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import screenTable from "../components/screen-table/index";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import dialogInfo from './dialogInfo'
|
|
import axios from 'axios'
|
|
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
dialogInfo
|
|
},
|
|
data() {
|
|
return {
|
|
showedMoreInfo: false,
|
|
warningList: [],
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "状态", coulmn: 'statusName' },
|
|
{ title: "所属网格", coulmn: 'gridName' },
|
|
{ title: "需求类型", coulmn: 'categoryName' },
|
|
{ title: "需求内容", coulmn: 'content' },
|
|
{ title: "上报类型", coulmn: 'reportTypeName' },
|
|
{ title: "上报人", coulmn: 'reportUserName' },
|
|
{ title: "上报时间", coulmn: 'reportTime' },
|
|
{ title: "需求人", coulmn: 'demandUserName' },
|
|
{ title: "服务方", coulmn: 'serviceName' },
|
|
{ title: "服务时间", coulmn: 'wantServiceTime' },
|
|
],
|
|
categoryList: [],
|
|
categoryCode: '',
|
|
timeRange: '',
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
reportDict: [],
|
|
selectAgency: '',
|
|
propTree: [],
|
|
value2: '',
|
|
visibleLoading: true,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
detailInfo: {}
|
|
};
|
|
},
|
|
watch: {
|
|
timeRange(val) {
|
|
console.log('val-www', val)
|
|
if (!val) return false
|
|
this.handleCascader(this.selectAgency)
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.initTime()
|
|
await nextTick(100);
|
|
await this.getAgencyList()
|
|
await this.getDict()
|
|
this.getServicePie(this.$store.state.user.agencyId, 'agency')
|
|
// this.initCharts()
|
|
// this.initChartType()
|
|
// this.getServiceList(this.$store.state.user.agencyId, 'agency');
|
|
},
|
|
methods: {
|
|
initCharts(xData, yData) {
|
|
const eId = document.getElementById('echartsBox')
|
|
let _charts = echarts.init(eId)
|
|
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
// Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
},
|
|
backgroundColor: 'transprant',
|
|
borderColor: 'transprant',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: params => {
|
|
let res;
|
|
let arr = []
|
|
let total = 0
|
|
const xName = params[0].axisValue
|
|
this.categoryList.forEach(item => {
|
|
if (item.categoryName === xName) {
|
|
arr = item.detail
|
|
total = item.total
|
|
}
|
|
})
|
|
let title = `<div style='margin-bottom: 10px;'><span>${xName}分类需求</span>${total}个</div>`
|
|
let desc = ''
|
|
let unit = '个'
|
|
arr.forEach(item => {
|
|
if (item.legendCode == 'volunteer') unit = '名'
|
|
else unit = '个'
|
|
if (item.legendCode == 'unfinished') {
|
|
desc += `<div><span>尚有 ${item.serviceDemandTotal} 个需求未完成</span></div>`
|
|
}else {
|
|
desc += `<div><span>共 ${item.totalService} ${unit} ${item.legendName} 完成需求 ${item.serviceDemandTotal} 个</span></div>`
|
|
}
|
|
|
|
})
|
|
res= title + desc
|
|
return res
|
|
}
|
|
},
|
|
legend: {
|
|
top: 'bottom',
|
|
bottom: 'bottom',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
color: '#fff',
|
|
interval: 0
|
|
},
|
|
axisTick: {
|
|
interval: 0
|
|
},
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
// axisLine: false
|
|
},
|
|
series: yData
|
|
|
|
};
|
|
|
|
option && _charts.setOption(option);
|
|
_charts.on('click', params => {
|
|
this.clickBar(params)
|
|
})
|
|
|
|
},
|
|
async getServicePie(orgId, orgType) {
|
|
const url = "/heart/userdemand/category-analysis";
|
|
let params = {
|
|
orgId,
|
|
orgType,
|
|
startDateId: this.timeRange && this.timeRange[0] || '',
|
|
endDateId: this.timeRange && this.timeRange[1] || ''
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
console.log('pie-data', data)
|
|
const { categoryList, legend } = data
|
|
this.categoryList = categoryList
|
|
let xData = categoryList.map(item => item.categoryName)
|
|
let yData = []
|
|
yData = legend.map((item, index) => {
|
|
return {
|
|
name: item.legendName,
|
|
type: 'bar',
|
|
stack: 'total',
|
|
// barWidth: 20,
|
|
label: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: categoryList.map(n => {
|
|
return n.detail[index].serviceDemandTotal
|
|
})
|
|
}
|
|
})
|
|
console.log('yData', yData)
|
|
|
|
this.initCharts(xData, yData)
|
|
this.categoryCode = categoryList[0].categoryCode
|
|
this.getServiceList(orgId, orgType, categoryList[0].categoryCode)
|
|
} else {
|
|
}
|
|
this.visibleLoading = false;
|
|
},
|
|
async getServiceList(orgId, orgType, _code) {
|
|
const url = "/heart/userdemand/pagelist-analysis";
|
|
let params = {
|
|
orgId,
|
|
orgType,
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
categoryCode: _code || '',
|
|
startDateId: this.timeRange && this.timeRange[0] || '',
|
|
endDateId: this.timeRange && this.timeRange[1] || ''
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
const status = {
|
|
pending: '待处理',
|
|
canceled: '已取消',
|
|
assigned: '已派单',
|
|
have_order: '已接单',
|
|
finished: '已完成',
|
|
}
|
|
// const type = {
|
|
// volunteer: '志愿者',
|
|
// social_org: '社会组织',
|
|
// community_org: '社区自组织',
|
|
// party_unit: '区域党建单位',
|
|
// }
|
|
this.tableData = data.list.map((item, index) => {
|
|
return {
|
|
...item,
|
|
statusName: status[item.status],
|
|
reportTypeName: this.reportDict.filter(n => n.value === item.reportType)[0].label,
|
|
index: index + 1
|
|
}
|
|
})
|
|
this.total = data.total
|
|
|
|
} else {
|
|
}
|
|
this.visibleLoading = false;
|
|
},
|
|
async getAgencyList() {
|
|
// const url = "/gov/org/customeragency/staffinagencylist";
|
|
const url = '/gov/org/customeragency/agencygridtree'
|
|
// let params = {
|
|
// agencyId: this.$store.state.user.agencyId,
|
|
// };
|
|
const { data, code, msg } = await requestPost(url);
|
|
if (code === 0) {
|
|
console.log('data-org----o', data)
|
|
this.selectAgency = [`${data.agencyId}-${data.level}`]
|
|
let arr = []
|
|
arr.push(data)
|
|
this.propTree = arr && this.getTreeData(arr)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getDict() {
|
|
// const url = "/gov/org/customeragency/staffinagencylist";
|
|
const url = '/sys/dict/data/dictlist'
|
|
let params = {
|
|
dictType: 'user_demand_report_type',
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
console.log('data-org----dict', data)
|
|
this.reportDict = data
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
handleExport() {
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
let params = {
|
|
orgId: _arr[0],
|
|
orgType: orgType,
|
|
categoryCode: this.categoryCode,
|
|
startDateId: this.timeRange && this.timeRange[0] || '',
|
|
endDateId: this.timeRange && this.timeRange[1] || ''
|
|
}
|
|
// .post('epmetuser/icresiuser/exportExcel', params)
|
|
axios({
|
|
url: window.SITE_CONFIG['apiURL'] + '/heart/userdemand/analysis-export',
|
|
// url: 'epmetuser/icresiuser/exportExcel',
|
|
method: 'post',
|
|
data: params,
|
|
responseType: 'blob'
|
|
})
|
|
.then(res => {
|
|
console.log('resllll', res)
|
|
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
|
|
console.log('filename', fileName)
|
|
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
|
|
var url = window.URL.createObjectURL(blob)
|
|
var aLink = document.createElement('a')
|
|
aLink.style.display = 'none'
|
|
aLink.href = url
|
|
aLink.setAttribute('download', fileName)
|
|
document.body.appendChild(aLink)
|
|
aLink.click()
|
|
document.body.removeChild(aLink) //下载完成移除元素
|
|
window.URL.revokeObjectURL(url) //释放掉blob对象
|
|
})
|
|
.catch((err) => {
|
|
console.log('获取导出情失败', err)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
},
|
|
getTreeData(data){
|
|
if (!Array.isArray(data)) return []
|
|
let arr = data.map(item => {
|
|
let _item = {}
|
|
if (item.subAgencyList) {
|
|
if (item.subAgencyList.length === 0) {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: undefined
|
|
}
|
|
} else _item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: this.getTreeData(item.subAgencyList)}
|
|
} else {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
}
|
|
}
|
|
return _item
|
|
})
|
|
return arr
|
|
},
|
|
initTime() {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
|
|
this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
|
|
},
|
|
timeFormat(date) {
|
|
if (!date || typeof date === 'string') {
|
|
return false
|
|
}
|
|
var y = date.getFullYear() //年
|
|
var m = date.getMonth() + 1 //月
|
|
if (m < 10) m = '0' + m
|
|
var d = date.getDate() //日
|
|
if (d < 10) d = '0' + d
|
|
|
|
return y + '-' + m + '-' + d
|
|
},
|
|
clickBar(params) {
|
|
console.log('params---p', params)
|
|
let code = ''
|
|
this.categoryList.forEach(item => {
|
|
if (item.categoryName == params.name) code = item.categoryCode
|
|
})
|
|
if (code) {
|
|
this.categoryCode = code
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
this.pageNo = 1
|
|
this.getServiceList(_arr[0], orgType, code)
|
|
}
|
|
},
|
|
async handleLook(val) {
|
|
|
|
// this.detailId = val.id
|
|
this.detailInfo = val
|
|
// await this.getDetail(val.id)
|
|
this.showedMoreInfo = true
|
|
},
|
|
handleCascader(val) {
|
|
console.log('val-vvv', val)
|
|
if (val.length > 0) {
|
|
const _arr = val[val.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
this.getServicePie(_arr[0], orgType)
|
|
}
|
|
|
|
},
|
|
pageSizeChangeHandleNew(val) {
|
|
this.pageNo = 1;
|
|
this.pageSize = val;
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
this.getServiceList(_arr[0], orgType, this.categoryCode)
|
|
},
|
|
pageCurrentChangeHandleNew(val) {
|
|
this.pageNo = val;
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
this.getServiceList(_arr[0], orgType, this.categoryCode)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.warning-box-bottom {
|
|
margin-top: 10px;
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.title-icon {
|
|
display: block;
|
|
width: 46px;
|
|
height: 34px;
|
|
box-sizing: border-box;
|
|
margin-right: 6px;
|
|
}
|
|
::v-deep .el-dropdown {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
.title-time {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
margin-left: 30px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
.title-time-label {
|
|
margin-right: 10px;
|
|
}
|
|
::v-deep .el-date-editor--month {
|
|
width: 100px;
|
|
.el-input__inner {
|
|
width: 100px;
|
|
height: 24px;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
background: #06186D;
|
|
border: 1px solid #1A64CC;
|
|
border-radius: 2px;
|
|
}
|
|
.el-input__prefix {
|
|
display: none;
|
|
}
|
|
.el-input__suffix {
|
|
right: 0;
|
|
.el-input__icon {
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.title-label {
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
.el-input__inner {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
.el-icon-arrow-down::before {
|
|
content: "\e790";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.second-select {
|
|
margin: 0 10px 0 0;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
height: 36px;
|
|
.el-input__inner {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
line-height: 36px;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: "\e78f";
|
|
}
|
|
// .el-select__caret:before {
|
|
// content: '\E790'
|
|
// }
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 360px;
|
|
position: relative;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
.el-range-input {
|
|
color: #fff;
|
|
background: #06186d;
|
|
}
|
|
.el-range-separator {
|
|
color: #fff;
|
|
}
|
|
.el-range__icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
// float: right;
|
|
}
|
|
.el-input__prefix {
|
|
left: unset;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.card-echart {
|
|
display: flex;
|
|
margin-top: 40px;
|
|
.card-left {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
}
|
|
}
|
|
.echart-wr {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 50%;
|
|
height: 320px;
|
|
box-sizing: border-box;
|
|
.echart-org {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.echart-cicle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 240px;
|
|
height: 240px;
|
|
box-sizing: border-box;
|
|
margin-top: -120px;
|
|
margin-left: -120px;
|
|
border: 1px dashed rgba(0, 96, 240, 1);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.echarts-tips {
|
|
width: 40%;
|
|
// flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.echarts-tips-wd50 {
|
|
width: 50%;
|
|
}
|
|
.tips-list, .tips-item, .tips-lists, .tips-items-num {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.tips-list {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
flex-wrap: wrap;
|
|
// justify-content: center;
|
|
.tips-item {
|
|
// flex: 1;
|
|
width: 50%;
|
|
margin-top: 20px;
|
|
// margin-right: 40px;
|
|
cursor: pointer;
|
|
.tips-item-icon {
|
|
width: 20px;
|
|
height: 10px;
|
|
box-sizing: border-box;
|
|
margin-right: 8px;
|
|
background: #1B51FF;
|
|
border-radius: 2px;
|
|
}
|
|
.tips-item-text {
|
|
font-size: 16px;
|
|
color: #D2E7FF;
|
|
}
|
|
}
|
|
}
|
|
.tips-lists {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
.tips-items {
|
|
margin-bottom: 30px;
|
|
width: 50%;
|
|
.tips-items-title {
|
|
font-size: 16px;
|
|
}
|
|
.tips-items-num {
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
margin-top: 20px;
|
|
padding-right: 30px;
|
|
font-size: 20px;
|
|
.tips-item-has {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.echarts-boxs {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
|
|
.ecahrts-button {
|
|
width: 100%;
|
|
text-align: right;
|
|
::v-deep .el-button--warning {
|
|
|
|
background: linear-gradient(90deg, #0863EA, #3B9FFC);
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|