代码推送
This commit is contained in:
381
yq/src/views/MessageBoard/index.js
Normal file
381
yq/src/views/MessageBoard/index.js
Normal file
@@ -0,0 +1,381 @@
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user