Commit d1fd401e authored by xulili's avatar xulili

统计

parent 80d05f6f
This diff is collapsed.
......@@ -80,10 +80,10 @@ export const menuList = [
subtitle:'机构及信息管理',
subMenu:[
{label:'机构管理', imgUrl:'',url:'/organ'},
{label:'日志管理', imgUrl:'',url:'/organ'},
{label:'app版本管理', imgUrl:''},
{label:'日志管理', imgUrl:'',url:'/log'},
{label:'app版本管理', imgUrl:'',url:'/edition'},
{label:'app界面自定义', imgUrl:''},
{label:'修改密码', imgUrl:''},
{label:'修改密码', imgUrl:'',url:'/changePwd'},
]
},
{
......
<template>
<div class="account-wrapper">
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="list-of-area">
<div class="list-of-area-title common-title">
<div class="icon-and-title">
<img class="icon-title" src="@/assets/overview/s-play.png" alt="">
<span class="title">{{title}}</span>
</div>
<img class="bg" src="@/assets/overview/bg_title.png" alt="">
</div>
<div class="list-of-body">
<ul class="body-title">
<li class="f5">地区名称</li>
<li class="f3">播放量(次)</li>
<li class="f2">展板数量</li>
</ul>
<div class="body-content" id="areaContent">
<div id="area1">
<ul class="body-item" v-for="(item,index) in list" :key="index">
<li class="f5">{{item.city}}</li>
<li class="f3">{{item.play}}</li>
<li class="f2">{{item.num}}</li>
</ul>
</div>
<div id="area2"></div>
<div id="area3">></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'areas',
data() {
return {
title:'地区展板播放统计',
timer:null,
speed:50,
box:null,
area1:null,
list:[
{ city:'山西省',play:'10000', num:'24'},
{ city:'湖南省',play:'8878', num:'22'},
{ city:'海南省',play:'5934', num:'21'},
{ city:'贵州省',play:'5899', num:'18'},
{ city:'云南省',play:'5523', num:'16'},
{ city:'甘肃省',play:'4678', num:'12'},
{ city:'四川省',play:'4224', num:'6'},
{ city:'湖南省',play:'3023', num:'4'},
{ city:'江西省',play:'2412', num:'2'},
{ city:'黑龙江省',play:'2258', num:'2'},
{ city:'湖北省',play:'2198', num:'2'},
{ city:'安徽省',play:'2158', num:'2'},
{ city:'新疆维吾尔自治区',play:'2258', num:'2'},
{ city:'广西壮族自治区',play:'1588', num:'2'},
{ city:'西藏自治区',play:'1258', num:'2'},
]
}
},
mounted() {
setTimeout(()=>{
this.initScroll()
},1000)
},
methods: {
initScroll() {
let _this = this
this.box = document.getElementById("areaContent");
this.con1 = document.getElementById("area1");
let con2 = document.getElementById("area2");
let con3 = document.getElementById("area3");
con2.innerHTML = this.con1.innerHTML;
con3.innerHTML = this.con1.innerHTML;
this.timer = setInterval(_this.scrollUp, _this.speed);
},
scrollUp() {
if (this.box.scrollTop >= this.con1.scrollHeight) {
this.box.scrollTop = 0;
} else{
this.box.scrollTop++;
}
},
}
}
</script>
<style lang="less">
</style>
<template>
<div class="dashbord-list">
<p class="tip">
<span class="tip-title">页面说明:</span>
<span>可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据,可进入互动统计及趋势分析详情页查看全部数据。</span>
</p>
<ul>
<li v-for="(item, index) in list" :key="index">
<div class="title-name">{{item.label}}</div>
<img :src="getImg(item.urlName)" alt="">
<!-- <img src="@/assets/overview/play.png" alt=""> -->
<div class="title">
<span>
<a class="num">{{item.num}}</a>
<a class="unit">{{item.unit}}</a>
</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'nums',
data() {
return {
list:[
{label:'总播放量',num: 1000, unit: '次',urlName:'play'},
{label:'单位组织',num: 688, unit: '家',urlName:'org'},
{label:'展板总量',num: 20, unit: '个',urlName:'boardsTotal'},
{label:'互动总量',num: 899, unit: '次',urlName:'interaction'},
]
}
},
mounted() {
// this.initData()
},
methods: {
getImg(imgUrl){
return require('@/assets/overview/'+ imgUrl + '.png')
},
initData(){
const _this = this
setInterval(()=>{
let num = Math.floor(Math.random()*4)
num = num > 2 ? 3:0
_this.$set(_this.list[num],'num', ++_this.list[num]['num'] )
},3000)
}
}
}
</script>
<style lang="less">
.dashbord-list{
width: 100%;
position: absolute;
padding: 0 10px;
z-index: 100;
.tip{
color: @font-color;
.tip-title{
font-weight: bold;
padding-right: 10px;
}
}
ul{
display: flex;
font-size: 0;
justify-content: space-around;
li{
position: relative;
width: 9vw;
margin-top: 15px;
}
img{
width: 100%;
}
.title-name{
font-size: 18px;
color: @font-color;
position: absolute;
top: -8px;
right: 0;
}
.title{
position: absolute;
right: 0.2rem;
bottom: 5px;
color: @party-white;
.num{
font-size: 28px;
}
.unit{
font-size:16px;
margin-left: 5px;
}
}
}
}
</style>
<template>
<div class="demand">
<div class="common-title">
<div class="icon-and-title">
<img class="icon-title" src="@/assets/overview/s-interation.png" alt="">
<span class="title">{{title}}</span>
</div>
<img class="bg" src="@/assets/overview/bg_title02.png" alt="">
</div>
<div id="barDemand" @click="echartsClick"></div>
</div>
</template>
<script>
export default {
name: 'demand',
data() {
return {
title:'互动频次'
}
},
components:{},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top:30,
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: true,//坐标轴两边留白
data: [
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
],
axisLabel: { //坐标轴刻度标签的相关设置。
interval:0,
textStyle: {
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
},
formatter: function (value, index) {
if(value.length > 4){
return value.slice(0,4)+ '...'
}else {
return value
}
}
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#eeeeee',
type:'solid'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
},
yAxis: [
{
type: 'value',
name:'单位/次',
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: 'bar',
barWidth: 16, // 柱子宽度
itemStyle:{
barBorderRadius: 120, // 圆角(左上、右上、右下、左下)
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
'#AC9374', '#9B1E23'
].map((color, offset) => ({
color,
offset
}))), // 渐变
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse()
}
]
};
let echartsDiv = this.$echarts.init(document.getElementById('barDemand'))
echartsDiv.setOption(option)
},
// 点击事件
echartsClick(){
this.$emit('itemClick',{type:1,title:this.title})
}
}
}
</script>
<style lang="less">
#barDemand{
width: 100%;
height: calc(100% - 45px);
}
</style>
<template>
<div id="dialogBarDemand"></div>
</template>
<script>
export default {
name: 'demand',
data() {
return {
title:'互动频次'
}
},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top:20,
left: '0%',
right: '2%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: [
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
],
axisLabel: { //坐标轴刻度标签的相关设置。
interval:0,
textStyle: {
color: '#FFFFFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
},
formatter: function (value, index) {
if(value.length > 4){
return value.slice(0,4)+ '...'
}else {
return value
}
}
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'rgba(98,186,255,0.6)',
type:'solid'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
},
yAxis: [
{
type: 'value',
name:'单位/次',
splitNumber: 5,
max:100,
axisLabel: {
textStyle: {
color: '#FFFFFFFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
interval:'auto'
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98,186,255,0.6)',
type:'dashed'
}
}
}
],
series: [
{
type: 'bar',
barWidth: 16, // 柱子宽度
itemStyle:{
barBorderRadius: 120, // 圆角(左上、右上、右下、左下)
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
'rgba(78,255,253,1)', 'rgba(255,74,83,1)'
].map((color, offset) => ({
color,
offset
}))), // 渐变
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse()
}
]
};
let echartsDiv = this.$echarts.init(document.querySelector('#dialogBarDemand'))
echartsDiv.setOption(option,true)
},
}
}
</script>
<style
<style lang="less">>
#dialogBarDemand{
width: 100%;
height: 16vh;
margin-top: 0.6rem;
}
</style>
<template>
<div id="dialogTends"></div>
</template>
<script>
export default {
name: 'interaction',
data() {
return {
title:'展板点播趋势图'
}
},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top:20,
left: '2%',
right: 20,
bottom: '15%',
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: '#FFFFFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
},
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'rgba(98,186,255,0.6)',
type:'solid'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
max:100,
axisLabel: {
textStyle: {
color: '#FFFFFFFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
interval:'auto'
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98,186,255,0.6)',
type:'dashed'
}
}
}
],
series: [
{
type: 'line',
smooth:true,
itemStyle: {
normal: {
color:'rgba(255,74,83,1)',
lineStyle: {
color: "rgba(78,255,253,1)",
width:1
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,74,83,0.4)'
}, {
offset: 1,
color: 'rgba(78,255,253,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('dialogTends'))
echartsDiv.setOption(option)
},
}
}
</script>
<style lang="less">
#dialogTends{
width: 100%;
height: 16vh;
margin-top: 0.6rem;
}
</style>
import demand from './demand'
import interaction from './interaction'
import areas from './areas'
import top10 from './top10'
import mapDiv from './maps'
import borderNums from './borderNums'
// import MDialog from './MDialog'
import bar from './echarts/bar'
import line from './echarts/line'
export {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums,
// MDialog,
bar,
line
}
<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>
<template>
<div id="mapDiv">
</div>
</template>
<script>
import 'echarts/map/js/china'
var dataList = [{
name: '安徽',value: 5498
}, {
name: '澳门',value: 0
}, {
name: '北京',value: 0
}, {
name: '福建',value: 4111
}, {
name: '甘肃',value: 59
}, {
name: '广东',value: 1928
}, {
name: '广西',value: 4
}, {
name: '贵州',value: 52
}, {
name: '海南',value: 1284
}, {
name: '河北',value: 3151
}, {
name: '河南',value: 3814
}, {
name: '黑龙江',value: 316
}, {
name: '湖北',value: 1724
}, {
name: '湖南',value: 33378
}, {
name: '吉林',value: 520
}, {
name: '江苏',value: 113
}, {
name: '江西',value: 961
}, {
name: '辽宁',value: 139
}, {
name: '内蒙古',value: 0
}, {
name: '宁夏',value: 60
}, {
name: '青海',value: 0
}, {
name: '山东',value: 106
}, {
name: '山西',value: 0
}, {
name: '陕西',value: 114
}, {
name: '上海',value: 1321
}, {
name: '四川',value: 7867
}, {
name: '台湾',value: 0
}, {
name: '天津',value: 1157
}, {
name: '西藏',value: 14
}, {
name: '香港',value: 0
}, {
name: '新疆',value: 115
}, {
name: '云南',value: 3811
}, {
name: '浙江',value: 0
}, {
name: '重庆',value: 886
}
];
export default {
name: 'maps',
data() {
return {
}
},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
triggerOn: "click",
formatter: function(e, t, n) {
return .5 == e.value ? e.name + ":播放量" : e.seriesName + "<br />" + e.name + ":" + e.value
}
},
visualMap: [{
dimension: 0,
right: 20,
bottom: 20,
itemWidth: 16,
itemHeight: '200px',
orient:'horizontal',
text: ['由高到低','播放量'],
backgroundColor:'rgba(0,28,66,0.6)',
padding:[15,10],
textStyle: {
color: 'rgba(255,255,255,1)'
},
inRange: {
color: ['#9B1E23', '#E72128', '#FB8D1F', '#FFCF4E']
}
}],
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
zoom: 1,
top: 100,
left:'10%',
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff"
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
]
},
series: [{
name: "播放量",
type: "map",
geoIndex: 0,
data: dataList
}]
};
let echartsDiv = this.$echarts.init(document.getElementById('mapDiv'))
echartsDiv.setOption(option)
}
}
}
</script>
<style lang="less">
#mapDiv{
width: 100%;
height: 100%;
}
</style>
<template>
<div class="list-of-top10">
<div class="list-of-top10-title 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_title.png" alt="">
</div>
<div class="list-of-body">
<ul class="body-title">
<li class="f1">排名</li>
<li class="f7">展板名称</li>
<li class="f2">播放量</li>
</ul>
<div class="body-content" id="bodyContent">
<div id="con1">
<ul class="body-item" v-for="(item,index) in list" :key="index">
<li class="f1">{{index%10 + 1}}</li>
<li class="f7">
<div class="title" :title="item.name">{{item.name}}</div>
</li>
<li class="f2">{{item.num}}</li>
</ul>
</div>
<div id="con2"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'top10',
data() {
return {
title:'全国2021年3月展板点播TOP10',
timer:null,
speed:50,
box:null,
con1:null,
list:[
{ name:'中国沦为半殖民地半封建社会', num:'11902' },
{ name:'抗日战争取得伟大胜利', num:'59876' },
{ name:'筹建新中国', num:'68902' },
{ name:'中华人民共和国成立', num:'368902' },
{ name:'伟大成就', num:'78902' },
{ name:'完善和落实中国特色社会主义事业总体布局', num:'58902' },
{ name:'中国特色社会主义进入新时代', num:'88902'},
{ name:'开创中国特色社会主义新局面', num:'78902'},
{ name:'社会主义文化强国建设迈出坚实步伐', num:'108902'},
{ name:'坚决打赢脱贫攻坚战', num:'188902'},
// { name:'蒋介石背叛革命 建立独裁统治', num:'20300' },
// { name:'开辟农村包围城市武装夺取政权道路', num:'50780' },
// { name:'坚持党的基本路线不动摇', num:'68902' },
// { name:'港澳回归', num:'68902' },
// { name:'让人民群众共享改革发展成果', num:'48902'},
// { name:'“一带一路”倡议推进对外开放向纵深拓展', num:'8902'},
// { name:'生态保护与修复力度持续加大', num:'7902'},
// { name:'大力践行外交为民', num:'9902'},
]
}
},
components:{},
mounted() {
this.list.sort((a,b)=>{
return b.num - a.num
})
this.list = [...this.list,...this.list]
setTimeout(()=>{
this.initScroll()
},1000)
},
methods: {
initScroll() {
let _this = this
this.box = document.getElementById("bodyContent");
this.con1 = document.getElementById("con1");
let con2 = document.getElementById("con2");
con2.innerHTML = this.con1.innerHTML;
this.timer = setInterval(_this.scrollUp, _this.speed);
},
scrollUp() {
if (this.box.scrollTop >= this.con1.scrollHeight) {
this.box.scrollTop = 0;
} else{
this.box.scrollTop++;
}
},
Ups() {
let _this = this
this.timer = setInterval(_this.scrollUp, _this.speed);
},
Stops() {
clearInterval(this.timer);
}
}
}
</script>
<style lang="less">
</style>
/* 互动频次 */
<template>
<div class="interaction-wrapper height100">
<bar/>
</div>
</template>
<script>
import {bar} from './components'
export default {
data(){
return {
}
},
components:{bar},
methods:{
}
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<p>预览</p>
</template>
\ No newline at end of file
<div class="overview-wrapper height100">
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums></borderNums>
<mapDiv></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list"></top10>
</div>
<div class="echartspanel">
<div class="echarts-box left">
<demand class="echarts-panel"></demand>
</div>
<div class="echarts-box right">
<interaction class="echarts-panel"></interaction>
</div>
</div>
</div>
</template>
<script>
import {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums
} from './components'
export default {
data(){
return {
}
},
components:{demand, interaction , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
.middel-part{
display: flex;
height: 50vh;
justify-content: space-between;
overflow:hidden;
.table-list{
width: 25vw;
height: 100%;
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
padding: 20px;
}
.map-container{
position: relative;
width: calc(100% - 50vw);
height: 100%;
}
}
/deep/ .common-title{
.icon-title{
width: 20px;
vertical-align: middle;
}
.title{
font-weight: 500;
font-size: 20px;
color: @font-color;
line-height: 20px;
vertical-align: middle;
margin-left: 12px;
}
.bg{
width: 100%;
}
}
//列表
.table-list{
/deep/.list-of-body{
height: calc(100% - 50px);
box-sizing: border-box;
ul{
display: flex;
align-items: flex-start;
font-size: 16px;
padding-left: 20px;
box-sizing: border-box;
li{
line-height: 40px;
&.f1{
width: 10%;
}
&.f2{
width: 20%;
}
&.f3{
width: 30%;
}
&.f5{
width: 50%;
}
&.f6{
width: 60%;
}
&.f7{
width: 70%;
}
div.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
}
}
.body-title{
color: @font-color;
}
.body-content{
height: calc(100% - 40px);
overflow-y: hidden;
.body-item{
height: 40px;
background-color: @party-bg-gray;
margin-bottom: 3px;
color: @font-color;
}
}
}
}
// echarts 样式
.echartspanel{
height: calc(100% - 50vh);
padding-top: 20px;
.echarts-box{
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left{
padding-right: 10px;
float: left;
}
&.right{
padding-left: 10px;
float: right;
}
.echarts-panel{
background:@party-white;
border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
padding: 20px;
}
}
}
}
</style>
\ No newline at end of file
/* 点播趋势图 */
<template>
<div class="trend-wrapper height100 overview-detail">
<div class="ecahrts-panel-box">
</div>
<div class="rank-panel-box">
<div class="rank-box"></div>
<div class="rank-box"></div>
</div>
<line/>
</div>
</template>
<script>
import {line} from './components'
export default {
data(){
return {
}
},
components:{line},
methods:{
}
}
</script>
<style lang="less" scoped>
.overview-detail{
.ecahrts-panel-box{
height: calc(50% + 20px);
}
.rank-panel-box{
height: calc(50% - 40px);
margin-top: 20px;
}
.ecahrts-panel-box,
.rank-panel-box{
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(221,221,221,0.40);
border-radius: 8px;
border-radius: 8px;
}
}
</style>
\ No newline at end of file
<template>
<div class="change-pwd-wrapper height100">
<div class="page-form-box">
<div class="page-form-box-header">
修改密码
</div>
<div class="page-form-box-content">
<el-form ref="form" :model="form" label-width="80px" label-position="top" class="party-form">
<el-form-item label="请输入当前密码" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="请输入新密码" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="请再次输入新密码" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
</el-form>
</div>
<div class="page-form-box-footer">
<div class="btn-group">
<el-button>取消</el-button>
<el-button type="primary">确定修改</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
form:{
name:''
}
}
},
mounted(){
},
methods:{
}
}
</script>
<style lang="less" scoped>
.change-pwd-wrapper{
.party-form{
width: 300px;
margin: 0 auto;
}
}
</style>
\ No newline at end of file
<template>
<div class="edition-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-date-picker
v-model="form.user"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看系统使用过的所有app版本信息,可设置其中一个版本为当前使用版本。可产看安装包详情信息。可上传新的安装包,“*”为必填项。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">上传安装包</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
<edition-dialog/>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
import {
addDialog,
infoDialog
}from './editionDialog'
export default {
data(){
return{
form:{
user:''
},
addForm:{
},
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyPagination, partyTable, addDialog, infoDialog},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
import addDialog from './index'
import infoDialog from './info'
export {
addDialog,
infoDialog
}
\ No newline at end of file
<template>
<el-dialog
custom-class="party-dialog"
title="上传安装包"
:visible.sync="dialogVisible"
width="468px"
:before-close="handleClose">
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="80px" label-position="top" class="party-form">
<el-form-item label="版本号:" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="版本信息:" >
<el-input v-model="form.name" type="textarea"></el-input>
</el-form-item>
<el-form-item label="更新内容:" >
<el-input v-model="form.name" type="textarea"></el-input>
</el-form-item>
<el-form-item label=" 上传安装包:" >
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data(){
return {
dialogVisible: false,
form:{
name:'',
date:''
}
}
},
methods:{
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<el-dialog
custom-class="party-dialog"
title="xxx版本安装包详情"
:visible.sync="dialogVisible"
width="468px"
:before-close="handleClose">
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="80px" label-position="top" class="party-form">
<el-form-item label="上传时间" >
<span></span>
</el-form-item>
<el-form-item label="操作者" >
<span></span>
</el-form-item>
<el-form-item label="是否为当前使用版本" >
<span></span>
</el-form-item>
<el-form-item label="版本信息" >
<span></span>
</el-form-item>
<el-form-item label="版本信息" >
<span></span>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
\ No newline at end of file
<template>
<div class="log-wrapper height100">
<ul class="btn-tab-group">
<li v-for="(item,index) in tabs" :key="index" @click="changeActive(index)" :class="{'active':activeIndex===index}">
{{item}}
</li>
</ul>
<div class="tab-content">
<platformlog v-if="activeIndex===0"/>
<userlog v-if="activeIndex===1"/>
<settoplog v-if="activeIndex===2"/>
<devops v-if="activeIndex===3"/>
</div>
</div>
</template>
<script>
import {
platformlog,
userlog,
settoplog,
devops
} from './log/index'
export default {
data(){
return{
tabs:['平台操作日志','用户操作日志','机顶盒运行日志', '运维日志'],
activeIndex:0
}
},
components:{ },
components:{platformlog, userlog, settoplog, devops },
mounted(){
},
methods:{
changeActive(index){
this.activeIndex = index
}
}
}
</script>
<style lang="less" scoped>
.btn-tab-group{
display: flex;
li{
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
background: rgba(172,147,116,0.10);
border: 1px solid #AC9374;
border-radius: 8px 8px 0 0;
border-bottom: none;
font-size: 16px;
color: @party-btn-color;
cursor: default;
&.active{
background-color: @party-btn-color;
border-color: @party-btn-color;
color: @party-white;
}
}
}
.tab-content{
height: calc(100% - 40px);
}
</style>
\ No newline at end of file
<template>
<div class="devops-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入操作者"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="form.user" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看所有账号在系统上的操作信息,可根据操作类型、操作时间段查询等方式对日志信息进行筛选</span>
</div>
</div>
<div class="table-content hasTabs">
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
export default {
data(){
return{
form:{
user:'',
value:''
},
addForm:{
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyTable, partyPagination},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
import platformlog from './platformlog'
import userlog from "./userlog"
import settoplog from './settoplog'
import devops from './devops'
export {
platformlog,
userlog,
settoplog,
devops
}
\ No newline at end of file
<template>
<div class="platform-log-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入操作者"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="form.user" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看所有账号在系统上的操作信息,可根据操作类型、操作时间段查询等方式对日志信息进行筛选</span>
</div>
</div>
<div class="table-content hasTabs">
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
export default {
data(){
return{
form:{
user:'',
value:''
},
addForm:{
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyTable, partyPagination},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="set-top-log-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-select v-model="form.user" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看所有账号在系统上的操作信息,可根据操作类型、操作时间段查询等方式对日志信息进行筛选</span>
</div>
</div>
<div class="table-content hasTabs">
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
export default {
data(){
return{
form:{
user:'',
value:''
},
addForm:{
},
options:[],
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyTable, partyPagination},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="use-log-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入操作者"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="form.user" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看所有账号在系统上的操作信息,可根据操作类型、操作时间段查询等方式对日志信息进行筛选</span>
</div>
</div>
<div class="table-content hasTabs">
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
export default {
data(){
return{
form:{
user:'',
value:''
},
addForm:{
},
options:[],
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyTable, partyPagination},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="oran-wrapper">
<div></div>
<div class="org-tree">
<div class="org-tree-box">
</div>
</div>
<div class=""></div>
</div>
</template>
<script>
......@@ -19,5 +24,7 @@ export default {
}
</script>
<style lang="less" scoped>
.oran-wrapper{
}
</style>
\ No newline at end of file
......@@ -17,11 +17,7 @@
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
</el-form-item>
<el-form-item>
<div class="btn-group">
......@@ -48,9 +44,11 @@
<script>
import { partyPagination,partyTable } from '@/components/index'
import userDialog from './userDialog/index'
import area from '@/config/area'
export default {
data(){
return{
options: area,
form:{
user:''
},
......
......@@ -11,9 +11,9 @@
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="所在机构" >
<el-input v-model="form.name"></el-input>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账号有效期" >
<el-form-item label="账号有效期" >
<el-radio-group v-model="form.radio">
<el-radio :label="3">永久有效</el-radio>
<el-radio :label="6">设置有效期</el-radio>
......
......@@ -109,6 +109,15 @@ const router = new Router({
title:'用户管理',
}
},
{
path: '/log',
name: '日志管理',
component: () => import('@/page/system/log'),
meta:{
showBreadcrumb:true,
title:'日志管理',
}
},
{
path: '/unitAdmin',
name: '单位管理员账号管理',
......@@ -118,6 +127,52 @@ const router = new Router({
title:'单位管理员账号管理',
}
},
{
path: '/edition',
name: 'app版本管理',
component: () => import('@/page/system/edition'),
meta:{
showBreadcrumb:true,
title:'app版本管理',
}
},
{
path: '/changePwd',
name: '修改密码',
component: () => import('@/page/system/changePwd'),
meta:{
showBreadcrumb:true,
title:'修改密码',
}
},
// 统计管理
{
path: '/overview',
name: '统计概览',
component: () => import('@/page/statistics/overview'),
meta:{
showBreadcrumb:true,
title:'统计概览',
}
},
{
path: '/interaction',
name: '互动统计',
component: () => import('@/page/statistics/interaction'),
meta:{
showBreadcrumb:true,
title:'互动统计',
}
},
{
path: '/tend',
name: '趋势分析',
component: () => import('@/page/statistics/tend'),
meta:{
showBreadcrumb:true,
title:'趋势分析',
}
},
{
path: '/forgetPassword',
name: '忘记密码',
......
......@@ -24,81 +24,8 @@
padding-top: 20px;
border-top: 1px solid @party-border-color;
text-align: center;
}
}
.party-form{
.el-input{
width: 280px;
.el-input__inner{
border-radius: 22px;
background-color: @party-bg-gray;
border: 1px solid @party-border-color;
}
}
.mt16{
margin-top: 16px;
}
.el-radio-group{
.el-radio__inner{
width: 24px;
height: 24px;
border-color: @party-border-color;
}
.el-radio__label{
font-size: 16px;
}
.el-radio.is-checked{
.el-radio__input.is-checked{
.el-radio__inner{
background-color: transparent;
border-color: @party-border-color;
&:after{
width: 10px;
height: 10px;
background-color: @party-btn-color;
}
}
}
.el-radio__label{
color: @font-color;
}
}
}
.el-checkbox-group{
.el-checkbox{
margin-right: 25px;
.el-checkbox__inner{
width: 22px;
height: 22px;
&:hover{
border-color: @party-border-color;
}
}
.el-checkbox__label{
color: @font-color
}
& +.el-checkbox{
margin-left: 0;
}
&.is-checked{
.el-checkbox__inner{
border-color: @party-border-color;
background-color: @party-check-bg-color;
&:after{
border: 2px solid #AC9374;
border-left:0;
border-top: 0;
height: 11px;
left:7px;
width: 5px;
}
}
.el-checkbox__label{
color: @font-color
}
}
.el-button{
width: 160px;
}
}
}
\ No newline at end of file
......@@ -10,9 +10,6 @@
@party-table-header-color:#FDFBF8;
@party-page-border-color:#DDDDDD;
@party-check-bg-color:#F5F5F5;
.ft($fz){
font-size: $fz;
}
.f14{ font-size: 14px; }
.f16{ font-size: 14px; }
.f18{ font-size: 18px; }
......@@ -29,12 +26,13 @@
.el-input{
width: 180px;
}
}
.btn-group{
.el-button{
width: 80px;
.btn-group{
.el-button{
width: 80px;
}
}
}
.page-tips{
width: 365px;
}
......@@ -44,14 +42,14 @@
.el-input{
width: 220px;
}
}
.btn-group{
.el-button{
width: 96px;
.btn-group{
.el-button{
width: 96px;
}
}
}
.page-tips{
width: 420px;
width: 460px;
}
}
@media (min-width:1801px){
......@@ -59,10 +57,10 @@
.el-input{
width: 280px;
}
}
.btn-group{
.el-button{
width: 128px;
.btn-group{
.el-button{
width: 128px;
}
}
}
.page-tips{
......@@ -87,6 +85,15 @@
border-color: @party-border-color;
}
}
.el-range-editor.el-input__inner{
width: 280px;
border-radius: 22px;
background-color: @party-bg-gray;
.el-range-separator{
width: 20px;
padding: 0 2px;
}
}
.el-input__icon{
width: 40px;
font-size: 20px;
......@@ -118,6 +125,9 @@
.btn-group{
text-align: right;
margin-bottom: 12px;
.el-button{
min-width: 128px;
}
}
}
.btn-group{
......@@ -140,3 +150,120 @@
color:@party-btn-color;
}
}
// 系统form 表单样式
.party-form{
.el-input{
width: 280px;
.el-input__inner{
border-radius: 22px;
background-color: @party-bg-gray;
border: 1px solid @party-border-color;
}
}
.el-textarea .el-textarea__inner{
background-color: @party-bg-gray;
border-radius: 8px;
}
.el-range-editor.el-input__inner{
width: 280px;
border-radius: 22px;
}
.mt16{
margin-top: 16px;
}
.el-radio-group{
.el-radio__inner{
width: 24px;
height: 24px;
border-color: @party-border-color;
}
.el-radio__label{
font-size: 16px;
}
.el-radio.is-checked{
.el-radio__input.is-checked{
.el-radio__inner{
background-color: transparent;
border-color: @party-border-color;
&:after{
width: 10px;
height: 10px;
background-color: @party-btn-color;
}
}
}
.el-radio__label{
color: @font-color;
}
}
}
.el-checkbox-group{
.el-checkbox{
margin-right: 25px;
.el-checkbox__inner{
width: 22px;
height: 22px;
&:hover{
border-color: @party-border-color;
}
}
.el-checkbox__label{
color: @font-color
}
& +.el-checkbox{
margin-left: 0;
}
&.is-checked{
.el-checkbox__inner{
border-color: @party-border-color;
background-color: @party-check-bg-color;
&:after{
border: 2px solid #AC9374;
border-left:0;
border-top: 0;
height: 11px;
left:7px;
width: 5px;
}
}
.el-checkbox__label{
color: @font-color
}
}
}
}
}
// 适用于修改密码 app 界面定义样式
.page-form-box{
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
.page-form-box-header{
height: 64px;
line-height: 64px;
text-align: center;
border-bottom: 1px solid @party-border-color;
font-size: 20px;
color: @font-color;
text-align: center;
font-weight: bold;
}
.page-form-box-content{
height: calc(100% - 148px);
padding: 20px;
}
.page-form-box-footer{
height: 84px;
line-height: 84px;
text-align: center;
border-top: 1px solid @party-border-color;
.el-button{
width: 160px;
height: 40px;
}
}
}
\ No newline at end of file
.partyt-pagination{
.el-pagination{
margin-top: 40px;
margin-top: 20px;
.btn-prev,
.btn-next{
width: 40px;
......
.party-table{
height: calc(100% - 160px);
height: calc(100% - 130px);
.el-table__header-wrapper{
border-radius: 8px 8px 0 0 ;
.el-table__header{
......
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