Skip to content

N
national_museum_vod
Commit 104ecfa8 authored by xulili's avatar xulili
Browse files
Options

统计

parent e8d06349
Show whitespace changes
Inline Side-by-side
Showing with 869 additions and 678 deletions
src/components/breadcrumb.vue
View file @ 104ecfa8
...@@ -43,11 +43,12 @@ export default { ...@@ -43,11 +43,12 @@ export default {
background-color:@party-white; background-color:@party-white;
.icon-loc{ .icon-loc{
display: inline-block; display: inline-block;
width: 11px; width: 15px;
height: 16px; height: 16px;
background-color: @party-pink;
margin-right: 10px; margin-right: 10px;
vertical-align: middle; vertical-align: middle;
background: url("~@/assets/login/loc.png") no-repeat;
background-size: cover;
} }
.breadcrumb__item{ .breadcrumb__item{
span{ span{
......
src/components/end/login.vue
View file @ 104ecfa8
...@@ -156,7 +156,7 @@ export default { ...@@ -156,7 +156,7 @@ export default {
100%; 100%;
} }
.page-title { .page-title {
margin-top: 140px; margin-top: 20px;
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
......
src/config/httpServer.js
View file @ 104ecfa8
...@@ -88,8 +88,7 @@ const httpServer = (opts,data,file,timeout)=>{ ...@@ -88,8 +88,7 @@ const httpServer = (opts,data,file,timeout)=>{
if(opts.authType && opts.authType!=""){ if(opts.authType && opts.authType!=""){
// Authorization // Authorization
if(opts.authType==="back"){ if(opts.authType==="back"){
//authToken=localStorage.getItem('backToken'); authToken=localStorage.getItem('backToken');
authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsInVzZXJfaWQiOiIxIiwiaXNzIjoiSUFUQSIsImV4cCI6MTYxNzAzMzM3NSwiaWF0IjoxNjE3MDE4OTc1fQ.NN7nF9aOGJIVZm-8x0uVz00S--YbETfkC1Ifu9R4PbnNPvObhDYlY_u2oxiq2dEkjkJ4sQWy5o2X-fTNaIvnIQ"
}else if(opts.authType==="front"){ }else if(opts.authType==="front"){
authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token'); authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token');
} }
......
src/page/accounts/statisticalDialog/edit.vue
View file @ 104ecfa8
...@@ -65,12 +65,13 @@ export default { ...@@ -65,12 +65,13 @@ export default {
return { return {
dialogVisible: false, dialogVisible: false,
organList: [], organList: [],
id:'', id: "",
form: { form: {
userName: "", userName: "",
orgId: "", orgId: "",
permanent: true, permanent: true,
date: "", date: "",
roleList: [],
}, },
rules: { rules: {
userName: [ userName: [
...@@ -97,28 +98,25 @@ export default { ...@@ -97,28 +98,25 @@ export default {
}, },
// 根据id获取获取详情内容 // 根据id获取获取详情内容
getDetailById(){ getDetailById() {
let _this = this let _this = this;
this.$https( this.$https(
{ {
method: "get", method: "get",
url: "tUser/getById", url: "tUser/getById",
authType: this.backToken, authType: this.backToken,
}, },
{id:_this.id} { id: _this.id }
) )
.then((res) => { .then((res) => {
if(res.status == 200 ){ if (res.status == 200) {
if (res.data.resultCode == 200 ) { if (res.data.resultCode == 200) {
let resData = res.data.data let resData = res.data.data;
for(let key in _this.form){ for (let key in _this.form) {
this.form[key] = resData[key] this.form[key] = resData[key];
} }
if(!this.form.permanent){ if (!this.form.permanent) {
this.form.date = [ this.form.date = [resData.effectiveDate, resData.exiredDate];
resData.effectiveDate,
resData.exiredDate
]
} }
} else { } else {
_this.$message.error(res.data.message); _this.$message.error(res.data.message);
...@@ -147,6 +145,7 @@ export default { ...@@ -147,6 +145,7 @@ export default {
orgId: "", orgId: "",
permanent: true, permanent: true,
date: "", date: "",
roleList: [],
}; };
}, },
// 提交 // 提交
...@@ -166,8 +165,9 @@ export default { ...@@ -166,8 +165,9 @@ export default {
user.permanent = this.form.permanent; user.permanent = this.form.permanent;
user.userName = this.form.userName; user.userName = this.form.userName;
user.orgId = this.form.orgId; user.orgId = this.form.orgId;
user.id = this.id user.id = this.id;
user.type = 5 user.roleList = this.form.roleList;
user.type = 5;
this.$https( this.$https(
{ {
method: "put", method: "put",
...@@ -205,5 +205,4 @@ export default { ...@@ -205,5 +205,4 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
</style> </style>
\ No newline at end of file
src/page/accounts/stbDialog/edit.vue
View file @ 104ecfa8
...@@ -67,10 +67,11 @@ export default { ...@@ -67,10 +67,11 @@ export default {
form: { form: {
id: "", id: "",
userName: "", userName: "",
areaId: ["110000","110100","110101"], areaId: ["110000", "110100", "110101"],
permanent: true, permanent: true,
date: "", date: "",
type: 4, //1.用户账号 2.平台单位单位管理员账号 3.机顶盒账号 4.运维账号 roleList: [],
type: 4 //1.用户账号 2.平台单位单位管理员账号 3.机顶盒账号 4..机顶盒运维账号
}, },
cascaderProps: { cascaderProps: {
label: "name", label: "name",
...@@ -121,7 +122,7 @@ export default { ...@@ -121,7 +122,7 @@ export default {
if (res.data.resultCode == 200) { if (res.data.resultCode == 200) {
let resData = res.data.data; let resData = res.data.data;
for (let key in _this.form) { for (let key in _this.form) {
if(key != 'areaId'){ if (key != "areaId") {
this.form[key] = resData[key]; this.form[key] = resData[key];
} }
} }
...@@ -156,8 +157,9 @@ export default { ...@@ -156,8 +157,9 @@ export default {
userName: "", userName: "",
areaId: [], areaId: [],
permanent: true, permanent: true,
roleList: [],
date: "", date: "",
type: 4, //1.用户账号 2.平台单位单位管理员账号 3.机顶盒账号 4.运维账号 type: 4 //1.用户账号 2.平台单位单位管理员账号 3.机顶盒账号 4.运维账号
}; };
}, },
// 提交 // 提交
...@@ -178,6 +180,7 @@ export default { ...@@ -178,6 +180,7 @@ export default {
user.areaId = [...this.form.areaId].pop(); user.areaId = [...this.form.areaId].pop();
user.permanent = this.form.permanent; user.permanent = this.form.permanent;
user.type = this.form.type; user.type = this.form.type;
user.roleList = this.form.roleList;
user.id = this.form.id; user.id = this.form.id;
this.$https( this.$https(
{ {
...@@ -204,7 +207,8 @@ export default { ...@@ -204,7 +207,8 @@ export default {
} }
}) })
.catch((err) => { .catch((err) => {
console.log(res); this.$message.error(err.message);
console.log(err);
}); });
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
......
src/page/accounts/unitAdminDialog/edit.vue
View file @ 104ecfa8
...@@ -120,6 +120,7 @@ export default { ...@@ -120,6 +120,7 @@ export default {
phone: "", phone: "",
weChat: "", weChat: "",
email: "", email: "",
roleList:[],
type: 2, //1.用户账号 2.平台单位管理员账号 3.机顶盒账号 4.运维账号 type: 2, //1.用户账号 2.平台单位管理员账号 3.机顶盒账号 4.运维账号
}, },
rules: { rules: {
...@@ -200,7 +201,7 @@ export default { ...@@ -200,7 +201,7 @@ export default {
permanent: true, permanent: true,
date: "", date: "",
roleList: [], roleList: [],
type:1 type: 2
} }
}, },
// 提交 // 提交
......
src/page/statistics/components/demand.vue
View file @ 104ecfa8
...@@ -2,43 +2,79 @@ ...@@ -2,43 +2,79 @@
<div class="demand"> <div class="demand">
<div class="common-title"> <div class="common-title">
<div class="icon-and-title"> <div class="icon-and-title">
<img class="icon-title" src="@/assets/overview/s-interation.png" alt=""> <img
<span class="title">{{title}}</span> class="icon-title"
src="@/assets/overview/s-interation.png"
alt=""
/>
<span class="title">{{ title }}</span>
</div> </div>
<img class="bg" src="@/assets/overview/bg_title02.png" alt=""> <img class="bg" src="@/assets/overview/bg_title02.png" alt="" />
</div> </div>
<div id="barDemand" @click="echartsClick"></div> <div id="barDemand"></div>
</div> </div>
</template> </template>
<script> <script>
export default { import { getCurDate } from "@/utils/util.time.js";
name: 'demand', export default {
name: "demand",
data() { data() {
return { return {
title:'互动频次' title: "互动频次",
} xAxisData: [],
yAxisData: [],
};
}, },
components:{}, components: {},
mounted() { mounted() {
setTimeout(()=>{ this.getList();
this.init()
},100)
}, },
methods: { methods: {
init(){ getList() {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
this.$https({
method: "post",
url: "tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=" + frequencyDate,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.xAxisData = res.data.data.organList;
this.yAxisData = res.data.data.cntList;
} else {
this.xAxisData = [];
this.yAxisData = [];
}
} else {
this.xAxisData = [];
this.yAxisData = [];
}
this.init();
})
.catch((err) => {
this.$message.error(err.message);
this.xAxisData = [];
this.yAxisData = [];
this.init();
});
},
init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top:30, top: 30,
left: '2%', left: "2%",
right: 40, right: 40,
bottom: 30, bottom: 30,
containLabel: true containLabel: true,
}, },
dataZoom: [{ dataZoom: [
{
type: "slider", type: "slider",
show: true, show: true,
bottom: 0, bottom: 0,
...@@ -50,108 +86,113 @@ ...@@ -50,108 +86,113 @@
}, },
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: "10px" fontSize: "10px",
},
}, },
}
], ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: true,//坐标轴两边留白 boundaryGap: true, //坐标轴两边留白
data: [ data: this.xAxisData,
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府', axisLabel: {
], //坐标轴刻度标签的相关设置。
axisLabel: { //坐标轴刻度标签的相关设置。 interval: 0,
interval:0,
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
formatter: function (value, index) { formatter: function (value, index) {
if(value.length > 4){ if (value.length > 4) {
return value.slice(0,4)+ '...' return value.slice(0, 4) + "...";
}else { } else {
return value return value;
}
} }
}, },
axisTick:{//坐标轴刻度相关设置。 },
axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisLine: {
lineStyle:{ //坐标轴轴线相关设置
color:'#eeeeee', lineStyle: {
type:'solid' color: "#eeeeee",
} type: "solid",
}, },
splitLine: { //坐标轴在 grid 区域中的分隔线。 },
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name:'单位/次', name: "单位/次",
splitNumber: 5, splitNumber: 5,
max:100, max: 100,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 12, fontSize: 12,
}, },
interval:'auto' interval: "auto",
}, },
axisLine:{ axisLine: {
show: false show: false,
}, },
axisTick:{ axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color:'#eeeeee', color: "#eeeeee",
type:'dashed' type: "dashed",
} },
} },
},
}
], ],
series: [ series: [
{ {
type: 'bar', type: "bar",
barWidth: 16, // 柱子宽度 barWidth: 16, // 柱子宽度
itemStyle:{ itemStyle: {
barBorderRadius: 120, // 圆角（左上、右上、右下、左下） barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
}, },
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(
'#AC9374', '#9B1E23' 0,
].map((color, offset) => ({ 0,
0,
1,
["#AC9374", "#9B1E23"].map((color, offset) => ({
color, color,
offset offset,
}))), // 渐变 }))
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() ), // 渐变
} data: this.yAxisData,
] },
],
}; };
let echartsDiv = this.$echarts.init(document.getElementById('barDemand')) let echartsDiv = this.$echarts.init(document.getElementById("barDemand"));
echartsDiv.setOption(option) echartsDiv.setOption(option);
}, },
// 点击事件 // 点击事件
echartsClick(){ // echartsClick() {
this.$emit('itemClick',{type:1,title:this.title}) // this.$emit("itemClick", { type: 1, title: this.title });
} // },
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
#barDemand{ #barDemand {
width: 100%; width: 100%;
height: calc(100% - 45px); height: calc(100% - 45px);
} }
</style> </style>
src/page/statistics/components/detail-table/rankTable.vue
View file @ 104ecfa8
<template> <template>
<div class="ul-wrapper height100"> <div class="ul-wrapper height100">
<div class="panel-table"> <div class="panel-table">
<ul class="title-wrapper"> <ul class="title-wrapper">
<li v-for="(item,index) in tList" :key="index"> <li v-for="(item, index) in tList" :key="index">
{{item}} {{ item }}
</li> </li>
</ul> </ul>
<ul class="panel-table-content"> <ul class="panel-table-content">
<li v-for="(item,index) in data.slice(0,5)" :key="index"> <li v-for="(item, index) in data.slice(0, 5)" :key="index">
<span v-for="(s,key) in item" :key='key'> <span>
<img :src="getImg(s)" alt="" v-if="s<4"> <img :src="getImg(index + 1)" alt="" v-if="index < 3" />
<p v-else>{{s}}</p> <p v-else>{{ index + 1 }}</p>
</span> </span>
<span>{{ item.organName }}</span>
<span>{{ item.frequencyCnt }}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="panel-table"> <div class="panel-table">
<ul class="title-wrapper"> <ul class="title-wrapper">
<li v-for="(item,index) in tList" :key="index"> <li v-for="(item, index) in tList" :key="index">
{{item}} {{ item }}
</li> </li>
</ul> </ul>
<ul class="panel-table-content"> <ul class="panel-table-content">
<li v-for="(item,index) in data.slice(5,10)" :key="index"> <li v-for="(item, index) in data.slice(5, 10)" :key="index">
<span v-for="(s,key) in item" :key='key'> <span>
{{s}} {{ 6 + index }}
</span> </span>
<span>{{ item.organName }}</span>
<span>{{ item.frequencyCnt }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {};
}
}, },
props:{ props: {
tList:{ tList: {
type:Array, type: Array,
default:[] default: [],
}, },
data:{ data: {
type:Array, type: Array,
default:()=>{return []} default: () => {
} return [];
}, },
methods:{ },
getImg(s){ },
return require('@/assets/overview/rank0'+ s + '.png') methods: {
} getImg(s) {
} return require("@/assets/overview/rank0" + s + ".png");
} },
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ul-wrapper{ .ul-wrapper {
display: flex; display: flex;
padding: 15px 20px 40px; padding: 15px 20px 40px;
.panel-table{ .panel-table {
width: 50%; width: 50%;
&:first-child{ &:first-child {
padding-right: 10px; padding-right: 10px;
} }
&:last-child{ &:last-child {
padding-left: 10px; padding-left: 10px;
} }
.title-wrapper{ .title-wrapper {
display: flex; display: flex;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
li{ li {
text-align: center; text-align: center;
width: 40%; width: 40%;
&:first-child{width: 20%;} &:first-child {
width: 20%;
}
} }
} }
.panel-table-content{ .panel-table-content {
height: calc(100% - 56px); height: calc(100% - 56px);
li{ li {
width: 100%; width: 100%;
height: 20%; height: 20%;
line-height: 1; line-height: 1;
max-height: 48px; max-height: 48px;
background-color:@party-bg-gray; background-color: @party-bg-gray;
margin-bottom: 4px; margin-bottom: 4px;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
text-align: center; text-align: center;
width: 40%; width: 40%;
display: inline-block; display: inline-block;
&:first-child{width: 20%;} &:first-child {
width: 20%;
}
} }
img{ img {
width: 18px; width: 18px;
vertical-align: middle; vertical-align: middle;
} }
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/page/statistics/components/echarts/bar.vue
View file @ 104ecfa8
<template> <template>
<div id="dialogBarDemand" style="width:100%;height:100%"></div> <div id="dialogBarDemand" style="width: 100%; height: 100%"></div>
</template> </template>
<script> <script>
export default { export default {
name: 'demand', name: "demand",
data() { data() {
return { return {
title:'互动频次' title: "互动频次",
};
},
props: {
data:{
type: Object,
default:()=>{
return {}
} }
}, },
},
mounted() { mounted() {
setTimeout(()=>{
this.init()
},100)
}, },
methods: { methods: {
init(){ init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top: 40, top: 40,
left: '2%', left: "2%",
right: 40, right: 40,
bottom: 30, bottom: 30,
containLabel: true containLabel: true,
}, },
// dataZoom: [{ // dataZoom: [{
// type: "slider", // type: "slider",
...@@ -45,100 +51,107 @@ ...@@ -45,100 +51,107 @@
// } // }
// ], // ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: true,//坐标轴两边留白 boundaryGap: true, //坐标轴两边留白
data: [ data: this.data.xAxisData,
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府', axisLabel: {
], //坐标轴刻度标签的相关设置。
axisLabel: { //坐标轴刻度标签的相关设置。 interval: 0,
interval:0,
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
formatter: function (value, index) { formatter: function (value, index) {
if(value.length > 4){ if (value.length > 4) {
return value.slice(0,4)+ '...' return value.slice(0, 4) + "...";
}else { } else {
return value return value;
}
} }
}, },
axisTick:{//坐标轴刻度相关设置。 },
axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisLine: {
lineStyle:{ //坐标轴轴线相关设置
color:'#eeeeee', lineStyle: {
type:'solid' color: "#eeeeee",
} type: "solid",
}, },
splitLine: { //坐标轴在 grid 区域中的分隔线。 },
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name:'单位/次', name: "单位/次",
splitNumber: 5, splitNumber: 5,
max:100, max: 100,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 12, fontSize: 12,
}, },
interval:'auto' interval: "auto",
}, },
axisLine:{ axisLine: {
show: false show: false,
}, },
axisTick:{ axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color:'#eeeeee', color: "#eeeeee",
type:'dashed' type: "dashed",
} },
} },
},
}
], ],
series: [ series: [
{ {
type: 'bar', type: "bar",
barWidth: 16, // 柱子宽度 barWidth: 16, // 柱子宽度
itemStyle:{ itemStyle: {
barBorderRadius: 120, // 圆角（左上、右上、右下、左下） barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
}, },
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(
'#AC9374', '#9B1E23' 0,
].map((color, offset) => ({ 0,
0,
1,
["#AC9374", "#9B1E23"].map((color, offset) => ({
color, color,
offset offset,
}))), // 渐变 }))
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() ), // 渐变
} data: this.data.yAxisData,
] },
],
}; };
let echartsDiv = this.$echarts.init(document.querySelector('#dialogBarDemand')) let echartsDiv = this.$echarts.init(
echartsDiv.setOption(option,true) document.querySelector("#dialogBarDemand")
);
echartsDiv.setOption(option, true);
}, },
} },
} };
</script> </script>
<style <style
<style lang="less">> <style lang="less">
#dialogBarDemand{ > #dialogBarDemand {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
src/page/statistics/components/index.js
View file @ 104ecfa8
import demand from './demand' import demand from './demand'
import interaction from './interaction' import interact from './interact'
import areas from './areas' import areas from './areas'
import top10 from './top10' import top10 from './top10'
import mapDiv from './maps' import mapDiv from './maps'
...@@ -10,7 +10,7 @@ import trendLine from './echarts/line' ...@@ -10,7 +10,7 @@ import trendLine from './echarts/line'
import rankTable from './detail-table/rankTable' import rankTable from './detail-table/rankTable'
export { export {
demand, demand,
interaction, interact,
areas, areas,
top10, top10,
mapDiv, mapDiv,
......
src/page/statistics/components/interact.vue 0 → 100644
View file @ 104ecfa8
<template>
<div class="interaction">
<div class="common-title">
<div class="icon-and-title">
<img class="icon-title" src="@/assets/overview/board.png" alt="" />
<span class="title">{{ title }}</span>
</div>
<img class="bg" src="@/assets/overview/bg_title02.png" alt="" />
</div>
<div id="tends"></div>
</div>
</template>
<script>
import { getCurDate } from "@/utils/util.time.js";
export default {
name: "interaction",
data() {
return {
title: "展板点播趋势图",
xAxisData: [],
yAxisData: [],
};
},
components: {},
mounted() {
this.getList()
},
methods: {
getList() {
let curTime = getCurDate();
let playDate = curTime.year + curTime.month;
let _this = this
this.$https({
method: "post",
url: "tBoardStatistic/getBoardTrendPageList?playDate=" + playDate,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.xAxisData = res.data.data.dateList;
this.yAxisData = res.data.data.cntList;
} else {
this.xAxisData = [];
this.yAxisData = [];
}
} else {
this.xAxisData = [];
this.yAxisData = [];
}
this.init();
})
.catch((err) => {
this.$message.error(err.message);
this.xAxisData = [];
this.yAxisData = [];
this.init();
});
},
init() {
let option = {
tooltip: {
trigger: "axis",
},
grid: {
top: 20,
left: "2%",
right: 40,
bottom: 30,
containLabel: true,
},
dataZoom: [
{
type: "slider",
show: true,
bottom: 0,
start: 0,
end: 100,
height: 18,
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff",
fontSize: "10px",
},
},
],
xAxis: {
type: "category",
boundaryGap: false, //坐标轴两边留白
data: this.xAxisData,
axisLabel: {
//坐标轴刻度标签的相关设置。
textStyle: {
color: "#333333",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 14,
},
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#eeeeee",
type: "solid",
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false,
},
},
yAxis: [
{
type: "value",
splitNumber: 5,
max: 100,
axisLabel: {
textStyle: {
color: "#333333",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 12,
},
interval: "auto",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#eeeeee",
type: "dashed",
},
},
},
],
series: [
{
type: "line",
smooth: true,
itemStyle: {
normal: {
color: "#AC9374",
lineStyle: {
color: "#9B1E23",
width: 1,
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(172,141,116,0.4)",
},
{
offset: 1,
color: "rgba(155,30,35,0.4)",
},
]),
},
},
},
data: this.yAxisData,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("tends"));
echartsDiv.setOption(option);
},
// // 点击事件
// echartsClick() {
// this.$emit("itemClick", { type: 2, title: this.title });
// },
},
};
</script>
<style lang="less">
#tends {
width: 100%;
height: calc(100% - 45px);
}
</style>
src/page/statistics/components/interaction.vue deleted 100644 → 0
View file @ e8d06349
<template>
<div class="interaction">
<div class="common-title">
<div class="icon-and-title">
<img class="icon-title" src="@/assets/overview/board.png" alt="">
<span class="title">{{title}}</span>
</div>
<img class="bg" src="@/assets/overview/bg_title02.png" alt="">
</div>
<div id="tends" @click="echartsClick"></div>
</div>
</template>
<script>
export default {
name: 'interaction',
data() {
return {
title:'展板点播趋势图'
}
},
components:{},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top:20,
left: '2%',
right: 40,
bottom: 30,
containLabel: true
},
dataZoom: [{
type: "slider",
show: true,
bottom: 0,
start: 0,
end: 100,
height: 18,
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff",
fontSize: "10px"
},
}
],
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白
data: [
'2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10',
'2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20',
'2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
axisLabel: { //坐标轴刻度标签的相关设置。
textStyle: {
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
},
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#eeeeee',
type:'solid'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
max:100,
axisLabel: {
textStyle: {
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
interval:'auto'
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color:'#eeeeee',
type:'dashed'
}
}
}
],
series: [
{
type: 'line',
smooth:true,
itemStyle: {
normal: {
color:'#AC9374',
lineStyle: {
color: "#9B1E23",
width:1
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(172,141,116,0.4)'
}, {
offset: 1,
color: 'rgba(155,30,35,0.4)'
}]),
}
}
},
data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38,
40, 42, 45, 44, 46, 47, 49, 52, 56, 59,
63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90
]
}
]
};
let echartsDiv = this.$echarts.init(document.getElementById('tends'))
echartsDiv.setOption(option)
},
// 点击事件
echartsClick(){
this.$emit('itemClick',{type:2,title:this.title})
}
}
}
</script>
<style lang="less">
#tends{
width: 100%;
height: calc(100% - 45px);
}
</style>
src/page/statistics/components/top10.vue
View file @ 104ecfa8
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
</template> </template>
<script> <script>
import { getCurDate } from '@/utils/util.time.js'
export default { export default {
name: "top10", name: "top10",
data() { data() {
...@@ -54,16 +55,8 @@ export default { ...@@ -54,16 +55,8 @@ export default {
}, },
methods: { methods: {
getTitle(){ getTitle(){
let curTime = this.getCurrentTime() let curTime = getCurDate()
return `全国${curTime.yyyy}年${curTime.MM}月展板点播TOP10` return `全国${curTime.year}年${curTime.month}月展板点播TOP10`
},
getCurrentTime() {
let year = new Date().getFullYear();
let month = new Date().getMonth() + 1;
return {
yyyy: year,
MM: month > 9 ? month : `0${month}`,
};
}, },
initScroll() { initScroll() {
let _this = this; let _this = this;
......
src/page/statistics/interaction.vue
View file @ 104ecfa8
/* 互动频次 */ /* 互动频次 */
<template> <template>
<div class="interaction-wrapper height100 overview-detail"> <div class="interaction-wrapper height100 overview-detail">
<div class="ecahrts-panel-box"> <div class="ecahrts-panel-box">
<div class="panel-box-header"> <div class="panel-box-header">
<span class="title">互动频次</span> <span class="title">互动频次</span>
<div class="tip"> <div class="tip">
<span class="tip-title">页面说明:</span> <span class="tip-title">页面说明:</span>
<span> 可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span> <span>
可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
>
</div> </div>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<bar/> <bar :data="echartsData" ref="echarts" />
</div> </div>
</div> </div>
<div class="rank-panel-box"> <div class="rank-panel-box">
...@@ -18,42 +20,70 @@ ...@@ -18,42 +20,70 @@
<span class="title">互动频次排行</span> <span class="title">互动频次排行</span>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<rank-table <rank-table :tList="tList" :data="data" />
:tList="tList" </div>
:data="data"
/>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import {bar,rankTable} from './components' import { getCurDate } from "@/utils/util.time.js";
import { bar, rankTable } from "./components";
export default { export default {
data(){ data() {
return { return {
tList:['排名','统计时间','点播总量'], tList: ["排名", "机构名称", "互动频次"],
data:[ echartsData: {},
{index:1,time:'2021年1月',num:'268'}, data: [],
{index:2,time:'2021年1月',num:'268'}, };
{index:3,time:'2021年1月',num:'268'}, },
{index:4,time:'2021年1月',num:'268'}, components: { bar, rankTable },
{index:5,time:'2021年1月',num:'268'}, mounted() {
{index:6,time:'2021年1月',num:'268'}, this.getList();
{index:7,time:'2021年1月',num:'268'}, },
{index:8,time:'2021年1月',num:'268'}, methods: {
{index:9,time:'2021年1月',num:'268'}, getList() {
{index:10,time:'2021年1月',num:'268'} let curTime = getCurDate();
] let frequencyDate = curTime.year + curTime.month;
let _this = this
_this.$https({
method: "post",
url:
"tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=" +
frequencyDate,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this.echartsData = {};
_this.echartsData.xAxisData = res.data.data.organList;
_this.echartsData.yAxisData = res.data.data.cntList;
_this.data = res.data.data.page.records;
} else {
_this.echartsData = {};
_this.data = [];
}
} else {
_this.echartsData = {};
_this.data = [];
} }
setTimeout(() => {
_this.init();
},100);
})
.catch((err) => {
_this.$message.error(err.message);
_this.echartsData = {};
_this.data = [];
});
}, },
components:{bar,rankTable}, init() {
methods:{ this.$refs.echarts.init();
} }
} },
};
</script> </script>
<style> <style>
</style> </style>
\ No newline at end of file
src/page/statistics/overview.vue
View file @ 104ecfa8
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<demand class="echarts-panel"></demand> <demand class="echarts-panel"></demand>
</div> </div>
<div class="echarts-box right"> <div class="echarts-box right">
<interaction class="echarts-panel"></interaction> <interact class="echarts-panel"></interact>
</div> </div>
</div> </div>
</div> </div>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<script> <script>
import { import {
demand, demand,
interaction, interact,
areas, areas,
top10, top10,
mapDiv, mapDiv,
......
src/page/statistics/tend.vue
View file @ 104ecfa8
/* 点播趋势图 */ /* 点播趋势图 */
<template> <template>
<div class="trend-wrapper height100 overview-detail"> <div class="trend-wrapper height100 overview-detail">
<div class="ecahrts-panel-box"> <div class="ecahrts-panel-box">
<div class="panel-box-header"> <div class="panel-box-header">
<span class="title">趋势图</span> <span class="title">趋势图</span>
<el-date-picker <el-select v-model="playDate">
v-model="value1" <el-option
type="daterange" v-for="item in options"
range-separator="至" :key="item.value"
start-placeholder="开始日期" :label="item.label"
end-placeholder="结束日期" :value="item.value"
></el-date-picker> >
</el-option>
</el-select>
<div class="tip"> <div class="tip">
<span class="tip-title">页面说明:</span> <span class="tip-title">页面说明:</span>
<span>默认展示当月点播总量趋势图及详情表格，可按照时间段进行检索，图表可以联动变化。</span> <span
>默认展示当月点播总量趋势图及详情表格，可按照时间段进行检索，图表可以联动变化。</span
>
</div> </div>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<trend-line/> <trend-line />
</div> </div>
</div> </div>
<div class="rank-panel-box"> <div class="rank-panel-box">
...@@ -25,42 +29,72 @@ ...@@ -25,42 +29,72 @@
<span class="title">点播趋势排行</span> <span class="title">点播趋势排行</span>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<rank-table <rank-table :tList="tList" :data="data" />
:tList="tList" </div>
:data="data"
/>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import {trendLine, rankTable} from './components' import { trendLine, rankTable } from "./components";
export default { export default {
data(){ data() {
return { return {
value1:'', value1: "",
tList:['排名','统计时间','点播总量'], tList: ["排名", "统计时间", "点播总量"],
data:[ playDate:'',
{index:1,time:'2021年1月',num:'268'}, data: [],
{index:2,time:'2021年1月',num:'268'}, options: [
{index:3,time:'2021年1月',num:'268'}, { label: "年", value: "1" },
{index:4,time:'2021年1月',num:'268'}, { label: "月", value: "2" },
{index:5,time:'2021年1月',num:'268'}, { label: "日", value: "3" },
{index:6,time:'2021年1月',num:'268'}, ],
{index:7,time:'2021年1月',num:'268'}, };
{index:8,time:'2021年1月',num:'268'},
{index:9,time:'2021年1月',num:'268'},
{index:10,time:'2021年1月',num:'268'}
]
}
}, },
components:{trendLine, rankTable}, components: { trendLine, rankTable },
methods:{ methods: {
getList() {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
let _this = this;
_this
.$https({
method: "post",
url:
"tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=" +
frequencyDate,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this.echartsData = {};
_this.echartsData.xAxisData = res.data.data.organList;
_this.echartsData.yAxisData = res.data.data.cntList;
_this.data = res.data.data.page.records;
} else {
_this.echartsData = {};
_this.data = [];
}
} else {
_this.echartsData = {};
_this.data = [];
} }
} setTimeout(() => {
_this.init();
}, 100);
})
.catch((err) => {
_this.$message.error(err.message);
_this.echartsData = {};
_this.data = [];
});
},
init() {
this.$refs.echarts.init();
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
</style> </style>
\ No newline at end of file
src/page/system/log/devops.vue
View file @ 104ecfa8
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
feildList:[ feildList:[
{prop:'userName',label:'运维账号'}, {prop:'userName',label:'运维账号'},
{prop:'area',label:'运维区域'}, {prop:'area',label:'运维区域'},
{prop:'operationType',label:'操作内容'}, {prop:'operationIp',label:'操作Ip'},
{prop:'createTime',label:'操作时间'} {prop:'createTime',label:'操作时间'}
], ],
list: [], list: [],
......
src/page/system/log/platformlog.vue
View file @ 104ecfa8
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
{prop:'operator',label:'操作者'}, {prop:'operator',label:'操作者'},
{prop:'operationType',label:'操作类型'}, {prop:'operationType',label:'操作类型'},
{prop:'operationObject',label:'操作对象'}, {prop:'operationObject',label:'操作对象'},
{prop:'operationContent',label:'操作内容'}, {prop:'operationIp',label:'操作Ip'},
], ],
list: [], list: [],
page:{ page:{
......
src/page/system/log/userlog.vue
View file @ 104ecfa8
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
{prop:'operator',label:'操作者'}, {prop:'operator',label:'操作者'},
{prop:'operationType',label:'操作类型'}, {prop:'operationType',label:'操作类型'},
{prop:'operationObject',label:'操作对象'}, {prop:'operationObject',label:'操作对象'},
{prop:'operationContent',label:'操作内容'}, {prop:'operationIp',label:'操作Ip'},
], ],
list: [], list: [],
page:{ page:{
......
src/utils/htmlCanvas.js 0 → 100644
View file @ 104ecfa8
import html2canvas from 'html2canvas'
const htmlCanvas = function (callback) {
html2canvas(document.querySelector('#bodyCanvas'), {
backgroundColor: null,
useCORS: true,
allowTaint: true,
taintTest: false,
width: document.querySelector('#bodyCanvas').clientWidth,
height: document.querySelector('#bodyCanvas').clientHeight,
scale: true
// windowWidth: 200,
// windowHeight: 126
// x: 250
}).then((canvas) => {
if (!canvas) {
callback(null)
return
}
// canvas.width = 200
// callback(canvas.toDataURL('image/png'))
callback(canvas.toDataURL('image/jpeg', 0.5))
})
}
export default htmlCanvas
src/utils/util.time.js 0 → 100644
View file @ 104ecfa8
export function getCurDate() {
let date = new Date()
let year = date.getFullYear();
let month = date.getMonth() + 1;
let dates = date.getDate()
return {
year: year,
month: month > 9 ? month : `0${month}`,
date: dates > 9 ? dates : `0${dates}`
};
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment