381 lines
14 KiB
JavaScript
381 lines
14 KiB
JavaScript
import * as echarts from "echarts";
|
|
import { msgBoradTabel, msgBoradNum,responMsg } from "../../api/messageBoard"
|
|
import { handelBtcPrice, handelWatermark,handelDimensionalArr,handelZoom,} from "../../util/processingData"
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabelMsg: {
|
|
status: 0
|
|
},
|
|
//未处理留言
|
|
tabelData0: [
|
|
{
|
|
id: "1",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
{
|
|
id: "2",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
{
|
|
id: "3",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
],
|
|
//已处理留言
|
|
tabelData1: [
|
|
{
|
|
id: "1",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
{
|
|
id: "2",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
{
|
|
id: "3",
|
|
userDate: "2022/03/01",
|
|
userName: "用户名",
|
|
userMsg: "留言内容",
|
|
msgPage: "留言所在页面",
|
|
coinType: "BTC",
|
|
respon: "回复内容",
|
|
responDate: "2022/03/02",
|
|
responser: "回复人"
|
|
},
|
|
],
|
|
//留言数量
|
|
msgCount: {
|
|
total: "",
|
|
solvdCount: "",
|
|
pendingCount: ""
|
|
},
|
|
option: {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
//解决tooltip显示不全问题1
|
|
confine: true,
|
|
},
|
|
legend: {
|
|
right: "100",
|
|
//处理legengd过长
|
|
// formatter: function (name) {
|
|
|
|
// return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
|
|
// },
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: "time",
|
|
boundaryGap: false,
|
|
// axisLabel: {
|
|
// formatter: `{yyyy}-{MM}-{dd}`,
|
|
// },
|
|
data: []
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
// boundaryGap: [0, "100%"],
|
|
axisLabel: {
|
|
formatter: function (e) {
|
|
|
|
let value;
|
|
if (e > 100000000) {
|
|
value = `${e / 100000000}E`;
|
|
} else if (e > 1000000) {//百万
|
|
value = `${e / 1000000}M`;
|
|
} else if (e > 10000) {//百万
|
|
value = `${e / 10000}W`;
|
|
} else if (e < -1000000) {//百万
|
|
value = `${e / 1000000}M`;
|
|
} else if (e < -10000) {//万
|
|
value = `${e / 10000}W`;
|
|
}
|
|
else {
|
|
value = e;
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
// boundaryGap: [0, "100%"],
|
|
min: "dataMin",
|
|
max: "dataMax",
|
|
show: true,
|
|
},
|
|
{
|
|
type: "value",
|
|
// boundaryGap: [0, "100%"],
|
|
min: "dataMin",
|
|
max: "dataMax",
|
|
show: false,
|
|
},
|
|
|
|
|
|
|
|
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 20,
|
|
end: 100,
|
|
},
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "未解决留言数",
|
|
type: "line",
|
|
smooth: false,
|
|
symbol: "circle",
|
|
showSymbol: false,
|
|
symbolSize: 5,
|
|
// areaStyle: {},
|
|
itemStyle: {
|
|
color: "#f7931a",
|
|
borderColor: "rgba(221,220,107,0.1)",
|
|
borderWidth: 12,
|
|
},
|
|
yAxisIndex: 0,
|
|
lineStyle: {
|
|
//线条样式
|
|
color: "#f7931a",
|
|
width: "1",
|
|
},
|
|
data: [],
|
|
},
|
|
{
|
|
name: "已解决留言数",
|
|
type: "line",
|
|
smooth: false,
|
|
symbol: "circle",
|
|
showSymbol: false,
|
|
symbolSize: 5,
|
|
// areaStyle: {},
|
|
itemStyle: {
|
|
color: "#a32140",
|
|
borderColor: "rgba(221,220,107,0.1)",
|
|
borderWidth: 12,
|
|
},
|
|
yAxisIndex: 1,
|
|
lineStyle: {
|
|
//线条样式
|
|
color: "#a32140",
|
|
width: "1",
|
|
},
|
|
data: [],
|
|
},
|
|
{
|
|
name: "总留言数",
|
|
type: "line",
|
|
smooth: false,
|
|
symbol: "circle",
|
|
showSymbol: false,
|
|
symbolSize: 5,
|
|
// areaStyle: {},
|
|
itemStyle: {
|
|
color: "#7a5edf",
|
|
borderColor: "rgba(221,220,107,0.1)",
|
|
borderWidth: 12,
|
|
},
|
|
yAxisIndex: 2,
|
|
lineStyle: {
|
|
//线条样式
|
|
color: "#7a5edf",
|
|
width: "1",
|
|
},
|
|
data: [],
|
|
},
|
|
|
|
],
|
|
},
|
|
dialogFormVisible: false,
|
|
submitReply: {//提交回复
|
|
message: '',
|
|
msg_id: "",
|
|
|
|
},
|
|
chartData:[],//所有留言数据（今日留言数）
|
|
MessageBoardLoading:false
|
|
|
|
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.tabelMsg.status = 0 //未处理
|
|
this.fetchMsgBoradTabe0(this.tabelMsg)
|
|
this.tabelMsg.status = 1//已处理
|
|
this.fetchMsgBoradTabel1(this.tabelMsg)
|
|
this.tabelMsg.status = 2//所有留言
|
|
this.fetchMsgBoradTabel2(this.tabelMsg)
|
|
//请求留言数量
|
|
this.fetchMsgBoradNum()
|
|
},
|
|
methods: {
|
|
//初始化图表
|
|
inCharts() {
|
|
if (this.myChart == null) {
|
|
this.myChart = echarts.init(document.getElementById("MessageBoardBox"));
|
|
}
|
|
this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
|
|
|
|
this.myChart.setOption(this.option);
|
|
|
|
window.addEventListener("resize", () => {
|
|
if (this.myChart) this.myChart.resize();
|
|
});
|
|
},
|
|
//tabel表格数据请求//未处理
|
|
async fetchMsgBoradTabe0(data) {
|
|
const list = await msgBoradTabel(data)
|
|
this.tabelData0 = list.data.data.data
|
|
if ( !this.tabelData0[0]) return
|
|
this.tabelData0.forEach(item=>{
|
|
item.userDate = `${item.userDate.split("T")[0]} ${item.userDate.split("T")[1].split(".")[0]}`
|
|
})
|
|
},
|
|
//已处理
|
|
async fetchMsgBoradTabel1(data) {
|
|
const list = await msgBoradTabel(data)
|
|
this.tabelData1 = list.data.data.data
|
|
if ( !this.tabelData1[0]) return
|
|
this.tabelData1.forEach(item=>{
|
|
item.userDate = `${item.userDate.split("T")[0]} ${item.userDate.split("T")[1].split(".")[0]}`
|
|
item.responDate = `${item.responDate.split("T")[0]} ${item.responDate.split("T")[1].split(".")[0]}`
|
|
})
|
|
},
|
|
//所有留言
|
|
async fetchMsgBoradTabel2(data) {
|
|
const list = await msgBoradTabel(data)
|
|
|
|
this.chartData = list.data.data.data
|
|
if (!this.chartData[0]) return
|
|
|
|
},
|
|
//回复留言
|
|
async fetchResponMsg(data) {
|
|
const list = await responMsg(data);
|
|
|
|
this.$message({
|
|
message: list.data.msg,
|
|
type: "success",
|
|
customClass: "messageClass",
|
|
});
|
|
|
|
if (list.data.code == 200) {
|
|
// this.$router.go(0) //处理数据以后 刷新一次更新数据
|
|
this.tabelMsg.status = 0 //未处理
|
|
this.fetchMsgBoradTabe0(this.tabelMsg)
|
|
this.tabelMsg.status = 1//已处理
|
|
this.fetchMsgBoradTabel1(this.tabelMsg)
|
|
this.tabelMsg.status = 2//所有留言
|
|
this.fetchMsgBoradTabel2(this.tabelMsg)
|
|
//请求留言数量
|
|
this.fetchMsgBoradNum()
|
|
}
|
|
|
|
},
|
|
|
|
//留言数量请求
|
|
async fetchMsgBoradNum(data) {
|
|
this.MessageBoardLoading =true
|
|
const list = await msgBoradNum(data)
|
|
if (list.data.data.length == 0){
|
|
this.MessageBoardLoading =false
|
|
return
|
|
}
|
|
//当前时间匹配今日留言
|
|
let todayTime = new Date()
|
|
todayTime = todayTime.toISOString().split("T")[0]
|
|
|
|
let chartDataList = list.data.data
|
|
// if (!this.chartDataList) return
|
|
this.option= handelWatermark(this.option,750,300) //加水印
|
|
let pendingCountValue = [] //未解决留言数
|
|
let solvdCountValue = []//已解决留言数
|
|
let totalValue = [] //总留言数
|
|
chartDataList.forEach(item=>{
|
|
// item.date = item.date.split("T")[0].replace(/-/g,"/")
|
|
if (todayTime ==item.date.split("T")[0] ) {//匹配当前日期 今日留言是否有数据
|
|
this.msgCount = item
|
|
}
|
|
|
|
pendingCountValue.push(item.pendingCount)
|
|
solvdCountValue.push(item.solvdCount)
|
|
totalValue.push(item.total)
|
|
})
|
|
|
|
this.option.series[0].data = handelDimensionalArr(chartDataList, pendingCountValue)
|
|
this.option.series[1].data = handelDimensionalArr(chartDataList, solvdCountValue)
|
|
this.option.series[2].data = handelDimensionalArr(chartDataList, totalValue)
|
|
this.inCharts()
|
|
this.MessageBoardLoading =false
|
|
},
|
|
//点击未处理留言的回复
|
|
clickRow(a, b) {
|
|
//每一行的ID
|
|
this.submitReply.msg_id=b[a].id
|
|
|
|
this.dialogFormVisible = true
|
|
},
|
|
//确定提交回复
|
|
handelSubmitReply() {
|
|
|
|
this.fetchResponMsg(this.submitReply)
|
|
this.dialogFormVisible = false
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
} |