代码推送

This commit is contained in:
2026-01-16 10:32:27 +08:00
parent 8da877de40
commit 408e40b206
570 changed files with 172605 additions and 1 deletions

View 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
}
}
}

View File

@@ -0,0 +1,205 @@
<template>
<!-- 留言板后台管理 -->
<div class="MessageBoard" v-loading="MessageBoardLoading">
<el-row type="flex" justify="center">
<el-col :span="7">
<span class="information">
<span> {{$t(`message.todayMessage`)}}:</span>
<span class="num">{{ msgCount.total || 0 }}</span></span
>
</el-col>
<el-col :span="7">
<span class="information">
<span> {{$t(`message.processedMessage`)}}:</span>
<span class="num">{{ tabelData1.length }}</span></span
>
</el-col>
<el-col :span="7">
<span class="information">
<span> {{$t(`message.unprocessedMessage`)}}:</span
><span class="num">{{tabelData0.length}}</span></span
>
</el-col>
</el-row>
<!-- 留言分析图表 -->
<el-row>
<el-col>
<h5> {{$t(`message.historyChart`)}}</h5>
</el-col>
<el-col>
<div
class="chart"
id="MessageBoardBox"
style="width: 80vw; height: 260px;margin-left:-100px"
>
</div>
</el-col>
</el-row>
<!-- 未处理留言表格 -->
<el-row>
<el-col>
<h5>{{$t(`message.unprocessedTabel`)}}</h5>
<el-table
class="table"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="tabelData0"
style="width: 100%"
max-height="250"
>
<el-table-column fixed prop="id" :label="$t(`message.num`)" >
</el-table-column>
<el-table-column fixed prop="userDate" :label="$t(`message.userDate`)" >
</el-table-column>
<el-table-column prop="userName" :label="$t(`message.userName`)" >
</el-table-column>
<el-table-column prop="msgPage" :label="$t(`message.msgPage`)" >
<template slot-scope="scope">
{{ $t(scope.row.msgPage) }}
</template>
</el-table-column>
<el-table-column prop="userMsg" :label="$t(`message.userMsg`)">
</el-table-column>
<el-table-column fixed="right" :label="$t(`message.operation`)" width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="clickRow(scope.$index, tabelData0)"
type="text"
size="small"
>
{{$t(`message.reply`)}}
</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<!-- 回复留言弹窗 -->
<el-dialog
:title="$t(`message.reply`)"
:close-on-click-modal="false"
:modal-append-to-body="false"
:append-to-body="true"
:visible.sync="dialogFormVisible"
class="replyDialog"
>
<el-form :model="submitReply">
<el-form-item :label="$t(`message.inputContent`)">
<el-input v-model="submitReply.message" resize="none" :placeholder="$t(`message.said`)" type="textarea" :autosize="{ minRows:3, maxRows: 6 }" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> {{$t(`message.cancel`)}}</el-button>
<el-button type="primary" @click="handelSubmitReply"
>{{$t(`message.submitReply`)}}</el-button
>
</div>
</el-dialog>
<!-- 已处理留言表格 -->
<el-row>
<el-col>
<h5>{{$t(`message.processedTabel`)}}</h5>
<el-table
class="table"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="tabelData1"
style="width: 100%"
max-height="250"
>
<el-table-column fixed prop="id" :label="$t(`message.num`)" >
</el-table-column>
<el-table-column fixed prop="userDate" :label="$t(`message.userDate`)">
</el-table-column>
<el-table-column prop="userName" :label="$t(`message.userName`)" >
</el-table-column>
<el-table-column prop="userMsg" :label="$t(`message.userMsg`)" >
</el-table-column>
<el-table-column prop="responDate" :label="$t(`message.responDate`)" >
</el-table-column>
<el-table-column prop="responser" :label="$t(`message.responser`)" >
</el-table-column>
<el-table-column prop="respon" :label="$t(`message.respon`)"> </el-table-column>
<!-- <el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small"
>
回复
</el-button>
</template>
</el-table-column> -->
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
import IndexJs from "../MessageBoard/index";
export default {
mixins: [IndexJs],
};
</script>
<style lang="scss" scoped>
.MessageBoard {
// outline: 1px solid red;
// background:#fef4e8 ;
padding: 20px 100px;
height: 100vh;
width: 100%;
}
.chart {
// outline: 1px solid rgba(0, 0, 0, 0.5);
text-align: center;
}
.table {
// outline: 1px solid red;
margin-top: 10px;
outline: 1px solid rgba(0, 0, 0, 0.5);
}
//留言数量
.information {
// outline: 1px solid rgba(0,0,0,0.5);
padding: 5px 10px;
// outline: 1px solid red;
width: 100%;
font-size: 15px;
display: flex;
margin-top: 5px;
font-weight: 600;
// span{
// display: inline-block;
// width: 100px;
// // outline: 1px solid red;
// text-align: right;
// }
.num {
color: #21a0ff;
display: inline-block;
width: 30px;
text-align: center;
// outline: 1px solid red;
font-weight: 600;
}
}
.replyDialog {
// border: 1px solid red;
width: 60%;
margin: 0 auto;
}
</style>
<style >
</style>