Commit d32942a2 authored by qzhxx's avatar qzhxx

合并

parents b61ccdaf a046937f
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -16,14 +16,16 @@ ...@@ -16,14 +16,16 @@
"echarts": "^4.2.0-rc.2", "echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.8", "element-ui": "^2.4.8",
"file-saver": "^2.0.0-rc.3", "file-saver": "^2.0.0-rc.3",
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1",
"moment": "^2.22.2", "moment": "^2.22.2",
"ol": "^5.2.0", "ol": "^5.2.0",
"ol-ext": "^3.0.2", "ol-ext": "^3.0.2",
"qrcode.vue": "^1.6.1", "qrcode.vue": "^1.6.1",
"qs": "^6.5.2", "qs": "^6.5.2",
"qs-stringify": "^1.1.0", "qs-stringify": "^1.1.0",
"video.js": "^7.11.4",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"video.js": "^7.11.4",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-qr": "^1.5.2", "vue-qr": "^1.5.2",
......
...@@ -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{
......
<template> <template>
<div id="backlogin"> <div id="backlogin">
<div class="content"> <div class="content">
<div class="page-content">
<div class="page-title"> <div class="page-title">
<p>中国国家博物馆建党百年展</p> <p>中国国家博物馆建党百年展</p>
<p>点播院线服务平台</p> <p>点播院线服务平台</p>
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
</el-form> </el-form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -155,8 +157,17 @@ export default { ...@@ -155,8 +157,17 @@ export default {
background: url("~@/assets/login/login_bt01.png") no-repeat center/ 100% background: url("~@/assets/login/login_bt01.png") no-repeat center/ 100%
100%; 100%;
} }
.page-content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
width:100%;
}
.page-title { .page-title {
margin-top: 140px; width: 100%;
margin-bottom: 60px;
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
...@@ -181,13 +192,8 @@ export default { ...@@ -181,13 +192,8 @@ export default {
background: url("~@/assets/login/pwd.png") no-repeat center/ 100%; background: url("~@/assets/login/pwd.png") no-repeat center/ 100%;
} }
/deep/.el-form { /deep/.el-form {
// margin-top: 120px; width: 100%;
text-align: center; text-align: center;
z-index: 99;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 150px;
.el-form-item { .el-form-item {
margin-bottom: 60px; margin-bottom: 60px;
} }
...@@ -228,7 +234,7 @@ export default { ...@@ -228,7 +234,7 @@ export default {
@media (min-width: 1301px) and (max-width: 1600px) { @media (min-width: 1301px) and (max-width: 1600px) {
#backlogin .content { #backlogin .content {
.page-title { .page-title {
margin-top: 50px; margin-bottom: 50px;
p { p {
font-size: 30px; font-size: 30px;
} }
...@@ -238,7 +244,7 @@ export default { ...@@ -238,7 +244,7 @@ export default {
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
#backlogin .content { #backlogin .content {
.page-title { .page-title {
margin-top: 20px; margin-bottom: 30px;
p { p {
font-size: 24px; font-size: 24px;
} }
......
<template> <template>
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-left"> <div class="top-bar-left">
<div class="logo"></div> <div class="logo" @click="$router.push('/index')"></div>
<span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span> <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
</div> </div>
<div class="top-bar-right"> <div class="top-bar-right">
...@@ -77,6 +77,7 @@ export default { ...@@ -77,6 +77,7 @@ export default {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: url("~@/assets/login/logo.png") no-repeat center/100% 100%; background: url("~@/assets/login/logo.png") no-repeat center/100% 100%;
cursor: pointer;
} }
.title { .title {
color: @party-white; color: @party-white;
......
...@@ -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');
} }
......
...@@ -29,6 +29,10 @@ import '../static/ueditor/ueditor.all.js' ...@@ -29,6 +29,10 @@ import '../static/ueditor/ueditor.all.js'
import '../static/ueditor/themes/default/css/ueditor.min.css' import '../static/ueditor/themes/default/css/ueditor.min.css'
import '../static/ueditor/lang/zh-cn/zh-cn.js' import '../static/ueditor/lang/zh-cn/zh-cn.js'
// 引入JsPdf
import exportToPdf from "@/utils/exportToPdf"
Vue.use(exportToPdf)
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern) return moment(dataStr).format(pattern)
}) })
......
...@@ -3,22 +3,20 @@ ...@@ -3,22 +3,20 @@
class="custom-dialog" class="custom-dialog"
custom-class="party-dialog" custom-class="party-dialog"
title="上传新版安装包" title="上传新版安装包"
width="540px" width="468px"
:visible.sync="formVisible" :visible.sync="formVisible"
:before-close="close" :before-close="close"
> >
<div class="dialog-content"> <div class="dialog-content">
<el-form <el-form
:model="formItem" :model="formItem"
class="party-form" class="party-form version-add"
ref="formItem" ref="formItem"
label-width="125px" label-position="top"
label-position="right"
:rules="rules" :rules="rules"
> >
<el-form-item label="版本号:" prop="appVersion"> <el-form-item label="版本号:" prop="appVersion">
<el-input <el-input
size="small"
v-model="formItem.appVersion" v-model="formItem.appVersion"
clearable clearable
placeholder="请输入版本号" placeholder="请输入版本号"
...@@ -27,14 +25,12 @@ ...@@ -27,14 +25,12 @@
<el-form-item label="版本信息:" prop="versionInfo"> <el-form-item label="版本信息:" prop="versionInfo">
<el-input <el-input
type="textarea" type="textarea"
size="small"
v-model="formItem.versionInfo" v-model="formItem.versionInfo"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="更新内容:" prop="updateContent"> <el-form-item label="更新内容:" prop="updateContent">
<el-input <el-input
type="textarea" type="textarea"
size="small"
v-model="formItem.updateContent" v-model="formItem.updateContent"
></el-input> ></el-input>
</el-form-item> </el-form-item>
...@@ -55,10 +51,9 @@ ...@@ -55,10 +51,9 @@
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="submitForm('formItem')"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button> <el-button size="mini" @click="close">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
...@@ -87,10 +82,12 @@ export default { ...@@ -87,10 +82,12 @@ export default {
methods: { methods: {
backFn() { backFn() {
this.formVisible = true this.formVisible = true
this.formItem = {}
this.fileList = []
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.formItem.clearValidate() this.$refs.formItem.clearValidate()
}); });
this.formItem = {}
}, },
// 关闭 // 关闭
close() { close() {
...@@ -164,12 +161,16 @@ export default { ...@@ -164,12 +161,16 @@ export default {
<style lang="less"> <style lang="less">
@import "~@/style/dialog.less"; @import "~@/style/dialog.less";
.text-center { .version-add {
.el-upload-dragger {
height: 120px;
.el-icon-upload {
margin-top: 10px;
}
}
.text-center {
text-align: center; text-align: center;
}
.custom-dialog {
.party-form .el-input {
width: 100%;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -2,54 +2,31 @@ ...@@ -2,54 +2,31 @@
<el-dialog <el-dialog
custom-class="party-dialog" custom-class="party-dialog"
title="详情" title="详情"
width="540px" width="468px"
:visible.sync="formVisible" :visible.sync="formVisible"
:before-close="close" :before-close="close"
> >
<div class="dialog-content"> <div class="dialog-content">
<el-form <el-form
:model="formItem" :model="formItem"
class="party-form" class="party-form version-detail"
ref="formItem" ref="formItem"
label-width="180px" label-position="top"
label-position="right"
> >
<el-form-item label="上传时间:" prop="createTime"> <el-form-item label="上传时间:" prop="createTime">
<el-input <span class="input-item">{{formItem.createTime}}</span>
size="small"
v-model="formItem.createTime"
disabled
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="操作者:" prop="userName"> <el-form-item label="操作者:" prop="userName">
<el-input <span class="input-item">{{formItem.userName}}</span>
size="small"
v-model="formItem.userName"
disabled
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否为当前使用版本:"> <el-form-item label="是否为当前使用版本:">
<el-input <span class="input-item">{{formItem.isCurrent ? '是' : '否'}}</span>
size="small"
:value="formItem.isCurrent ? '是' : '否'"
disabled
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="版本信息:" prop="versionInfo"> <el-form-item label="版本信息:" prop="versionInfo">
<el-input <span class="input-item">{{formItem.versionInfo}}</span>
type="textarea"
size="small"
v-model="formItem.versionInfo"
disabled
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="更新内容:" prop="updateLog"> <el-form-item label="更新内容:" prop="updateLog">
<el-input <span class="input-item">{{formItem.updateLog}}</span>
type="textarea"
size="small"
v-model="formItem.updateLog"
disabled
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -82,4 +59,11 @@ export default { ...@@ -82,4 +59,11 @@ export default {
<style lang="less"> <style lang="less">
@import "~@/style/dialog.less"; @import "~@/style/dialog.less";
.version-detail {
.input-item {
font-size: 16px;
color:#333;
}
}
</style> </style>
\ No newline at end of file
...@@ -41,19 +41,21 @@ ...@@ -41,19 +41,21 @@
type="index" type="index"
width="120" width="120"
label="序号" label="序号"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="app版本号" label="app版本号"
prop="appVersion" prop="appVersion"
align="center"
></el-table-column> ></el-table-column>
<el-table-column label="是否为最新版本"> <el-table-column align="center" label="是否为最新版本">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.isCurrent ? "是" : "否" }}</span> <span>{{ scope.row.isCurrent ? "是" : "否" }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="上传时间" prop="createTime"></el-table-column> <el-table-column align="center" label="上传时间" prop="createTime"></el-table-column>
<el-table-column label="操作者" prop="userName"></el-table-column> <el-table-column align="center" label="操作者" prop="userName"></el-table-column>
<el-table-column label="操作" header-align="center" align="center"> <el-table-column align="center" label="操作" header-align="center">
<template slot-scope="scope" width="220"> <template slot-scope="scope" width="220">
<div class="table-btn-group"> <div class="table-btn-group">
<el-tooltip content="详情" placement="top"> <el-tooltip content="详情" placement="top">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<el-dialog <el-dialog
custom-class="party-dialog" custom-class="party-dialog"
:title="title" :title="title"
width="540px" width="468px"
:visible.sync="formVisible" :visible.sync="formVisible"
:before-close="close" :before-close="close"
> >
...@@ -12,12 +12,11 @@ ...@@ -12,12 +12,11 @@
class="party-form" class="party-form"
ref="formItem" ref="formItem"
label-width="125px" label-width="125px"
label-position="right" label-position="top"
:rules="rules" :rules="rules"
> >
<el-form-item label="所属单位:" prop="orgId"> <el-form-item label="所属单位:" prop="orgId">
<el-select <el-select
size="small"
v-model="formItem.orgId" v-model="formItem.orgId"
clearable clearable
placeholder="请选择所属单位" placeholder="请选择所属单位"
...@@ -33,7 +32,6 @@ ...@@ -33,7 +32,6 @@
</el-form-item> </el-form-item>
<el-form-item label="机构地理位置:" prop="areaName"> <el-form-item label="机构地理位置:" prop="areaName">
<el-input <el-input
size="small"
v-model="formItem.areaName" v-model="formItem.areaName"
disabled disabled
></el-input> ></el-input>
...@@ -41,8 +39,8 @@ ...@@ -41,8 +39,8 @@
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<el-button type="primary" @click="submitForm('formItem')">确定</el-button>
<el-button @click="close">取 消</el-button> <el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formItem')">确定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
......
...@@ -38,22 +38,7 @@ ...@@ -38,22 +38,7 @@
<div class="btn-group"> <div class="btn-group">
<el-button type="primary" @click="addBox">新建机顶盒账号</el-button> <el-button type="primary" @click="addBox">新建机顶盒账号</el-button>
</div> </div>
<div class="party-table"> <party-table :feildList="feildList" :list="tableData"/>
<el-table
border
style="width: 100%; height: 100%"
height="100%"
:data="tableData"
>
<el-table-column
type="index"
width="120"
label="序号"
></el-table-column>
<el-table-column label="MAC地址" prop="mac"></el-table-column>
<el-table-column label="所属单位" prop="organName"></el-table-column>
</el-table>
</div>
<div class="partyt-pagination" style="margin: 0 20px"> <div class="partyt-pagination" style="margin: 0 20px">
<el-pagination <el-pagination
background background
...@@ -70,11 +55,12 @@ ...@@ -70,11 +55,12 @@
</template> </template>
<script> <script>
import { partyPagination } from "@/components/index"; import { partyPagination } from "@/components/index";
import partyTable from "@/components/table.vue";
import customDialog from "./components/dialog.vue"; import customDialog from "./components/dialog.vue";
import { getAreas } from "@/config/area.js"; import { getAreas } from "@/config/area.js";
import { getOrgListWithOutPage } from "@/config/organ.js"; import { getOrgListWithOutPage } from "@/config/organ.js";
export default { export default {
components: { partyPagination, customDialog }, components: { partyPagination, customDialog,partyTable },
data() { data() {
return { return {
page: { page: {
...@@ -82,6 +68,10 @@ export default { ...@@ -82,6 +68,10 @@ export default {
pageSize: 10, pageSize: 10,
total: 0 total: 0
}, },
feildList: [
{ prop: "mac", label: "MAC地址" },
{ prop: "organName", label: "所属单位" }
],
orgOptions: [], // 单位信息 orgOptions: [], // 单位信息
areaOptions: [], //区域信息 areaOptions: [], //区域信息
defaultProps: { defaultProps: {
......
...@@ -35,12 +35,10 @@ ...@@ -35,12 +35,10 @@
<div class="title">“北京市政府”展板互动信息汇总</div> <div class="title">“北京市政府”展板互动信息汇总</div>
<div class="page-tip"> <div class="page-tip">
<span class="page-tip-title">页面说明:</span> <span class="page-tip-title">页面说明:</span>
<span class="page-tips" <span class="page-tips">可查看某个组织机构的互动信息</span>
>可查看某个组织机构的互动信息</span
>
</div> </div>
</div> </div>
<div class="scrollBox"> <div class="scrollBox" v-show="tableData.length">
<div <div
class="content-item" class="content-item"
v-for="(item, index) in tableData" v-for="(item, index) in tableData"
...@@ -48,16 +46,17 @@ ...@@ -48,16 +46,17 @@
> >
<h5 class="title">{{ item.name }}</h5> <h5 class="title">{{ item.name }}</h5>
<p>{{ item.content }}</p> <p>{{ item.content }}</p>
<div class="img-box"> <div class="img-box" v-if="item.images.length">
<img v-for="(j, idx) in item.images" :src="j" :key="idx" alt="" /> <img v-for="(j, idx) in item.images" :src="j" :key="idx" alt="" />
</div> </div>
<div class="img-box" v-if="!item.images.length">暂无数据</div>
<div class="author"> <div class="author">
<div>{{ item.username }}</div> <div>{{ item.username }}</div>
<div>{{ item.createTime }}</div> <div>{{ item.createTime }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="partyt-pagination" style="margin: 0 20px"> <div class="partyt-pagination" style="margin: 0 20px" v-show="tableData.length">
<el-pagination <el-pagination
background background
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
...@@ -78,7 +77,7 @@ export default { ...@@ -78,7 +77,7 @@ export default {
page: { page: {
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0 total: 0,
}, },
treeData: [], treeData: [],
defaultProps: { defaultProps: {
...@@ -96,19 +95,19 @@ export default { ...@@ -96,19 +95,19 @@ export default {
}, },
mounted() { mounted() {
// 获取全部组织机构数据 // 获取全部组织机构数据
this.getOrgData() this.getOrgData();
this.onSearch() // this.onSearch()
}, },
methods: { methods: {
// 查询 // 查询
onSearch() { onSearch() {
this.page.currentPage = 1 this.page.currentPage = 1;
this.getTableData() this.getTableData();
}, },
// 获得数据接口 // 获得数据接口
getTableData() { getTableData() {
let vm = this let vm = this;
vm.tableData = [] vm.tableData = [];
let param = { let param = {
_index: this.page.currentPage, _index: this.page.currentPage,
_size: this.page.pageSize, _size: this.page.pageSize,
...@@ -124,29 +123,31 @@ export default { ...@@ -124,29 +123,31 @@ export default {
) )
.then((res) => { .then((res) => {
if (res.data.resultCode === "200") { if (res.data.resultCode === "200") {
let data = res.data.data let data = res.data.data;
vm.page.total = data.total vm.page.total = data.total;
vm.tableData = data.records vm.tableData = data.records;
if(!vm.tableData.length){
this.$message('暂无数据')
return false
}
vm.tableData.forEach((item) => { vm.tableData.forEach((item) => {
item.images = item.images.split(",") item.images = item.images ? item.images.split(",") : [];
item.images.forEach((result, index) => { item.images.forEach((result, index) => {
if (/\.(MP4|mp4)/.test(result)) { if (/\.(MP4|mp4)/.test(result)) {
item.images[index] = require("@/assets/video-icon.png") item.images[index] = require("@/assets/video-icon.png");
} else if (/\.(MP3|mp3)/.test(result)) { } else if (/\.(MP3|mp3)/.test(result)) {
item.images[index] = require("@/assets/audio-icon.png") item.images[index] = require("@/assets/audio-icon.png");
} else {
item.images[index] = require("@/assets/default-img.jpeg")
} }
}) });
}) });
vm.tableData = [...vm.tableData] vm.tableData = [...vm.tableData];
} else { } else {
this.$message.error(res.data.message) this.$message.error(res.data.message);
} }
}) })
.catch(function (err) { .catch(function (err) {
console.log(err) console.log(err);
}); });
}, },
// 获取组织机构数据 // 获取组织机构数据
...@@ -158,13 +159,13 @@ export default { ...@@ -158,13 +159,13 @@ export default {
}).then( }).then(
(res) => { (res) => {
if (res.data.resultCode === "200") { if (res.data.resultCode === "200") {
this.treeData = res.data.data this.treeData = res.data.data;
} else { } else {
this.$message.error(res.data.message) this.$message.error(res.data.message);
} }
}, },
(error) => { (error) => {
console.log(error) console.log(error);
} }
); );
}, },
...@@ -176,12 +177,12 @@ export default { ...@@ -176,12 +177,12 @@ export default {
// 点击节点事件 // 点击节点事件
handleNodeClick(data) { handleNodeClick(data) {
this.selectAreaId = data.id; this.selectAreaId = data.id;
this.onSearch() this.onSearch();
}, },
// 分页 // 分页
handleCurrentChange(val) { handleCurrentChange(val) {
this.page.currentPage = val this.page.currentPage = val;
this.getTableData() this.getTableData();
}, },
}, },
}; };
......
...@@ -56,14 +56,13 @@ ...@@ -56,14 +56,13 @@
type="index" type="index"
width="120" width="120"
label="序号" label="序号"
align="center"
></el-table-column> ></el-table-column>
<el-table-column label="mac地址" prop="mac"></el-table-column> <el-table-column align="center" label="mac地址" prop="mac"></el-table-column>
<el-table-column label="所属单位" prop="organName"></el-table-column> <el-table-column align="center" label="所属单位" prop="organName"></el-table-column>
<el-table-column label="机顶盒状态" prop="status"> <el-table-column align="center" label="机顶盒状态" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.status === 1">待激活</span> <span>{{statusOptions[scope.row.status-1].label}}</span>
<span v-if="scope.row.status === 2">已激活</span>
<span v-if="scope.row.status === 3">故障</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
...@@ -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
...@@ -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!!");
......
...@@ -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
} }
}, },
// 提交 // 提交
......
<template> <template>
<div class="listPage H100"> <div class="listPage H100">
<div class="search-container"> <div class="search-container">
<el-form :inline="true" :model="form" ref="form" class="search-form" onsubmit="return false;"> <el-form
:inline="true"
:model="form"
ref="form"
class="search-form"
onsubmit="return false;"
>
<el-form-item label=""> <el-form-item label="">
<el-input <el-input
size="mini" size="mini"
...@@ -11,7 +17,7 @@ ...@@ -11,7 +17,7 @@
clearable clearable
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item > <el-form-item>
<el-select v-model="form.status" placeholder="请选择审核状态"> <el-select v-model="form.status" placeholder="请选择审核状态">
<el-option label="待初审" value="TBC"></el-option> <el-option label="待初审" value="TBC"></el-option>
<el-option label="已驳回" value="REFUSED"></el-option> <el-option label="已驳回" value="REFUSED"></el-option>
...@@ -21,26 +27,41 @@ ...@@ -21,26 +27,41 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div class="btn-group"> <div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button> <el-button
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button> size="mini"
type="primary"
class="btn_form_search"
@click="Search"
>查询</el-button
>
<el-button size="mini" class="btn_form_search" @click="Reset"
>重置</el-button
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="page-tip"> <div class="page-tip">
<span class="page-tip-title">页面说明:</span> <span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看展板待审核的所有内容,可根据审核类别进行筛选</span> <span class="page-tips"
>可查看展板待审核的所有内容,可根据审核类别进行筛选</span
>
</div> </div>
</div> </div>
<div class="table-content"> <div class="table-content">
<div class="party-table"> <div class="party-table">
<el-table <el-table
border border
style="width: 100%;height:100%" height="100%" style="width: 100%; height: 100%"
height="100%"
ref="multipleTable" ref="multipleTable"
:data="tableData" :data="tableData"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="index" width="120" label="序号"></el-table-column> <el-table-column
type="index"
width="120"
label="序号"
></el-table-column>
<el-table-column label="展板名称" prop="name"></el-table-column> <el-table-column label="展板名称" prop="name"></el-table-column>
<el-table-column label="提交人" prop="userName"></el-table-column> <el-table-column label="提交人" prop="userName"></el-table-column>
<el-table-column label="提交日期" prop="createTime"></el-table-column> <el-table-column label="提交日期" prop="createTime"></el-table-column>
...@@ -50,7 +71,9 @@ ...@@ -50,7 +71,9 @@
<span v-if="scope.row.status === 'TBC'">待初审</span> <span v-if="scope.row.status === 'TBC'">待初审</span>
<span v-else-if="scope.row.status === 'REFUSED'">已驳回</span> <span v-else-if="scope.row.status === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.status === 'TBCA'">待复审</span> <span v-else-if="scope.row.status === 'TBCA'">待复审</span>
<span v-else-if="scope.row.status === 'APPROVED_FINAL'">通过</span> <span v-else-if="scope.row.status === 'APPROVED_FINAL'"
>通过</span
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" header-align="center" align="center"> <el-table-column label="操作" header-align="center" align="center">
...@@ -100,7 +123,13 @@ ...@@ -100,7 +123,13 @@
</div> </div>
</div> </div>
<!--新增弹框--> <!--新增弹框-->
<el-dialog title="新建" custom-class="party-dialog" width="468px" :visible.sync="FormVisible1" :before-close="close1"> <el-dialog
title="新建"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible1"
:before-close="close1"
>
<div class="dialog-content"> <div class="dialog-content">
<el-form <el-form
:model="classForm" :model="classForm"
...@@ -117,55 +146,80 @@ ...@@ -117,55 +146,80 @@
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="permisSave">确定</el-button> <el-button size="mini" type="primary" @click="permisSave"
>确定</el-button
>
<!-- <el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button> --> <!-- <el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button> -->
<el-button size="mini" @click="close1">取 消</el-button> <el-button size="mini" @click="close1">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--请填写驳回原因--> <!--请填写驳回原因-->
<el-dialog custom-class="party-dialog" title="展板详情" width="468px" :visible.sync="FormVisible" :before-close="close" > <el-dialog
custom-class="party-dialog"
title="展板详情"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content"> <div class="dialog-content">
<el-form :model="editForm" disabled class="party-form" ref="editForm" label-width="80px" label-position="top" :rules="rules"> <el-form
:model="editForm"
disabled
class="party-form"
ref="editForm"
label-width="80px"
label-position="top"
:rules="rules"
>
<el-form-item label="展板名称" :label-width="formLabelWidth"> <el-form-item label="展板名称" :label-width="formLabelWidth">
<el-input <el-input
size="small" size="small"
v-model="editForm.name" v-model="editForm.name"
auto-complete="off" auto-complete="off"
clearable
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="版权方" :label-width="formLabelWidth"> <el-form-item label="版权方" :label-width="formLabelWidth">
<el-input <el-input
size="small" size="small"
v-model="editForm.menuName" v-model="editForm.boardCopyrightOwnerName"
auto-complete="off" auto-complete="off"
clearable clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="宣传图" :label-width="formLabelWidth"> <el-form-item label="宣传图" :label-width="formLabelWidth">
<img class="imgSize" :src="editForm.cover" alt=""> <img class="imgSize" :src="editForm.cover" alt="" />
</el-form-item> </el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth"> <el-form-item label="简介" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editForm.remarks"></el-input> <el-input type="textarea" v-model="editForm.remarks"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="展板视频" :label-width="formLabelWidth"> <el-form-item label="展板视频" :label-width="formLabelWidth">
<div> <div class="video-box">
<img class="iconImg" src="" alt=""> <div
<span>xxx.mp4</span> class="video-item"
v-for="(item, index) in editForm.videoList"
:key="index"
>
<video :src="item.fileUrl" controls />
<span>{{ item.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="展板音频" :label-width="formLabelWidth"> <el-form-item label="展板音频" :label-width="formLabelWidth">
<div> <div class="audio-box">
<img class="iconImg" src="" alt=""> <div
<span>xxx.mp3</span> class="audio-item"
v-for="(item, index) in editForm.audioList"
:key="index"
>
<audio :src="item.fileUrl" controls />
<span>{{ item.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<!-- <el-button size="mini" type="primary" @click="submitForm('editForm')">确定</el-button> -->
<el-button size="mini" type="primary" @click="close">关闭</el-button> <el-button size="mini" type="primary" @click="close">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -184,8 +238,7 @@ export default { ...@@ -184,8 +238,7 @@ export default {
} }
}; };
return { return {
type: true,
type:true,
value1: "", value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 }, page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [], tableData: [],
...@@ -194,39 +247,39 @@ export default { ...@@ -194,39 +247,39 @@ export default {
formLabelWidth: "100px", formLabelWidth: "100px",
form: { form: {
name: "", name: "",
type:"EXHIBITION_BOARD" type: "EXHIBITION_BOARD",
}, },
editForm: { editForm: {
name:"", name: "",
cover:'', cover: "",
sort:"" sort: "",
}, },
classForm: { classForm: {
status:"", status: "",
remarks:"", remarks: "",
id: "" id: "",
}, },
typeList: [], typeList: [],
rules: { rules: {
sort: [ sort: [
{ required: true, message: "请输入顺序值", trigger: "change" }, { required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" } { pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" },
], ],
menuName: [ menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" }, { required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" }, { max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" } { validator: checkIsNull, trigger: "blur" },
], ],
menuUrl: [ menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" }, { required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" } { validator: checkIsNull, trigger: "blur" },
], ],
parentId: [ parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" } { required: true, message: "请输入父级菜单", trigger: "change" },
] ],
}, },
value: "", value: "",
name: "" name: "",
}; };
}, },
computed: {}, computed: {},
...@@ -242,9 +295,9 @@ export default { ...@@ -242,9 +295,9 @@ export default {
vm.$https({ vm.$https({
method: "get", method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"), url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken authType: this.backToken,
}).then( }).then(
res => { (res) => {
let data = res.data; let data = res.data;
vm.typeList = data.map((e, i) => { vm.typeList = data.map((e, i) => {
return { return {
...@@ -252,11 +305,11 @@ export default { ...@@ -252,11 +305,11 @@ export default {
name: name:
e.menuName.indexOf("-") == -1 e.menuName.indexOf("-") == -1
? e.menuName ? e.menuName
: e.menuName.split("-")[1] : e.menuName.split("-")[1],
}; };
}); });
}, },
error => { (error) => {
console.log(error); console.log(error);
} }
); );
...@@ -268,18 +321,18 @@ export default { ...@@ -268,18 +321,18 @@ export default {
{ {
url: "audit/getPageAllList", url: "audit/getPageAllList",
method: "get", method: "get",
authType: this.backToken authType: this.backToken,
}, },
// vm.$qs.stringify(param) // vm.$qs.stringify(param)
param param
) )
.then(res => { .then((res) => {
let data = res.data.data; let data = res.data.data;
vm.page.pageSize = data.size; vm.page.pageSize = data.size;
vm.page.total = data.total; vm.page.total = data.total;
vm.tableData = data.records; vm.tableData = data.records;
}) })
.catch(function(err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
...@@ -301,23 +354,23 @@ export default { ...@@ -301,23 +354,23 @@ export default {
_index: 1, _index: 1,
_size: _this.page.pageSize, _size: _this.page.pageSize,
name: _this.form.name, name: _this.form.name,
status:_this.form.status, status: _this.form.status,
type:"EXHIBITION_BOARD" type: "EXHIBITION_BOARD",
}; };
this.getTableData(searchObj); this.getTableData(searchObj);
}, },
// 重置 // 重置
Reset(){ Reset() {
// this.$refs["form"].resetFields(); // this.$refs["form"].resetFields();
this.form = {type:"EXHIBITION_BOARD"} this.form = { type: "EXHIBITION_BOARD" };
this.Search() this.Search();
}, },
// // 获取当前查询参数 // // 获取当前查询参数
getSearchQuery() { getSearchQuery() {
let _this = this; let _this = this;
let searchObj = { let searchObj = {
_index: _this.page.currentPage, _index: _this.page.currentPage,
_size: _this.page.pageSize _size: _this.page.pageSize,
}; };
for (let key in _this.form) { for (let key in _this.form) {
if (_this.form[key]) { if (_this.form[key]) {
...@@ -329,28 +382,32 @@ export default { ...@@ -329,28 +382,32 @@ export default {
// 添加 // 添加
addPermis() { addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } }); // this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$('.el-dialog__title').html('新建'); $(".el-dialog__title").html("新建");
this.FormVisible1 = true; this.FormVisible1 = true;
this.type = true this.type = true;
}, },
// 请填写驳回原因视频分类确认保存 // 请填写驳回原因视频分类确认保存
permisEdit() { permisEdit() {
let _this = this; let _this = this;
_this.$refs.classForm.validate(valid => { _this.$refs.classForm.validate((valid) => {
if (valid) { if (valid) {
_this _this
.$https( .$https(
{ url: "videoContentCat/update", method: "put", authType: this.backToken }, {
url: "videoContentCat/update",
method: "put",
authType: this.backToken,
},
_this.$qs.stringify(_this.classForm) _this.$qs.stringify(_this.classForm)
// _this.classForm // _this.classForm
) )
.then( .then(
res => { (res) => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) { if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({ _this.$message({
type: "success", type: "success",
message: '新建成功!' message: "新建成功!",
}); });
//跳回用户列表 //跳回用户列表
_this.onSearch(); _this.onSearch();
...@@ -362,14 +419,14 @@ export default { ...@@ -362,14 +419,14 @@ export default {
} else { } else {
_this.$message({ _this.$message({
type: "error", type: "error",
message: res.data.msg message: res.data.msg,
}); });
} }
}, },
error => { (error) => {
_this.$message({ _this.$message({
type: "error", type: "error",
message: error message: error,
}); });
} }
); );
...@@ -395,19 +452,19 @@ export default { ...@@ -395,19 +452,19 @@ export default {
this.$refs["classForm"].resetFields(); this.$refs["classForm"].resetFields();
}, },
// 通过 // 通过
adopt(row){ adopt(row) {
this.classForm.id= row.id this.classForm.id = row.id;
this.classForm.status = "APPROVED_FINAL" this.classForm.status = "APPROVED_FINAL";
this.classForm.remarks = "" this.classForm.remarks = "";
this.permisSave('classForm') this.permisSave("classForm");
}, },
// 请填写驳回原因弹框 // 请填写驳回原因弹框
reject(row) { reject(row) {
this.type = false this.type = false;
$('.el-dialog__title').html('请填写驳回原因'); $(".el-dialog__title").html("请填写驳回原因");
let _this=this; let _this = this;
_this.classForm.id= row.id _this.classForm.id = row.id;
_this.classForm.status = "REFUSED" _this.classForm.status = "REFUSED";
_this.FormVisible1 = true; _this.FormVisible1 = true;
}, },
// 驳回原因保存 // 驳回原因保存
...@@ -415,21 +472,21 @@ export default { ...@@ -415,21 +472,21 @@ export default {
let _this = this; let _this = this;
_this _this
.$https( .$https(
{ url: "audit/updateAuditAllById", {
headers:{'Content-Type': 'application/json'}, url: "audit/updateAuditAllById",
headers: { "Content-Type": "application/json" },
method: "put", method: "put",
authType: this.backToken, authType: this.backToken,
}, },
// _this.$qs.stringify(_this.classForm) // _this.$qs.stringify(_this.classForm)
_this.classForm _this.classForm
) )
.then( .then(
res => { (res) => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) { if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({ _this.$message({
type: "success", type: "success",
message: '操作成功!' message: "操作成功!",
}); });
//跳回用户列表 //跳回用户列表
_this.onSearch(); _this.onSearch();
...@@ -441,14 +498,14 @@ export default { ...@@ -441,14 +498,14 @@ export default {
} else { } else {
_this.$message({ _this.$message({
type: "error", type: "error",
message: res.data.msg message: res.data.msg,
}); });
} }
}, },
error => { (error) => {
_this.$message({ _this.$message({
type: "error", type: "error",
message: error message: error,
}); });
} }
); );
...@@ -459,31 +516,29 @@ export default { ...@@ -459,31 +516,29 @@ export default {
// }); // });
}, },
// 获取视频分类详情 // 获取视频分类详情
getAssetTypeInfo(id){ getAssetTypeInfo(id) {
let vm = this; let vm = this;
vm.$https( vm.$https(
{ {
url: "videoContentCat/get/" + id, url: "videoContentCat/get/" + id,
method: "get", method: "get",
authType: this.backToken authType: this.backToken,
}, }
// param // param
) )
.then(res => { .then((res) => {
let data = res.data.data; let data = res.data.data;
this.classForm = data this.classForm = data;
}) })
.catch(function(err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
openDetails(row) { openDetails(row) {
let _this = this; let _this = this;
_this.FormVisible = true; _this.FormVisible = true;
_this.getInfo(row.refItemId) _this.getInfo(row.refItemId);
$('.el-dialog__title').html( row.name +'展板详情'); $(".el-dialog__title").html(row.name + "展板详情");
}, },
// 获取版权方详情 // 获取版权方详情
getInfo(id) { getInfo(id) {
...@@ -492,16 +547,16 @@ export default { ...@@ -492,16 +547,16 @@ export default {
{ {
url: "exhibitionBoard/get/" + id, url: "exhibitionBoard/get/" + id,
method: "get", method: "get",
authType: this.backToken authType: this.backToken,
} }
// param // param
) )
.then(res => { .then((res) => {
let data = res.data.data; let resData = res.data.data;
// this.editForm = data this.editForm = resData;
// this.ruleForm = data; // this.ruleForm = data;
// this.ruleForm = { // this.ruleForm = {
// assetCopyrightOwnerId :data.assetCopyrightOwnerId, // videoContentCopyrightOwnerId :data.videoContentCopyrightOwnerId,
// assetId:data.assetId, // assetId:data.assetId,
// assetTypeId:data.assetTypeId, // assetTypeId:data.assetTypeId,
// boardCopyrightOwnerId:data.boardCopyrightOwnerId, // boardCopyrightOwnerId:data.boardCopyrightOwnerId,
...@@ -517,9 +572,8 @@ export default { ...@@ -517,9 +572,8 @@ export default {
// materialUrlList:data.materialUrlList // materialUrlList:data.materialUrlList
// } // }
}) })
.catch(function(err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
...@@ -529,20 +583,27 @@ export default { ...@@ -529,20 +583,27 @@ export default {
this.$confirm("此操作将永久删除, 是否继续?", "提示", { this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
_this.$https({ _this
method: 'delete', .$https({
url: 'videoContentCat/delete/'+ row.id, method: "delete",
authType: this.backToken url: "videoContentCat/delete/" + row.id,
}).then((res) => { authType: this.backToken,
this.$message({type: 'success', message: '删除成功!'}); })
.then(
(res) => {
this.$message({ type: "success", message: "删除成功!" });
_this.Search(); _this.Search();
}, (error) => { },
this.$message({type: 'fail', message: "删除失败!" + error.response.data}); (error) => {
this.$message({
type: "fail",
message: "删除失败!" + error.response.data,
});
} }
) );
}) })
.catch(() => {}); .catch(() => {});
}, },
...@@ -608,7 +669,7 @@ export default { ...@@ -608,7 +669,7 @@ export default {
let arr = []; let arr = [];
let str = ""; let str = "";
if (_this.selection) { if (_this.selection) {
_this.selection.forEach(function(e) { _this.selection.forEach(function (e) {
arr.push(e.id); arr.push(e.id);
}); });
str = arr.join(","); str = arr.join(",");
...@@ -625,45 +686,45 @@ export default { ...@@ -625,45 +686,45 @@ export default {
this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", { this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}).then(() => { }).then(() => {
_this _this
.$https({ .$https({
url: "menu/batchDel?menuIds=" + str, url: "menu/batchDel?menuIds=" + str,
method: "DELETE", method: "DELETE",
authType: this.backToken authType: this.backToken,
}) })
.then( .then(
res => { (res) => {
if (res.data.status == 201 || res.data.status == 200) { if (res.data.status == 201 || res.data.status == 200) {
this.$message({ this.$message({
type: "success", type: "success",
message: "删除成功!" message: "删除成功!",
}); });
} }
//重新查询数据 //重新查询数据
_this.onSearch(); _this.onSearch();
}, },
error => {} (error) => {}
); );
}); });
} else { } else {
this.$message({ this.$message({
type: "info", type: "info",
message: "请至少选择一个选项!" message: "请至少选择一个选项!",
}); });
} }
} },
} },
}; };
</script> </script>
<style lang="less"> <style lang="less">
.imgSize{ .imgSize {
width: 160px; width: 160px;
height: 100px; height: 100px;
} }
.iconImg{ .iconImg {
height: 32px; height: 32px;
width: 32px; width: 32px;
margin-right: 8px; margin-right: 8px;
...@@ -671,6 +732,14 @@ export default { ...@@ -671,6 +732,14 @@ export default {
// @import "../../../../style/common"; // @import "../../../../style/common";
// @import "../../style/list"; // @import "../../style/list";
@import "../../../style/dialog.less"; @import "../../../style/dialog.less";
@import '../../../style/table.less'; @import "../../../style/table.less";
@import '../../../style/pagination.less'; @import "../../../style/pagination.less";
.video-box {
width: 100%;
.video-item { width: 100%;}
video {width: 100%;height: 200px;}
}
audio:focus{
outline: none;
}
</style> </style>
...@@ -10,59 +10,75 @@ ...@@ -10,59 +10,75 @@
label-position="top" label-position="top"
> >
<el-form-item label="学习内容名称" class="w50"> <el-form-item label="学习内容名称" class="w50">
xxxxxxx <span>{{ formInline.name }}</span>
<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="学习内容宣传图" class="w50"> <el-form-item label="学习内容宣传图" class="w50">
<img class="imgSize" src alt /> <img class="imgSize" :src="formInline.cover" alt />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="展板名称:建党伟业" name="1"> <el-collapse-item
v-for="(item, index) in formInline.exhibitionBoardList"
:key="index"
:title="item.name"
>
<el-form <el-form
class="demo-form-inline" class="demo-form-inline"
:inline="true" :inline="true"
:model="formInline" :model="formInline"
label-position="top" label-position="top"
> >
<el-form-item label="展板宣传图">
<img class="imgSize" :src="item.cover" alt />
</el-form-item>
<el-form-item label="展板版权方"> <el-form-item label="展板版权方">
xxxxxxx <span>{{ item.boardCopyrightOwnerName }}</span>
</el-form-item> </el-form-item>
<el-form-item label="展板宣传图" class="w100"> <el-form-item label="展板名称" class="w50">
<img class="imgSize" src alt /> <span>{{ item.name }}</span>
</el-form-item> </el-form-item>
<el-form-item label="展板简介"> <el-form-item label="展板简介">
各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给 <span>{{ item.remarks }}</span>
<!-- <el-input type="textarea" v-model="formInline.remarks"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="展板视频" class="w100"> <el-form-item label="展板视频" class="w100">
<div> <div class="video-box">
<img class="iconImg" src alt /> <div
<span>xxx.mp4</span> class="video-item"
v-for="(vi, index) in item.videoList"
:key="index"
>
<video :src="vi.fileUrl" controls />
<span>{{ vi.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="展板音频"> <el-form-item label="展板音频">
<div> <div class="audio-box">
<img class="iconImg" src alt /> <div
<span>xxx.mp3</span> class="audio-item"
v-for="(au, index) in item.audioList"
:key="index"
>
<audio :src="au.fileUrl" controls />
<span>{{ au.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="改革之路" name="2">
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="伟大复兴" name="3"></el-collapse-item>
<el-collapse-item title="辉煌成就" name="4"></el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
</div> </div>
<div class="info-footer"> <div class="info-footer">
<div class="btn-group"> <div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button> <el-button
size="mini"
type="primary"
class="btn_form_search"
@click="close"
>关闭</el-button
>
</div> </div>
</div> </div>
</div> </div>
...@@ -72,15 +88,12 @@ ...@@ -72,15 +88,12 @@
export default { export default {
data() { data() {
return { return {
activeNames: ["1"], activeNames: [1],
formInline: { formInline: {},
user: "",
region: ""
}
}; };
}, },
mounted(){ mounted() {
this.init() this.init();
}, },
methods: { methods: {
init() { init() {
...@@ -93,18 +106,16 @@ export default { ...@@ -93,18 +106,16 @@ export default {
{ {
url: "learningContent/get/" + id, url: "learningContent/get/" + id,
method: "get", method: "get",
authType: this.backToken authType: this.backToken,
} }
// param // param
) )
.then(res => { .then((res) => {
let data = res.data.data; let data = res.data.data;
this.ruleForm = data; vm.formInline = data;
console.log(this.ruleForm) console.log(this.ruleForm);
}) })
.catch(function(err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
...@@ -113,11 +124,30 @@ export default { ...@@ -113,11 +124,30 @@ export default {
}, },
handleChange(val) { handleChange(val) {
console.log(val); console.log(val);
} },
} },
}; };
</script> </script>
<style lang="less"> <style lang="less">
.video-box {
width: 100%;
.video-item {
width: 100%;
}
video {
width: 100%;
height: 200px;
}
}
audio:focus {
outline: none;
}
.audio-item{
display: flex;
align-items: center;
span{
margin-left: 30px;
}
}
</style> </style>
\ No newline at end of file
...@@ -87,7 +87,6 @@ ...@@ -87,7 +87,6 @@
</div> </div>
<div class="partyt-pagination"> <div class="partyt-pagination">
<el-pagination <el-pagination
small
background background
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="page.currentPage" :current-page="page.currentPage"
......
...@@ -417,10 +417,10 @@ export default { ...@@ -417,10 +417,10 @@ export default {
// } // }
// _this.editform= Object.assign({}, row); // _this.editform= Object.assign({}, row);
_this.FormVisible1 = true; _this.FormVisible1 = true;
this.getAssetTypeInfo(row.id) this.getVideoContentCatInfo(row.id)
}, },
// 获取展板分类详情 // 获取展板分类详情
getAssetTypeInfo(id){ getVideoContentCatInfo(id){
let vm = this; let vm = this;
vm.$https( vm.$https(
{ {
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<el-select <el-select
placeholder="请选择视频版权方" placeholder="请选择视频版权方"
@focus="getAssetCopyrightData" @focus="getAssetCopyrightData"
v-model="ruleForm.assetCopyrightOwnerId" v-model="ruleForm.videoContentCopyrightOwnerId"
> >
<el-option <el-option
v-for="item in copyrightOwner" v-for="item in copyrightOwner"
...@@ -88,9 +88,9 @@ ...@@ -88,9 +88,9 @@
<el-form-item label="请选择预设视频分类"> <el-form-item label="请选择预设视频分类">
<el-select <el-select
placeholder="请选择预设视频分类" placeholder="请选择预设视频分类"
@focus="getAssetTypeData" @focus="getVideoContentCatData"
v-model="ruleForm.assetTypeId" v-model="ruleForm.videoContentCatId"
@change="getAssetType" @change="getVideoContentCat"
> >
<el-option <el-option
v-for="item in videoContentCat" v-for="item in videoContentCat"
...@@ -104,10 +104,10 @@ ...@@ -104,10 +104,10 @@
<el-select <el-select
placeholder="请选择视频" placeholder="请选择视频"
@focus="getVideoData" @focus="getVideoData"
v-model="ruleForm.assetId" v-model="ruleForm.videoContentId"
> >
<el-option <el-option
v-for="item in assetId" v-for="item in videoContentId"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
:key="item.id" :key="item.id"
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
copyrightOwner: [], copyrightOwner: [],
boardCopyrightOwnerId:[], boardCopyrightOwnerId:[],
exhibitionBoardCatId:[], exhibitionBoardCatId:[],
assetId:[], videoContentId:[],
type: this.$route.query.type, type: this.$route.query.type,
dialogVisible: false, dialogVisible: false,
formLabelWidth: "100px", formLabelWidth: "100px",
...@@ -174,8 +174,8 @@ export default { ...@@ -174,8 +174,8 @@ export default {
ruleForm: { ruleForm: {
name: "", name: "",
boardCopyrightOwnerId:"", boardCopyrightOwnerId:"",
assetCopyrightOwnerId: "", videoContentCopyrightOwnerId: "",
assetTypeId: "", videoContentCatId: "",
videoUrlList: [] videoUrlList: []
}, },
videoContentCat: [ videoContentCat: [
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
}, },
// 视频版权方名称id // 视频版权方名称id
videoCopyright(idlist) { videoCopyright(idlist) {
this.ruleForm.assetCopyrightOwnerId = idlist; this.ruleForm.videoContentCopyrightOwnerId = idlist;
}, },
// 缩略图地址 // 缩略图地址
imgUrl(url) { imgUrl(url) {
...@@ -249,14 +249,14 @@ export default { ...@@ -249,14 +249,14 @@ export default {
videoList(list) { videoList(list) {
this.ruleForm.videoUrlList = list; this.ruleForm.videoUrlList = list;
}, },
getAssetType(data) { getVideoContentCat(data) {
console.log(data); console.log(data);
console.log(this.ruleForm.assetTypeId); console.log(this.ruleForm.videoContentCatId);
}, },
init() { init() {
if (this.$route.query.type === "Update") { if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id); this.getInfo(this.$route.query.id);
this.getAssetTypeData(); this.getVideoContentCatData();
this.getAssetCopyrightData(); this.getAssetCopyrightData();
this.getExhibitionBoardCatId(); this.getExhibitionBoardCatId();
this.getBoardCopyrightOwnerId(); this.getBoardCopyrightOwnerId();
...@@ -279,9 +279,9 @@ export default { ...@@ -279,9 +279,9 @@ export default {
// this.ruleForm = data; // this.ruleForm = data;
console.log(this.ruleForm) console.log(this.ruleForm)
this.ruleForm = { this.ruleForm = {
assetCopyrightOwnerId :data.assetCopyrightOwnerId, videoContentCopyrightOwnerId :data.videoContentCopyrightOwnerId,
assetId:data.assetId, videoContentId:data.videoContentId,
assetTypeId:data.assetTypeId, videoContentCatId:data.videoContentCatId,
boardCopyrightOwnerId:data.boardCopyrightOwnerId, boardCopyrightOwnerId:data.boardCopyrightOwnerId,
cover:data.cover, cover:data.cover,
exhibitionBoardCatId:data.exhibitionBoardCatId, exhibitionBoardCatId:data.exhibitionBoardCatId,
...@@ -454,7 +454,7 @@ export default { ...@@ -454,7 +454,7 @@ export default {
}); });
}, },
// 获取视频分类列表 // 获取视频分类列表
getAssetTypeData() { getVideoContentCatData() {
let vm = this; let vm = this;
vm.$https({ vm.$https({
url: "videoContentCat/getList", url: "videoContentCat/getList",
...@@ -479,7 +479,7 @@ export default { ...@@ -479,7 +479,7 @@ export default {
}) })
.then(res => { .then(res => {
let data = res.data.data; let data = res.data.data;
this.assetId = data; this.videoContentId = data;
}) })
.catch(function(err) { .catch(function(err) {
console.log(err); console.log(err);
......
<template> <template>
<div class="info"> <div class="info info-board">
<div class="info-header">学习内容详情</div> <div class="info-header">展板内容详情</div>
<div class="page-tip">
<span class="tip-title">页面说明:</span>
<span
>可查看某块展板包含的所有文字及文件信息,视频及文档材料可下载到本地观看。</span
>
</div>
<div class="info-container"> <div class="info-container">
<div class="info-wrapper"> <div class="info-wrapper">
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse v-model="activeNames">
<el-collapse-item title="审核意见" name="1"> <el-collapse-item title="审核意见" name="1">
<el-form <el-form
class="demo-form-inline" class="demo-form-inline"
:inline="true" :inline="true"
:model="formInline" :model="reviewData"
label-position="top" label-position="top"
> >
<el-form-item label="审核层级" class="w100"> <el-form-item label="审核层级" class="w100">
<span class="w50 l-float"> <span class="w50 l-float">
<strong>初审</strong> 2021/02/02 <strong>初审</strong>{{ reviewData.firstTime }}
</span> </span>
<span class="w50"> <span class="w50">
<strong>复审</strong> 2021/02/23 <strong>复审</strong>{{ reviewData.secondTime }}
</span> </span>
</el-form-item> </el-form-item>
<el-form-item label="审核结果" class="w50">驳回</el-form-item> <el-form-item label="审核结果" class="w50">{{
keyMap[reviewData.status]
}}</el-form-item>
<el-form-item <el-form-item
label="驳回原因" label="驳回原因"
>各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给 v-if="reviewData.status === 'REFUSED'"
</el-form-item> >{{
reviewData.firstRemarks || reviewData.secondRemarks
}}</el-form-item
>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="展板基本信息" name="2"> <el-collapse-item title="展板基本信息" name="2">
<el-form <el-form
class="demo-form-inline" class="demo-form-inline"
:inline="true" :inline="true"
:model="formInline" :model="contentData"
label-position="top" label-position="top"
> >
<el-form-item label="版权方" class="w50">xxxxxxx</el-form-item> <el-form-item label="版权方" class="w50">{{
<el-form-item label="创建时间" >2021/02/23</el-form-item> contentData.boardCopyrightOwnerName
<el-form-item label="展板分类" class="w50">反腐类</el-form-item> }}</el-form-item>
<el-form-item label="上架情况" >已上架</el-form-item> <el-form-item label="创建时间">{{
<el-form-item label="审核情况" class="w50">已审核</el-form-item> contentData.createTime
}}</el-form-item>
<el-form-item label="展板分类" class="w50">{{
contentData.createTime
}}</el-form-item>
<el-form-item label="上架情况">{{
contentData.published ? "已上架" : "未上架"
}}</el-form-item>
<el-form-item label="审核情况" class="w50">{{
keyMap[contentData.auditStatus]
}}</el-form-item>
<el-form-item label="展板图片" class="w50"> <el-form-item label="展板图片" class="w50">
<img class="imgSize" src alt /> <img class="imgSize" :src="contentData.cover" />
</el-form-item>
<el-form-item
label="展板简介"
>各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给
</el-form-item> </el-form-item>
<el-form-item label="展板简介">{{
contentData.remarks
}}</el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="展板影音信息" name="3"> <el-collapse-item title="展板影音信息" name="3">
<el-form <el-form
class="demo-form-inline" class="demo-form-inline"
:inline="true" :inline="true"
:model="formInline" :model="contentData"
label-position="top" label-position="top"
> >
<el-form-item label="展板视频" class="w100"> <el-form-item label="展板视频" class="w100">
<div> <div v-if="contentData.videoList.length">
<img class="iconImg" src alt /> <span
<span>xxx.mp4</span> class="file-box"
v-for="(s, i) in contentData.videoList"
<img class="iconImg" src alt /> :key="i"
<span>xxx.mp4</span> >
<video
controls
width="100%"
height="100%"
poster="images/applets/video.png"
>
<source :src="s.fileUrl" />
</video>
<span>{{ s.fileName }}</span>
</span>
</div> </div>
<div v-else>暂无数据</div>
</el-form-item> </el-form-item>
<el-form-item label="展板音频"> <el-form-item label="展板音频">
<div> <div v-if="contentData.audioList.length">
<img class="iconImg" src alt /> <span
<span>xxx.mp3</span> class="file-box"
v-for="(s, i) in contentData.audioList"
:key="i"
>
<audio
controls
width="100%"
height="100%"
poster="images/applets/audio.png"
>
<source :src="s.fileUrl" />
</audio>
<span>{{ s.fileName }}</span>
</span>
</div> </div>
<div v-else>暂无数据</div>
</el-form-item> </el-form-item>
<el-form-item label="展板图片" class="w100"> <el-form-item label="展板图片" class="w100">
<img class="imgSize" src alt /> <div v-if="contentData.imagesList.length">
<img class="imgSize" src alt /> <span
<img class="imgSize" src alt /> class="file-box"
<img class="imgSize" src alt /> v-for="(s, i) in contentData.imagesList"
:key="i"
>
<img class="imgSize" :src="s.fileUrl" alt />
<span>{{ s.fileName }}</span>
</span>
</div>
<div v-else>暂无数据</div>
</el-form-item> </el-form-item>
<el-form-item label="展板文档"> <el-form-item label="展板文档(可点击查看或下载查看)" class="w100">
<div> <div v-if="contentData.dirList.length">
<img class="iconImg" src alt /> <span
<span>xxx.pdf</span> class="dir-box"
v-for="(s, i) in contentData.dirList"
:key="i"
@click="reviewFile(s)"
>
<img
v-if="s.fileExtName === 'pdf'"
src="@/assets/pdf-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'pptx'"
src="@/assets/ppt-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'docx'"
src="@/assets/doc-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'mp4'"
src="@/assets/video-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'mp3'"
src="@/assets/audio-icon.png"
alt=""
/>
<img
v-if="s.fileExtName === 'xls'"
src="@/assets/excel-icon.png"
alt=""
/>
<span><a target="_blank" :href="s.fileUrl">{{ s.fileName }}</a></span>
</span>
</div> </div>
<div v-else>暂无数据</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
...@@ -89,7 +178,13 @@ ...@@ -89,7 +178,13 @@
<div class="info-footer"> <div class="info-footer">
<div class="btn-group"> <div class="btn-group">
<!-- 确定、取消 --> <!-- 确定、取消 -->
<el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button> <el-button
size="mini"
type="primary"
class="btn_form_search"
@click="close"
>关闭</el-button
>
</div> </div>
</div> </div>
</div> </div>
...@@ -98,62 +193,152 @@ ...@@ -98,62 +193,152 @@
<script> <script>
export default { export default {
data() { data() {
const keyMap = {
TBC: "待初审",
REFUSED: "已驳回",
TBCA: "待复审",
APPROVED_FINAL: "通过",
};
return { return {
tableData: [ id: "",
{ activeNames: ["1", "2", "3"],
id: "1", keyMap: keyMap,
name: "1" contentData: {},
reviewData: {},
};
}, },
{ mounted() {
id: "2", this.id = this.$route.query.id;
name: "2" this.getReviewById();
this.getContentById();
}, },
{ methods: {
id: "3", getContentById() {
name: "3" let vm = this;
vm.$https({
url: "exhibitionBoard/get/" + this.id,
method: "get",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
vm.contentData = res.data.data;
vm.contentData.imagesList = [];
vm.contentData.dirList = [];
vm.contentData.datumList.forEach((item) => {
if (item.fileType === "IMAGE") {
vm.contentData.imagesList.push(item);
} else {
vm.contentData.dirList.push(item);
} }
], });
activeNames: ["1","2","3"], } else {
formInline: { this.$message.error(res.data.message);
user: "",
region: ""
} }
})
.catch(function (err) {
console.log(err);
});
},
getReviewById() {
let vm = this;
const param = {
id: this.id,
type: "EXHIBITION_BOARD",
}; };
vm.$https(
{
url: "audit/getById",
method: "get",
authType: this.backToken,
},
param
)
.then((res) => {
if (res.data.resultCode === "200") {
vm.reviewData = res.data.data || {};
} else {
this.$message.error(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
},
reviewFile() {
console.log("点击预览。。。");
// const _this = this;
// this.$confirm("确定要下载该文件?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// center: true,
// })
// .then(() => {
// this.updateVersion(row);
// })
// .catch(() => {
// this.$message("已取消");
// });
}, },
methods: {
close() { close() {
history.go(-1); this.$router.go(-1);
}, },
handleChange(val) {
console.log(val);
}, },
moveUpward(row, index) { };
if (index > 0) { </script>
let upData = this.tableData[index - 1]; <style lang="less" scoped>
this.tableData.splice(index - 1, 1); .info-board {
this.tableData.splice(index, 0, upData); .file-box {
} else { display: inline-block;
this.$message({ width: 180px;
message: "已经是第一条,上移失败", height: 180px;
type: "warning" margin: 0 10px;
});
} }
}, /deep/.el-collapse-item__wrap {
moveDown(row, index) { padding: 16px;
if (index + 1 == this.tableData.length) {
this.$message({
message: "已经是最后一条,下移失败",
type: "warning"
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
} }
/deep/.el-collapse-item__header {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
&::before {
content: "";
position: absolute;
top: 14px;
left: 0px;
width: 4px;
height: 18px;
background: #000;
} }
} }
}; .page-tip {
</script> width: 640px;
background: #f7f5f2;
<style lang="less"> border-radius: 8px;
padding: 16px 20px;
margin: 20px auto;
font-size: 14px;
color: #333333;
.tip-title {
font-weight: 700;
margin-right: 5px;
}
}
.dir-box {
display: block;
width: 100%;
height: 96px;
img {
width: 96px;
height: 96px;
vertical-align: middle;
}
span {
margin-left: 10px;
line-height: 96px;
}
}
}
</style> </style>
\ No newline at end of file
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
> >
<el-table-column type="index" width="120" label="序号"></el-table-column> <el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column> <el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板分类" prop="assetTypeNames"></el-table-column> <el-table-column show-overflow-tooltip label="展板分类" prop="exhibitionBoardCatNames"></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column> <el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column label="版权方有效期" prop="expireDateEnd"></el-table-column> <el-table-column label="版权方有效期" prop="expireDateEnd"></el-table-column>
<el-table-column show-overflow-tooltip label="备注" prop="remarks"></el-table-column> <el-table-column show-overflow-tooltip label="备注" prop="remarks"></el-table-column>
......
...@@ -445,10 +445,10 @@ export default { ...@@ -445,10 +445,10 @@ export default {
// } // }
// _this.editform= Object.assign({}, row); // _this.editform= Object.assign({}, row);
_this.FormVisible1 = true; _this.FormVisible1 = true;
this.getAssetTypeInfo(row.id) this.getVideoContentCatInfo(row.id)
}, },
// 获取视频分类详情 // 获取视频分类详情
getAssetTypeInfo(id){ getVideoContentCatInfo(id){
let vm = this; let vm = this;
vm.$https( vm.$https(
{ {
......
...@@ -88,12 +88,11 @@ ...@@ -88,12 +88,11 @@
style="width: 100%;height:300px;overflow:auto;" style="width: 100%;height:300px;overflow:auto;"
height="100%" height="100%"
ref="multipleTable" ref="multipleTable"
:data="tableData" :data="tableData">
>
<el-table-column type="selection" width="55" ></el-table-column> <el-table-column type="selection" width="55" ></el-table-column>
<el-table-column type="index" width="120" label="序号"></el-table-column> <el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column> <el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板类别" prop="assetCopyrightOwnerName"></el-table-column> <el-table-column show-overflow-tooltip label="展板类别" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column> <el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
......
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<el-select <el-select
placeholder="请选择视频版权方" placeholder="请选择视频版权方"
@focus="getAssetCopyrightData" @focus="getAssetCopyrightData"
v-model="ruleForm.assetCopyrightOwnerId" v-model="ruleForm.videoContentCopyrightOwnerId"
> >
<el-option <el-option
v-for="item in copyrightOwner" v-for="item in copyrightOwner"
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
value1: [], value1: [],
ruleForm: { ruleForm: {
name: "", name: "",
assetCopyrightOwnerId:"", videoContentCopyrightOwnerId:"",
assetTypeId: "", assetTypeId: "",
thumbnail:"", thumbnail:"",
videoUrlList:[] videoUrlList:[]
...@@ -227,7 +227,7 @@ export default { ...@@ -227,7 +227,7 @@ export default {
methods: { methods: {
// 视频版权方名称id // 视频版权方名称id
videoCopyright(idlist){ videoCopyright(idlist){
this.ruleForm.assetCopyrightOwnerId = idlist this.ruleForm.videoContentCopyrightOwnerId = idlist
}, },
// 缩略图地址 // 缩略图地址
imgUrl(url){ imgUrl(url){
...@@ -265,7 +265,7 @@ export default { ...@@ -265,7 +265,7 @@ export default {
// this.ruleForm = data; // this.ruleForm = data;
this.ruleForm.id = data.id this.ruleForm.id = data.id
this.ruleForm.name = data.name this.ruleForm.name = data.name
this.ruleForm.assetCopyrightOwnerId = data.assetCopyrightOwnerId this.ruleForm.videoContentCopyrightOwnerId = data.videoContentCopyrightOwnerId
this.ruleForm.assetTypeId = data.assetTypeId this.ruleForm.assetTypeId = data.assetTypeId
this.ruleForm.thumbnail = data.thumbnail this.ruleForm.thumbnail = data.thumbnail
this.ruleForm.videoUrlList = data.videoUrlList this.ruleForm.videoUrlList = data.videoUrlList
...@@ -324,7 +324,7 @@ export default { ...@@ -324,7 +324,7 @@ export default {
// 新增 // 新增
submitForm(formName) { submitForm(formName) {
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
// this.ruleForm.assetCopyrightOwnerId = ["1373225989501456385"] // this.ruleForm.videoContentCopyrightOwnerId = ["1373225989501456385"]
// this.ruleForm.assetTypeIdList = [] // this.ruleForm.assetTypeIdList = []
// this.ruleForm.videoUrlList = [ // this.ruleForm.videoUrlList = [
// "http://111.203.232.175:8085/group1/M00/00/39/wKhuVWBgIvaANgtZAAAAAAAAAAA947.mp4" // "http://111.203.232.175:8085/group1/M00/00/39/wKhuVWBgIvaANgtZAAAAAAAAAAA947.mp4"
......
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
> >
<el-table-column type="index" width="120" label="序号"></el-table-column> <el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column show-overflow-tooltip label="视频名称" prop="name"></el-table-column> <el-table-column show-overflow-tooltip label="视频名称" prop="name"></el-table-column>
<<<<<<< HEAD
<el-table-column show-overflow-tooltip label="版权方" prop="assetCopyrightOwnerName"></el-table-column> <el-table-column show-overflow-tooltip label="版权方" prop="assetCopyrightOwnerName"></el-table-column>
<el-table-column label="视频分类" prop="assetTypeName"></el-table-column> <el-table-column label="视频分类" prop="assetTypeName"></el-table-column>
<el-table-column label="审核状态" prop="auditStatus"> <el-table-column label="审核状态" prop="auditStatus">
...@@ -49,6 +50,18 @@ ...@@ -49,6 +50,18 @@
<span v-else-if="scope.row.auditStatus === 'APPROVED_FINAL'">通过</span> <span v-else-if="scope.row.auditStatus === 'APPROVED_FINAL'">通过</span>
</template> </template>
</el-table-column> </el-table-column>
=======
<el-table-column show-overflow-tooltip label="版权方" prop="videoContentCopyrightOwnerName"></el-table-column>
<el-table-column label="视频分类" prop="videoContentCatName"></el-table-column>
<el-table-column label="审核状态" prop="auditStatus">
<template slot-scope="scope">
<span v-if="scope.row.auditStatus === 'TBC'">待初审</span>
<span v-else-if="scope.row.auditStatus === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.auditStatus === 'TBCA'">待复审</span>
<span v-else-if="scope.row.auditStatus === 'APPROVED_FINAL'">通过</span>
</template>
</el-table-column>
>>>>>>> master
<el-table-column label="操作" header-align="center" align="center"> <el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220"> <template slot-scope="scope" width="220">
<div class="table-btn-group"> <div class="table-btn-group">
...@@ -159,7 +172,7 @@ ...@@ -159,7 +172,7 @@
<!--查看详情--> <!--查看详情-->
<el-dialog <el-dialog
custom-class="party-dialog" custom-class="party-dialog"
title="查看详情" title="审核详情"
width="468px" width="468px"
:visible.sync="FormVisible" :visible.sync="FormVisible"
:before-close="close" :before-close="close"
...@@ -171,37 +184,25 @@ ...@@ -171,37 +184,25 @@
class="party-form" class="party-form"
ref="editform" ref="editform"
label-width="80px" label-width="80px"
label-position="right" label-position="top"
:rules="rules" :rules="rules"
> >
<el-form-item label="审核层级:" :label-width="formLabelWidth"> <el-form-item label="初审时间:" :label-width="formLabelWidth">
<el-input size="small" v-model="editform.sort" auto-complete="off" clearable></el-input> <span class="input-item">{{editform.firstTime}}</span>
</el-form-item> </el-form-item>
<el-form-item label="审核时间:" :label-width="formLabelWidth"> <el-form-item label="复审时间:" :label-width="formLabelWidth">
<el-input <span class="input-item">{{editform.secondTime}}</span>
size="small"
v-model="editform.menuName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="审核结果:" :label-width="formLabelWidth"> <el-form-item label="审核结果:" :label-width="formLabelWidth">
<el-input <span class="input-item">{{keyMap[editform.status]}}</span>
size="small"
v-model="editform.menuUrl"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="驳回原因:" :label-width="formLabelWidth"> <el-form-item label="驳回原因:" :label-width="formLabelWidth" v-if="editform.status==='REFUSED'">
<el-input type="textarea" v-model="editform.desc"></el-input> <span class="input-item">{{editform.firstRemarks || editform.secondRemarks}}</span>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button> <el-button size="mini" type="primary" @click="close">确定</el-button>
<el-button size="mini" @click="close">取 消</el-button> <el-button size="mini" @click="close">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -219,7 +220,9 @@ export default { ...@@ -219,7 +220,9 @@ export default {
} }
} }
}; };
const keyMap ={'TBC':'待初审','REFUSED':'已驳回','TBCA':'待复审','APPROVED_FINAL':'通过'}
return { return {
keyMap:keyMap,
value1: "", value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 }, page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [], tableData: [],
...@@ -229,13 +232,7 @@ export default { ...@@ -229,13 +232,7 @@ export default {
form: { form: {
name: "" name: ""
}, },
editform: { editform: {},
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
},
permisform: { permisform: {
menuName: "", menuName: "",
menuUrl: "", menuUrl: "",
...@@ -445,17 +442,21 @@ export default { ...@@ -445,17 +442,21 @@ export default {
// 获取视频分类详情 // 获取视频分类详情
getAssetInfo(id) { getAssetInfo(id) {
let vm = this; let vm = this;
const param ={
id:id,
type:'VIDEO_CONTENT'
}
vm.$https( vm.$https(
{ {
url: "videoContent/get/" + id, url: "audit/getById",
method: "get", method: "get",
authType: this.backToken authType: this.backToken
} },
// param param
) )
.then(res => { .then(res => {
let data = res.data.data; let data = res.data.data;
this.editform = data; this.editform = data || {};
}) })
.catch(function(err) { .catch(function(err) {
console.log(err); console.log(err);
...@@ -495,57 +496,6 @@ export default { ...@@ -495,57 +496,6 @@ export default {
}) })
.catch(() => {}); .catch(() => {});
}, },
// 保存编辑信息
submitForm() {
let _this = this;
_this.$refs.editform.validate(valid => {
if (valid) {
let searchObj = {};
for (let key in _this.editform) {
if (this.editform[key]) {
searchObj[key] = _this.editform[key];
}
}
let str = _this.editform.menuName;
let index = str.lastIndexOf("-");
str = str.substring(index + 1, str.length);
searchObj.menuName = str;
_this
.$https(
{
url: "menu/edit",
method: "put",
authType: this.backToken
},
_this.$qs.stringify(searchObj)
)
.then(
res => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: "success",
message: res.data.message
});
_this.onSearch();
_this.FormVisible = false;
_this.$refs["editform"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
}
});
},
// 批量操作 // 批量操作
handleSelectionChange(selection) { handleSelectionChange(selection) {
...@@ -614,4 +564,11 @@ export default { ...@@ -614,4 +564,11 @@ export default {
@import "../../../../style/table.less"; @import "../../../../style/table.less";
@import "../../../../style/pagination.less"; @import "../../../../style/pagination.less";
@import "../../../../style/dialog.less"; @import "../../../../style/dialog.less";
.listPage {
.input-item {
font-size: 16px;
color:#333;
}
}
</style> </style>
<template> <template>
<div class="index-container"> <div class="index-container">
<div class="panel-box" v-for="(item,index) in menuList" :key="index"> <div class="panel-box" v-for="(item, index) in menuList" :key="index">
<div class="panel-box-title"> <div class="panel-box-title">
<span class="panel-box-title-wrapper"> <span class="panel-box-title-wrapper">
<i :class="item.icon" class="panel-box-title-icon"></i> <i :class="item.icon" class="panel-box-title-icon"></i>
<span>{{item.name}}</span> <span>{{ item.name }}</span>
</span> </span>
<div class="panel-box-title-img"> <div class="panel-box-title-img">
<img :src="requireImg(item.avatar)" alt=""> <img :src="requireImg(item.avatar)" alt="" />
</div> </div>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<div class="panel-sub-box" v-for="(subItem,subIndex) in item.children" :key="subIndex"> <div
class="panel-sub-box"
v-for="(subItem, subIndex) in item.children"
:key="subIndex"
>
<div class="panel-box-sub-title"> <div class="panel-box-sub-title">
<span class="line"></span> <span class="line"></span>
<span class="panel-box-sub-title_name">{{subItem.name}}</span> <span class="panel-box-sub-title_name">{{ subItem.name }}</span>
</div> </div>
<ul > <ul>
<li v-for="(menu,mIndex) in subItem.children" :key="mIndex" @click="goPage(menu.url)" > <li
v-for="(menu, mIndex) in subItem.children"
:key="mIndex"
@click="goPage(menu.url)"
>
<div :class="menu.color" class="icon-div"> <div :class="menu.color" class="icon-div">
<i :class="menu.icon" class="icon-memu"></i> <i :class="menu.icon" class="icon-memu"></i>
</div> </div>
<span class="menu-label">{{menu.name}}</span> <span class="menu-label">{{ menu.name }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import { menuList } from '@/config/menu' // import { menuList } from '@/config/menu'
export default{ export default {
data() { data() {
return{ return {
menuList:[] menuList: [],
} };
}, },
mounted(){ mounted() {
this.menuList = JSON.parse(localStorage.getItem('menuList') || []) let menuList = localStorage.getItem("menuList");
}, if (menuList) {
methods:{ this.menuList = JSON.parse(menuList);
goPage(path){ } else {
if(path){ this.menuList = [];
this.$router.push(path)
} }
}, },
requireImg(imgSrc){ methods: {
return require(`@/assets/menu/${imgSrc}`) goPage(path) {
} if (path) {
this.$router.push(path);
} }
} },
requireImg(imgSrc) {
return require(`@/assets/menu/${imgSrc}`);
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '~@/style/menu.less'; @import "~@/style/menu.less";
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.index-container{ width: 100%; } .index-container {
width: 100%;
}
} }
@media (min-width:1441px) and (max-width:1680px) { @media (min-width: 1441px) and (max-width: 1680px) {
.index-container{ width: 96%; } .index-container {
width: 96%;
}
} }
@media (min-width:1681px){ @media (min-width: 1681px) {
.index-container{ width: 92%; } .index-container {
width: 92%;
}
} }
.index-container{ .index-container {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.panel-box{ .panel-box {
background: @party-white; background: @party-white;
border: 1px solid @party-white; border: 1px solid @party-white;
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
padding: 40px 20px 20px 20px; padding: 40px 20px 20px 20px;
.panel-box-title{ .panel-box-title {
padding-right: 3.125vw; padding-right: 3.125vw;
} }
.panel-box-title-wrapper{ .panel-box-title-wrapper {
.panel-box-title-icon{ .panel-box-title-icon {
display: inline-block; display: inline-block;
width: 28px; width: 28px;
height: 28px; height: 28px;
vertical-align: middle; vertical-align: middle;
margin-right: 18px; margin-right: 18px;
} }
span{ span {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
font-weight: bold; font-weight: bold;
...@@ -95,35 +114,35 @@ export default{ ...@@ -95,35 +114,35 @@ export default{
vertical-align: middle; vertical-align: middle;
} }
} }
.panel-box-title-img{ .panel-box-title-img {
width: 10.4vw; width: 10.4vw;
height: 10.4vw; height: 10.4vw;
max-width: 200px; max-width: 200px;
max-height: 200px; max-height: 200px;
margin-top: 20px; margin-top: 20px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.panel-box-content{ .panel-box-content {
padding-left: 20px; padding-left: 20px;
display: flex display: flex;
} }
.panel-box-sub-title{ .panel-box-sub-title {
border-bottom:1px solid @party-border-color; border-bottom: 1px solid @party-border-color;
line-height: 24px; line-height: 24px;
padding-bottom: 20px; padding-bottom: 20px;
box-sizing: content-box; box-sizing: content-box;
.line{ .line {
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 18px; height: 18px;
background-color:@party-black; background-color: @party-black;
vertical-align: middle; vertical-align: middle;
} }
.panel-box-sub-title_name{ .panel-box-sub-title_name {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
font-weight: bold; font-weight: bold;
...@@ -131,44 +150,43 @@ export default{ ...@@ -131,44 +150,43 @@ export default{
vertical-align: middle; vertical-align: middle;
margin-left: 12px; margin-left: 12px;
} }
} }
.panel-sub-box{ .panel-sub-box {
&:not(:first-child){ &:not(:first-child) {
margin-left: 3.125vw; margin-left: 3.125vw;
} }
ul{ ul {
display: flex; display: flex;
padding-top: 20px; padding-top: 20px;
margin-left: -20px; margin-left: -20px;
li{ li {
width: 6.67vw; width: 6.67vw;
height:8.33vw ; height: 8.33vw;
max-width: 128px; max-width: 128px;
max-height: 160px; max-height: 160px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
color: @font-color; color: @font-color;
cursor: pointer; cursor: pointer;
&:not(:first-child){ &:not(:first-child) {
margin-left: 20px; margin-left: 20px;
} }
.icon-div{ .icon-div {
padding-top: 0.94vw; padding-top: 0.94vw;
height: 4.79vw; height: 4.79vw;
width: 4.79vw; width: 4.79vw;
border-radius: 16px; border-radius: 16px;
margin: 0 auto 0.8vw ; margin: 0 auto 0.8vw;
} }
.icon-memu{ .icon-memu {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 2.91vw; width: 2.91vw;
height: 2.91vw; height: 2.91vw;
} }
.menu-label{ .menu-label {
line-height: 24px; line-height: 24px;
text-shadow: 0 2px 4px rgba(0,0,0,0.20); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
} }
} }
......
...@@ -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>
<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
<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>
<template> <template>
<div id="dialogTends" style="width:100%;height:100%"></div> <div id="dialogTends" style="width: 100%; height: 100%"></div>
</template> </template>
<script> <script>
export default { export default {
name: 'interaction', name: "interaction",
data() { data() {
return { return {
title:'展板点播趋势图' title: "展板点播趋势图",
} };
},
props: {
data: {
type: Object,
default: () => {
return {};
},
},
}, },
mounted() { mounted() {
setTimeout(()=>{ // setTimeout(()=>{
this.init() // this.init()
},100) // },100)
}, },
methods: { methods: {
init(){ init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top:20, top: 20,
left: '2%', left: 50,
right: 40, right: 50,
bottom: 30, bottom: 30,
containLabel: true containLabel: true,
}, },
// dataZoom: [{ // dataZoom: [{
// type: "slider", // type: "slider",
...@@ -46,101 +53,103 @@ export default { ...@@ -46,101 +53,103 @@ export default {
// } // }
// ], // ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false,//坐标轴两边留白 boundaryGap: false, //坐标轴两边留白
data: [ data: this.data.xAxisData,
'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', axisLabel: {
'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: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
}, },
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",
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: 'line', type: "line",
smooth:true, smooth: true,
itemStyle: { itemStyle: {
normal: { normal: {
color:'#AC9374', color: "#AC9374",
lineStyle: { lineStyle: {
color: "#9B1E23", color: "#9B1E23",
width:1 width: 1,
}, },
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: 'rgba(172,141,116,0.4)' color: "rgba(172,141,116,0.4)",
}, { },
{
offset: 1, offset: 1,
color: 'rgba(155,30,35,0.4)' 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, data: this.data.yAxisData,
63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90 },
] ],
}
]
}; };
let echartsDiv = this.$echarts.init(document.getElementById('dialogTends')) let echartsDiv = this.$echarts.init(
echartsDiv.setOption(option) document.getElementById("dialogTends")
);
echartsDiv.setOption(option);
}, },
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
#dialogTends{ #dialogTends {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
......
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,
......
<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>
<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>
...@@ -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;
......
/* 互动频次 */ /* 互动频次 */
<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
...@@ -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,
......
/* 点播趋势图 */ /* 点播趋势图 */
<template> <template>
<div class="trend-wrapper height100 overview-detail"> <div class="trend-wrapper height100 overview-detail">
<div class="btn-group">
<el-button
class="export"
type="primary"
icon="el-icon-download"
@click="handleExport"
>导出文件</el-button
>
</div>
<div id="bodyCanvas">
<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" @change="handleChange">
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 ref="echarts" :data="echartsData" />
</div> </div>
</div> </div>
<div class="rank-panel-box"> <div class="rank-panel-box">
...@@ -25,42 +39,152 @@ ...@@ -25,42 +39,152 @@
<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>
</div>
</template> </template>
<script> <script>
import {trendLine, rankTable} from './components' import { trendLine, rankTable } from "./components";
import { getCurDate } from "@/utils/util.time";
import htmlCanvas from "@/utils/htmlCanvas";
import JsPDF from "jspdf";
export default { export default {
data(){ data() {
return { return {
value1:'', value1: "",
tList:['排名','统计时间','点播总量'], tList: ["排名", "统计时间", "点播总量"],
data:[ playDate: "1",
{index:1,time:'2021年1月',num:'268'}, data: [],
{index:2,time:'2021年1月',num:'268'}, echartsData: {},
{index:3,time:'2021年1月',num:'268'}, options: [
{index:4,time:'2021年1月',num:'268'}, { label: "年", value: "1" },
{index:5,time:'2021年1月',num:'268'}, { label: "月", value: "2" },
{index:6,time:'2021年1月',num:'268'}, { label: "日", value: "3" },
{index:7,time:'2021年1月',num:'268'}, ],
{index:8,time:'2021年1月',num:'268'}, timer: null,
{index:9,time:'2021年1月',num:'268'}, };
{index:10,time:'2021年1月',num:'268'} },
] components: { trendLine, rankTable },
mounted() {
this.handleChange("1");
},
methods: {
getList(frequencyDate) {
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:{trendLine, rankTable}, handleChange(val) {
methods:{ let frequencyDate = this.getCurTime(val);
this.getList(frequencyDate);
},
getCurTime(type) {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
switch (type) {
case "1":
frequencyDate = curTime.year;
return frequencyDate;
break;
case "2":
frequencyDate = curTime.year + curTime.month;
return frequencyDate;
break;
case "3":
frequencyDate = curTime.year + curTime.month + curTime.date;
return frequencyDate;
break;
default:
return "";
break;
} }
} },
init() {
this.$refs.echarts.init();
},
handleExport() {
let _this = this;
if (this.timer) {
return false;
}
this.timer = setTimeout(() => {
clearTimeout(_this.timer);
_this.timer = null;
}, 30000);
_this.getPdf("#bodyCanvas", "趋势分析");
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
}, 2000);
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.trend-wrapper {
.btn-group {
margin-bottom: 20px;
height: 36px;
}
/deep/ .el-button.export {
width: 128px;
float: right;
.el-icon-download {
font-size: 18px;
font-weight: bold;
}
}
.el-select {
margin-left: 40px;
/deep/.el-input__inner {
border-radius: 22px;
background-color: @party-bg-gray;
border-color: @party-border-color;
}
}
#bodyCanvas {
height: calc(100% - 56px);
}
.ul-wrapper {
background-color: @party-white;
}
}
</style> </style>
\ No newline at end of file
...@@ -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: [],
......
...@@ -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:{
......
...@@ -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:{
......
import html2Canvas from "html2canvas"
import JsPDF from "jspdf"
export default {
install(Vue, options) {
Vue.prototype.getPdf = function (id, title) {
var title = title
html2Canvas(document.querySelector(id), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL("image / jpeg", 1.0)
let PDF = new JsPDF("", "pt", "a4")
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + ".pdf")
}
)
}
}
}
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
}).then((canvas) => {
if (!canvas) {
callback(null)
return
}
callback(canvas)
// callback(canvas.toDataURL('image/jpeg', 0.5))
})
}
export default htmlCanvas
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