是小王呀\24601
8 months ago
10 changed files with 751 additions and 58 deletions
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<div style="margin-top:10px"> |
|||
<div class="chart-container"> |
|||
<div id="chart1" class="chart"></div> |
|||
<div id="chart2" class="chart"></div> |
|||
<div id="chart3" class="chart"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { completeList } from "@/js/columns/constants"; |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
data: [ |
|||
{ |
|||
value:3000, |
|||
name: '直接访问' |
|||
}, |
|||
{ |
|||
value:200 , |
|||
name: '联盟广告' |
|||
}, |
|||
{ |
|||
value: 100, |
|||
name: '搜索引擎' |
|||
} |
|||
], |
|||
formData: { |
|||
startTime: "", |
|||
endTime: "", |
|||
type: "2" |
|||
}, |
|||
pageNo: 0, |
|||
pageSize:window.localStorage.getItem('pageSize') || 20, |
|||
total: 0, |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { }, |
|||
async mounted() { |
|||
this.initChart("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|||
this.initChart1("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|||
this.initChart2("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
initChart(url) { |
|||
const myChart = echarts.init(document.getElementById('chart1')); |
|||
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|||
const option = { |
|||
color: ['#3C94FE', '#FE9166', '#FAC156', '#22C1C3', '#F0D915', '#6FC364',"#BA9CFF", ], |
|||
tooltip: { |
|||
formatter: '{b}<br/> <br/>{c} ({d}%)', |
|||
trigger: 'item', |
|||
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: '#fff' // 文字颜色 |
|||
} |
|||
}, |
|||
legend: { |
|||
orient: 'horizontal', |
|||
bottom:0, |
|||
formatter: ['示例1', '示例2', '示例3', '示例4', '示例5'] // 图例名称 |
|||
}, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'outside', // 标签位置，`center`表示在饼图中央显示 |
|||
formatter: '{b}', // 使用名称 |
|||
fontSize: 16, // 设置字体大小 |
|||
color: '#333' // 设置字体颜色 |
|||
} |
|||
}, |
|||
labelLine: { // 设置标签连接线的样式 |
|||
normal: { |
|||
show: false, // 显示连接线 |
|||
length: 20, // 连接线长度 |
|||
lineStyle: { |
|||
color: '#333' // 设置连接线颜色 |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
selectedMode: 'single', // 单选模式 |
|||
data: this.data.map((item, idx) => ({ |
|||
...item, |
|||
})), |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
|
|||
], |
|||
emphasis: { // 高亮状态下的样式设置 |
|||
itemStyle: { |
|||
shadowBlur: 10, // 阴影的模糊大小 |
|||
shadowOffsetX: 0, // 阴影水平方向上的偏移距离 |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 |
|||
borderRadius: 10, |
|||
|
|||
} |
|||
} |
|||
}; |
|||
myChart.setOption(option); //数据集 |
|||
setTimeout(() => { |
|||
myChart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: maxIndex |
|||
}); |
|||
}, 500); |
|||
// myChart.dispatchAction({ |
|||
// type: 'highlight', // 高亮选中扇区 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
|
|||
// myChart.dispatchAction({ |
|||
// type: 'showTip', // 显示提示框 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
}, |
|||
initChart1(url) { |
|||
const myChart = echarts.init(document.getElementById('chart2')); |
|||
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)', |
|||
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: '#fff' // 文字颜色 |
|||
} |
|||
}, |
|||
legend: { |
|||
orient: 'horizontal', |
|||
bottom:10, |
|||
data: ['示例1', '示例2', '示例3', '示例4', '示例5'] // 图例名称 |
|||
}, |
|||
color: ['#3C94FE', '#FE9166', '#FAC156', '#22C1C3', '#F0D915', '#6FC364',"#BA9CFF", ], |
|||
series: [ |
|||
{ |
|||
radius:["80","100"], |
|||
type: 'pie', |
|||
avoidLabelOverlap: false, |
|||
selectedMode: 'single', // 单选模式 |
|||
data: this.data.map((item, idx) => ({ |
|||
...item, |
|||
})), |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '30', |
|||
fontWeight: 'bold' |
|||
}, |
|||
// itemStyle: { |
|||
// shadowBlur: 10, |
|||
// shadowOffsetX: 0, |
|||
// shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
// } |
|||
} |
|||
} |
|||
|
|||
], |
|||
emphasis: { // 高亮状态下的样式设置 |
|||
itemStyle: { |
|||
shadowBlur: 10, // 阴影的模糊大小 |
|||
shadowOffsetX: 0, // 阴影水平方向上的偏移距离 |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 |
|||
} |
|||
} |
|||
}; |
|||
myChart.setOption(option); //数据集 |
|||
setTimeout(() => { |
|||
myChart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: maxIndex |
|||
}); |
|||
}, 500); |
|||
// myChart.dispatchAction({ |
|||
// type: 'highlight', // 高亮选中扇区 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
|
|||
// myChart.dispatchAction({ |
|||
// type: 'showTip', // 显示提示框 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
}, |
|||
initChart2(url) { |
|||
const myChart = echarts.init(document.getElementById('chart3')); |
|||
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: '#fff' // 文字颜色 |
|||
} |
|||
}, |
|||
legend: { |
|||
orient: 'horizontal', |
|||
bottom:10, |
|||
data: ['示例1', '示例2', '示例3', '示例4', '示例5'] // 图例名称 |
|||
}, |
|||
color: ['#3C94FE', '#FE9166', '#FAC156', '#22C1C3', '#F0D915', '#6FC364',"#BA9CFF", ], |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
selectedMode: 'single', // 单选模式 |
|||
data: this.data.map((item, idx) => ({ |
|||
...item, |
|||
})), |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
|
|||
], |
|||
emphasis: { // 高亮状态下的样式设置 |
|||
itemStyle: { |
|||
shadowBlur: 10, // 阴影的模糊大小 |
|||
shadowOffsetX: 0, // 阴影水平方向上的偏移距离 |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 |
|||
borderRadius: 10 |
|||
} |
|||
} |
|||
}; |
|||
myChart.setOption(option); //数据集 |
|||
setTimeout(() => { |
|||
myChart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: maxIndex |
|||
}); |
|||
}, 500); |
|||
// myChart.dispatchAction({ |
|||
// type: 'highlight', // 高亮选中扇区 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
|
|||
// myChart.dispatchAction({ |
|||
// type: 'showTip', // 显示提示框 |
|||
// seriesIndex: 0, |
|||
// dataIndex: maxIndex |
|||
// }); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.chart-container { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.chart { |
|||
width: 33.3%; |
|||
height: 350px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,223 @@ |
|||
<template > |
|||
<div class="g-main"> |
|||
|
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost,requestGet } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import axios from 'axios' |
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
searchHeight: 0,//搜索栏高度, |
|||
pageNo:0, |
|||
pageSize:20, |
|||
total:0, |
|||
formTitle:"", |
|||
formShow:false, |
|||
tableData: [], |
|||
tableList:[] |
|||
} |
|||
}, |
|||
|
|||
activated () { |
|||
|
|||
}, |
|||
async mounted () { |
|||
console.log("dsfjsdklf"); |
|||
this.getCategoryTree() |
|||
}, |
|||
|
|||
methods: { |
|||
//事件类型统计 |
|||
async getCategoryTree() { |
|||
const url = "/governance/icEvent/getCategoryTree"; |
|||
let param = { |
|||
endDate : "2025-12-31 23:59:59", |
|||
startDate : "2025-01-01 00:00:00", |
|||
usableFlag: true |
|||
} |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
if (code === 0) { |
|||
this.tableList = data |
|||
// this.tableList=this.flattenTree(data); |
|||
console.log(this.tableList); |
|||
console.log(this.tableList, "lksdjfklj s"); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handlereturn(){ |
|||
this.$emit('close') |
|||
}, |
|||
async loadTable () { |
|||
const url = "/governance/commonServiceType/treeList" |
|||
let {data,msg,code } = await requestGet(url) |
|||
if(code == 0){ |
|||
this.tableData = data |
|||
}else{ |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
diaClose () { |
|||
this.$refs.ref_form.resetData() |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
}, |
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
async handleDetail (row) { |
|||
this.detailShow = true |
|||
const _data = await this.detail(row) |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form_detail.initForm(_data) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd (row,type) { |
|||
if(type=="add"){ |
|||
console.log(row.id); |
|||
this.formTitle = '新增分类' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm(type, row) |
|||
}) |
|||
} else if(type=="add0"){ |
|||
this.formTitle = '新增分类' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm(type, row) |
|||
}) |
|||
} else if (type == 'edit') { |
|||
this.formTitle = '修改分类' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm(type, row) |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
|
|||
selectAll (selection) { |
|||
|
|||
this.selection = selection |
|||
|
|||
|
|||
}, |
|||
selectionChange (selection) { |
|||
this.selection = selection |
|||
|
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteDemand(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
this.$message({ |
|||
type: "info", |
|||
message: "已取消删除" |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
async deleteDemand (row) { |
|||
const url = `/governance/commonServiceType/delete/${row.id}` |
|||
const { data, code, msg } = await requestPost(url) |
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.loadTable() |
|||
} else if (code > 8000) { |
|||
this.$message({ |
|||
message: msg, |
|||
duration: 0 |
|||
}) |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
handleDiyClose () { |
|||
this.diyDialog = false; |
|||
}, |
|||
handleClose (done) { |
|||
this.diyDialog = false |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
console.log(this.searchHeight) |
|||
let height = this.searchHeight + 270 |
|||
return this.$store.state.inIframe ? this.clientHeight - height + this.iframeHeight : this.clientHeight - height |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
|
|||
<style > |
|||
.el-message.is-closable .el-message__content { |
|||
line-height: 20px; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
Loading…
Reference in new issue