Commit da155a88 authored by ganjingcun's avatar ganjingcun

走势图

parent 76f4c4e0
...@@ -55,9 +55,11 @@ ...@@ -55,9 +55,11 @@
<div class="caption"> <div class="caption">
<!--<h3>--> <!--<h3>-->
<!--<i class="glyphicon glyphicon-user"></i> --> <!--<i class="glyphicon glyphicon-user"></i> -->
<!--<strong>{{username}}</strong></h3>--> <!--<strong>{{username}}</strong></h3>-->
<p style="font-size:20px;"><pre>{{form.desc}}</pre></p> <p style="font-size:20px;">
<pre>{{form.desc}}</pre>
</p>
<!--作者:{{author}}--> <!--作者:{{author}}-->
</div> </div>
...@@ -109,9 +111,9 @@ ...@@ -109,9 +111,9 @@
</el-form-item> </el-form-item>
<el-form-item label="图片URL" :label-width="formLabelWidth"> <el-form-item label="图片URL" :label-width="formLabelWidth">
<el-input v-model="demo_url" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input> <el-input v-model="demo_url" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input>
<a href="https://ygobbs.com/" target="_blank" class="el-icon-upload2"> 图片上传地址</a> <a href="https://ygobbs.com/t/86271" target="_blank" class="el-icon-upload2"> 图片上传地址</a>
</el-form-item> </el-form-item>
<!--<el-popover <!--<el-popover
ref="popover1" ref="popover1"
placement="top-start" placement="top-start"
...@@ -171,101 +173,101 @@ ...@@ -171,101 +173,101 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组攻略 </h4> <h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组攻略 </h4>
<pre>{{form.strategy}}</pre> <pre>{{form.strategy}}</pre>
<br> <br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组范例&下载 </h4> <h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组范例&下载 </h4>
<div v-if="user.isLogin"> <div v-if="user.isLogin">
<div class="alert alert-success alert-dismissible" role="alert"> <div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span v-if="!isNew">您可以上传卡组范例。</span> <span v-if="!isNew">您可以上传卡组范例。</span>
<span v-if="isNew">还没有卡组范例。</span> <span v-if="isNew">还没有卡组范例。</span>
<i class="el-icon-edit hand" @click.prevent="showDialog2">我要上传</i> <i class="el-icon-edit hand" @click.prevent="showDialog2">我要上传</i>
</div>
</div> </div>
</div> <div v-else>
<div v-else> <div class="alert alert-success alert-dismissible" role="alert">
<div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <span>登录后才可上传卡组范例。</span>
<span>登录后才可上传卡组范例。</span> <a class="hand" @click.prevent="login" href="#">登录</a>
<a class="hand" @click.prevent="login" href="#">登录</a> </div>
</div> </div>
</div>
<el-row> <el-row>
<el-col :span="7" v-for="(o, index) in demo1" :key="o" :offset="index > 0 ? 1 : 0"> <el-col :span="7" v-for="(o, index) in demo1" :key="0" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }"> <el-card :body-style="{ padding: '0px' }">
<img :src="o.url" class="image"> <img :src="o.url" class="image">
<div style="padding: 6px;"> <div style="padding: 6px;">
<span style="font-size: 14px">标题: {{o.title}}</span> <span style="font-size: 14px">标题: {{o.title}}</span>
<br> <br>
<span style="font-size: 14px">上传者: {{o.author}}</span> <span style="font-size: 14px">上传者: {{o.author}}</span>
<div class="bottom clearfix"> <div class="bottom clearfix">
<time class="time">{{o.create_time}}</time> <time class="time">{{o.create_time}}</time>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button> <el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载此范例卡组</el-button>
</div>
</div> </div>
</div> </el-card>
</el-card> </el-col>
</el-col> </el-row>
</el-row> <br>
<br> <el-row>
<el-row> <el-col :span="7" v-for="(o, index) in demo2" :key="1" :offset="index > 0 ? 1 : 0">
<el-col :span="7" v-for="(o, index) in demo2" :key="o" :offset="index > 0 ? 1 : 0"> <el-card :body-style="{ padding: '0px' }">
<el-card :body-style="{ padding: '0px' }"> <img :src="o.url" class="image">
<img :src="o.url" class="image"> <div style="padding: 6px;">
<div style="padding: 6px;"> <span style="font-size: 14px">标题: {{o.title}}</span>
<span style="font-size: 14px">标题: {{o.title}}</span> <br>
<br> <span style="font-size: 14px">上传者: {{o.author}}</span>
<span style="font-size: 14px">上传者: {{o.author}}</span> <div class="bottom clearfix">
<div class="bottom clearfix"> <time class="time">{{o.create_time}}</time>
<time class="time">{{o.create_time}}</time> <el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button> </div>
</div> </div>
</div> </el-card>
</el-card> </el-col>
</el-col> </el-row>
</el-row> <br>
<br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 参考资料 </h4> <h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 参考资料 </h4>
<pre v-html="form.reference">{{form.reference}}</pre> <pre v-html="form.reference">{{form.reference}}</pre>
<br> <br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 编辑历史 </h4> <h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 编辑历史 </h4>
<!--<div class="panel panel-default"> <!--<div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">编辑历史 </h3> <h3 class="panel-title">编辑历史 </h3>
</div>--> </div>-->
<!--<div class="panel-body">--> <!--<div class="panel-body">-->
<!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;"> <!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" ></table> <table id="rank" class="table table-striped table-bordered table-hover example" ></table>
</div>--> </div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table> <table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>--> </div>-->
<!--</div>--> <!--</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table> <table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
</div>--> </div>-->
<!--</div>--> <!--</div>-->
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<br>
</div>
</div> </div>
</div>
...@@ -290,6 +292,7 @@ ...@@ -290,6 +292,7 @@
export default { export default {
data() { data() {
return { return {
unknow:"assets/img/unknow.jpeg",
currentDate: new Date(), currentDate: new Date(),
author: "", author: "",
fileList3: [], fileList3: [],
...@@ -314,10 +317,10 @@ ...@@ -314,10 +317,10 @@
resource: '', resource: '',
desc: '', desc: '',
desc_new: '', desc_new: '',
strategy:'-', strategy: '-',
strategy_new:'', strategy_new: '',
reference:'-', reference: '-',
reference_new:'' reference_new: ''
}, },
formLabelWidth: '40px', formLabelWidth: '40px',
isNew: true, isNew: true,
...@@ -384,7 +387,7 @@ ...@@ -384,7 +387,7 @@
this.demo1 = res.data.demo.slice(0, 3) this.demo1 = res.data.demo.slice(0, 3)
this.demo2 = res.data.demo.slice(3, 6) this.demo2 = res.data.demo.slice(3, 6)
this.author = dataPbj.author this.author = dataPbj.author
if (rankTable) { if (rankTable) {
rankTable.destroy(); rankTable.destroy();
...@@ -423,7 +426,7 @@ ...@@ -423,7 +426,7 @@
this.imageUrl = URL.createObjectURL(file.raw); this.imageUrl = URL.createObjectURL(file.raw);
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
var type =/\.[^\.]+/.exec(file.name); var type = /\.[^\.]+/.exec(file.name);
const isJPG = type[0] === '.ydk'; const isJPG = type[0] === '.ydk';
const isLt2M = file.size / 1024 < 3; const isLt2M = file.size / 1024 < 3;
...@@ -517,7 +520,7 @@ ...@@ -517,7 +520,7 @@
this.dialogFormVisible2 = false this.dialogFormVisible2 = false
}, },
submitModify2: function () { submitModify2: function () {
this.dialogFormVisible2 = false
if (this.isClick) { if (this.isClick) {
this.$notify({ this.$notify({
...@@ -526,6 +529,17 @@ ...@@ -526,6 +529,17 @@
type: 'error' type: 'error'
}) })
} else { } else {
if (!this.demo_title || !this.demo_url) {
this.$notify({
title: '警告',
message: '标题和截图不能为空!',
type: 'error'
})
return
}
this.isClick = true; this.isClick = true;
var param = { var param = {
user: this.user.username, user: this.user.username,
...@@ -767,12 +781,12 @@ ...@@ -767,12 +781,12 @@
.clearfix:after { .clearfix:after {
clear: both clear: both
} }
pre{ pre {
white-space:pre-wrap; white-space: pre-wrap;
white-space:-moz-pre-wrap; white-space: -moz-pre-wrap;
white-space:-pre-wrap; white-space: -pre-wrap;
white-space:-o-pre-wrap; white-space: -o-pre-wrap;
word-wrap:break-word; word-wrap: break-word;
} }
</style> </style>
\ No newline at end of file
...@@ -68,14 +68,14 @@ ...@@ -68,14 +68,14 @@
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="MCPRO服务改进调查" v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'> <el-dialog title="MCPRO服务改进调查" v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'>
<div class="voteTitle">{{ voteObj.title }} (最多选{{voteObj.max}}项)</div><br> <div class="voteTitle">{{ voteObj.title }} (最多选{{voteObj.max}}项)</div><br>
<el-form :model="form"> <el-form :model="form">
<el-checkbox-group v-model="opids" :min="0" :max="voteObj.max"> <el-checkbox-group v-model="opids" :min="0" :max="voteObj.max">
<el-form-item :label-width="formLabelWidth" v-for="item in voteObj.options"> <el-form-item :label-width="formLabelWidth" v-for="item in voteObj.options" :key="item.key">
<el-checkbox :label="item.key" :key="item.key">{{item.name}}</el-checkbox> <el-checkbox :label="item.key" :key="item.key">{{item.name}}</el-checkbox>
</el-form-item> </el-form-item>
</el-checkbox-group> </el-checkbox-group>
...@@ -111,7 +111,10 @@ ...@@ -111,7 +111,10 @@
return { return {
opids: [], opids: [],
cities: cityOptions, cities: cityOptions,
voteObj: {}, voteObj: {
multiple: false,
options: []
},
size: 'small', size: 'small',
dialogFormVisible: false, dialogFormVisible: false,
form: { form: {
...@@ -144,7 +147,7 @@ ...@@ -144,7 +147,7 @@
var _this = this var _this = this
if (location.hash === "#/vote") { if (location.hash === "#/vote" || location.hash === "#/report") {
return; return;
} }
...@@ -163,6 +166,7 @@ ...@@ -163,6 +166,7 @@
// } // }
API.getVote({ user: this.user.id, username: this.user.username }).then((res) => { API.getVote({ user: this.user.id, username: this.user.username }).then((res) => {
this.voteObj = res.data.data this.voteObj = res.data.data
...@@ -254,12 +258,31 @@ ...@@ -254,12 +258,31 @@
, id: 'layerDemo' , id: 'layerDemo'
, time: 5000 , time: 5000
, content: '<div style="padding: 20px ;">' + '感谢您的参与,环境会因为您而变得更好。此问卷为您奖励EXP+1!' + '</div>' , content: '<div style="padding: 20px ;">' + '感谢您的参与,环境会因为您而变得更好。此问卷为您奖励EXP+1!' + '</div>'
, btn: '知道了' , btn: ['知道了', '参与下一个投票']
, btnAlign: 'c' //按钮居中 , btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩 , shade: 0 //不显示遮罩
, yes: function () { , yes: function () {
layer.closeAll(); layer.closeAll();
// _this.dialogFormVisible = true; // _this.dialogFormVisible = true;
},
btn2: function (index, layero) {
//按钮【按钮二】的回调
layer.closeAll();
//return false 开启该代码可禁止点击该按钮关闭
API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
if (res.data.data && res.data.data !== "null") {
_this.voteObj = res.data.data
_this.voteObj.options = JSON.parse(_this.voteObj.options)
_this.dialogFormVisible = true;
}
}, (res) => {
console.log(res)
});
} }
}); });
......
...@@ -59,6 +59,10 @@ ...@@ -59,6 +59,10 @@
</div> </div>
</div> </div>
<hr>
<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
<!--<el-table :data="history.data" stripe style="width: 100%"> <!--<el-table :data="history.data" stripe style="width: 100%">
<el-table-column prop="usernamea" label="玩家A" width="180"> <el-table-column prop="usernamea" label="玩家A" width="180">
...@@ -190,7 +194,104 @@ ...@@ -190,7 +194,104 @@
} }
}, },
mounted() {
this.drawLine();
},
methods: { methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
var colors = ['#5793f3', '#d14a61', '#675bba'];
var option = {
title: { text: '战斗场次走势图' },
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['竞技场', '娱乐场']
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '娱乐场数 ' + params.value
+ (params.seriesData.length ? '' + params.seriesData[0].data : '');
}
}
},
data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '竞技场数 ' + params.value
+ (params.seriesData.length ? '' + params.seriesData[0].data : '');
}
}
},
data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '竞技场',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 1111.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '娱乐场',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
}
]
};
myChart.setOption(option);
},
searchTextChange: function () { searchTextChange: function () {
var username = this.username var username = this.username
this.renderTable() this.renderTable()
......
...@@ -11,6 +11,10 @@ import 'element-ui/lib/theme-default/index.css' ...@@ -11,6 +11,10 @@ import 'element-ui/lib/theme-default/index.css'
Vue.use(Element) Vue.use(Element)
Vue.use(VueX) Vue.use(VueX)
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false Vue.config.productionTip = false
/* eslint-disable no-new */ /* eslint-disable no-new */
......
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