Commit 7969d656 authored by “yiyousong”'s avatar “yiyousong”

pref:清理无用文件

parent 85ccaee8
<template>
<div class="new-page" :style="`min-height: ${pageMinHeight}px`">
<h1>{{$t('content')}}</h1>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Demo',
i18n: require('./i18n'),
data() {
return {
}
},
computed: {
...mapState('setting', ['pageMinHeight']),
desc() {
return this.$t('description')
}
}
}
</script>
<style scoped lang="less">
@import "index";
</style>
\ No newline at end of file
module.exports = {
messages: {
CN: {
content: '演示页面',
description: '这是一个演示页面'
},
HK: {
content: '演示頁面',
description: '這是一個演示頁面'
},
US: {
content: 'Demo Page',
description: 'This is a demo page'
}
}
}
\ No newline at end of file
import Demo from './Demo.vue'
export default Demo
\ No newline at end of file
.new-page{
height: 100%;
background-color: @base-bg-color;
text-align: center;
padding: 200px 0 0 0;
border-radius: 4px;
//margin-top: -24px;
h1{
font-size: 48px;
}
}
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<p class="msg primary-color"><a-icon type="info-circle" /> 提示:预警时长是指在判定时长以内,系统提前一段时间向管理员发送预警信息</p>
<a-form-model-item label="预警时长" prop="warning_time">
<w-input v-model.number="formInfo.warning_time" placeholder="请输入预警时长" suffix="分钟"/>
</a-form-model-item>
<p class="msg primary-color"><a-icon type="info-circle" /> 提示:提示时长是指在判定时长以内,系统提前一段时间向工作人员发送提示信息</p>
<a-form-model-item label="提示时长" prop="tips_time">
<w-input v-model.number="formInfo.tips_time" placeholder="请输入提示时长" suffix="分钟"/>
</a-form-model-item>
<p class="msg primary-color"><a-icon type="info-circle" /> 提示:判定时长是指异常行为到达判定时长之后,系统向管路员发送提示信息,并记录一次扣分</p>
<a-form-model-item label="判定时长" prop="determine_time">
<w-input v-model.number="formInfo.determine_time" placeholder="请输入判定时长" suffix="分钟"/>
</a-form-model-item>
<a-form-model-item label="算法类型" prop="algorithm">
<w-input v-model="formInfo.algorithm" type="select" :dictionaries="$dictionaries('algorithm')" placeholder="请输入算法类型"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"aimodel",//接口名称
formInfo:{
aimodel:"",//监察模型
algorithm:"",//算法类型
warning_time:0,//预警时长 分钟
tips_time:0,//提示时长 分钟
determine_time:0//判定时长 分钟
},//表单提交数据
formRules:{
algorithm:[{ required: true, message: '算法类型不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
this.title = `${this.formInfo.aimodel}编辑`
}
}
}
</script>
<style lang="less" scoped>
.msg{
font-size: 12px;
}
</style>
\ No newline at end of file
<template>
<div class="ff aimodel viewbox">
<h2>监察模型</h2>
<div class="aimodel-t">
通过视频监控识别技术分析窗口工作人员的人体动作,检测违规行为。违规行为消息即时推送至管理员进行核查,有效加强行政效能监察,强化服务窗口督查。
</div>
<div class="aimodel-box flex_row">
<div class="aimodel-item" v-for="(item,index) in tabledataSource" :key="item.id" :class="{disable:item.status == 0}">
<div class="aimodel-item-b">
<div class="aimodel-i-h">
<h3>{{item.aimodel}}</h3>
<images :src="item.picture"/>
</div>
<div class="aimodel-i-c">
<div class="aimodel-row flex_row flex_justify_b" v-if="item.settime1">
<p class="aimodel-lable">{{item.timenum==2?'离开判定时长':'判定时长'}}</p>
<p class="aimodel-val">{{item.settime1}}分钟</p>
</div>
<div class="aimodel-row flex_row flex_justify_b" v-if="item.timenum == 2">
<p class="aimodel-lable">离岗判定时长</p>
<p class="aimodel-val">{{item.settime2}}分钟</p>
</div>
<div class="aimodel-row flex_row flex_justify_b">
<p class="aimodel-lable">算法适配</p>
<p class="aimodel-val">{{$dictionaryValue('algorithm',item.algorithm)}}</p>
</div>
</div>
<div class="aimodel-i-f flex_row flex_justify_b">
<div>
<a-row>
<a-col :span="12">是否启用</a-col>
<w-input v-model="item.valid" :span="12" type="switch" @change="onvalid(index)"/>
</a-row>
</div>
<div @click="OnTableEdit(item)" style="cursor: pointer;">编辑</div>
</div>
</div>
</div>
<div class="aimodel-item">
<div class="aimodel-item-add flex_row flex_align_c">
<div>
<img src="./img/nav5.png" alt="">
<p>更多模型正在生存中<br/>尽情期待~</p>
</div>
</div>
</div>
</div>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
import {aimodelSave} from "@/services/default"
export default {
mixins:[table],
data(){
return{
tablename:"aimodel",//接口地址 名称
tabledataSource:[],//表格数据
}
},
methods:{
onvalid(i){
const arr = Object.assign({},this.tabledataSource)
let obj = arr[i]
console.log(obj)
aimodelSave({id:obj.id,valid:obj.valid}).then(res=>{
const {code,msg} = res.data
if(code == 0){
this.$message.success('修改成功')
}else{
arr[i].valid = obj.valid == 1?0:1
this.tabledataSource = arr
this.$message.error(msg)
}
})
}
},
components:{
show
}
}
</script>
<style lang="less" scoped>
.aimodel{
background:#fff url(./img/bg.png) no-repeat center;
background-size: 40%;
min-height: 750px;
.disable{
position: relative;
&::after{
content:"";
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
}
}
h2{
font-size: 20px;
text-align: center;
padding-top: 40px;
font-weight: bold;
}
.aimodel-box{
margin-top: 40px;
}
.aimodel-t{
text-align: center;
margin:0 auto;
width: 50%;
}
.aimodel-item{
width: 20%;
box-sizing: border-box;
padding:0 20px;
.aimodel-item-b{
background: linear-gradient(180deg, rgba(23, 67, 198, 1) 0%, rgba(31, 116, 223, 1) 51%, rgba(44, 140, 240, 1) 99%);
border-radius: 8px;
min-height: 350px;
padding:5px;
color: #fff;
position: relative;
overflow: hidden;
}
.aimodel-i-h{
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding-bottom: 30px;
h3{
color: #fff;
padding:20px 0;
font-weight: bold;
font-size: 18px;
}
img{
display: inline-block;
width: 80%;
height: 110px;
}
}
.aimodel-i-c{
padding-bottom: 70px;
height: 163px;
}
.aimodel-lable{
text-align: left;
}
.aimodel-val{
text-align: right;
}
.aimodel-row{
p{
margin: 10px 0 0;
}
}
.aimodel-i-f{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 10px 0;
text-align: center;
background: rgba(0, 0, 0, 0.5);
&>div{
flex: 1;
&:first-child{
border-right: 1px solid #fff;
}
}
}
}
.aimodel-item-add{
height: 100%;
background: rgba(242, 242, 242, 1);
border-radius: 8px;
min-height: 350px;
padding:5px;
color: #202020;
position: relative;
overflow: hidden;
text-align: center;
img{
width: 50%;
}
p{
font-weight: bold;
margin-top:20px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="analyse">
<div class="search ff">
<a-form layout="inline">
<a-form-item>
<w-input type="month" v-model="month" placeholder="请选择时间"/>
</a-form-item>
<a-form-item style="padding-top:4px">
<a-button type="primary" @click="getInit">搜索</a-button>
</a-form-item>
</a-form>
</div>
<div class="viewbox">
<a-row :gutter="[20,20]">
<a-col :span="8">
<div class="analyse-card ff">
<h2 class="t primary-color">每一分的进步都是一种成长</h2>
<gauge style="height:385px" :option="gaugeoption"/>
<div class="analyse-b flex_row flex_justify_a">
<div class="analyse-b-i ">
<p>离岗算法准确率</p>
<gaugePie style="height:100px" :option="lgoption"/>
</div>
<div class="analyse-b-i ">
<p>离开算法准确率</p>
<gaugePie style="height:100px" :option="lkoption"/>
</div>
<div class="analyse-b-i ">
<p>玩手机算法准确率</p>
<gaugePie style="height:100px" :option="wsjoption"/>
</div>
<div class="analyse-b-i ">
<p>睡岗算法准确率</p>
<gaugePie style="height:100px" :option="sgoption"/>
</div>
<div class="analyse-b-i ">
<p>扶头算法准确率</p>
<gaugePie style="height:100px" :option="ftoption"/>
</div>
</div>
</div>
</a-col>
<a-col :span="16">
<div class="analyse-card ff p-l-15 p-r-15">
<h3>本月异常行为情况展示</h3>
<pieCalendar style="height:405px" :moments="month" :info="errdata"/>
</div>
</a-col>
<a-col :span="8">
<div class="analyse-card ff p-l-15 p-r-15">
<h3>本月扣分部门Top5</h3>
<barloading style="height:405px" :option="topoption"/>
</div>
</a-col>
<a-col :span="16">
<div class="analyse-card ff p-l-15 p-r-15">
<h3>本月扣分窗口排名Top10</h3>
<bar style="height:405px" :option="top10option"/>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
import {gauge,gaugePie,pieCalendar,bar,barloading} from "@/components/echats"
import {analysisfrom,sectiontop,ycdata,windowtop} from "@/services/default"
import moment from "moment"
export default {
data(){
return{
gaugeoption:{},
lgoption:{},
lkoption:{},
wsjoption:{},
sgoption:{},
ftoption:{},
topoption:{},
top10option:{},
errdata:[],
month:moment().format('YYYY-MM')//月份
}
},
created(){
this.getInit()
},
methods:{
getInit(){
this.getanalysisfrom()
this.getsectiontop()
this.getycdata()
this.getwindowtop()
},
getanalysisfrom(){
analysisfrom({month:this.month}).then(res=>{
const{code,data,msg} = res.data
if(code == 0){
this.gaugeoption = this.optionfn(data.accuracy_lv,'综合正确率')
this.lgoption = this.optionfn(data.lg_lv,'正确率')
this.lkoption = this.optionfn(data.lk_lv,'正确率')
this.wsjoption = this.optionfn(data.wsj_lv,'正确率')
this.sgoption = this.optionfn(data.sj_lv,'正确率')
this.ftoption = this.optionfn(data.ft_lv,'正确率')
}else{
this.$message.error(msg)
}
})
},
getsectiontop(){
sectiontop({month:this.month}).then(res=>{
const{code,data,msg} = res.data
if(code == 0){
let x = []
let y = []
data.forEach(element => {
x.unshift(element.name)
y.unshift(element.score)
});
const option = {
yAxis:{
data:x
},
series:[
{
data:y
},
{
data:y
},
]
}
this.topoption = option
}else{
this.$message.error(msg)
}
})
},
getycdata(){
ycdata({month:this.month}).then(res=>{
const{code,data,msg} = res.data
if(code == 0){
console.log(data)
this.errdata = data
}else{
this.$message.error(msg)
}
})
},
getwindowtop(){
windowtop({month:this.month}).then(res=>{
const{code,data,msg} = res.data
if(code == 0){
let x = []
let y = []
data.forEach(v=>{
x.push(v.window_name)
y.push(v.score)
})
let options = {
xAxis:{
data: x
},
series:[
{
data:y
}
]
}
this.top10option = options
}else{
this.$message.error(msg)
}
})
},
optionfn(value,name){
const option = {
series:[
{
data: [
{
value: value,
name: name
}
]
}
]
}
return option
}
},
components:{
gauge,
gaugePie,
pieCalendar,
bar,
barloading
}
}
</script>
<style lang="less" scoped>
.search{
padding: 10px 20px;
}
.analyse-card{
position: relative;
border-radius: 8px;
font-size: 12px;
.t{
text-align: center;
padding-top: 20px;
}
.analyse-b{
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.analyse-b-i{
flex: 1;
p{
margin: 0;
text-align: center;
}
}
h3{
font-size: 14px;
padding-top:10px;
font-weight: bold;
}
}
</style>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15 p-b-15 viewbox">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<exportFile slot="search-add">
<a-button type="primary">导出文件</a-button>
</exportFile>
<div slot="search-del"></div>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./pageshow"
export default {
mixins:[table],
data(){
return{
tablename:"appeal",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "申诉人",
dataIndex: "workman_name",
},
{
title: "申诉说明",
dataIndex: "appeal_text",
},
{
title: "申诉时间",
dataIndex: "create_time",
},
{
title: "审核人",
dataIndex: "appeal_sh_name",
},
{
title: "申诉结果",
dataIndex: "appeal_result",
customRender:(text)=>{
let obj = this.$dictionaryValue('appeal_result',text,'obj')
return <span style={{'color':obj.color}}>{obj.label}</span>
}
},
{
title: "操作",
width: "200px",
customRender:(text, record)=>{
if(text == 1){
return (
<div>
<span class="redact mr" value={record} onClick={()=>this.onAppeal(record)}>审批</span>
<tableActive show={true} edit={false} del={false} record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel} onShow={this.onPageShow}/>
</div>
)
}else{
return (
<div>
<tableActive show={true} edit={false} del={false} record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel} onShow={this.onPageShow}/>
</div>
)
}
}
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
{type:'text',dataIndex:'workman_name',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入申诉人"},
{type:'date',dataIndex:'time',span:5,width:150,placeholder:"请输入申诉时间"},
]//表格查询条件
}
},
methods:{
onPageShow(row){
this.$refs.pageshow.onShow(row)
},
onAppeal(row){
this.$refs.pageshow.onShow(row)
}
},
components:{
show
}
}
</script>
\ No newline at end of file
<template>
<a-drawer
title="详情"
:width="450"
placement="right"
:visible="visible"
@close="visible = false"
>
<div class="p-w">
<h2 class="primary-color">违规说明</h2>
<a-row>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">工作人员:</div>
<div class="p-v">{{info.alert.workman_name}}</div>
</div>
</a-col>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">扣分分值:</div>
<div class="p-v">{{info.alert.role_score}}</div>
</div>
</a-col>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">扣分原因:</div>
<div class="p-v">{{$dictionaryValue('warn_alert',info.alert.warn_alert)}}</div>
</div>
</a-col>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">时长:</div>
<div class="p-v">{{info.alert.duration}}</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">报警时间:</div>
<div class="p-v">{{info.alert.last_time}}</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">报警附件:</div>
<div class="p-v flex_row"><thumbImage v-for="(item,index) in info.alert.picture" :key="index" :src="info.alert.picture" :index="index" style="margin-right:5px"/></div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">处理意见:</div>
<div class="p-v">{{info.sp.appeal_sh_text}}</div>
</div>
</a-col>
</a-row>
</div>
<div class="p-w">
<h2 class="primary-color">申诉说明</h2>
<a-row>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">申诉人:</div>
<div class="p-v">{{info.appeal.workman_name}}</div>
</div>
</a-col>
<a-col :span="12">
<div class="p-w-r flex_row">
<div class="p-l">申诉时间:</div>
<div class="p-v">{{info.appeal.create_time}}</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">申诉说明:</div>
<div class="p-v">{{info.appeal.appeal_text}}</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">申诉附件:</div>
<div class="p-v flex_row"><thumbImage v-for="(item,index) in info.appeal.pic_path" :key="index" :src="info.appeal.pic_path" :index="index" style="margin-right:5px"/></div>
</div>
</a-col>
</a-row>
</div>
<div class="p-w" style="background:#fff4f4" v-if="info.sp.appeal_sh_text != 1">
<h2 class="primary-color">申诉审批</h2>
<a-row>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">审批结果:</div>
<div class="p-v">{{$dictionaryValue('appeal_result',info.sp.appeal_result)}}</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">审批意见:</div>
<div class="p-v">{{info.sp.appeal_sh_text}}</div>
</div>
</a-col>
</a-row>
</div>
<div class="p-w" style="background:#fff4f4" v-if="info.sp.appeal_sh_text == 1">
<h2 class="primary-color">申诉审批</h2>
<a-row>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">审批结果:</div>
<div class="p-v">
<w-input type="radio" v-model="form.appeal_result" :dictionaries="[{label:'审核通过',value:2},{label:'审核不通过',value:3}]" />
</div>
</div>
</a-col>
<a-col :span="24">
<div class="p-w-r flex_row">
<div class="p-l">审批意见:</div>
<div class="p-v" style="flex:1">
<w-input type="textarea" v-model="form.appeal_sh_text"/>
</div>
</div>
</a-col>
</a-row>
</div>
<div style="height:53px"></div>
<div class="footer">
<a-button type="primary" @click="onSave" v-if="info.sp.appeal_sh_text == 1">提交</a-button>
<a-button style="margin-left:10px" @click="visible = false">关闭</a-button>
</div>
</a-drawer>
</template>
<script>
import {appealInfo,appealsh} from "@/services/default"
export default {
data(){
return{
visible:false,
info:{
alert:{},
appeal:{},
sp:{}
},
row:{},
form:{
appeal_sh_text:"",
appeal_result:2
}
}
},
methods:{
onShow(row){
this.form.appeal_sh_text = ''
this.form.appeal_result = 2
this.row = row
this.visible = true
appealInfo({id:row.id}).then(res=>{
console.log(res)
const {code,data,msg} = res.data
if(code == 0){
this.info = data
}else{
this.$message.error(msg)
}
})
},
onSave(){
let form = {
id:this.row.id,
...this.form
}
appealsh(form).then(res=>{
const {code,msg} = res.data
if(code == 0){
this.visible = false
this.$parent.getTableInfo()
}else{
this.$message.error(msg)
}
})
}
}
}
</script>
<style lang="less" scoped>
.footer{
position: absolute;
left: 0;
bottom: 0;
right: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
background: #fff;
}
.p-tit{
padding: 10px 15px;
color: #ff4d4f;
background: #fff1f1;
font-weight: blod;
border-left: 4px solid #ff4d4f;
}
.p-w{
margin-bottom: 20px;
background: #f1f7fd;
border-radius: 6px;
padding: 10px;
position: relative;
.p-w-r{
margin-bottom: 10px;
}
.p-l{
width: 80px;
text-align: right;
}
h2{
font-weight: bold;
}
.p-photo{
position: absolute;
top:20px;
right: 20px;
width: 100px;
height: 120px;
img{
display: block;
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<div>
<a-button type="danger" @click="clear">清除规则</a-button>
</div>
<div class="camera-c" style="width:314px;height:300px" ref="canvasbox">
<canvas id="myCanvas" width="314" height="300"></canvas>
</div>
</div>
</template>
<script>
export default {
props:['value'],
model: {
prop: 'value',
event: 'change.value'
},
data(){
return {
line:[],
ctx:null,
clientWidth:"",
clientHeight:""
}
},
watch:{
line:function(v){
let ctx = this.ctx
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="#000";
v.forEach((element) => {
if(v.length == 1){
ctx.moveTo(element.x,element.y);
}else{
ctx.lineTo(element.x,element.y);
}
});
ctx.stroke(); // 进行绘制
},
value:function(val){
console.log(val)
if(val){
this.line = JSON.parse(val).map(v=>{
v.x = v.x*this.clientWidth
v.y = v.y*this.clientHeight
return v
})
}else{
this.clear()
}
}
},
mounted(){
const event = this.$refs.canvasbox
const{clientWidth,clientHeight} = event
this.clientWidth = clientWidth
this.clientHeight = clientHeight
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
this.ctx = ctx
let _this = this
event.addEventListener('click',function(e){
const {offsetX,offsetY} = e
_this.line.push({x:offsetX,y:offsetY})
let newArr = JSON.parse(JSON.stringify(_this.line))
newArr.map(v=>{
v.x = v.x/clientWidth
v.y = v.y/clientHeight
return v
})
console.log(newArr)
_this.$emit('change.value',JSON.stringify(newArr))
})
},
methods:{
clear(){
this.line = []
this.ctx.clearRect(0,0,314,300);
this.$emit('change.value','')
}
}
}
</script>
<style lang="less" scoped>
.camera-c{
border:1px solid #999
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="摄像头" prop="camera_id">
<div>{{camera_name}}</div>
</a-form-model-item>
<a-form-model-item label="规则坐标轴" prop="detection_area">
<w-input v-model="formInfo.detection_area" placeholder="请输入规则坐标轴"/>
</a-form-model-item>
<a-form-model-item label="绘制规则">
<areaCanvas class="camera-area" v-model="formInfo.detection_area" v-if="formVisible"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
import {areaInfo} from "@/services/default"
import areaCanvas from "./areaCanvas"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"area",//接口名称
camera_name:"",//摄像头名
formInfo:{
camera_id:"",//摄像头id
detection_area:"",//规则坐标轴
},//表单提交数据
formRules:{
detection_area:[{ required: true, message: '请绘制规则', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.resetForm()//初始化表单
this.formInfo.camera_id = row.id
this.camera_name = row.name
this.title = "分析区域设置"
this.formVisible = true
areaInfo({id:row.id}).then(res=>{
const {code,data} = res.data
if(code==0 && data){
let obj = {}
Object.keys(this.formInfo).forEach(v=>{
obj[v] = data[v] || ''
})
this.formInfo = obj
}
})
}
},
components:{
areaCanvas
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<a-modal
:width="700"
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-row :gutter="10">
<a-col :span="12">
<a-form-model-item label="摄像头名称" prop="name">
<w-input v-model="formInfo.name" placeholder="请输入摄像头名称"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="摄像头mac" prop="number">
<w-input v-model="formInfo.number" placeholder="请输入摄像头mac"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="ip" prop="ip">
<w-input v-model="formInfo.ip" placeholder="请输入ip"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号" prop="port">
<w-input v-model="formInfo.port" placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="用户名" prop="username">
<w-input v-model="formInfo.username" placeholder="请输入用户名"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="密码" prop="password">
<w-input v-model="formInfo.password" placeholder="请输入密码"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="楼栋" prop="building">
<w-input v-model.number="formInfo.building" placeholder="请输入楼栋" suffix="栋"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="楼层" prop="lv">
<w-input v-model.number="formInfo.lv" placeholder="请输入楼层" suffix="层"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="所属服务器" prop="servers_id">
<w-input v-model="formInfo.servers_id" type="select" :dictionaries="serversdictionaries" placeholder="请输入服务器id"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
import {serversListdata} from "@/services/default"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:7,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"device",//接口名称
formInfo:{
name:"",//摄像头名称
number:"",//摄像头mac
ip:"",//ip
port:"",//端口号
username:"",//用户名
password:"",//密码
building:"",//楼栋
lv:"",//楼层
servers_id:"",//服务器id
window_id:""//窗口id
},//表单提交数据
formRules:{
name:[{ required: true, message: '摄像头名称不能为空', trigger: ['blur','change'] }],
number:[{ required: true, message: '摄像头mac不能为空', trigger: ['blur','change'] }],
ip:[{ required: true, message: 'ip不能为空', trigger: ['blur','change'] }],
port:[{ required: true, message: '端口号不能为空', trigger: ['blur','change'] }],
username:[{ required: true, message: '用户名不能为空', trigger: ['blur','change'] }],
password:[{ required: true, message: '密码不能为空', trigger: ['blur','change'] }],
building:[{ required: true, message: '楼栋不能为空', trigger: ['blur','change'] }],
lv:[{ required: true, message: '楼层不能为空', trigger: ['blur','change'] }],
servers_id:[{ required: true, message: '服务器id不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示",
serversdictionaries:[],//服务器字典
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.getServersListdata()
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
// 新增需要获取窗口id
this.$parent.window_id && (this.formInfo.window_id = this.$parent.window_id)
},
// 编辑
onEdit(row){
this.getServersListdata()
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
},
// 查询服务器字典
getServersListdata(){
serversListdata({page:1,size:99999}).then(res=>{
console.log(res)
const {code,data,msg} = res.data
if(code == 0){
if(data.data && data.data.length>0){
this.serversdictionaries = data.data.map(v=>{
return {label:v.name,value:v.id}
})
}
}else{
this.$message.error(msg)
}
})
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff">
<a-row>
<a-col :span="5">
<div class="window-tree">
<h3>窗口分布</h3>
<a-input-search style="margin-bottom: 8px" placeholder="请输入窗口名称" @change="onChange" />
<a-tree :tree-data="treelist"
:auto-expand-parent="autoExpandParent"
:expanded-keys="expandedKeys"
@expand="onExpand"
@select="onSelect"
show-icon
:replaceFields="{title:'name', key:'id' }">
<a-icon slot="site" type="layout" theme="filled" class="primary-color"/>
<a-icon slot="buness" type="contacts" theme="filled" class="primary-color"/>
<a-icon slot="cameraicon" type="youtube" theme="filled" class="primary-color"/>
<template slot="camera" slot-scope="{dataRef}">
<!-- <span>{{dataRef.name}}</span> -->
<span v-if="dataRef.name.indexOf(searchValue) > -1">
{{ dataRef.name.substr(0, dataRef.name.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ dataRef.name.substr(dataRef.name.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ dataRef.name }}</span>
<span class="primary-color" style="padding-left:15px" v-if="dataRef.set == 1">
<a-icon type="check-circle" theme="filled" />
有规则
</span>
</template>
</a-tree>
</div>
</a-col>
<a-col :span="19">
<tables ref="camera"/>
</a-col>
</a-row>
</div>
</template>
<script>
import {windowtree} from "@/services/default"
import tables from "./table"
export default {
data(){
return {
treelist:[],
searchValue:"",
autoExpandParent:true,
expandedKeys:[]
}
},
created(){
this.getwindowtree()
},
methods:{
getwindowtree(){
windowtree().then(res=>{
const {code,data,msg} = res.data
if(code == 0){
let tree = data.map(v=>{
v['id'] = `0-${v.id}`
v['slots'] = {icon:'buness'}
v.children.map(child=>{
child['scopedSlots'] = {title:'camera',icon:'cameraicon'}
return child
})
return v
})
// this.treelist = [{id:0,name:"站点",children:tree,slots:{icon:'site'}}]
this.treelist = tree
}else{
this.$message.error(msg)
}
console.log(res)
})
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
this.autoExpandParent = false;
},
onChange(e){
const value = e.target.value;
this.searchValue = value
},
onSelect(v){
// 点击窗口触发
if(typeof v[0] == 'number'){
this.$refs.camera.windowCamera(v[0])
}
}
},
components:{
tables
}
}
</script>
<style lang="less" scoped>
.window-tree{
padding: 10px 15px;
border-right: 1px solid #f5f5f5;
}
</style>
\ No newline at end of file
<template>
<div class="ff camera">
<h3>摄像头列表</h3>
<a-spin :spinning="tableLoading">
<div class="camera-box">
<a-row :gutter="[20,20]">
<a-col :span="6" v-if="window_id">
<div class="device-item flex_row flex_align_c flex_justify_c device-item-add" @click="OnTableAdd">
<div>
<a-icon type="plus-circle" theme="filled" style="font-size:40px"/>
<p style="margin-top:5px">添加摄像头</p>
</div>
</div>
</a-col>
<a-col :span="6" v-for="(item) in tabledataSource" :key="item.id">
<div class="device-item">
<div class="device-item-icon flex_row flex_align_c">
<img src="../img/camera.png" alt="">
</div>
<div class="device-item-body">
<div class="more">
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
<a-button shape="circle" icon="more" size="small"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="onAddarea(item)">配置规则</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="OnTableEdit(item)">编辑</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm
title="删除后不可恢复,确定要删除吗?"
ok-text="确定"
cancel-text="再想想"
@confirm="OnTableDel(item)"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
<h4>{{item.name}} <a-tag color="blue" style="margin-left:2px;font-size:12px" v-if="item.window_name">{{item.window_name}}</a-tag></h4>
<p>
<span class="p-label">MAC地址:</span>
<span class="p-value"><a-tooltip :title="item.number">{{item.number}}</a-tooltip></span>
</p>
<p>
<span class="p-label">IP地址:</span>
<span class="p-value"><a-tooltip :title="item.ip">{{item.ip}}</a-tooltip></span>
</p>
<p>
<span class="p-label">端口:</span>
<span class="p-value">{{item.port}}</span>
</p>
<p>
<span class="p-label">楼栋:</span>
<span class="p-value">{{item.building}}</span>
</p>
<p>
<span class="p-label">楼层:</span>
<span class="p-value">{{item.lv}}</span>
</p>
<p>
<span class="p-label">所属服务器:</span>
<span class="p-value"><a-tooltip :title="item.servers_name">{{item.servers_name}}</a-tooltip></span>
</p>
</div>
</div>
</a-col>
</a-row>
</div>
</a-spin>
<show ref="pageshow" @success="getTableInfo"/>
<areaform ref="areaform" @success="getTableInfo"></areaform>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
import areaform from "./areaform"
export default {
mixins:[table],
data(){
return{
tablename:"device",//接口地址 名称
tabledataSource:[],//表格数据
columnsSearch:[
],//表格查询条件
window_id:""
}
},
methods:{
windowCamera(window_id){
this.window_id = window_id
this.tablequery = {window_id:window_id}
this.tableReload()
},
onAddarea(row){
this.$refs.areaform.onEdit(row)
}
},
components:{
show,
areaform
}
}
</script>
<style lang="less" scoped>
.camera{
padding: 15px;
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="服务器名称" prop="name">
<w-input v-model="formInfo.name" placeholder="请输入服务器名称"/>
</a-form-model-item>
<a-form-model-item label="服务器编号" prop="number">
<w-input v-model="formInfo.number" placeholder="请输入服务器编号"/>
</a-form-model-item>
<a-form-model-item label="服务器类型" prop="type">
<w-input v-model="formInfo.type" placeholder="请输入服务器类型"/>
</a-form-model-item>
<a-form-model-item label="ip" prop="ip">
<w-input v-model="formInfo.ip" placeholder="请输入ip"/>
</a-form-model-item>
<a-form-model-item label="端口号" prop="port">
<w-input v-model="formInfo.port" placeholder="请输入端口号"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"servers",//接口名称
formInfo:{
name:"",//服务器名称
number:"",//服务器编号
type:"",//服务器类型
ip:"",//ip
port:"",//端口号
},//表单提交数据
formRules:{
name:[{ required: true, message: '服务器名称不能为空', trigger: ['blur','change'] }],
number:[{ required: true, message: '服务器编号不能为空', trigger: ['blur','change'] }],
type:[{ required: true, message: '服务器类型不能为空', trigger: ['blur','change'] }],
ip:[{ required: true, message: 'ip不能为空', trigger: ['blur','change'] }],
port:[{ required: true, message: '端口号不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff camera">
<h3 style="margin-bottom:20px">服务器列表</h3>
<a-spin :spinning="tableLoading">
<div class="camera-box">
<a-row :gutter="[20,20]">
<a-col :span="6">
<div class="device-item flex_row flex_align_c flex_justify_c device-item-add" @click="OnTableAdd">
<div>
<a-icon type="plus-circle" theme="filled" style="font-size:40px"/>
<p style="margin-top:5px">添加服务器</p>
</div>
</div>
</a-col>
<a-col :span="6" v-for="(item) in tabledataSource" :key="item.id">
<div class="device-item">
<div class="device-item-icon flex_row flex_align_c">
<img src="../img/service.jpg" alt="">
</div>
<div class="device-item-body">
<div class="more">
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
<a-button shape="circle" icon="more" size="small"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="OnTableEdit(item)">编辑</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm
title="删除后不可恢复,确定要删除吗?"
ok-text="确定"
cancel-text="再想想"
@confirm="OnTableDel(item)"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
<h4>{{item.name}} </h4>
<p>
<span class="p-label">服务器编号:</span>
<span class="p-value"><a-tooltip :title="item.number">{{item.number}}</a-tooltip></span>
</p>
<p>
<span class="p-label">服务器类型:</span>
<span class="p-value"><a-tooltip :title="item.ip">{{item.ip}}</a-tooltip></span>
</p>
<p>
<span class="p-label">IP地址:</span>
<span class="p-value">{{item.port}}</span>
</p>
<p>
<span class="p-label">端口号:</span>
<span class="p-value">{{item.building}}</span>
</p>
</div>
</div>
</a-col>
</a-row>
</div>
</a-spin>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
export default {
mixins:[table],
data(){
return{
tablename:"servers",//接口地址 名称
tabledataSource:[],//表格数据
columnsSearch:[],//表格查询条件
}
},
components:{
show
}
}
</script>
<style lang="less" scoped>
.camera{
padding: 15px;
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="姓名" prop="name">
<w-input v-model="formInfo.name" placeholder="请输入姓名"/>
</a-form-model-item>
<a-form-model-item label="电话" prop="phone">
<w-input v-model="formInfo.phone" placeholder="请输入电话"/>
</a-form-model-item>
<a-form-model-item label="微信用户id" prop="wxuserid">
<w-input v-model="formInfo.wxuserid" placeholder="请输入微信用户id"/>
</a-form-model-item>
<a-form-model-item label="是否监察权限" prop="lgauth">
<w-input type="switch" v-model="formInfo.lgauth" placeholder="请输入是否监察权限"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"employee",//接口名称
formInfo:{
name:"",//姓名
phone:"",//电话
lgauth:1,//是否监察权限
wxuserid:"",//微信用户id
},//表单提交数据
formRules:{
name:[{ required: true, message: '姓名不能为空', trigger: ['blur','change'] }],
phone:[{ required: true, message: '电话不能为空', trigger: ['blur','change'] }],
lgauth:[{ required: true, message: '是否监察权限不能为空', trigger: ['blur','change'] }],
wxuserid:[{ required: true, message: '微信用户id不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
<siteForm ref="site" />
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
import siteForm from "./siteForm.vue"
export default {
mixins:[table],
data(){
return{
tablename:"employee",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "姓名",
dataIndex: "name",
},
{
title: "电话",
dataIndex: "phone",
},
{
title: "是否监察权限",
dataIndex: "lgauth",
customRender:(text)=>{return text==1?'':''}
},
{
title: "微信用户id",
dataIndex: "wxuserid",
},
{
title: "操作",
width: "220px",
customRender:(text, record)=>{
return (
<div>
<span class="redact mr" value={record} onClick={()=>this.onAuth(record)}>场所授权</span>
<tableActive record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
</div>
)
}
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
{type:'text',dataIndex:'name',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入姓名"},
]//表格查询条件
}
},
methods:{
onAuth(row){
this.$refs.site.onEditAuth(row)
}
},
components:{
show,
siteForm
}
}
</script>
\ No newline at end of file
<template>
<a-modal
title="场所授权"
:width="800"
:visible="formVisible"
@ok="handleOk"
@cancel="formVisible = false"
>
<div class="ff">
<Standardtable
:pagination="false"
:isSearch="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:loading="tableLoading"
:defaultCheckedKey="defaultCheckedKey"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
</div>
</a-modal>
</template>
<script>
import table from "@/mixins/table"
import {employeeSave} from "@/services/default"
export default {
mixins:[table],
data(){
return{
formVisible:false,
tablename:"waited",//接口地址 名称
tablecolumns:[
{
title: "ID",
dataIndex: "id",
},
{
title: "站点",
dataIndex: "name",
},
{
title: "编号",
dataIndex: "number",
width: '40%',
},
],//表头数据
tabledataSource:[],//表格数据
defaultCheckedKey:[],
rowId:""
}
},
methods:{
handleOk(){
let arr = []
if(this.selectedId && this.selectedId.length>0){
arr = this.selectedId
}else{
arr = this.defaultCheckedKey
}
employeeSave({id:this.rowId,video_site:arr.join(',')}).then(res=>{
console.log(res)
const {code,msg} = res.data
if(code == 0){
this.$parent.tableReload()
this.formVisible = false
}else{
this.$message.error(msg)
}
})
},
onEditAuth(row){
console.log(row)
this.selectedId = [] //选中id
this.selectedRows = [] //选中对象
this.rowId = row.id
this.defaultCheckedKey = row.video_site?row.video_site.split(',').map(Number):[]
this.formVisible = true
},
}
}
</script>
\ No newline at end of file
<template>
<span :style="{color:num<0?'#FF2222':'#18BE6A'}">{{name}}{{num*100}}%<a-icon :type="num<0?'arrow-down':'arrow-up'" /></span>
</template>
<script>
export default {
props:['num'],
computed:{
name:function(vm){
return vm.num<0?'下降':'提升'
}
}
}
</script>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1399 -656 )">
<path d="M 9.23958333333333 13.2395833333333 C 9.30208333333333 13.1770833333333 9.33333333333333 13.0972222222222 9.33333333333333 13 L 9.33333333333333 11 C 9.33333333333333 10.9027777777778 9.30208333333333 10.8229166666667 9.23958333333333 10.7604166666667 C 9.17708333333333 10.6979166666667 9.09722222222222 10.6666666666667 9 10.6666666666667 L 7 10.6666666666667 C 6.90277777777778 10.6666666666667 6.82291666666667 10.6979166666667 6.76041666666667 10.7604166666667 C 6.69791666666667 10.8229166666667 6.66666666666667 10.9027777777778 6.66666666666667 11 L 6.66666666666667 13 C 6.66666666666667 13.0972222222222 6.69791666666667 13.1770833333333 6.76041666666667 13.2395833333333 C 6.82291666666667 13.3020833333333 6.90277777777778 13.3333333333333 7 13.3333333333333 L 9 13.3333333333333 C 9.09722222222222 13.3333333333333 9.17708333333333 13.3020833333333 9.23958333333333 13.2395833333333 Z M 11.8697916666667 6.84375 C 11.9565972222222 6.58680555555556 12 6.30555555555556 12 6 C 12 5.38888888888889 11.8072916666667 4.82291666666667 11.421875 4.30208333333333 C 11.0364583333333 3.78125 10.5555555555556 3.37847222222222 9.97916666666667 3.09375 C 9.40277777777778 2.80902777777778 8.8125 2.66666666666667 8.20833333333333 2.66666666666667 C 6.52083333333333 2.66666666666667 5.23263888888889 3.40625 4.34375 4.88541666666667 C 4.23958333333333 5.05208333333333 4.26736111111111 5.19791666666667 4.42708333333333 5.32291666666667 L 5.80208333333333 6.36458333333333 C 5.85069444444445 6.40625 5.91666666666667 6.42708333333333 6 6.42708333333333 C 6.11111111111111 6.42708333333333 6.19791666666667 6.38541666666667 6.26041666666667 6.30208333333333 C 6.62847222222222 5.82986111111111 6.92708333333333 5.51041666666667 7.15625 5.34375 C 7.39236111111111 5.17708333333333 7.69097222222222 5.09375 8.05208333333333 5.09375 C 8.38541666666667 5.09375 8.68229166666667 5.18402777777778 8.94270833333333 5.36458333333333 C 9.203125 5.54513888888889 9.33333333333333 5.75 9.33333333333333 5.97916666666667 C 9.33333333333333 6.24305555555556 9.26388888888889 6.45486111111111 9.125 6.61458333333333 C 8.98611111111111 6.77430555555556 8.75 6.93055555555556 8.41666666666667 7.08333333333333 C 7.97916666666667 7.27777777777778 7.578125 7.578125 7.21354166666667 7.984375 C 6.84895833333333 8.390625 6.66666666666667 8.82638888888889 6.66666666666667 9.29166666666667 L 6.66666666666667 9.66666666666667 C 6.66666666666667 9.76388888888889 6.69791666666667 9.84375 6.76041666666667 9.90625 C 6.82291666666667 9.96875 6.90277777777778 10 7 10 L 9 10 C 9.09722222222222 10 9.17708333333333 9.96875 9.23958333333333 9.90625 C 9.30208333333333 9.84375 9.33333333333333 9.76388888888889 9.33333333333333 9.66666666666667 C 9.33333333333333 9.53472222222222 9.40798611111111 9.36284722222222 9.55729166666667 9.15104166666667 C 9.70659722222222 8.93923611111111 9.89583333333333 8.76736111111111 10.125 8.63541666666667 C 10.3472222222222 8.51041666666667 10.5173611111111 8.41145833333333 10.6354166666667 8.33854166666667 C 10.7534722222222 8.265625 10.9131944444444 8.14409722222222 11.1145833333333 7.97395833333333 C 11.3159722222222 7.80381944444444 11.4704861111111 7.63715277777778 11.578125 7.47395833333333 C 11.6857638888889 7.31076388888889 11.7829861111111 7.10069444444444 11.8697916666667 6.84375 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#1f74df" stroke="none" transform="matrix(1 0 0 1 1399 656 )" />
</g>
</svg>
\ No newline at end of file
<template>
<div class="home">
<div class="banner">
<div class="search">
<a-input-group compact>
<a-select default-value="请选择楼栋" style="width:180px">
<a-select-option value="Option1">一楼</a-select-option>
<a-select-option value="Option2">二楼</a-select-option>
<a-select-option value="Option2">三楼</a-select-option>
</a-select>
<a-select default-value="请选择楼层" style="width:180px">
<a-select-option value="Option1">一层</a-select-option>
<a-select-option value="Option2">二层</a-select-option>
</a-select>
<a-select default-value="请选择窗口号" style="width:180px">
<a-select-option :value="item.id" v-for="(item,index) in winlist" :key="index">{{item.name}}</a-select-option>
</a-select>
<a-input-search
placeholder="请输入工作人员姓名搜索"
enter-button="查看实时视频"
size="large"
@search="onSearch"
style="width:500px"
/>
</a-input-group>
</div>
<a-carousel autoplay>
<div class="banner-item">
<img src="./img/banner.jpg" alt />
</div>
<div class="banner-item">
<img src="./img/banner.jpg" alt />
</div>
</a-carousel>
<div class="banner-num flex_row flex_justify_b">
<div>
<p>今日离岗总次数(次)</p>
<h2>{{bannerNum.lg_count}}</h2>
</div>
<div>
<p>今日趴桌睡觉总次数(次)</p>
<h2>{{bannerNum.pz_count}}</h2>
</div>
<div>
<p>今日离开总次数(次)</p>
<h2>{{bannerNum.lk_count}}</h2>
</div>
<div>
<p>今日工作人员绿码比例(次)</p>
<h2>{{bannerNum.lmlv}}</h2>
</div>
</div>
</div>
<div class="box">
<h1>总体运行情况</h1>
</div>
<div class="content">
<a-row>
<a-col :md="8" :lg="6" :xl="6">
<div class="model">
<div class="model_one">
<h1>本月模型准确率</h1>
<a href="#">更多</a>
</div>
<div class="model_two">
<gaugePie style="height:220px" :option="modeloption"/>
</div>
<div class="model_three">
<span class="hint">较上一个月,环比</span>
<percentage class="figure" :num="anomaly.accuracy.hb_isaccuracy_lv"/>
<div class="icon">
<a-tooltip placement="topRight">
<template slot="title">本月当前准确率{{anomaly.accuracy.isaccuracy_lv*100}}%,上月同期准确率{{anomaly.accuracy.lastisaccuracy_lv*100}}%,环比<percentage :num="anomaly.accuracy.hb_isaccuracy_lv"/></template>
<div class="icon_img">
<img src="./img/question.svg" alt />
</div>
</a-tooltip>
</div>
</div>
</div>
</a-col>
<a-col :md="8" :lg="6" :xl="6">
<div class="model">
<div class="model_one">
<h1>本月异常窗口占比</h1>
<a href="#">更多</a>
</div>
<div class="model_two">
<gaugePie style="height:220px" :option="winoption"/>
</div>
<div class="detection">
<div class="detection_sum">
<span>监测窗口总数</span>
<h2>{{anomaly.ycwindow.window_count}}个</h2>
</div>
<div>
<span>异常窗口</span>
<h2>{{anomaly.ycwindow.ycwindow_count}}个</h2>
</div>
</div>
</div>
</a-col>
<a-col :md="8" :lg="6" :xl="6" class="three">
<div class="model">
<div class="model_one">
<h1>视频分析</h1>
<a href="#">更多</a>
</div>
<div class="video">
<div>
<p>本月异常总量</p>
<h2>{{anomaly.aifenx.yc_count}}条</h2>
</div>
<div class="model_three">
<span class="hint">较上一个月,环比</span>
<percentage class="figure" :num="anomaly.aifenx.hb_isaccuracy_lv"/>
<div class="icon">
<a-tooltip placement="topRight">
<template slot="title">本月当前异常总量{{anomaly.aifenx.yc_count}}条,上月异常总量{{anomaly.aifenx.lastyc_count}}条,环比<percentage :num="anomaly.aifenx.hb_isaccuracy_lv"/></template>
<div class="icon_img">
<img src="./img/question.svg" alt />
</div>
</a-tooltip>
</div>
</div>
</div>
<div class="window">
<p>本月异常窗口Top1</p>
<h2>{{anomaly.aifenx.window_top}}</h2>
</div>
<div class="department">
<p>本月异常部门Top1</p>
<h2>{{anomaly.aifenx.section_top}}</h2>
</div>
<div class="newest">
<p>本月最新异常窗口</p>
<span>{{$dictionaryValue('warn_alert',anomaly.aifenx.warn_alert)}}/{{anomaly.aifenx.window_num}}</span>
<span class="time">{{anomaly.aifenx.last_time}}</span>
</div>
</div>
<div class="bg">
<img src="./img/bg1.png" alt />
</div>
</a-col>
<a-col :md="0" :lg="6" :xl="6" class="four">
<div class="model">
<div class="model_one">
<h1>数据汇集</h1>
<a href="#">更多</a>
</div>
<div class="max_box">
<div class="min_box">
<p class="leave">离岗离开</p>
<div class="box_right">
<p>本月累计总次数</p>
<h2>{{anomaly.datahuiji.lg_count}}次</h2>
<div class="pop_up">
<div class="rate">
<span>环比</span>
<percentage class="figure" :num="anomaly.datahuiji.lghb_lv"/>
</div>
<a-tooltip placement="bottomRight">
<template slot="title">本月当前离开离岗总量{{anomaly.datahuiji.lastlg_count}}次,上月同期离开离岗总量{{anomaly.datahuiji.lg_count}}次,环比<percentage class="figure" :num="anomaly.datahuiji.lghb_lv"/></template>
<div class="icon_img">
<img src="./img/question.svg" alt />
</div>
</a-tooltip>
</div>
</div>
</div>
<div class="min_box">
<p class="leave">玩手机</p>
<div class="box_right">
<p>本月累计总次数</p>
<h2>{{anomaly.datahuiji.wsj_count}}次</h2>
<div class="pop_up">
<div class="rate">
<span>环比</span>
<percentage class="figure" :num="anomaly.datahuiji.wsjhb_lv"/>
</div>
<a-tooltip placement="bottomRight">
<template slot="title">本月当前玩手机总量{{anomaly.datahuiji.wsj_count}}次,上月同期玩手机总量{{anomaly.datahuiji.lastwsj_count}}次,环比<percentage class="figure" :num="anomaly.datahuiji.wsjhb_lv"/></template>
<div class="icon_img">
<img src="./img/question.svg" alt />
</div>
</a-tooltip>
</div>
</div>
</div>
<div class="min_box">
<p class="leave">趴桌睡觉</p>
<div class="box_right">
<p>本月累计总次数</p>
<h2>{{anomaly.datahuiji.sj_count}}次</h2>
<div class="pop_up">
<div class="rate">
<span>环比</span>
<percentage class="figure" :num="anomaly.datahuiji.sjhb_lv"/>
</div>
<a-tooltip placement="bottomRight">
<template slot="title">本月当前趴桌睡觉总量{{anomaly.datahuiji.sj_count}}次,上月同期趴桌睡觉总量{{anomaly.datahuiji.lastsj_count}}次,环比<percentage class="figure" :num="anomaly.datahuiji.sjhb_lv"/></template>
<div class="icon_img">
<img src="./img/question.svg" alt />
</div>
</a-tooltip>
</div>
</div>
</div>
</div>
</div>
<div class="bg">
<img src="./img/bg2.png" alt />
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
import {indexNum,indexAnomaly,windowListdata} from "@/services/default"
import {gaugePie} from "@/components/echats"
import percentage from "./components/percentage"
export default {
data(){
return{
bannerNum:{},
anomaly:{
accuracy:{},//本月模型准确率
ycwindow:{},//本月异常窗口占比
aifenx:{},//视频分析
datahuiji:{},//数据汇集
},
modeloption:{},//echats
winoption:{},//echats
winlist:[]
}
},
created(){
this.getindexNum()
this.getindexAnomaly()
windowListdata({page:1,size:1000000000000}).then(res=>{
const {data} = res.data
this.winlist = data.data
})
},
methods:{
onSearch(){
},
getindexNum(){
indexNum().then(res=>{
const {code,data,msg} = res.data
if(code == 0){
this.bannerNum = data
}else{
this.$message.error(msg)
}
})
},
getindexAnomaly(){
indexAnomaly().then(res=>{
const {code,data,msg} = res.data
if(code == 0){
this.anomaly = data
// 模型echarts
let modeloptions = {
series:[
{data:[
{
value: data.accuracy.isaccuracy_lv,
name: '准确率'
}
]}
]
}
this.modeloption = modeloptions
let winoptions = {
series:[
{data:[
{
value: data.ycwindow.ycwindow_lv,
name: '异常窗口占比'
}
]}
]
}
this.winoption = winoptions
}else{
this.$message.error(msg)
}
})
}
},
components:{
gaugePie,
percentage
}
}
</script>
<style lang="less" scoped>
.banner {
height: 350px;
position: relative;
.banner-item {
height: 350px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.banner-num {
position: absolute;
left: 0;
bottom: 0;
height: 90px;
width: 100%;
background: rgba(0, 0, 0, 0.2);
padding: 0 160px;
& > div {
border-left: 1px solid #fff;
padding-left: 50px;
}
p,
h2 {
color: #fff;
margin: 0;
}
p {
margin-bottom: 5px;
padding-top: 15px;
}
h2 {
font-size: 24px;
}
}
.search {
position: absolute;
z-index: 5;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
.ant-input-group.ant-input-group-compact {
width: 1050px;
/deep/.ant-select-selection--single {
height: 40px !important;
}
}
/deep/.ant-btn-primary {
background-color: #ff8d18;
border-color: #ff8d18;
}
}
}
.box {
h1 {
text-align: center;
margin-top: 38px;
font-size: 20px;
font-weight: bolder;
}
}
.content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.ant-col-xl-6 {
background-color: rgba(255, 255, 255, 1);
width: 280px;
height: 400px;
margin-left: 20px;
margin-top: 20px;
border-radius: 16px;
.model {
padding-left: 20px;
padding-right: 20px;
.model_one {
display: flex;
margin-top: 20px;
h1 {
flex: 1;
font-size: 13px;
color: #333;
font-weight: bolder;
}
a {
font-size: 14px;
color: #1f74df;
}
}
.model_two {
height: 220px;
}
.model_three {
display: flex;
margin-top: 40px;
.hint {
color: #666;
font-size: 16px;
}
.figure {
font-size: 16px;
color: #18be6a;
padding-right: 8px;
}
.icon {
width: 16px;
height: 16px;
line-height: 16px;
.icon_img img {
width: 16px;
height: 16px;
}
}
}
.detection {
margin-top: 25px;
display: flex;
span {
font-size: 14px;
color: #888;
}
.detection_sum {
flex: 1;
}
}
.video {
display: flex;
margin-top: 10px;
line-height: 20px;
p {
font-size: 14px;
color: #888;
}
h2 {
font-size: 32px;
color: #1f74df;
margin-right: 30px;
}
.model_three {
margin-top: 42px;
}
}
.window,
.department,
.newest {
margin-top: 24px;
p {
font-size: 14px;
color: #888;
}
h2,
span {
font-size: 18px;
color: #202020;
font-weight: bold;
line-height: 15px;
}
}
.newest {
.time {
font-size: 14px !important;
color: #888 !important;
font-weight: normal !important;
margin-left: 25px;
z-index: 5;
}
}
.max_box {
display: flex;
flex-wrap: wrap;
.min_box {
width: 250px;
height: 120px;
display: flex;
margin-right: 20px;
margin-top: 20px;
border: 1px solid rgba(228, 230, 238, 1);
border-radius: 8px;
background: linear-gradient(
123.814623372187deg,
rgba(255, 255, 255, 1) 50%,
rgba(240, 244, 255, 1) 95%
);
p {
font-size: 16px;
color: #1f74df;
font-weight: bold;
}
.leave {
width: 120px;
height: 120px;
padding-top: 45px;
padding-right: 25px;
padding-left: 15px;
}
.box_right {
line-height: 15px;
padding-top: 22px;
p,
span {
font-size: 14px;
color: #888;
font-weight: normal;
}
.pop_up {
display: flex;
.rate {
margin-right: 5px;
span {
font-size: 12px;
}
.rate_fig {
color: red;
}
}
}
}
}
}
}
.bg {
position: absolute;
bottom: 0;
right: 0;
img {
width: 180px;
height: 204px;
opacity: 0.5;
}
}
}
.three {
width: 400px !important;
}
.four {
width: 580px !important;
}
}
</style>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15 p-b-15 viewbox">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<exportFile slot="search-add">
<a-button type="primary">导出文件</a-button>
</exportFile>
<div slot="search-del"></div>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./pageshow"
import {windowListdata} from "@/services/default"
export default {
mixins:[table],
data(){
return{
tablename:"alert",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "报警类型",
dataIndex: "warn_alert",
},
{
title: "工作人姓名",
dataIndex: "workman_name",
},
{
title: "部门名",
dataIndex: "section_name",
},
{
title: "窗口",
dataIndex: "window_name",
},
{
title: "手机号",
dataIndex: "workman_phone",
},
{
title: "发生时间",
dataIndex: "out_time",
},
{
title: "时长",
dataIndex: "duration",
},
{
title: "报警时间",
dataIndex: "last_time",
},
{
title: "是否处理",
dataIndex: "have_process",
customRender:(v)=><div class={v==0?'danger-color':''}>{v==0?'未处理':'已处理'}</div>
},
{
title: "操作",
width: "200px",
customRender:(text, record)=><tableActive show={true} edit={false} record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel} onShow={this.onPageShow}/>
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
{type:'checkbox',dataIndex:'have_process',span:5,width:120,dictionaries:[{label:'只看未处理',value:0}]},
{type:'select',dataIndex:'warn_alert',span:5,width:150,dictionaries:this.$dictionaries('warn_alert'),placeholder:"请输入报警类型"},
{type:'text',dataIndex:'workman_name',span:5,width:180,placeholder:"请输入工作人姓名"},
{type:'select',dataIndex:'window_id',span:5,width:150,dictionaries:[],placeholder:"请输入窗口"},
{type:'range',dataIndex:'time',span:5,width:220,placeholder:"请输入报警时间"},
]//表格查询条件
}
},
created(){
// 查询窗口
windowListdata({page:1,size:100000}).then(res=>{
const {code,data,msg} = res.data
if(code == 0){
console.log(data)
let windictionaries = data.data.map(v=>{
return {label:v.name,value:v.id}
})
this.columnsSearch[3] = {type:'select',dataIndex:'window_id',span:5,width:150,dictionaries:windictionaries,placeholder:"请输入窗口"}
}else{
this.$message.error(`窗口字典:${msg}`)
}
})
},
methods:{
onPageShow(row){
this.$refs.pageshow.onShow(row)
}
},
components:{
show
}
}
</script>
\ No newline at end of file
<template>
<a-drawer
title="详情"
:width="450"
placement="right"
:visible="visible"
@close="visible = false"
>
<div class="p-tit">报警类型:{{$dictionaryValue('warn_alert',info.warn_alert)}}</div>
<div class="p-w">
<div class="p-photo">
<images :src="info.workman_photo"/>
</div>
<h2 class="primary-color">{{info.window_name}}</h2>
<div class="p-w-r flex_row">
<div class="p-l">工作人员:</div>
<div class="p-v">{{info.workman_name}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">工号:</div>
<div class="p-v">{{info.workman_number}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属部门:</div>
<div class="p-v">{{info.section_name}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">联系电话:</div>
<div class="p-v">{{info.workman_phone}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属楼栋:</div>
<div class="p-v">{{info.window_building}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属楼层:</div>
<div class="p-v">{{info.window_lv}}</div>
</div>
</div>
<div class="p-w">
<div class="p-w-r flex_row">
<div class="p-l">发生时间:</div>
<div class="p-v">{{info.out_time}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">时长:</div>
<div class="p-v">{{info.duration}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">报警时间:</div>
<div class="p-v">{{info.last_time}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">报警附件:</div>
<div class="p-v flex_row"><thumbImage v-for="(item,index) in info.workman_picture" :key="index" :src="info.workman_picture" :index="index" style="margin-right:5px"/></div>
</div>
</div>
<div class="p-w">
<div class="p-w-r flex_row">
<div class="p-l">是否处理:</div>
<div class="p-v" :class="{'danger-color':info.have_process == 0}">{{info.have_process == 0?'未处理':"已处理"}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">处理意见:</div>
<div class="p-v">{{info.remark}}</div>
</div>
</div>
<div style="height:53px"></div>
<div class="footer">
<a-popconfirm
title="删除后不可恢复,确定要删除吗?"
ok-text="确定"
cancel-text="再想想"
@confirm="$parent.OnTableDel(row)"
>
<a-button type="danger">删除</a-button>
</a-popconfirm>
<a-button style="margin-left:10px" @click="visible = false">关闭</a-button>
</div>
</a-drawer>
</template>
<script>
import {alertInfo} from "@/services/default"
export default {
data(){
return{
visible:false,
info:{},
row:{}
}
},
methods:{
onShow(row){
this.row = row
this.visible = true
alertInfo({id:row.id}).then(res=>{
console.log(res)
const {code,data,msg} = res.data
if(code == 0){
this.info = data
}else{
this.$message.error(msg)
}
})
}
}
}
</script>
<style lang="less" scoped>
.footer{
position: absolute;
left: 0;
bottom: 0;
right: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
background: #fff;
}
.p-tit{
padding: 10px 15px;
color: #ff4d4f;
background: #fff1f1;
font-weight: blod;
border-left: 4px solid #ff4d4f;
}
.p-w{
margin-top: 20px;
background: #f1f7fd;
border-radius: 6px;
padding: 10px;
position: relative;
.p-w-r{
margin-bottom: 10px;
}
.p-l{
width: 80px;
text-align: right;
}
h2{
font-weight: bold;
}
.p-photo{
position: absolute;
top:20px;
right: 20px;
width: 100px;
height: 120px;
img{
display: block;
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
<template>
<a-layout class="list_content">
<a-layout-sider class="list_left" width="220px">
<div class="left">
<div class="title">请选择窗口</div>
<a-input
autocomplete="autocomplete"
placeholder="请输入窗口名搜索"
onfocus="this.placeholder=''"
onblur="this.placeholder='请输入窗口名搜索'"
style="width:160px;"
allow-clear
/>
<div class="tree">
<a-tree
v-model="checkedKeys"
checkable
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:selected-keys="selectedKeys"
:tree-data="treeData"
@expand="onExpand"
@select="onSelect"
/>
</div>
</div>
</a-layout-sider>
<a-layout-content>
<div class="list_right">
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
<div class="right">
<p>1号窗口</p>
</div>
</div>
</a-layout-content>
</a-layout>
</template>
<script>
const treeData = [
{
title: '四川省政务服务中心',
key: '0-0',
children: [
{
title: '四川省政务服务中心',
key: '0-0-0',
children: [
{ title: '1号窗口11111', key: '0-0-0-1' },
{ title: '2号窗口', key: '0-0-0-2' },
],
},
{
title: '社保局',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
{
title: '人社局',
key: '0-0-2',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
],
},
];
export default {
data () {
return {
expandedKeys: ['0-0-0', '0-0-1'],
autoExpandParent: true,
checkedKeys: ['0-0-0'],
selectedKeys: [],
treeData,
};
},
watch: {
checkedKeys (val) {
console.log('onCheck', val);
},
},
methods: {
onChange (value) {
console.log(value);
},
onExpand (expandedKeys) {
console.log('onExpand', expandedKeys);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.expandedKeys = expandedKeys;
this.autoExpandParent = false;
},
onCheck (checkedKeys) {
console.log('onCheck', checkedKeys);
this.checkedKeys = checkedKeys;
},
onSelect (selectedKeys, info) {
console.log('onSelect', info);
this.selectedKeys = selectedKeys;
},
}
}
</script>
<style lang="less" scoped>
.list_content {
height: 100%;
.list_left {
height: 100%;
background-color: #fff;
.left {
margin-top: 20px;
margin-left: 20px;
.title {
font-family: '微软雅黑', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
margin-bottom: 20px;
}
.tree {
margin-top: 20px;
/deep/.ant-tree > li:first-child {
font-size: 13px;
}
}
}
}
.list_right {
display: flex;
flex-wrap: wrap;
background-color: #fff;
.right {
width: 419px;
height: 202px;
background-color: rgba(217, 217, 217, 1);
border-width: 1px;
border-style: solid;
border-color: rgba(199, 199, 199, 1);
text-align: center;
line-height: 202px;
p {
font-weight: 400;
font-size: 16px;
color: #aaaaaa;
}
}
}
}
/deep/.ant-layout.ant-layout-has-sider > .ant-layout,
.ant-layout.ant-layout-has-sider > .ant-layout-content {
overflow-x: hidden;
overflow-y: scroll;
}
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="角色名" prop="name">
<w-input v-model="formInfo.name" placeholder="请输入角色名"/>
</a-form-model-item>
<a-form-model-item label="说明" prop="sumarry">
<w-input type="textarea" v-model="formInfo.sumarry" placeholder="请输入说明"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"position",//接口名称
formInfo:{
name:"",//角色名
sumarry:"",//说明
},//表单提交数据
formRules:{
name:[{ required: true, message: '角色名不能为空', trigger: ['blur','change'] }],
sumarry:[{ required: true, message: '说明不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
<menuForm ref="menu"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
import menuForm from "./menuForm"
export default {
mixins:[table],
data(){
return{
tablename:"position",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "角色名",
dataIndex: "name",
},
{
title: "说明",
dataIndex: "sumarry",
},
{
title: "操作",
width: "220px",
customRender:(text, record)=>{
return (
<div>
<span class="redact mr" value={record} onClick={()=>this.onAuth(record)}>功能授权</span>
<tableActive record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
</div>
)
}
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
]//表格查询条件
}
},
methods:{
onAuth(row){
this.$refs.menu.onEditAuth(row)
}
},
components:{
show,
menuForm
}
}
</script>
\ No newline at end of file
<template>
<a-modal
title="功能授权"
:width="800"
:visible="formVisible"
@ok="handleOk"
@cancel="formVisible = false"
>
<div class="ff">
<Standardtable
:pagination="false"
:isSearch="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:loading="tableLoading"
:defaultCheckedKey="defaultCheckedKey"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
</div>
</a-modal>
</template>
<script>
import table from "@/mixins/table"
import {positionauth} from "@/services/default"
export default {
mixins:[table],
data(){
return{
formVisible:false,
tablename:"auth",//接口地址 名称
tablecolumns:[
{
title: "ID",
dataIndex: "id",
},
{
title: "菜单名称",
dataIndex: "name",
},
{
title: "路由",
dataIndex: "router",
width: '40%',
},
],//表头数据
tabledataSource:[],//表格数据
defaultCheckedKey:[],
rowId:""
}
},
methods:{
handleOk(){
let arr = []
if(this.selectedId && this.selectedId.length>0){
arr = this.selectedId
}else{
arr = this.defaultCheckedKey
}
positionauth({id:this.rowId,auth_id:arr.join(',')}).then(res=>{
console.log(res)
const {code,msg} = res.data
if(code == 0){
this.$parent.tableReload()
this.formVisible = false
}else{
this.$message.error(msg)
}
})
},
// 重写数据返回后函数
tableAfterData(data){
this.deeps(data.data)
return data
},
onEditAuth(row){
this.selectedId = [] //选中id
this.selectedRows = [] //选中对象
this.rowId = row.id
this.defaultCheckedKey = row.auth_id?row.auth_id.split(',').map(Number):[]
this.formVisible = true
},
deeps(d){
return d.map(v=>{
if(v.children && v.children.length==0){
delete v.children
}else{
v.children = this.deeps(v.children)
}
return v
})
}
}
}
</script>
\ No newline at end of file
<template>
<div> 1</div>
</template>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:isSearch="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
</div>
</template>
<script>
import table from "@/mixins/table"
export default {
mixins:[table],
data(){
return{
tablename:"log",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "用户",
dataIndex: "account",
},
{
title: "操作时间",
dataIndex: "create_time",
},
{
title: "操作类型",
dataIndex: "data_type",
},
{
title: "操作详情",
dataIndex: "summary",
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
]//表格查询条件
}
},
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
<siteForm ref="site" />
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./show"
import siteForm from "./siteForm.vue"
export default {
mixins:[table],
data(){
return{
tablename:"user",//接口地址
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "用户名",
dataIndex: "user_name",
},
{
title: "用户账号",
dataIndex: "account",
},
{
title: "用户电话",
dataIndex: "mobile",
},
{
title: "创建时间",
dataIndex: "create_time",
},
{
title: "更新时间",
dataIndex: "update_time",
},
{
title: "登陆时间",
dataIndex: "login_time",
},
{
title: "操作",
width: "220px",
customRender:(text, record)=>{
return (
<div>
<span class="redact mr" value={record} onClick={()=>this.onAuth(record)}>场所授权</span>
<tableActive record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
</div>
)
}
},
],//表头数据
columnsSearch:[
{type:'text',dataIndex:'keyword',span:12,width:150,placeholder:"请输入搜索名称"}
]//表格查询条件
}
},
methods:{
onAuth(row){
this.$refs.site.onEditAuth(row)
}
},
components:{
show,
siteForm
}
}
</script>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="用户名" prop="user_name">
<w-input v-model="formInfo.user_name" placeholder="请输入用户名"/>
</a-form-model-item>
<a-form-model-item label="用户账号" prop="account">
<w-input v-model="formInfo.account" placeholder="请输入用户账号"/>
</a-form-model-item>
<a-form-model-item label="账号密码" prop="password">
<w-input type="password" v-model="formInfo.password" placeholder="请输入用户账号"/>
</a-form-model-item>
<a-form-model-item label="用户电话" prop="mobile">
<w-input v-model="formInfo.mobile" placeholder="请输入用户电话"/>
</a-form-model-item>
<!-- <a-form-model-item label="上传图片" prop="mobile">
<w-upload filetype="images" :limit="1"/>
</a-form-model-item>
<a-form-model-item label="上传多图" prop="mobile">
<w-upload filetype="images" :limit="2"/>
</a-form-model-item>
<a-form-model-item label="上传文件" prop="mobile">
<w-upload filetype="file" :limit="2"/>
</a-form-model-item>
<a-form-model-item label="上传文件" prop="mobile">
<w-upload filetype="file" :limit="1" :multiple="false"/>
</a-form-model-item> -->
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"user",
formInfo:{
user_name:"",//用户名
account:"",//用户账号
password:"",//密码
mobile:"",//用户电话
},//表单提交数据
formRules:{
user_name:[{ required: true, message: '用户名不能为空', trigger: ['blur','change'] }],
account:[{ required: true, message: '用户账号不能为空', trigger: ['blur','change'] }],
password:[{ required: true, message: '账号密码不能为空', trigger: ['blur','change'] }],
mobile:[{ required: true, message: '用户电话不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增菜单"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑菜单"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<a-modal
title="场所授权"
:width="800"
:visible="formVisible"
@ok="handleOk"
@cancel="formVisible = false"
>
<div class="ff">
<Standardtable
:pagination="false"
:isSearch="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:loading="tableLoading"
:defaultCheckedKey="defaultCheckedKey"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
</div>
</a-modal>
</template>
<script>
import table from "@/mixins/table"
import {usersite} from "@/services/default"
export default {
mixins:[table],
data(){
return{
formVisible:false,
tablename:"waited",//接口地址 名称
tablecolumns:[
{
title: "ID",
dataIndex: "id",
},
{
title: "站点",
dataIndex: "name",
},
{
title: "编号",
dataIndex: "number",
width: '40%',
},
],//表头数据
tabledataSource:[],//表格数据
defaultCheckedKey:[],
rowId:""
}
},
methods:{
handleOk(){
let arr = []
if(this.selectedId && this.selectedId.length>0){
arr = this.selectedId
}else{
arr = this.defaultCheckedKey
}
usersite({user_id:this.rowId,siteid:arr.join(',')}).then(res=>{
console.log(res)
const {code,msg} = res.data
if(code == 0){
this.$parent.tableReload()
this.formVisible = false
}else{
this.$message.error(msg)
}
})
},
onEditAuth(row){
console.log(row)
this.selectedId = [] //选中id
this.selectedRows = [] //选中对象
this.rowId = row.id
this.defaultCheckedKey = row.user_site?row.user_site.split(',').map(Number):[]
this.formVisible = true
},
}
}
</script>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="版本号" prop="number">
<w-input v-model="formInfo.number" placeholder="请输入版本号"/>
</a-form-model-item>
<a-form-model-item label="版本说明" prop="sumarry">
<w-input type="textarea" v-model="formInfo.sumarry" placeholder="请输入版本说明"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"edition",//接口名称
formInfo:{
number:"",//版本号
sumarry:"",//版本说明
},//表单提交数据
formRules:{
number:[{ required: true, message: '版本号不能为空', trigger: ['blur','change'] }],
sumarry:[{ required: true, message: '版本说明不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<div slot="search-del"></div>
<div slot="search-more"></div>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
export default {
mixins:[table],
data(){
return{
tablename:"edition",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "版本号",
dataIndex: "number",
},
{
title: "版本说明",
dataIndex: "sumarry",
},
{
title: "更新时间",
dataIndex: "create_time",
},
// {
// title: "操作",
// width: "200px",
// customRender:(text, record)=><tableActive record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
// },
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
]//表格查询条件
}
},
components:{
show
}
}
</script>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="指标简称" prop="summary">
<w-input v-model="formInfo.summary" placeholder="请输入指标简称"/>
</a-form-model-item>
<a-form-model-item label="指标详情" prop="standard">
<w-input v-model="formInfo.standard" placeholder="请输入指标详情"/>
</a-form-model-item>
<a-form-model-item label="指标分值" prop="score">
<w-input v-model.number="formInfo.score" placeholder="请输入指标分值" suffix="分"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
tablename:"role",//接口名称
formInfo:{
standard:"",//指标详情
summary:"",//指标简称
score:0,//指标分值
},//表单提交数据
formRules:{
standard:[{ required: true, message: '指标详情不能为空', trigger: ['blur','change'] }],
summary:[{ required: true, message: '指标简称不能为空', trigger: ['blur','change'] }],
score:[{ required: true, message: '指标分值不能为空', trigger: ['blur','change'] }],
},//表单验证
title:"提示"
}
},
methods:{
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
},
// 编辑
onEdit(row){
this.title = "编辑"
this.formVisible = true
let editObj = {id:row.id}
Object.keys(this.formInfo).forEach(v=>{
editObj[v] = row[v]
})
this.formInfo = editObj
}
}
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15 p-b-15">
<a-row :gutter="20">
<a-col :span="4">
<h2>分类管理</h2>
<div class="n-item" :class="{'active':checkId == item}" v-for="(item,index) in flList" :key="index" @click="onNav(item)">{{item}}</div>
</a-col>
<a-col :span="20">
<h2>指标管理</h2>
<tables :checkId="checkId" v-if="checkId"/>
</a-col>
</a-row>
</div>
</template>
<script>
import {listrole} from "@/services/default"
import tables from "./table"
export default {
data(){
return {
checkId:'',
flList:[]
}
},
created(){
listrole().then(res=>{
const {code,msg,data} = res.data
if(code == 0){
this.flList = data
this.checkId = data[0]
}else{
this.$message.error(msg)
}
})
},
methods:{
onNav(id){
this.checkId = id
}
},
components:{
tables
}
}
</script>
<style lang="less" scoped>
h2{
font-size: 16px;
}
.n-item{
margin-top: 10px;
padding:10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
cursor: pointer;
&.active{
color: #fff;
background: #1890ff;
}
}
</style>
\ No newline at end of file
<template>
<div class="ff">
<Standardtable
:isSearch="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
export default {
mixins:[table],
props:['checkId'],
data(){
return{
tablename:"role",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "指标详情",
dataIndex: "standard",
},
{
title: "指标简称",
dataIndex: "summary",
},
{
title: "指标分值",
dataIndex: "score",
},
{
title: "操作",
width: "200px",
customRender:(text, record)=><tableActive del={false} record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[],//表格查询条件
}
},
watch:{
checkId:{
handler:function(){
this.tableReload()
},
}
},
methods:{
// 重写数据请求之前
tableBeforeData(data){
data['class'] = this.checkId
return data
}
},
components:{
show
}
}
</script>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15 p-b-15">
<a-row :gutter="20">
<a-col :span="18">
<div class="search">
<a-row :gutter="5">
<w-input :span="4" v-model="tablequery.name" placeholder="请输入窗口名"/>
<w-input :span="4" type="select" v-model="tablequery.section_id" :dictionaries="sectionList" placeholder="请选择部门"/>
<a-col :span="2">
<a-button type="primary" @click="tableReload">查询</a-button>
</a-col>
</a-row>
</div>
<div class="win-type">
<span v-for="(item,index) in countlist" :key="index" :style="{color:item.color}">{{item.label}}{{item.count}}</span>
</div>
<div class="win-table" v-if="tabledataSource.length>0">
<a-row type="flex" align="middle">
<a-col :span="4" class="col" v-for="(item) in tabledataSource" :key="item.id">
<div class="win-item flex_row flex_align_c flex_justify_c" :style="{background:$dictionaryValue('video_online',item.video_online,'obj').color}" @click="onpageshow(item)">
<div>
<h3>{{item.name}}</h3>
<p>窗口编号:{{item.number}}</p>
</div>
</div>
</a-col>
</a-row>
</div>
<a-empty v-else/>
</a-col>
<a-col :span="6">
<show ref="pageshow"/>
</a-col>
</a-row>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./pageshow"
import {sectionListdata} from "@/services/default"
export default {
mixins:[table],
data(){
return{
tablename:"windowinfo",//接口地址 名称
tablequery:{
section_id:"",//部门id
name:""//窗口名
},
countlist:[],//窗口状态
sectionList:[]
}
},
created(){
sectionListdata().then(res=>{
const {code,data,msg} = res.data
if(code == 0){
this.sectionList = data.map(v=>{
v['label'] = v.name
v['value'] = v.id
return v
})
}else{
this.$message.error(`部门字典错误:${msg}`)
}
})
},
methods:{
// 重写接口提交之前数据
tableBeforeData(data){
data.size = 10000
return data
},
// 重写接口返回后数据
tableAfterData(data){
console.log(data)
if(data.code == 0){
const {count} = data.data
this.countlist = count
}
return data
},
// 详情
onpageshow(row){
this.$refs.pageshow.onShow(row)
}
},
components:{
show
}
}
</script>
<style lang="less" scoped>
.win-type{
padding: 5px;
background: #f6f6f9;
margin: 10px 0;
span{
display: inline-block;
margin-right: 12px;
position: relative;
cursor:pointer
}
}
.win-table{
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
.col{
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
padding:10px;
box-sizing: border-box;
}
.win-item{
cursor: pointer;
border-radius: 8px;
height: 80px;
text-align: center;
color: #fff;
h3{
color: #fff;
}
p{
margin: 0;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<div class="camera"></div>
<div class="pageshow">
<div class="photo">
<images :src='formInfo.photo' alt="" />
</div>
<div class="userinfo">
<div class="text-row">
<div class="lable">姓名</div>
<div class="val">{{formInfo.name?formInfo.name:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">工号</div>
<div class="val">{{formInfo.number?formInfo.number:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">部门</div>
<div class="val">{{formInfo.section_name?formInfo.section_name:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">电话</div>
<div class="val">{{formInfo.phone?formInfo.phone:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">站点名</div>
<div class="val">{{formInfo.sitename?formInfo.sitename:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">窗口号</div>
<div class="val">{{formInfo.window_number?formInfo.window_number:'--'}}</div>
</div>
<div class="text-row">
<div class="lable">受理业务</div>
<div class="val">{{formInfo.name?formInfo.name:'--'}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {windowInfo} from "@/services/default"
export default {
data(){
return{
formInfo:{},
}
},
methods:{
// 编辑
onShow(row){
console.log(row)
windowInfo({id:row.id}).then(res=>{
const {code,data,msg} = res.data
if(code == 0){
this.formInfo = data
}else{
this.$message.error(msg)
}
})
}
}
}
</script>
<style lang="less" scoped>
.pageshow{
position: relative;
padding: 10px;
background: #f0f2f5;
.photo{
position: absolute;
left: 10px;
top: 10px;
height: 240px;
width: 150px;
img{
display: block;
width: 100%;
height: 100%;
}
}
.userinfo{
margin-left: 160px;
height: 240px;
background: #fff;
padding:10px;
box-sizing: border-box;
border-radius: 6px;
}
.text-row{
&+.text-row{
margin-top: 10px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="ff p-t-15 p-l-15 p-r-15">
<Standardtable
:active="false"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./pageshow"
export default {
mixins:[table],
data(){
return{
tablename:"queue",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "业务名",
dataIndex: "business",
},
{
title: "群众手机号",
dataIndex: "phone",
},
{
title: "办事群众",
dataIndex: "name",
},
{
title: "群众身份证号",
dataIndex: "idcard",
},
{
title: "办事开始时间",
dataIndex: "calltime",
},
{
title: "结束时间",
dataIndex: "endtime",
},
{
title: "窗口名",
dataIndex: "windowname",
},
{
title: "部门名",
dataIndex: "sectionname",
},
{
title: "操作",
width: "200px",
customRender:(text, record)=><a record={record}>查看视频</a>
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
{type:'text',dataIndex:'business',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入业务名"},
{type:'text',dataIndex:'idcard',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入群众身份证号"},
{type:'text',dataIndex:'windowname',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入窗口名"},
]//表格查询条件
}
},
components:{
show
}
}
</script>
\ No newline at end of file
<template>
<div>视频播放</div>
</template>
\ No newline at end of file
<template>
<a-modal
:width="1000"
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<a-form-model
ref="ruleForm"
:model="formInfo"
:rules="formRules"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<div class="form-title">窗口信息</div>
<a-row>
<a-col :span="8">
<a-form-model-item label="窗口名称" prop="window.name">
<w-input v-model="formInfo.window.name" placeholder="请输入窗口名"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="窗口编号" prop="window.number">
<w-input v-model="formInfo.window.number" placeholder="请输入窗口编号"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属部门" prop="window.section_id">
<w-input type="select" showSearch :dictionaries="sectionListInfo" v-model="formInfo.window.section_id" placeholder="请输入部门id"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属楼层" prop="window.lv">
<w-input v-model.number="formInfo.window.lv" placeholder="请输入楼层" suffix="层"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属楼栋" prop="window.building">
<w-input v-model.number="formInfo.window.building" placeholder="请输入楼栋" suffix="栋"/>
</a-form-model-item>
</a-col>
</a-row>
<div class="form-title">工作人员信息</div>
<a-row>
<a-col :span="8">
<a-form-model-item label="工作人员" prop="workman.name">
<w-input v-model="formInfo.workman.name" placeholder="请输入工作人员"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="工号" prop="workman.number">
<w-input v-model="formInfo.workman.number" placeholder="请输入工号"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="电话" prop="workman.phone">
<w-input v-model="formInfo.workman.phone" placeholder="请输入电话"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="照片" prop="workman.photo">
<w-upload v-model="formInfo.workman.photo" filetype="images"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="是否在中心" prop="workman.in_flag">
<w-input type="switch" v-model="formInfo.workman.in_flag"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="是否需要考勤" prop="workman.need_attence">
<w-input type="switch" v-model="formInfo.workman.need_attence"/>
</a-form-model-item>
</a-col>
</a-row>
<div class="form-title">监测信息</div>
<a-row>
<a-col :span="8">
<a-form-model-item label="是否监测" prop="window.video_off">
<w-input type="switch" v-model="formInfo.window.video_off"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-model-item label="上午监测时间" prop="window.kq_amstart_time" :label-col="{span:6}" :wrapper-col='{span:12}'>
<a-time-picker v-model="formInfo.window.kq_amstart_time" valueFormat="HH:mm:ss"/>
<span style="padding:0 5px">~</span>
<a-time-picker v-model="formInfo.window.kq_amend_time" valueFormat="HH:mm:ss"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="下午监测时间" prop="window.kq_pmstart_time">
<a-time-picker v-model="formInfo.window.kq_pmstart_time" valueFormat="HH:mm:ss"/>
<span style="padding:0 5px">~</span>
<a-time-picker v-model="formInfo.window.kq_pmend_time" valueFormat="HH:mm:ss"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import form from "@/mixins/form"
import {sectionListdata,kqsetInfo} from "@/services/default"
export default {
mixins:[form],
props:{
labelCol:{
type:Number,
default:7,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
// let validatortime1 = (rule, value, callback) =>{
// if(value && this.formInfo.window.kq_amend_time){
// callback();
// }else{
// callback(new Error('请选择上午检测时间'))
// }
// }
// let validatortime2 = (rule, value, callback) =>{
// if(value && this.formInfo.window.kq_pmend_time){
// callback();
// }else{
// callback(new Error('请选择下午检测时间'))
// }
// }
return{
sectionListInfo:[],//部门字典
tablename:"window",//接口名称
formInfo:{
window:{
name:"",//窗口名
number:"",//窗口编号
section_id:undefined,//部门id
building:undefined,//楼栋
lv:undefined,//楼层
video_off:0,//是否监测
kq_amstart_time:"",//上午开始时间
kq_amend_time:"",//上午结束时间
kq_pmstart_time:"",//下午开始时间
kq_pmend_time:"",//下午结束时间
},
workman:{
name:"",//工作人员
number:"",//工号
phone:"",//电话
photo:"",//照片
in_flag:0,//是否在政务中心,1在,0不在
need_attence:0//是否需要考勤,1需要,0不需要
}
},//表单提交数据
formRules:{
window:{
name:[{ required: true, message: '窗口名不能为空', trigger: ['blur','change'] }],
number:[{ required: true, message: '窗口编号不能为空', trigger: ['blur','change'] }],
building:[{ required: true, message: '楼栋不能为空', trigger: ['blur','change'] }],
lv:[{ required: true, message: '楼层不能为空', trigger: ['blur','change'] }],
section_id:[{ required: true, message: '部门id不能为空', trigger: ['blur','change'] }],
},
workman:{
name:[{ required: true, message: '工作人员不能为空', trigger: ['blur','change'] }],
number:[{ required: true, message: '工号不能为空', trigger: ['blur','change'] }],
phone:[{ required: true, message: '电话不能为空', trigger: ['blur','change'] }],
photo:[{ required: true, message: '照片不能为空', trigger: ['blur','change'] }],
}
},//表单验证
title:"提示",
windowOld:{}//保存原检测时间,检测是否有更新
}
},
created(){
this.sectionList()
},
methods:{
// 查询部门字典
sectionList(){
sectionListdata().then(res=>{
const {code,data} = res.data
if(code == 0){
let arr = []
data.forEach(v=>{
arr.push({label:v.name,value:v.id})
})
this.sectionListInfo = arr
}
})
},
//重写数据提交之前
BeforeEachData(data){
let cloneData = JSON.parse(JSON.stringify(data))
const {kq_amstart_time,kq_amend_time,kq_pmstart_time,kq_pmend_time} = cloneData.window
const {windowOld} = this
if(kq_amstart_time == windowOld.kq_amstart_time){
delete cloneData.window.kq_amstart_time
}
if(kq_amend_time == windowOld.kq_amend_time){
delete cloneData.window.kq_amend_time
}
if(kq_pmstart_time == windowOld.kq_pmstart_time){
delete cloneData.window.kq_pmstart_time
}
if(kq_pmend_time == windowOld.kq_pmend_time){
delete cloneData.window.kq_pmend_time
}
return cloneData
},
// 保存
handleOk(){
this.formSave()
},
// 新增
onAdd(){
this.resetForm()//初始化表单
this.formInfo.id && this.$delete(this.formInfo,'id')
this.title = "新增"
this.formVisible = true
// 查询统一检测时间
kqsetInfo().then(res=>{
const {code,data} = res.data
if(code==0 && data){
this.formInfo.window.kq_amend_time = data.kq_amend_time || ''
this.formInfo.window.kq_amstart_time = data.kq_amstart_time || ''
this.formInfo.window.kq_pmend_time = data.kq_pmend_time || ''
this.formInfo.window.kq_pmstart_time = data.kq_pmstart_time || ''
this.windowOld = data
}
})
},
// 编辑
async onEdit(row){
this.resetForm()//初始化表单
this.title = "编辑"
this.formVisible = true
await this.onPageShow(row.id)
this.windowOld = JSON.parse(JSON.stringify(this.formInfo.window))
}
}
}
</script>
\ No newline at end of file
<template>
<a-modal
:title="title"
:visible="formVisible"
@cancel="formVisible = false"
>
<div slot="footer">
<a-button @click="formVisible = false">取消</a-button>
<a-button type="primary" :loading="formConfirmLoading" @click="handleOk">确定</a-button>
</div>
<slot>
<p style="color:red"><a-icon type="info-circle" /> 温馨提示:该功能将统一改变的列表中所有窗口(已单独配置窗口除外)的监测时间,请谨慎操作。</p>
<a-form-model
ref="formInfoTime"
:model="formInfoTime"
:label-col="{span:labelCol}"
:wrapper-col="{span: wrapperCol}"
>
<a-form-model-item label="上午监测时间" prop="kq_amstart_time">
<a-time-picker v-model="formInfoTime.kq_amstart_time" valueFormat="HH:mm:ss"/>
<span style="padding:0 5px">~</span>
<a-time-picker v-model="formInfoTime.kq_amend_time" valueFormat="HH:mm:ss"/>
</a-form-model-item>
<a-form-model-item label="下午监测时间" prop="kq_pmstart_time">
<a-time-picker v-model="formInfoTime.kq_pmstart_time" valueFormat="HH:mm:ss"/>
<span style="padding:0 5px">~</span>
<a-time-picker v-model="formInfoTime.kq_pmend_time" valueFormat="HH:mm:ss"/>
</a-form-model-item>
</a-form-model>
</slot>
</a-modal>
</template>
<script>
import {kqsetSave,kqsetInfo} from "@/services/default"
export default {
props:{
labelCol:{
type:Number,
default:5,
},
wrapperCol:{
type:Number,
default:16,
}
},
data(){
return{
formConfirmLoading:false,
formVisible:false,
formInfoTime:{
kq_amstart_time:"",//上午上班时间 09:00
kq_amend_time:"",//上午下班时间
kq_pmstart_time:"",//上午上班时间
kq_pmend_time:"",//下午下班时间
},//表单提交数据
title:"统一检测时间"
}
},
methods:{
// 保存
handleOk(){
kqsetSave(this.formInfoTime).then(res=>{
const {code,msg} = res.data
if(code == 0){
this.$message.success("提交成功")
this.$emit("success")
this.formVisible = false
}else{
this.$message.error(msg)
}
})
},
// 编辑
onEdit(){
this.formVisible = true
kqsetInfo().then(res=>{
const {code,data} = res.data
if(code==0 && data){
let obj = {id:data.id}
Object.keys(this.formInfoTime).forEach(v=>{
obj[v] = data[v] || ''
})
this.formInfoTime = obj
}
})
}
}
}
</script>
\ No newline at end of file
<template>
<div class="window viewbox">
<a-row :gutter="16">
<a-col class="gutter-row" :span="6">
<div class="gutter-box ff br">
<PageCard title="部门列表" icon="database">
<div slot="head-right">更新时间:</div>
<div class="b-body">
<div class="handle-btn">
<importFile @success="fileComplete" :action="action">
<a-button type="primary">
导入部门
</a-button>
</importFile>
<emptyFile keyword="section">
<a-button>
下载模板
</a-button>
</emptyFile>
</div>
<div class="buness-list">
<div class="b-l-a" :class="{active:section_id == ''}" @click="onSectionWindow('')">
<a-icon type="golden" theme="filled" class="primary-color"/>
<span>全部部门</span>
</div>
<div class="b-l-a" :class="{active:item.id == section_id}" v-for="item in sectionListInfo" :key="item.id" @click="onSectionWindow(item.id)">
<a-icon type="golden" theme="filled" class="primary-color"/>
<span>{{item.name}}</span>
</div>
</div>
</div>
</PageCard>
</div>
</a-col>
<a-col class="gutter-row" :span="18">
<div class="gutter-box ff">
<PageCard title="窗口列表" icon="database">
<div class="b-body" style="padding:0 15px">
<tables ref="tables"/>
</div>
</PageCard>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import {sectionListdata} from "@/services/default"
import tables from "./table"
import {section} from "@/services/api"
export default {
data(){
return{
sectionListInfo:[],
action:section.allupload,//导入部门接口地址
section_id:''
}
},
created(){
this.sectionList()
},
methods:{
onSectionWindow(id){
if(id){
this.section_id = id
this.$refs.tables.tablequery = {section_id:id}
}else{
this.section_id = ''
this.$refs.tables.tablequery = {}
}
this.$refs.tables.tableReload()
},
sectionList(){
sectionListdata().then(res=>{
console.log(res.data)
const {code,data} = res.data
if(code == 0){
this.sectionListInfo = data
}
})
},
fileComplete(type){
if(type == 'addfile'){
// 文件导入成功
this.sectionList()
}
}
},
components:{
tables
}
}
</script>
<style lang="less" scoped>
.handle-btn{
padding: 0 10px 10px;
button{
margin-right: 5px;
}
}
.b-body{
min-height: 700px;
}
.buness-list{
height: 600px;
overflow-y: auto;
}
.b-l-a{
padding: 10px;
font-size: 13px;
&:hover{
background: #f5f5f5;
}
span{
padding-left: 5px;
}
&.active{
background: #f5f5f5;
}
}
</style>
\ No newline at end of file
<template>
<a-drawer
title="详情"
:width="450"
placement="right"
:visible="visible"
@close="visible = false"
>
<div class="p-w">
<h2 class="primary-color">{{info.window.name}}</h2>
<div class="p-w-r flex_row">
<div class="p-l">窗口编号:</div>
<div class="p-v">{{info.window.number}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属部门:</div>
<div class="p-v">{{info.window.section_name}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属楼栋:</div>
<div class="p-v">{{info.window.building}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">所属楼层:</div>
<div class="p-v flex_row">{{info.window.lv}}</div>
</div>
</div>
<div class="p-w">
<div class="p-photo">
<images :src="info.workman.photo"/>
</div>
<h2 class="primary-color">{{info.workman.name}}</h2>
<div class="p-w-r flex_row">
<div class="p-l">工号:</div>
<div class="p-v">{{info.workman.number}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">是否在中心:</div>
<div class="p-v">{{info.workman.in_flag==0?'不在':''}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">联系电话:</div>
<div class="p-v">{{info.workman.phone}}</div>
</div>
</div>
<div class="p-w">
<h2 class="primary-color">检测</h2>
<div class="p-w-r flex_row">
<div class="p-l">上午监测时间:</div>
<div class="p-v">{{info.window.kq_amstart_time}} ~ {{info.window.kq_amend_time}}</div>
</div>
<div class="p-w-r flex_row">
<div class="p-l">下午监测时间:</div>
<div class="p-v">{{info.window.kq_pmstart_time}} ~ {{info.window.kq_pmend_time}}</div>
</div>
</div>
<div style="height:53px"></div>
<div class="footer">
<a-popconfirm
title="删除后不可恢复,确定要删除吗?"
ok-text="确定"
cancel-text="再想想"
@confirm="onDel"
>
<a-button type="danger">删除</a-button>
</a-popconfirm>
<a-button style="margin-left:10px" @click="visible = false">关闭</a-button>
</div>
</a-drawer>
</template>
<script>
import {windowshow} from "@/services/default"
export default {
data(){
return{
visible:false,
info:{
window:{},
workman:{}
},
row:{}
}
},
methods:{
onShow(row){
this.row = row
this.visible = true
windowshow({id:row.id}).then(res=>{
const {code,data,msg} = res.data
if(code == 0){
this.info = data
}else{
this.$message.error(msg)
}
})
},
onDel(){
this.visible = false
this.$parent.OnTableDel(this.row)
}
}
}
</script>
<style lang="less" scoped>
.footer{
position: absolute;
left: 0;
bottom: 0;
right: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
background: #fff;
}
.p-tit{
padding: 10px 15px;
color: #ff4d4f;
background: #fff1f1;
font-weight: blod;
border-left: 4px solid #ff4d4f;
}
.p-w{
margin-top: 20px;
background: #f1f7fd;
border-radius: 6px;
padding: 10px;
position: relative;
.p-w-r{
margin-bottom: 10px;
}
.p-l{
width: 100px;
text-align: right;
}
h2{
font-weight: bold;
}
.p-photo{
position: absolute;
top:20px;
right: 20px;
width: 100px;
height: 120px;
img{
display: block;
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<Standardtable
:exportExcel="{action:tableurl.listdata,fileName:'窗口'}"
:action="tableurl.allupload"
emptyFile="window"
:columns="tablecolumns"
:dataSource="tabledataSource"
:bordered="true"
:selectedRows="selectedRows"
:columnsSearch="columnsSearch"
:pagination="pagination"
:loading="tableLoading"
@selectedRowChange="selectedRowChange"
@add="OnTableAdd"
@del="OnTableAllDel"
@Search="onSearch"
@change="handleTableChange"
>
<template slot="file-more">
<a-menu-item>
<a href="javascript:;" @click="onFormTime">统一检测时间</a>
</a-menu-item>
</template>
</Standardtable>
<show ref="pageshow" @success="getTableInfo"/>
<formTime ref="formTime" @success="tableReload"/>
<pageshow ref="shows"/>
</div>
</template>
<script>
import table from "@/mixins/table"
import show from "./form"
import formTime from "./formTime"
import pageshow from "./pageshow"
export default {
mixins:[table],
data(){
return{
tablename:"window",//接口地址 名称
tablecolumns:[
{
title: "序号",
width: "70px",
customRender:this.RenderIndex
},
{
title: "窗口名",
dataIndex: "name",
customRender:(text,record)=>{
return <div style='text-aligin:center' onClick={()=>{this.$refs.shows.onShow(record)}}><a>{text}</a><p>编号:{record.number}</p></div>
}
},
{
title: "部门名",
dataIndex: "section_name",
},
{
title: "工作人员",
dataIndex: "work_name",
},
{
title: "照片",
dataIndex: "work_photo",
customRender:(text)=>{
return <thumbImage src={text}/>
}
},
{
title: "工号",
dataIndex: "work_number",
},
{
title: "电话",
dataIndex: "work_phone",
},
{
title: "是否监测",
dataIndex: "video_off",
customRender:(text,record)=>{
if(text == 1){
return (
<div>
<div>{record.kq_amstart_time}~{record.kq_amend_time}</div>
<div>{record.kq_pmstart_time}~{record.kq_pmend_time}</div>
</div>
)
}else{
return <span></span>
}
}
},
{
title: "操作",
width: "200px",
customRender:(text, record)=><tableActive record={record} onEdit={this.OnTableEdit} onDel={this.OnTableDel}/>
},
],//表头数据
tabledataSource:[],//表格数据
columnsSearch:[
{type:'text',dataIndex:'name',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入窗口名"},
{type:'text',dataIndex:'work_name',span:5,width:150,dictionaries:[{label:'全部',value:''},{label:'选项1',value:1},{label:'选项2',value:2}],placeholder:"请输入工作人员"},
]//表格查询条件
}
},
methods:{
onFormTime(){
this.$refs.formTime.onEdit()
}
},
components:{
show,
formTime,
pageshow
}
}
</script>
\ No newline at end of file
<template>
<div>
<div class="search_block">
<a-button class="btnclass addclass" @click="addModal">
新增
</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部窗口编号" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入设备名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="2">
</a-col>
<a-col :span="22" style="text-align:right">
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"/>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备名称',
dataIndex: 'id'
},
{
title: '所属楼栋',
dataIndex: ''
},
{
title: '所属楼层',
dataIndex: ''
},
{
title: '窗口名称',
dataIndex: ''
},
{
title: '窗口编号',
dataIndex: ''
},
{
title: '设备位置',
dataIndex: ''
},
{
title: '使用状态',
dataIndex: ''
},
{
title: '最后登录时间',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
return {
spinning: false,
data,
columns,
title: '',
message: ''
}
},
methods: {
addModal () {
this.title = '新增评价器'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑评价器'
this.$refs.pubModal.show()
},
delModal () {
this.message = '评价器'
this.$refs.delModal.show()
}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="中心设备编号:">
<a-input placeholder="请输入中心设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备编号:">
<a-input placeholder="请输入设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
<a-select-option value="2栋">
2栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="1楼">
<a-select-option value="1楼">
1楼
</a-select-option>
<a-select-option value="2楼">
2楼
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择窗口:">
<a-select default-value="">
<a-select-option value="1">
1
</a-select-option>
<a-select-option value="2">
2
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设置位置:">
<a-input placeholder="请输入设备位置"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio value="未使用">
未使用
</a-radio>
<a-radio value="使用中">
使用中
</a-radio>
<a-radio value="已作废">
已作废
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item label="温馨提示:" :label-col="{span: 3}" :wrapper-col="{span: 20}">
<a-input type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 3}">
<a-button class="btnclass addclass btn"> 确认 </a-button>
<a-button class="btnclass quclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<a-form-model>
<a-row :gutter="[8, 16]" type="flex" justify="center" align="top">
<a-col :span="24">
<div class="card_title">基本信息</div>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="取号时间间隔:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传文件 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="头部导航:">
<a-checkbox-group :options="checkboxHeader" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="工作人员信息:">
<a-checkbox-group :options="checkboxWorker" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="是否展示窗口:">
<a-switch default-checked :defaultChecked="false"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 10}" label="中心网址:">
<a-input />
</a-form-model-item>
</a-col>
<a-col :span="24">
<div class="card_title">评价信息</div>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="是否过滤差评:">
<a-switch default-checked :defaultChecked="false"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 10}" label="投诉电话:">
<a-input />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 10}" label="一体化前缀:">
<a-input />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="一体化后缀:">
<a-switch default-checked :defaultChecked="false"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="好差评页面:">
<a-radio-group :options="radioPage"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 15}" label="上传类型:">
<a-radio-group :options="updateType"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :wrapper-col="{span: 15, offset: 3}">
<a-button class="btnclass addclass"> 确定 </a-button>
<a-button class="btnclass quclass"> 重置 </a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
checkboxHeader: [
{
label: '办事指南',
value: '办事指南'
},
{
label: '岗位职责',
value: '岗位职责'
},
{
label: '网上办事',
value: '网上办事'
},
{
label: '投诉建议',
value: '投诉建议'
},
{
label: '公示公告',
value: '公示公告'
},
{
label: '服务评价',
value: '服务评价'
},
{
label: '样表展示',
value: '样表展示'
},
{
label: '廉政风险',
value: '廉政风险'
}
],
checkboxWorker: [
{
label: '姓名',
value: '姓名'
},
{
label: '部门',
value: '部门'
},
{
label: '工号',
value: '工号'
},
{
label: '职称',
value: '职称'
},
{
label: '职务',
value: '职务'
},
{
label: '政治面貌',
value: '政治面貌'
},
{
label: '联系电话',
value: '联系电话'
}
],
radioPage: [
{
label: 'ZY网页',
value: 'ZY网页'
},
{
label: 'ZY原生页面',
value: 'ZY原生页面'
},
{
label: 'YTH页面',
value: 'YTH页面'
},
{
label: 'YTH原生页面',
value: 'YTH原生页面'
},
{
label: 'YTH原生页面OLD',
value: 'YTH原生页面OLD'
}
],
updateType: [
{
label: '',
value: ''
},
{
label: '音频',
value: '音频'
},
{
label: '视频',
value: '视频'
},
{
label: '图片',
value: '图片'
}
]
}
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="8" class="t_center">
<div>窗口屏标准版</div>
<img width="100%" height="220px" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="">
<a-button class="btnclass addclass btn">使用中</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
</style>
<template>
<div>
<div class="search_block">
<div>
<a-button class="btnclass addclass" @click="addModal">
新增
</a-button>
<a-button class="green" @click="vpModal"> 设置视频/轮播 </a-button>
</div>
<div class="warning_text">
<a-icon type="info-circle" />
请勿上传大于100M的视频文件,待视频上传完成再提交!
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :disabled="true" :checked="record.use"/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="facilityModal(record)">关联设备</span>
<span class="redact" @click="issueModal">一键发布</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<pubmodal :title="title" ref="pubModal"/>
<corremodal :title="title" ref="correModal"/>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/pubModal'
import CorreModal from './Modal/correModal'
import DelModal from '@/components/delmodal/index'
const data = [
{
key: '1',
use: false,
type: '轮播图',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '视频/轮播',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '创建时间',
dataIndex: 'phone'
},
{
title: '是否使用',
dataIndex: 'use',
scopedSlots: { customRender: 'use' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
pubmodal: PubModal,
corremodal: CorreModal,
delmodal: DelModal
},
data () {
return {
spinning: false,
data,
columns,
title: '',
message: '',
previewVisible: false,
previewImage: '',
pagination: {
defaultPageSize: 5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
}
}
},
methods: {
addModal () {
this.title = '新增'
this.$refs.pubModal.show()
},
vpModal () {
this.title = '设置视频/轮播'
this.$refs.pubModal.show()
},
facilityModal () {
this.title = '展示部门'
this.$refs.correModal.show()
},
issueModal () {
this.title = '系统提示'
this.$refs.correModal.show()
},
delModal () {
this.message = '轮播图/视频'
this.$refs.delModal.show()
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url
this.previewVisible = true
}
}
}
</script>
<style lang="less" scoped>
.green {
color: white;
background: #03b17d;
margin-left: 10px;
}
.warning_text {
color: #f96717;
line-height: 30px;
font-weight: 600;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model>
<!-- 展示部门内容 -->
<div class="items_box" v-if="title == '展示部门'">
<div>图片/视频标题:<span>中秋节合家欢庆祝图片</span></div>
<a-spin :spinning="spinning">
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:pagination="false"
:data-source="dat"
/>
</a-spin>
</div>
<!-- 一键发布 -->
<div class="t_center" v-else>
<div>是否确定要发布到其他站点?</div>
</div>
<div class="t_center">
<a-button class="btnclass addclass btn"> 确认 </a-button>
<a-button class="btnclass quclass btn"> 取消 </a-button>
</div>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
const dat = [
{
key: '1',
use: false,
type: '轮播图'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备编号',
dataIndex: 'type'
},
{
title: '备注',
dataIndex: 'phone'
}
]
return {
spinning: false,
visible: false,
columns,
dat,
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
},
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
}
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 4}" :wrapper-col="{span: 10}">
<!-- 新增内容 -->
<div class="items_box" v-if="title == '新增'">
<a-row :gutter="[8, 16]">
<a-col :span="24">
<a-form-model-item label="标题:">
<a-input />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="视频/轮播:">
<a-radio-group name="radioGroup" :default-value="1">
<a-radio :value="1"> 视频 </a-radio>
<a-radio :value="2"> 轮播图片 </a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="上传文件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
>
<a-button class="btnclass addclass"> 上传文件 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</div>
<!-- 视频和轮播内容 -->
<div class="items_box" v-else-if="title == '设置视频/轮播'">
<a-row :gutter="[8, 16]">
<a-col :span="24">
<a-form-model-item label="设置显示:">
<a-radio-group name="radioGroup" :default-value="1">
<a-radio :value="1"> 视频 </a-radio>
<a-radio :value="2"> 轮播图片 </a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="显示时间:">
<a-input suffix="秒" placeholder="请输入时间" />
</a-form-model-item>
</a-col>
</a-row>
</div>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="btnclass addclass btn"> 确认 </a-button>
<a-button class="btnclass quclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false,
headers: {
authorization: 'authorization-text'
},
confirmLoading: true,
selectedRowKeys: [],
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.items_box{
overflow: hidden;
}
</style>
<template>
<div>
<a-form-model :label-col="{span: 2}" :wrapper-col="{span: 18}" >
<div class="card_title">基本信息</div>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="评价方式:">
<a-checkbox-group name="checkboxgroup" >
<a-checkbox value="1">
评价部门
</a-checkbox>
<a-checkbox value="2">
评级窗口
</a-checkbox>
<a-checkbox value="3">
评价排号编号
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_pic">
<a-form-model-item label="Banner图:">
<div class="clearfix">
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
>
<div v-if="1">
<a-icon type="plus" />
<div class="ant-upload-text">
Upload
</div>
</div>
</a-upload>
</div>
</a-form-model-item>
</a-col>
</a-row>
<div class="card_title">二维码</div>
<a-form-model-item label="二维码地址:">
<a-input placeholder="请输入二维码地址"/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 2}">
<a-button class="btnclass addclass btn" > 确定 </a-button>
<a-button class="btnclass quclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" > 新增 </a-button>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">编辑</a>
<!-- <div class="line"></div> -->
<a class="del" @click="delModel">删除</a>
</span>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
PubModal,
DelModal
},
props: {},
data() {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "大厅名称",
dataIndex: "user",
},
{
title: "所属楼栋",
dataIndex: "name",
},
{
title: "所属楼层",
dataIndex: "phone",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
],
}
},
computed: {},
methods: {
addclick() {
this.title= '新增'
this.$refs.pubModal.show()
},
delModel() {
this.message= '大厅管理'
this.$refs.delModal.show()
}
}
};
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
width="1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model layout="inline">
<div class="search_block search" style="justify-content: flex-end">
<a-form-model-item>
<a-select default-value="lucy">
<a-select-option value="lucy"> 全部楼栋 </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="lucy" >
<a-select-option value="lucy"> 全部楼层 </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入大厅名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</div>
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns"
:data-source="data"
/>
<div class="btn_box">
<a-form-model-item>
<a-button class="addclass btnclass"> 确认 </a-button>
<a-button class="quclass btnclass"> 重置 </a-button>
</a-form-model-item>
</div>
</a-form-model>
</a-modal>
</div>
</template>
<script>
const columns = [
{
title: "Name",
dataIndex: "name",
},
{
title: "Age",
dataIndex: "age",
},
{
title: "Address",
dataIndex: "address",
},
]
const data = [];
for (let i = 0; i < 5; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
})
}
export default {
props:['title'],
data () {
return {
visible: false,
data,
columns,
selectedRowKeys: [],
}
},
methods: {
show(){
this.visible = true
},
close() {
this.visible = false
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
}
}
</script>
<style scoped lang="less">
</style>
<template>
<!-- 大厅管理 -->
<div id="Staff">
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" > 新增 </a-button>
</div>
<a-row :gutter="[80, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">添加评价内容</a>
<a class="redact">编辑</a>
<a class="del" @click="delModel">删除</a>
</span>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components:{
PubModal,
DelModal
},
props: {},
data() {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "12%",
},
{
title: "Address",
dataIndex: "address",
width: "30%",
key: "address",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park",
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park",
},
],
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
children: [
{
key: 131,
name: "Jim Green",
age: 42,
address: "London No. 2 Lake Park",
children: [
{
key: 1311,
name: "Jim Green jr.",
age: 25,
address: "London No. 3 Lake Park",
},
{
key: 1312,
name: "Jimmy Green sr.",
age: 18,
address: "London No. 4 Lake Park",
},
],
},
],
},
],
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
},
],
}
},
computed: {},
methods: {
onChange() {
console.log(1)
},
addclick() {
this.title="新增评价选项"
this.$refs.pubModal.show()
},
delModel() {
this.message= '评价选项及其评价内容'
this.$refs.delModal.show()
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
class="delmodel"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4}"
:wrapper-col="{ span: 14}"
>
<a-form-model-item label="评价选项:">
<a-input placeholder="请输入评价选项" />
</a-form-model-item>
<a-form-model-item label="排序:">
<a-input placeholder="请输入排序" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="close" > 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
const columns = [
{
title: "Name",
dataIndex: "name",
},
{
title: "Age",
dataIndex: "age",
},
{
title: "Address",
dataIndex: "address",
},
]
const data = []
for (let i = 0; i < 5; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
})
}
export default {
props:['title'],
data() {
return {
visible: false,
data,
columns,
selectedRowKeys: [],
}
},
computed: {},
methods: {
show () {
this.visible = true
},
close() {
this.visible = false
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
},
},
created() {}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<div class="search_block">
<div></div>
<div class="search">
<a-input-search placeholder="请输入设备名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<template slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</template>
<template slot="action">
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import DelModal from '@/components/delmodal/index'
export default {
components:{
DelModal
},
data() {
return {
spinning: false,
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "设备名称",
dataIndex: "user",
},
{
title: "上线时间",
dataIndex: "createTime",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
delModal() {
this.message = 'IM'
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" > 新增短语 </a-button>
<div class="search">
<a-input-search placeholder="请输入短语内容搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<template slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</template>
<template slot="action">
<span class="redact">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
PubModal,
DelModal
},
data() {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "短语内容",
dataIndex: "name",
},
{
title: "创建时间",
dataIndex: "adress",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
addclick() {
this.title= '新增短语'
this.$refs.pubModal.show()
},
delModal() {
this.message = '短语'
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="新增短语"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="短语内容:">
<a-input placeholder="请输入短语内容" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block" style="justify-content: flex-end;">
<div class="search">
<a-input-search placeholder="请输入设备名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :checked="record.use" v-model="record.use" />
</template>
<template slot="action">
<span class="redact" @click="editModal">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<EditModal ref="editModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import EditModal from './Modal/EditModal'
import DelModal from '@/components/delmodal/index'
export default {
components:{
EditModal,
DelModal
},
data() {
return {
spinning: false,
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "设备名称",
dataIndex: "name",
},
{
title: "所属楼栋",
dataIndex: "adress",
},
{
title: "所属楼层",
dataIndex: "phone",
},
{
title: "最后登录时间",
dataIndex: "createTime",
},
{
title: "备注",
dataIndex: "",
},
{
title: "使用状态",
scopedSlots: {
customRender: "use",
},
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
use: false
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
use: true
},
],
}
},
methods: {
editModal() {
this.$refs.editModal.show()
},
delModal() {
this.message = '信息发布设备'
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="编辑"
:footer="null"
@cancel="close"
width= "1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-row :gutter="[8, 16]">
<a-col :span="12">
<a-form-model-item label="设备名称:">
<a-input placeholder="请输入设备名称" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="中心名称:">
<a-input placeholder="请输入中心名称" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="lucy">
<a-select-option value="lucy"> Lucy </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="lucy">
<a-select-option value="lucy"> Lucy </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设置位置:">
<a-input placeholder="请输入设备位置(X坐标,Y坐标,楼层)"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择窗口:">
<a-input placeholder="请输入窗口编号与窗口名称" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="视频/轮播:">
<a-radio-group>
<a-radio :value="1"> 默认 </a-radio>
<a-radio :value="2"> 轮播 </a-radio>
<a-radio :value="3"> 视频 </a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio :value="1"> 未使用 </a-radio>
<a-radio :value="2"> 使用中 </a-radio>
<a-radio :value="3"> 已作废 </a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="备注:">
<a-textarea placeholder="备注"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
<a-button name="确认" class="addclass btnclass btn" > 确认 </a-button>
<a-button name="取消" class="quclass btnclass btn" @click="close" > 取消 </a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button @click="addclick" name="新增" class="addclass btnclass" > 新增 </a-button>
<div class="search">
<a-input-search placeholder="请输入新闻标题搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="paginationr"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<template slot="action">
<span class="redact" @click="detail">详情</span>
<span class="redact">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<FormDetail ref="formDetail"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import FormDetail from './Modal/FormDetail'
import DelModal from '@/components/delmodal/index'
export default {
components: {
PubModal,
FormDetail,
DelModal
},
data() {
return {
spinning: false,
title: '',
message: '',
paginationr: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "标题",
dataIndex: "user",
},
{
title: "创建时间",
dataIndex: "name",
},
{
title: "是否置顶",
dataIndex: "phone",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
addclick() {
this.title = '新增新闻'
this.$refs.pubModal.show()
},
detail() {
this.$refs.formDetail.show()
},
delModal() {
this.message= "新闻"
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="新闻详情"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model>
<a-row :gutter="[20, 20]" type="flex" justify="start">
<a-col :span="24">
<div>新闻标题</div>
</a-col>
<a-col :span="24">
<div>新闻内容</div>
</a-col>
<a-col :span="24">
<div>新闻图片</div>
</a-col>
</a-row>
<a-form-model-item>
<a-button name="确认" class="addclass btnclass btn" >确认</a-button>
<a-button name="取消" class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="新闻标题:">
<a-input placeholder="请输入新闻标题" />
</a-form-model-item>
<a-form-model-item label="新闻内容:">
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button name="确认" class="addclass btnclass btn" >确认</a-button>
<a-button name="取消" class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:['title'],
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="值班领导:">
<a-input placeholder="请输入值班领导" />
</a-form-model-item>
<a-form-model-item label="值班领导电话:">
<a-input placeholder="请输入值班领导电话" />
</a-form-model-item>
<a-form-model-item label="值班长:">
<a-input placeholder="请输入值班长" />
</a-form-model-item>
<a-form-model-item label="值班长电话:">
<a-input placeholder="请输入值班长电话" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn">确定</a-button>
<a-button class="quclass btnclass btn" >重置</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<div>
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
<a-button class="green" @click="vpModal"> 设置视频/轮播 </a-button>
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :checked="record.use" v-model="record.use" @change="useChange(record)"/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="facilityModal(record)">播放设备</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<PubModal :title="title" @add="add" ref="pubModal"/>
<DelModal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal.vue'
import DelModal from '@/components/delmodal/index'
const data = [
{
key: '',
hand: '',
use: false,
type: '',
date: '',
url: ''
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '标题',
dataIndex: 'hand'
},
{
title: '视频/轮播',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '创建时间',
dataIndex: 'date'
},
{
title: '是否使用',
dataIndex: 'use',
scopedSlots: { customRender: 'use' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
PubModal,
DelModal
},
data () {
return {
spinning: false,
// 表格数据
data,
// 表格列参数
columns,
// 删除表格值
delkey: '',
// 弹出框标题
title: '',
// 弹出框内容
message: '',
// 预览弹出框
previewVisible: false,
// 预览图路径
previewImage: '',
// 分页
pagination: {
defaultPageSize: 5,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
}
}
},
created () {
// 获取列表
this.createUser()
},
methods: {
// 新增弹出框
addModal () {
this.title = '新增'
this.$refs.pubModal.show()
},
async add (val) {
const { data: res } = await this.$http.post('/add', val)
this.data = res
},
async useChange (val) {
console.log(val)
const { data: res } = await this.$http.post('/usechange',{
params:{
key: val.key,
use: val.use
}
})
console.log(res)
},
vpModal () {
this.title = '设置视频/轮播'
this.$refs.pubModal.show()
},
facilityModal () {
this.title = '关联设备'
this.$refs.pubModal.show()
},
delModal (val) {
this.message = '视频/轮播'
this.delkey = val
this.$refs.delModal.show()
},
async delList (val) {
const { data:res } = await this.$http.post('/del', { key: val })
if (res.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
this.data = res.newlist
this.$message.success('删除成功')
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url
this.previewVisible = true
},
async createUser () {
const { data: res } = await this.$http.get('/name').catch(() => {})
if (res.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
// 给数据列表赋值
this.data = res.list
}
}
}
</script>
<style lang="less" scoped>
.green {
color: white;
background: #03b17d;
margin-left: 10px;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
:model="addForm"
ref="addFormRef"
v-if="title == '新增'"
>
<!-- 新增内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="标题:" prop="addTitle">
<a-input v-model="addForm.addTitle"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="视频/轮播:" prop="addRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(addForm.addRadio)"
v-model="addForm.addRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="上传文件:" :key="upkey">
<a-upload
name="file"
v-model="fileList"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange"
>
<a-button class="btnclass addclass"> 上传文件 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 10}"
:model="setForm"
ref="setFormRef"
v-else-if="title == '设置视频/轮播'"
>
<!-- 视频和轮播内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="设置显示:" prop="setRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(setForm.addRadio)"
v-model="setForm.setRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="显示时间:" prop="time">
<a-input suffix="秒" placeholder="请输入时间" v-model="setForm.time"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 10}"
v-if="title == '关联设备'"
>
<!-- 关联设备内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<div>图片/视频标题:<span>中秋节合家欢庆祝图片</span></div>
<a-spin :spinning="spinning">
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange , onSelect: onSelect, onSelectAll: onSelectAll}"
:columns="columns"
:pagination="false"
:data-source="faciltyData"
/>
</a-spin>
</a-col>
</a-row>
</a-form-model>
<a-form-model>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn" @click="onSubmit(title)"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="reset(title)"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
// 新增内容
const addForm = {
addTitle: '',
addRadio: 1,
address: ''
}
// 设置轮播/图片内容
const setForm = {
setRadio: 1,
time: ''
}
// 关联设备内容
const faciltyData = [
{
key: '1',
equipment: '',
remark: '轮播图'
}
]
// 关联设备表格
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备编号',
dataIndex: 'equipment'
},
{
title: '备注',
dataIndex: 'remark'
}
]
export default {
// 弹出框标题
props: ['title'],
data () {
return {
spinning: false,
// 显示
visible: false,
headers: {
authorization: 'authorization-text'
},
// 新增表单
addForm,
// 被选中的项
checked: '视频',
// 上传文件列表
fileList: [],
// 随机值
upkey: '',
// 视频/轮播设置表单
setForm,
// 关联设备表格
faciltyData,
// 关联设备表格参数
columns,
// 选中的行
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
// 关闭弹出框
handleCancel () {
this.selectedRowKeys = []
this.visible = false
},
// 关联设备表格选择
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
onSelect () {
},
onSelectAll () {
},
// 提交
onSubmit (val) {
if(val == '新增'){
const pramas = {
adtitle: this.addForm.addTitle,
type: this.checked,
url: this.addForm.address
}
this.$emit('add', pramas)
this.upkey = Math.random()
}else if (val == '设置视频/轮播') {
const pramas = {
type: this.checked,
time: this.setForm.time
}
this.$emit('set', pramas)
}else{
console.log('关联设备')
}
this.visible = false
},
// 选择器
change(e) {
if (e.target.value == 1)
this.checked = '视频'
else
this.checked = '轮播图片'
},
// 选择上传文件
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.fileList = info.fileList
this.addForm.address = imageUrl
})
}
},
// 上传文件之前
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'video/x-matroska'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt100M = file.size / 1024 / 1024 < 100
if (!isLt100M) {
this.$message.error('Image must smaller than 100MB!')
}
return isJpgOrPng && isLt100M
},
// 重置
reset (title) {
if (title == '新增') {
this.$nextTick(()=>{
this.fileList = []
this.addForm.address = ''
this.checked = '视频'
this.upkey = Math.random()
this.$refs.addFormRef.resetFields()
})
}else if (title == '设置视频/轮播') {
this.$nextTick(()=>{
this.checked = '视频'
this.$refs.setFormRef.resetFields()
})
}else {
this.selectedRowKeys = []
}
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div style="position: relative; top: -20px">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="广告图设置">
<div class="card_title">选择风格</div>
<div class="picList" v-for="(item, index) in picData" :key="index" @click="maskShow(item.id)">
<img class="pic" :src="item.src">
<div class="picwrap" v-if="item.mask">
<a-icon class="icon" type="check-circle" />
</div>
</div>
<div class="card_title">设置顶部轮播图</div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addPictrue">添加图片</a-button>
</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
bordered
>
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="del" @click="onDel(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-tab-pane>
<a-tab-pane key="2" tab="模块配置">
<a-card :title="item.title" v-for="(item, index) in moduleList" :key="index">
<div slot="extra">
<a-button @click="addMenu">添加菜单</a-button>
<a-button @click="editModule">编辑模块</a-button>
<a-button @click="delModule">删除模块</a-button>
<a-button @click="moveUp(index)">上移</a-button>
<a-button @click="moveDown(index)">下移</a-button>
</div>
<a-row>
<a-col :lg="12" :xl="8" :xxl="6" v-for="(k, i) in item.children" :key="i">
<div style="display: flex;">
<div class="pic_box">
<img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" width="150" height="150">
</div>
<div class="menu_box">
<div>菜单名称:<span>{{k.name}}</span></div>
<div>跳转链接:<span>{{k.link}}</span></div>
<div>是否开放:<span>{{k.open?'是':'否'}}</span></div>
<div>
<a-button class="addclass btnclass" @click="editMenu">编辑</a-button>
<a-button class="delclass btnclass" @click="delMenu">删除</a-button>
</div>
</div>
</div>
</a-col>
</a-row>
</a-card>
<div class="btn_box">
<a-button class="addclass btnclass btn" @click="addModule"> + 添加模块 </a-button>
</div>
</a-tab-pane>
</a-tabs>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<AddPic ref="addPic"/>
<PubModal :title="title" ref="pubModal"/>
<PubModule :title="title" ref="pubModule"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import AddPic from './Modal/AddPic'
import PubModal from './Modal/PubModal'
import PubModule from './Modal/PubModule'
import DelModal from '@/components/delmodal/index'
const columns =[
{
title: '图片名称',
dataIndex: ''
},
{
title: '添加时间',
dataIndex: ''
},
{
title: '预览',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
const data =[
{ key: 1, url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' }
]
const moduleList = [
{ title: '综合政务', children: [
{ name: '各位', link: 'www', open: false}
] },
{ title: '一体化办公' },
{ title: '资格审查' },
{ title: '材料提交' },
{ title: '模块查询' },
]
export default {
components: {
AddPic,
PubModal,
PubModule,
DelModal
},
data () {
return {
spinning: false,
title: '',
message: '',
previewImage: '',
previewVisible: false,
moduleList,
columns,
data,
picData: [
{id: 1, src:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', mask: true},
{id: 2, src:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', mask: false},
]
}
},
methods: {
// 选择遮罩
maskShow(v) {
this.picData.forEach(item => {
if(item.id == v){
item.mask = true
}else{
item.mask = false
}
})
},
// 预览
handlePreview(file) {
this.previewImage = file.url
this.previewVisible = true
},
// 关闭预览弹出
handleCancel() {
this.previewVisible = false
},
// 删除预览图
onDel(v){
console.log(v)
this.message = '图片'
this.$refs.delModal.show()
},
// 上移
moveUp(v) {
const list = this.moduleList
if(v == 0){
this.$message.warning('已经到顶部')
}else{
list.splice(v-1, 2, list[v], list[v-1])
}
},
// 下移
moveDown(v) {
const list = this.moduleList
if(v == list.length-1){
this.$message.warning('已经到底部')
}else{
list.splice(v, 2, list[v+1], list[v])
}
},
// 添加图片
addPictrue() {
this.$refs.addPic.show()
},
// 编辑模块
editModule() {
this.title = '编辑模块'
this.$refs.pubModule.show()
},
addModule() {
this.title = '添加模块'
this.$refs.pubModule.show()
},
// 删除模块
delModule() {
this.message = '模块及下属菜单'
this.$refs.delModal.show()
},
// 添加菜单
addMenu() {
this.title = '添加菜单'
this.$refs.pubModal.show()
},
// 编辑菜单
editMenu() {
this.title = '编辑菜单'
this.$refs.pubModal.show()
},
// 删除菜单
delMenu() {
this.message = '菜单'
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
.pic_box{
margin-right: 15px;
}
.pic{
width: 200px;
height: 200px;
display: inline-block;
}
.picList{
position: relative;
display: inline-block;
margin:0 15px 15px 0;
}
.picwrap{
position: absolute;
top: 0;
left: 0;
background-color: black;
opacity: .6;
width: 200px;
height: 200px;
z-index: 1;
}
.icon{
position: absolute;
top: 40%;
left: 40%;
font-size: 40px;
color: #fff;
z-index: 2;
}
.menu_box{
line-height: 35px;
}
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="添加图片"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 10}">
<a-form-model-item label="图片标题:">
<a-input placeholder="请输入图片标题"/>
</a-form-model-item>
<a-form-model-item label="添加文件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="btnclass addclass"> 选择文件 </a-button>
</a-upload>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 6}">
请上传jpg、jpeg、png格式的图片文件,大小在5M以内。建议尺寸:690px*220px。
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 6}">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 10}">
<a-form-model-item label="菜单名称:">
<a-input placeholder="请输入菜单名称"/>
</a-form-model-item>
<a-form-model-item label="跳转链接:">
<a-input placeholder="请输入跳转链接"/>
</a-form-model-item>
<a-form-model-item label="是否开放:">
<a-switch default-checked/>
</a-form-model-item>
<a-form-model-item label="添加文件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="btnclass addclass"> 选择文件 </a-button>
</a-upload>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 6}">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:{
title:{
type: String,
required: true
}
},
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 10}">
<a-form-model-item label="模块名称:">
<a-input placeholder="请输入模块名称"/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 6}">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:{
title:{
type: String,
required: true
}
},
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
<a-form-model layout="inline" :model="search" ref="searchRef" class="search">
<a-input-group>
<a-form-model-item prop="building">
<a-select label-in-value @change="handleChange" :default-value="{ key: '全部楼栋' }" class="select_width">
<a-select-option v-for="item in search.building" :value="item.key" :key="item.key">
{{item.value}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select label-in-value :default-value="{ key: '全部楼层' }" class="select_width">
<a-select-option v-for="item in search.floor" :value="item.key" :key="item.key">
{{item.value}}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部窗口编号" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入窗口名">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"></pubmodal>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PublicModal'
import DelModal from '@/components/delmodal/index'
const search = {
windowName: '',
building: [
{key: 1, value: '全部楼栋'},
{key: 2, value: '1栋'}
],
floor: [
{key: 1, value: '全部楼层'},
{key: 2, value: '1层'}
]
}
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '中心设备编号',
dataIndex: 'id'
},
{
title: '设备编号',
dataIndex: ''
},
{
title: '设备位置',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
},
{
title: '窗口编号',
dataIndex: ''
},
{
title: '窗口名',
dataIndex: ''
},
{
title: '最后登录时间',
dataIndex: ''
},
{
title: '使用状态',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 弹出框内容
message: '',
search
}
},
methods: {
addModal () {
this.title = '新增呼叫器'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑呼叫器'
this.$refs.pubModal.show()
},
delModal () {
this.message = '呼叫器'
this.$refs.delModal.show()
},
handleChange () {}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="中心设备编号:">
<a-input placeholder="请输入中心设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备编号:">
<a-input placeholder="请输入设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
<a-select-option value="2栋">
2栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="1楼">
<a-select-option value="1楼">
1楼
</a-select-option>
<a-select-option value="2楼">
2楼
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择窗口:">
<a-select default-value="">
<a-select-option value="1">
1
</a-select-option>
<a-select-option value="2">
2
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设置位置:">
<a-input placeholder="请输入设备位置"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio value="未使用">
未使用
</a-radio>
<a-radio value="使用中">
使用中
</a-radio>
<a-radio value="已作废">
已作废
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item label="备注:" :label-col="{span: 3}" :wrapper-col="{span: 20}">
<a-input type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 3}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
// 显示
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addModal"> 新增 </a-button>
<a-form-model layout="inline">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button class="addclass btnclass">
搜索
</a-button>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="tabModal">关联窗口</span>
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal" />
<corremodal ref="correModal"/>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import CorreModal from './Modal/CorreModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
corremodal: CorreModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '站点',
dataIndex: ''
},
{
title: '设备名称',
dataIndex: 'id'
},
{
title: '关联窗口',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
},
{
title: '添加时间',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增集中显示屏'
this.$refs.pubModal.show()
},
tabModal () {
this.$refs.correModal.show()
},
editModal () {
this.title = '编辑集中显示屏'
this.$refs.pubModal.show()
},
delModal () {
this.message = '集中显示屏'
this.$refs.delModal.show()
}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model>
<a-row :gutter="[0, 12]" type="flex" justify="space-between">
<a-col :span="2" style="line-height: 40px">
设备名称:<span></span>
</a-col>
<a-col :span="22" style="text-align:right">
<a-form-model layout="inline">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button class="btnclass addclass">
搜索
</a-button>
</a-form-model-item>
</a-input-group>
</a-form-model>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" :pagination="false" bordered></a-table>
</a-spin>
</a-col>
</a-row>
<a-form-model-item>
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
const data = []
for (let i = 0; i < 2; i++) {
data.push({
key: i.toString(),
name: `业务名称 ${i}`,
sort: `${i}`
})
}
export default {
data () {
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '窗口名称',
dataIndex: 'name'
},
{
title: '窗口编号',
dataIndex: 'sort'
},
{
title: '备注',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
}
]
return {
spinning: false,
title: '关联窗口',
visible: false,
columns,
data,
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
},
onSelectChange (selectedRowKeys) {
//console.log(selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="设备名称:">
<a-input placeholder="请输入设备名称"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="抬头名称:">
<a-input placeholder="请输入抬头名称"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
<a-select-option value="2栋">
2栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="1楼">
<a-select-option value="1楼">
1楼
</a-select-option>
<a-select-option value="2楼">
2楼
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="视频/轮播:">
<a-radio-group>
<a-radio value="默认">
默认
</a-radio>
<a-radio value="轮播">
轮播
</a-radio>
<a-radio value="视频">
视频
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12"></a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio value="未使用">
未使用
</a-radio>
<a-radio value="使用中">
使用中
</a-radio>
<a-radio value="已作废">
已作废
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item label="备注:" :label-col="{span: 3}" :wrapper-col="{span: 20}">
<a-input type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 3}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
<a-form-model layout="inline">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button class="addclass btnclass">
搜索
</a-button>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="tabModal">关联窗口</span>
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"/>
<corremodal ref="correModal"/>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import CorreModal from './Modal/CorreModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
corremodal: CorreModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '中心设备编号',
dataIndex: 'id'
},
{
title: '设备编号',
dataIndex: ''
},
{
title: '设备位置',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
},
{
title: '窗口编号',
dataIndex: ''
},
{
title: '窗口名',
dataIndex: ''
},
{
title: '最后登录时间',
dataIndex: ''
},
{
title: '使用状态',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增LED通屏'
this.$refs.pubModal.show()
},
tabModal () {
this.$refs.correModal.show()
},
editModal () {
this.title = '编辑LED通屏'
this.$refs.pubModal.show()
},
delModal () {
this.message = 'LED通屏'
this.$refs.delModal.show()
}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model>
<a-row :gutter="[0, 12]" type="flex" justify="space-between">
<a-col :span="2" style="line-height: 40px">
设备名称:<span></span>
</a-col>
<a-col :span="22" style="text-align:right">
<a-form-model layout="inline">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button class="btnclass addclass">
搜索
</a-button>
</a-form-model-item>
</a-input-group>
</a-form-model>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" :pagination="false" bordered></a-table>
</a-spin>
</a-col>
</a-row>
<a-form-model-item>
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
const data = []
for (let i = 0; i < 2; i++) {
data.push({
key: i.toString(),
name: `业务名称 ${i}`,
sort: `${i}`
})
}
export default {
data () {
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '窗口名称',
dataIndex: 'name'
},
{
title: '窗口编号',
dataIndex: 'sort'
},
{
title: '备注',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
}
]
return {
spinning: false,
title: '关联窗口',
visible: false,
columns,
data,
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
},
onSelectChange (selectedRowKeys) {
//console.log(selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
}
}
}
</script>
<style lang="less" scoped="scoped">
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="设备名称:">
<a-input placeholder="请输入设备名称"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="窗口宽度:">
<a-input suffix="像素" placeholder="请输入窗口宽度"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="窗口字体大小:">
<a-input suffix="像素" placeholder="请输入窗口字体大小"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="窗口字体颜色:">
<a-input placeholder="请输入窗口字体颜色"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="叫号字体大小:">
<a-input suffix="像素" placeholder="请输入叫号字体大小"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="叫号字体颜色:">
<a-input placeholder="请输入叫号字体颜色"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="窗口背景颜色:">
<a-input placeholder="请输入窗口背景颜色"/>
</a-form-model-item>
</a-col>
<a-col :span="12"></a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
<a-select-option value="2栋">
2栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="1楼">
<a-select-option value="1楼">
1楼
</a-select-option>
<a-select-option value="2楼">
2楼
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="通屏行数:">
<a-input suffix="像素" placeholder="请输入通屏行数宽度"/>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 20, offset: 3}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="corModal">关联业务</span>
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal" />
<corremodal ref="correModal"/>
<delmodal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import CorreModal from './Modal/CorreModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
corremodal: CorreModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备名称',
dataIndex: 'id'
},
{
title: '首页按钮',
dataIndex: ''
},
{
title: '使用状态',
dataIndex: ''
},
{
title: '分辨率',
dataIndex: ''
},
{
title: '模板',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 弹出框内容
message: '',
// 删除行
delkey: ''
}
},
methods: {
addModal () {
this.title = '新增排队机'
this.$refs.pubModal.show()
},
corModal () {
this.$refs.correModal.show()
},
editModal () {
this.title = '编辑排队机'
this.$refs.pubModal.show()
},
delModal (val) {
this.message = '排队机'
this.delkey = val
this.$refs.delModal.show()
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 编辑弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model type="flex" justify="center" align="center">
<!-- <a-spin :spinning="spinning">
<a-table
bordered
:columns="columns"
:pagination="false"
:data-source="data"
rowKey="key"
@expand="expand"
:expandIcon="expandIcon"
:expandedRowKeys="expandedRowKeys"
:row-selection="{ selectedRowKeys: selectedRowKeyFather, onSelectAll: onSelectAllFather, onSelect: onSelectFather, onChange: onChangeFather }">
<template v-for="col in ['name', 'sort', 'running', 'area']" :slot="col" slot-scope="text">
<a-input
:key="col.key"
style="margin: -5px 0"
:value="text"
/>
</template>
<a-table
slot="expandedRowRender"
:columns="innerColumns"
:data-source="innerData"
:pagination="false"
:showHeader= false
ref="sonTable"
:row-selection="{ selectedRowKeys: selectedRowKeySon, onSelectAll: onSelectAllSon, onSelect: onSelectSon, onChange: onChangeSon }"
>
<template v-for="co in ['sort', 'running', 'area']" :slot="co" slot-scope="text">
<a-input
:key="co.key"
style="margin: -5px 0"
:value="text"
/>
</template>
</a-table>
</a-table>
</a-spin> -->
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:defaultExpandAllRows="false"
:expanded-row-keys.sync="expandedRowKeys"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
</a-table>
</a-spin>
<a-form-model-item>
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
const data = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park",
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park",
},
],
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
children: [
{
key: 131,
name: "Jim Green",
age: 42,
address: "London No. 2 Lake Park",
children: [
{
key: 1311,
name: "Jim Green jr.",
age: 25,
address: "London No. 3 Lake Park",
},
{
key: 1312,
name: "Jimmy Green sr.",
age: 18,
address: "London No. 4 Lake Park",
},
],
},
],
},
],
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
},
]
const columns = [
{
title: '序号',
dataIndex: 'number',
scopedSlots: {
customRender: "number",
},
},
{
title: '业务名称',
dataIndex: 'name'
},
{
title: '排序',
dataIndex: 'sort',
scopedSlots: { customRender: 'sort' }
},
{
title: '流水号',
dataIndex: 'running',
scopedSlots: { customRender: 'running' }
},
{
title: '受理区域',
dataIndex: 'area',
scopedSlots: { customRender: 'area' }
}
]
export default {
data () {
return {
spinning: false,
title: '关联业务',
visible: false,
columns,
data,
rowkey: '',
// 是否选中
selected: false,
expandedRowKeys: [],
selectedRowKeys: [],
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
},
edit (data) {
const target = this.data.filter(item => item.key === data.key)[0]
target.editable = !target.editable
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 4}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="设备名称:">
<a-input placeholder="请输入设备名称"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="手机号:">
<a-input placeholder="请输入现场工作人员手机号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备位置:">
<a-input placeholder="请输入设备位置(X坐标,Y坐标,楼层)"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="分辨率:">
<a-select default-value="1920*1080">
<a-select-option value="1920*1080">
1920*1080
</a-select-option>
<a-select-option value="1366*768">
1366*768
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio value="未使用">
未使用
</a-radio>
<a-radio value="使用中">
使用中
</a-radio>
<a-radio value="已作废">
已作废
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="验证类型:">
<a-checkbox-group>
<a-checkbox value="1">
手机号
</a-checkbox>
<a-checkbox value="2">
身份证
</a-checkbox>
<a-checkbox value="3">
人脸验证
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item label="首页按钮:" :label-col="{span: 2}" :wrapper-col="{span: 20}">
<a-checkbox-group>
<a-checkbox value="1">
现场取号
</a-checkbox>
<a-checkbox value="2">
预约取号
</a-checkbox>
<a-checkbox value="3">
VIP取号
</a-checkbox>
<a-checkbox value="4">
现场签到
</a-checkbox>
<a-checkbox value="5">
重打小票
</a-checkbox>
<a-checkbox value="6">
政务服务网预约取号
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item label="温馨提示:" :label-col="{span: 2}" :wrapper-col="{span: 20}">
<a-input type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 2}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<div class="search_block">
<a-button class="addclass btnclass" @click="addModal">新增</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-select default-value="全部楼栋" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部楼层" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select default-value="全部窗口编号" class="select_width">
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入设备名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"></pubmodal>
<delmodal :message="message" ref="delModal"></delmodal>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '5'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '中心设备编号',
dataIndex: 'id'
},
{
title: '设备编号',
dataIndex: ''
},
{
title: '设备位置',
dataIndex: ''
},
{
title: '楼栋',
dataIndex: ''
},
{
title: '楼层',
dataIndex: ''
},
{
title: '窗口编号',
dataIndex: ''
},
{
title: '窗口名',
dataIndex: ''
},
{
title: '备注',
dataIndex: ''
},
{
title: '最后登录时间',
dataIndex: ''
},
{
title: '使用状态',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增窗口屏'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑窗口屏'
this.$refs.pubModal.show()
},
delModal () {
this.message = '窗口屏'
this.$refs.delModal.show()
}
}
}
</script>
<style lang="less" scoped>
.select_width{
width: 130px !important
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 18}">
<a-row type="flex" justify="start">
<a-col :span="12">
<a-form-model-item label="中心设备编号:">
<a-input placeholder="请输入中心设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备编号:">
<a-input placeholder="请输入设备编号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备IP:">
<a-input placeholder="请输入设备IP"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="端口号:">
<a-input placeholder="请输入端口号"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
<a-select-option value="2栋">
2栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择楼层:">
<a-select default-value="1楼">
<a-select-option value="1楼">
1楼
</a-select-option>
<a-select-option value="2楼">
2楼
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="选择窗口:">
<a-select default-value="">
<a-select-option value="1">
1
</a-select-option>
<a-select-option value="2">
2
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设置位置:">
<a-input placeholder="请输入设备位置"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用状态:">
<a-radio-group>
<a-radio value="未使用">
未使用
</a-radio>
<a-radio value="使用中">
使用中
</a-radio>
<a-radio value="已作废">
已作废
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item label="温馨提示:" :label-col="{span: 3}" :wrapper-col="{span: 20}">
<a-input type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 3}">
<a-button class="addclass btnclass"> 确认 </a-button>
<a-button class="quclass btnclass"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped="scoped">
</style>
<template>
<div>
<a-form-model :model="baseForm" :rules="baseFormRules" ref="baseFormRef" :hideRequiredMark="true">
<div class="card_title">基础设置</div>
<a-row :gutter="[8, 16]" type="flex" justify="start" class="baserow">
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 12}" label="取号时间间隔:" prop="quhao">
<a-input suffix="分钟" v-model="baseForm.quhao"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 12}" label="起始号码:" prop="qishi">
<a-input-number v-model="baseForm.qishi" :min="1" :max="999" style="width:100%"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 12}" label="中英文切换时间:" prop="qiehuan">
<a-input suffix="秒" v-model="baseForm.qiehuan"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 12}" label="上午最大人数:" prop="shangwu">
<a-input suffix="人" v-model="baseForm.shangwu"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 12}" label="下午最大人数:" prop="xiawu">
<a-input suffix="人" v-model="baseForm.xiawu"/>
</a-form-model-item>
</a-col>
<a-col :span="8"></a-col>
</a-row>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 12}" label="排号注册方式:" prop="paihao">
<a-checkbox-group
v-model="baseForm.paihao"
name="checkboxgroup"
>
<a-checkbox value="1">
人脸注册
</a-checkbox>
<a-checkbox value="2">
手机注册
</a-checkbox>
<a-checkbox value="3">
身份证注册
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 12}" label="暂离原因:" prop="tags">
<template v-for="(tag, index) in baseForm.tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag class="tag_style" v-else :key="tag" closable @close="() => handleClose(tag)">
{{ tag }}
</a-tag>
</template>
<a-input
v-if="inputVisible"
ref="input"
type="text"
:style="{ width: '78px' }"
:value="inputValue"
@change="handleInputChange"
@blur="handleInputConfirm"
@keyup.enter="$event.target.blur"
/>
<a-tag v-else class="tag_add" @click="showInput">
<a-icon type="plus" /> New Tag
</a-tag>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_pic">
<a-form-model-item :label-col="{span: 3}" :wrapper-col="{span: 12}" label="排队机图片:" prop="paiduiji">
<div class="clearfix">
<a-upload
v-model="baseForm.paiduiji"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
:file-list="baseForm.paiduiji"
@preview="handlePreview"
@change="handleChange"
>
<div v-if="baseForm.paiduiji.length < 8">
<a-icon type="plus" />
<div class="ant-upload-text">
Upload
</div>
</div>
</a-upload>
</div>
</a-form-model-item>
</a-col>
</a-row>
<div class="card_title">短信设置</div>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 15}" label="取号短信开关:" prop="quhaot">
<a-switch default-checked v-model="baseForm.quhaot"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 15}" label="叫号短信开关:" prop="jiaohaot">
<a-switch default-checked v-model="baseForm.jiaohaot"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 15}" label="重呼短信开关:" prop="chonghu">
<a-switch default-checked v-model="baseForm.chonghu"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 15}" label="临近叫号开关:" prop="linjin">
<a-switch default-checked v-model="baseForm.linjin"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 9}" :wrapper-col="{span: 15}" label="临近叫号短信:" prop="linjinjiao">
等于<a-input size="small" class="short_note" v-model="baseForm.linjinjiao"/>人时短信通知
</a-form-model-item>
</a-col>
</a-row>
<div class="card_title">小票模板设置</div>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item>
<a-button class="btnclass addclass btn" @click="goSubmit"> 确定 </a-button>
<a-button class="btnclass quclass btn" @click="resetForm"> 重置 </a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!-- 预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
<script>
import {isNumber} from '@/utils/validate'
function getBase64 (file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
})
}
const quhao =[
{ required: true, message: '请输入数字', trigger: 'blur' },
{ min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' },
{ validator: isNumber, trigger: 'blur'}
]
const qishi =[{
type: 'number',
min: 1,
max: 999,
required: true,
message: '请输入1~999之间的数字',
trigger: 'blur',
transform(value) {
if(value){
return Number(value);
}
}
}]
export default {
data () {
return {
inputVisible: false,
inputValue: '',
// 基础设置表单参数
baseForm: {
// 取号时间间隔
quhao: '',
// 起始时间
qishi: 1,
// 中英文切换时间
qiehuan: '',
// 上午最大人数
shangwu: '',
// 下午最大人数
xiawu: '',
// 排号注册方式
paihao: [],
// 暂离原因
tags: [],
// 排队机图片
paiduiji: [
// {
// uid: '1',
// name: 'image.png',
// status: 'done',
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
// },
],
// 取号短信开关
quhaot: false,
// 叫号短信开关
jiaohaot: false,
// 重呼短信开关
chonghu: false,
// 临近叫号开关
linjin: false,
// 临近叫号短信
linjinjiao: ''
},
// 基础设置表单验证
baseFormRules: {
quhao,
qishi
},
// 预览图可视
previewVisible: false,
// 预览图路径
previewImage: ''
}
},
methods: {
// 预览窗口关闭
handleCancel () {
this.previewVisible = false
},
async handlePreview (file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.previewImage = file.url || file.preview
this.previewVisible = true
},
// 上传图片数据改变
handleChange ({ fileList }) {
this.baseForm.paiduiji = fileList
},
goSubmit () {
this.$refs.baseFormRef.validate((valid)=> {
console.log(valid)
}
)
},
// 重置表单
resetForm () {
this.$nextTick(() => {
this.$refs.baseFormRef.resetFields()
})
},
// 上传图片之前
beforeUpload (file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('Image must smaller than 2MB!')
}
return isJpgOrPng && isLt2M
},
handleClose(removedTag) {
const tags = this.baseForm.tags.filter(tag => tag !== removedTag)
this.baseForm.tags = tags
},
showInput() {
this.inputVisible = true
this.$nextTick(function() {
this.$refs.input.focus()
})
},
handleInputChange(e) {
this.inputValue = e.target.value
},
handleInputConfirm() {
const inputValue = this.inputValue
let tags = this.baseForm.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue]
}
// Object.assign(this, {
// tags,
// inputVisible: false,
// inputValue: ''
// })
this.baseForm.tags = tags
this.inputVisible = false
this.inputValue = ''
console.log(this.baseForm.tags)
}
}
}
</script>
<style lang="less" scoped>
.baserow{
/deep/.ant-form-item-label{
height: 60px !important;
}
/deep/.ant-form-item-control-wrapper{
height: 55px !important;
}
}
.ant-input {
width: 100%
}
.short_note{
width: 50px;
margin: 0 10px;
}
.tag_add{
background: #fff;
border-style: dashed;
border-radius: 4px;
height: 2rem;
line-height: 1.8rem;
}
.tag_style{
background: rgba(52, 154, 255, 0.15);
border-radius: 4px;
border: 1px solid #1890FF;
height: 2rem;
line-height: 1.8rem;
}
</style>
<template>
<div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="12">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"></pubmodal>
<delmodal :message="message" ref="delModal"></delmodal>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '510123199001011111',
tel: '13888888888'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '身份证号',
dataIndex: 'id'
},
{
title: '手机号',
dataIndex: 'tel'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 删除弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增黑名单'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑黑名单'
this.$refs.pubModal.show()
},
delModal () {
this.message = '黑名单'
this.$refs.delModal.show()
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 4}" :wrapper-col="{span: 15}">
<a-form-model-item label="身份证号:">
<a-input />
</a-form-model-item>
<a-form-model-item label="手机号:">
<a-input />
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
<style lang="less" scope>
</style>
<template>
<div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="12">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="redact">自动转移</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"></pubmodal>
<delModal :message="message" ref="delModal"></delModal>
</div>
</template>
<script>
import PubModal from './Modal/PubModal.vue'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delModal: DelModal
},
data () {
const data = [
{
key: '1',
need: '公安户籍类',
able: '税务登记',
mode: '手动转移'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '需转移业务',
dataIndex: 'need'
},
{
title: '可转移业务',
dataIndex: 'able'
},
{
title: '转移方式',
dataIndex: 'mode'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 删除弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增业务转移'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑业务转移'
this.$refs.pubModal.show()
},
delModal () {
this.message = "业务转移"
this.$refs.delModal.show()
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-model-item label="需转移业务:">
<a-select default-value="全部">
<a-select-option value="全部">
全部
</a-select-option>
<a-select-option value="公安户籍类">
公安户籍类
</a-select-option>
<a-select-option value="税务登记" disabled>
税务登记
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="可转移业务:">
<a-checkbox-group>
<a-checkbox value="公安户籍类">
公安户籍类
</a-checkbox>
<a-checkbox value="税务登记">
税务登记
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
// 显示
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = true
}
}
}
</script>
<style lang="less" scope>
</style>
<template>
<div>
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="setModal(record.key)">设置</span>
</template>
</a-table>
</a-spin>
<setmodal ref="setModal"></setmodal>
</div>
</template>
<script>
import SetModal from './Modal/setModal'
export default {
components: {
setmodal: SetModal
},
data () {
const data = [
{
key: 1,
name: '公安户籍类',
running: 'GA',
allow: '',
start: 1,
morningnum: 100,
afternum: 100
},
{
key: 2,
name: '公安户籍类',
running: 'GA',
allow: '',
start: 2,
morningnum: 200,
afternum: 200
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '业务名称',
dataIndex: 'name'
},
{
title: '流水号',
dataIndex: 'running'
},
{
title: '允许取号',
dataIndex: 'allow'
},
{
title: '起始号数',
dataIndex: 'start'
},
{
title: '上午最大人数',
dataIndex: 'morningnum'
},
{
title: '下午最大人数',
dataIndex: 'afternum'
},
{
title: '设置',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
setData: {},
columns
}
},
created () {
this.getNumTable()
},
methods: {
async getNumTable () {
const { data: res } = await this.$http.post('/getnum')
this.data = res
},
setModal (val) {
this.$refs.setModal.show()
this.$refs.setModal.setTable(val)
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="设置"
destroyOnClose
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 6}" :wrapper-col="{span: 10}" :model="theForm" ref="theFormRef">
<a-form-model-item label="取号时间间隔:">
<a-input suffix="分钟"/>
</a-form-model-item>
<a-form-model-item label="起始号码:" prop="start">
<a-input v-model="theForm.start"/>
</a-form-model-item>
<a-form-model-item label="上午最大人数:" prop="morningnum">
<a-input suffix="人" v-model="theForm.morningnum"/>
</a-form-model-item>
<a-form-model-item label="下午最大人数:" prop="afternum">
<a-input suffix="人" v-model="theForm.afternum"/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 18, offset: 6}">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="resetForm"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
// 显示
visible: false,
theForm: {
start: '0',
morningnum: '0',
afternum: '0'
}
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
this.$refs.theFormRef.resetFields()
},
async setTable (key) {
const { data: res } = await this.$http.post('/setnum',{key})
this.theForm = res.keydata[0]
},
// 重置表单
resetForm () {
this.$nextTick(() => {
this.$refs.theFormRef.resetFields()
})
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="card_title">窗口屏皮肤设置</div>
<a-row :gutter="[8, 16]" type="flex" justify="start">
<a-col :span="8" class="t_center">
<div>窗口屏标准版</div>
<img width="100%" height="220px" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="">
<a-button class="btnclass addclass btn">使用中</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
</style>
<template>
<div>
<div class="search_block">
<div>
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
<a-button class="green" @click="vpModal"> 设置视频/轮播 </a-button>
</div>
<div class="warning_text">
<a-icon type="info-circle" />
请勿上传大于100M的视频文件,待视频上传完成再提交!
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :checked="record.use" v-model="record.use" @change="useChange(record)"/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="facilityModal(record)">关联设备</span>
<span class="redact" @click="issueModal">一键发布</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<pubmodal :title="title" @add="add" ref="pubModal"/>
<cormodal ref="corModal"/>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal.vue'
import CorModal from './Modal/corModal.vue'
import DelModal from '@/components/delmodal/index'
const data = [
{
key: '',
hand: '',
use: false,
type: '',
date: '',
url: ''
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '标题',
dataIndex: 'hand'
},
{
title: '视频/轮播',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '创建时间',
dataIndex: 'date'
},
{
title: '是否使用',
dataIndex: 'use',
scopedSlots: { customRender: 'use' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
pubmodal: PubModal,
cormodal: CorModal,
delmodal: DelModal
},
data () {
return {
spinning: false,
// 表格数据
data,
// 表格列参数
columns,
// 删除表格值
delkey: '',
// 弹出框标题
title: '',
// 弹出框内容
message: '',
// 预览弹出框
previewVisible: false,
// 预览图路径
previewImage: '',
// 分页
pagination: {
pageSizeOptions: ["5", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 5,
total: 0,
},
}
},
created () {
// 获取列表
this.createUser()
},
methods: {
// 新增弹出框
addModal () {
this.title = '新增'
this.$refs.pubModal.show()
},
async add (val) {
const { data: res } = await this.$http.post('/add', val)
this.data = res
},
async useChange (val) {
const { data: res } = await this.$http.post('/usechange',{
params:{
key: val.key,
use: val.use
}
})
this.data = res
},
vpModal () {
this.title = '设置视频/轮播'
this.$refs.pubModal.show()
},
facilityModal () {
this.title = '关联设备'
this.$refs.pubModal.show()
},
issueModal () {
this.$refs.corModal.show()
},
delModal (val) {
this.message = '视频/轮播'
this.delkey = val
this.$refs.delModal.show()
},
async delList (val) {
const { data:res } = await this.$http.post('/del', { key: val })
if (res.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
this.data = res.newlist
this.$message.success('删除成功')
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url
this.previewVisible = true
},
async createUser () {
const { data: res } = await this.$http.get('/name').catch(() => {})
if (res.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
// 给数据列表赋值
this.data = res.list
}
}
}
</script>
<style lang="less" scoped>
.green {
color: white;
background: #03b17d;
margin-left: 10px;
}
.warning_text {
color: #f96717;
line-height: 30px;
font-weight: 600;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
:model="addForm"
ref="addFormRef"
v-if="title == '新增'"
>
<!-- 新增内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="标题:" prop="addTitle">
<a-input v-model="addForm.addTitle"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="视频/轮播:" prop="addRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(addForm.addRadio)"
v-model="addForm.addRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="上传文件:" :key="upkey">
<a-upload
name="file"
v-model="fileList"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange"
>
<a-button class="btnclass addclass"> 上传文件 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 10}"
:model="setForm"
ref="setFormRef"
v-else-if="title == '设置视频/轮播'"
>
<!-- 视频和轮播内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="设置显示:" prop="setRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(setForm.addRadio)"
v-model="setForm.setRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="显示时间:" prop="time">
<a-input suffix="秒" placeholder="请输入时间" v-model="setForm.time"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 10}"
v-if="title == '关联设备'"
>
<!-- 关联设备内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<div>图片/视频标题:<span>中秋节合家欢庆祝图片</span></div>
<a-spin :spinning="spinning">
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange , onSelect: onSelect, onSelectAll: onSelectAll}"
:columns="columns"
:pagination="false"
:data-source="faciltyData"
/>
</a-spin>
</a-col>
</a-row>
</a-form-model>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn" @click="onSubmit(title)"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="reset(title)"> 重置 </a-button>
</a-form-model-item>
</a-modal>
</div>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
// 新增内容
const addForm = {
addTitle: '',
addRadio: 1,
address: ''
}
// 设置轮播/图片内容
const setForm = {
setRadio: 1,
time: ''
}
// 关联设备内容
const faciltyData = [
{
key: '1',
equipment: '',
remark: '轮播图'
}
]
// 关联设备表格
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备编号',
dataIndex: 'equipment'
},
{
title: '备注',
dataIndex: 'remark'
}
]
export default {
// 弹出框标题
props: ['title'],
data () {
return {
spinning: false,
// 显示
visible: false,
headers: {
authorization: 'authorization-text'
},
// 新增表单
addForm,
// 被选中的项
checked: '视频',
// 上传文件列表
fileList: [],
// 随机值
upkey: '',
// 视频/轮播设置表单
setForm,
// 关联设备表格
faciltyData,
// 关联设备表格参数
columns,
// 选中的行
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
// 关闭弹出框
handleCancel () {
this.selectedRowKeys = []
this.visible = false
},
// 关联设备表格选择
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
onSelect () {
},
onSelectAll () {
},
// 提交
onSubmit (val) {
if(val == '新增'){
const pramas = {
adtitle: this.addForm.addTitle,
type: this.checked,
url: this.addForm.address
}
this.$emit('add', pramas)
this.upkey = Math.random()
}else if (val == '设置视频/轮播') {
const pramas = {
type: this.checked,
time: this.setForm.time
}
this.$emit('set', pramas)
}else{
console.log('关联设备')
}
this.visible = false
},
// 选择器
change(e) {
if (e.target.value == 1)
this.checked = '视频'
else
this.checked = '轮播图片'
},
// 选择上传文件
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.fileList = info.fileList
this.addForm.address = imageUrl
})
}
},
// 上传文件之前
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'video/x-matroska'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt100M = file.size / 1024 / 1024 < 100
if (!isLt100M) {
this.$message.error('Image must smaller than 100MB!')
}
return isJpgOrPng && isLt100M
},
// 重置
reset (title) {
if (title == '新增') {
this.$nextTick(()=>{
this.fileList = []
this.addForm.address = ''
this.checked = '视频'
this.upkey = Math.random()
this.$refs.addFormRef.resetFields()
})
}else if (title == '设置视频/轮播') {
this.$nextTick(()=>{
this.checked = '视频'
this.$refs.setFormRef.resetFields()
})
}else {
this.selectedRowKeys = []
}
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="系统提示"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model>
<!-- 一键发布 -->
<div class="items_box t_center">
<div>是否确定要发布到其他站点?</div>
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
// 显示
visible: false
}
},
methods: {
show () {
this.visible = true
},
handleCancel () {
this.visible = false
this.$message.error('取消发布')
}
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
</style>
<template>
<div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="12">
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal(record)">编辑</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<pubmodal :title="title" ref="pubModal"></pubmodal>
<delmodal :message="message" ref="delModal"></delmodal>
</div>
</template>
<script>
import PubModal from './Modal/PubModal.vue'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
id: '510123199001011111',
tel: '13888888888'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '身份证号',
dataIndex: 'id'
},
{
title: '手机号',
dataIndex: 'tel'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
visible: false,
// 删除弹出框内容
message: ''
}
},
methods: {
addModal () {
this.title = '新增VIP设置'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑VIP设置'
this.$refs.pubModal.show()
},
delModal () {
this.message = "VIP设置"
this.$refs.delModal.show()
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 新增弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-model-item label="身份证号:">
<a-input placeholder="请输入身份证号"/>
</a-form-model-item>
<a-form-model-item label="手机号:">
<a-input placeholder="请输入手机号"/>
</a-form-model-item>
<a-form-model-item label="密码:">
<a-input placeholder="请输入密码"/>
</a-form-model-item>
<a-form-model-item label="上传照片:">
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show(){
this.visible=true
},
handleCancel(){
this.visible=false
}
}
}
</script>
<style lang="less" scope>
</style>
<template>
<div>
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="未审批">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="noTrialColumns"
:data-source="noTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact" @click="toDistribute">分发</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="审批通过">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="passTrialColumns"
:data-source="passTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact">查看详情</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="3" tab="审批拒绝">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="refuseTrialColumns"
:data-source="refuseTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact">查看详情</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
<Department ref="DepartModal"/>
</div>
</template>
<script>
import Department from './Modal/Department'
// 未审批列
const noTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '初审人员',
dataIndex: ''
},
{
title: '初审时间',
dataIndex: ''
},
{
title: '审批状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
// 审批通过列
const passTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '审批状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
// 审批拒绝列
const refuseTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '审批状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
// 级联选择器数据
const options= [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou'
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing'
},
],
},
]
export default {
components: {
Department
},
data () {
return {
spinning: false,
noTrialData: [{key:1}],
noTrialColumns,
passTrialData: [{key:1}],
passTrialColumns,
refuseTrialData: [{key:1}],
refuseTrialColumns,
selectedRowKeys: [],
options
}
},
methods: {
toDistribute() {
this.$refs.DepartModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="选择部门"
width="1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<div class="tag_box">
<a-tag v-for="(item, index) in departmentChoice" :key="item.name" closable @close="closeTag(item, index)">
{{item.name}}
</a-tag>
</div>
<a-row :gutter="[40, 0]" type="flex" justify="start">
<a-col :span="4" v-for="(item, index) in departmentList" :key="index">
<div :class="[item.checked? 'check': '',partbox]" @click="checkPart(item)">{{item.name}}</div>
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
partbox: 'part_box',
departmentChoice: [],
departmentList:[
{name: '市场部'}, {name: '营销部'}
]
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
},
checkPart(v) {
if(typeof v.checked == 'undefined') {
this.$set(v,'checked',false);
}
if(!v.checked){
v.checked = !v.checked
}else{
v.checked = !v.checked
}
if(v.checked){
this.departmentChoice.push(v)
}else{
this.departmentChoice.forEach((k, i)=>{
if(v.name == k.name){
this.departmentChoice.splice(i, 1)
}
})
}
// if(typeof item.checked == 'undefined') {
// this.$set(item,'checked',true);
// this.departmentChoice.push(item)
// } else {
// item.checked = !item.checked;
// if(!item.checked){
// this.departmentChoice.forEach((k, i)=>{
// if(item.name == k.name){
// this.departmentChoice.splice(i, 1)
// }
// })
// }
// }
},
closeTag(k,i) {
this.departmentList.forEach(item=>{
if(item.name == k.name) {
item.checked = false
}
})
this.departmentChoice.splice(i, 1)
}
}
}
</script>
<style scoped lang="less">
.tag_box{
padding-bottom: 20px;
}
.ant-tag{
padding: 10px;
font-size: 14px;
}
.part_box{
border: 1px solid #eee;
color: #999;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.part_box:hover{
cursor: pointer;
}
.check{
border: 1px solid #1890ff;
color: #1890ff;
}
</style>
<template>
<div>
<div v-if="show">
<a-tabs v-model="activeKey">
<a-tab-pane key="1" tab="未审批">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="noTrialColumns"
:data-source="noTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact" @click="toTrial">初审</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="审批通过">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="passTrialColumns"
:data-source="passTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact" @click="trailResult">查看详情</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="3" tab="审批拒绝">
<div class="search_block">
<a-button class="addclass btnclass">导出</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-cascader :options="options" placeholder="请选择村镇"/>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称/申请人姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="refuseTrialColumns"
:data-source="refuseTrialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="operation">
<span class="redact" @click="trailRefuse">查看详情</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
<TrailPage
:btnText="btnText"
:state="state"
:isCommision="isCommision"
@backList="backList"
ref="trailPage"
/>
</div>
</template>
<script>
import TrailPage from '../compontents/TrailPage/Index'
// 级联选择器数据
const options= [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou'
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing'
},
],
},
]
// 未审批列
const noTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '初审状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
// 审批通过列
const passTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '初审人员',
dataIndex: ''
},
{
title: '初审时间',
dataIndex: ''
},
{
title: '初审状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
// 审批拒绝列
const refuseTrialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '申请人姓名',
dataIndex: 'id'
},
{
title: '申请人电话',
dataIndex: ''
},
{
title: '申请人身份证号码',
dataIndex: ''
},
{
title: '地点',
dataIndex: ''
},
{
title: '一件事名称',
dataIndex: ''
},
{
title: '是否代办',
dataIndex: ''
},
{
title: '提交时间',
dataIndex: ''
},
{
title: '初审人员',
dataIndex: ''
},
{
title: '初审时间',
dataIndex: ''
},
{
title: '初审状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components:{
TrailPage
},
data () {
return {
show: true,
options,
spinning: false,
noTrialData: [{key:1}],
noTrialColumns,
passTrialData: [{key:1}],
passTrialColumns,
refuseTrialData: [{key:1}],
refuseTrialColumns,
selectedRowKeys: [],
btnText: '',
state: 0,
isCommision: false,
activeKey: '1'
}
},
methods: {
backList() {
this.show = true
},
toTrial() {
this.show = false
this.$refs.trailPage.show()
this.btnText = '初审'
this.state = 0
this.isCommision = false
},
trailResult() {
this.show = false
this.$refs.trailPage.show()
this.state = 1
this.isCommision = false
},
trailRefuse() {
this.show = false
this.$refs.trailPage.show()
this.state = 2
this.isCommision = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div style="margin: -20px 0 0 -24px">
<!-- 入口 -->
<a-tabs default-active-key="1" v-if="tabKey == 1">
<a-tab-pane key="1" tab="一件事管理">
<div class="search_block">
<div>
<a-button class="addclass btnclass" @click="addOneThing">新增</a-button>
<a-button class="delclass btnclass">批量删除</a-button>
</div>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-input-search placeholder="请输入一件事名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="oneThingColumns"
:data-source="oneThingData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="check">
<span class="redact" @click="codeModal">查看二维码</span>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editOneThing(record)">编辑</span>
<span class="redact" @click="workBench()">事项工作台</span>
<span class="del" @click="delOneThing(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="2" tab="材料库">
<div class="search_block">
<div>
<a-button class="addclass btnclass" @click="addMaterial">新增</a-button>
<a-button class="delclass btnclass">批量删除</a-button>
</div>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-input-search placeholder="请输入材料名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="materialColumns"
:data-source="materialData"
bordered
:row-selection="{ selectedRowKeys: selectedRowKeys }"
>
<template slot="check">
<span class="redact" @click="tableModal">空白表格</span>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editMaterial(record)">编辑</span>
<span class="del" @click="delMaterial(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
<!-- 新增和编辑公用 -->
<a-tabs default-active-key="11" v-else>
<a-tab-pane key="11" :tab="tabName">
<a-form-model :label-col="{span: 3}" :wrapper-col="{span: 15}">
<a-row type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="一件事名称:">
<a-input placeholder="请输入一件事名称"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="支持自主申报:">
<a-switch default-checked :defaultChecked="false"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="选择事项:">
<a-button class="addclass btnclass" @click="choiceItem">选择事项</a-button>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :wrapper-col="{span: 21, offset: 3}">
<a-tag color="blue">
所选事项名称
</a-tag>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="选择材料:">
<a-button class="addclass btnclass" @click="choiceMaterial">选择材料</a-button>
</a-form-model-item>
<a-form-model-item :wrapper-col="{span: 21, offset: 3}">
<a-table
:columns="addMaterialColumns"
:data-source="addMaterialData"
bordered
>
<template slot="check">
<span class="redact" @click="tableModal">空白表格</span>
</template>
<template slot="operation" slot-scope="text, record">
<span class="del" @click="addMaterialDel(record.key)">删除</span>
</template>
</a-table>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 21, offset: 3}">
<a-button class="addclass btnclass btn" @click="saveData"> 保存 </a-button>
<a-button class="addclass btnclass btn"> 保存并进入事项工作台 </a-button>
<a-button class="quclass btnclass btn"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-tab-pane>
</a-tabs>
<!-- 二维码弹出框 -->
<a-modal title="查看二维码" :visible="codeVisible" :footer="null" @cancel="handleCancel">
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<img alt="example" style="width: 100%" :src="previewImage" />
<div class="t_center">请用微信扫一扫扫描上方二维码,预览事项问答流程</div>
<a-button class="quclass btnclass btn" @click="handleCancel"> 关闭 </a-button>
</a-modal>
<!-- 查看表格 -->
<a-modal title="查看表格" :visible="tableVisible" :footer="null" @cancel="handleCancel">
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-table
:columns="tableColumns"
:data-source="tableData"
bordered
:pagination="false"
>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="downLoad(record.key)">下载</span>
</template>
</a-table>
</a-modal>
<AddItem ref="addItem"/>
<AddMaterial ref="addMaterial"/>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import AddItem from './Modal/addItem'
import AddMaterial from './Modal/addMaterial'
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
// 一件事数据
const oneThingData = [
{
key: '1',
id: '5'
}
]
// 一件事列
const oneThingColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '一件事名称',
dataIndex: 'id'
},
{
title: '创建时间',
dataIndex: ''
},
{
title: '二维码',
dataIndex: '',
scopedSlots: { customRender: 'check' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
// 材料数据
const materialData = [
{
key: '1',
id: '5'
}
]
// 材料列
const materialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '材料名称',
dataIndex: 'id'
},
{
title: '材料必要性',
dataIndex: ''
},
{
title: '材料类型',
dataIndex: ''
},
{
title: '材料形式',
dataIndex: ''
},
{
title: '纸质材料份数',
dataIndex: ''
},
{
title: '表格查看',
dataIndex: '',
scopedSlots: { customRender: 'check' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
// 新增材料数据
const addMaterialData = [
{
key: '1',
id: '5'
}
]
// 新增材料列
const addMaterialColumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '材料名称',
dataIndex: 'id'
},
{
title: '关联事项',
dataIndex: ''
},
{
title: '材料必要性',
dataIndex: ''
},
{
title: '材料类型',
dataIndex: ''
},
{
title: '材料形式',
dataIndex: ''
},
{
title: '纸质材料份数',
dataIndex: ''
},
{
title: '表格查看',
dataIndex: '',
scopedSlots: { customRender: 'check' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
// 空白表格数据
const tableData = [
{
key: '1',
id: '5'
}
]
// 空白表格列
const tableColumns = [
{
title: '表格名称',
dataIndex: 'key'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
AddItem, // 新增一件事事项弹出框
AddMaterial, // 新增一件事材料弹出框
PubModal, // 材料公用弹出框
DelModal, // 删除提示框
},
data () {
return {
spinning: false,//加载
oneThingData,//一件事数据
oneThingColumns,//一件事列
materialData,//材料数据
materialColumns,//材料列
addMaterialData,//新增一件事材料数据
addMaterialColumns,//新增一件事材料列
tableData,//空白表格数据
tableColumns,//空白表格列
tabKey: 1,//显示切换
previewImage: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',//二维码图片路径
codeVisible: false,//二维码弹出框
tableVisible: false,//表格弹出框
tabName: '',//新增编辑标签名称
title: '',//公用弹出框标题
message: '',//删除弹出框信息
selectedRowKeys: [],//表格选择行
}
},
methods: {
// 弹出框关闭
handleCancel() {
this.codeVisible = false
this.tableVisible = false
},
// 新增一件事
async addOneThing() {
this.tabKey = 2
this.tabName = '新增一件事管理'
},
// 编辑一件事
editOneThing() {
this.tabKey = 2
this.tabName = '编辑一件事管理'
},
// 选择事项
choiceItem() {
this.$refs.addItem.show()
},
// 选择材料
choiceMaterial() {
this.$refs.addMaterial.show()
},
// 保存
saveData() {
this.tabKey = 1
},
// 二维码弹出框
codeModal() {
this.codeVisible = true
},
//表格查看
tableModal() {
this.tableVisible = true
},
// 新增材料
addMaterial() {
this.title= '新增材料'
this.$refs.pubModal.show()
},
// 编辑材料
editMaterial() {
this.title= '编辑材料'
this.$refs.pubModal.show()
},
// 删除一件事
delOneThing() {
this.message = '一件事'
this.$refs.delModal.show()
},
// 删除材料
delMaterial() {
this.message = '申请材料'
this.$refs.delModal.show()
},
//新增一件事材料删除
addMaterialDel() {
this.message = '申请材料'
this.$refs.delModal.show()
},
//下载表格
downLoad() {
},
// 事项工作台
workBench() {
this.$router.push('/workbench')
}
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
.ant-tabs-tabpane{
padding: 0 20px !important;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
width="1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model :label-col="{span: 8}" :wrapper-col="{span: 14}">
<a-row type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="材料名称:" :label-col="{span: 4}" :wrapper-col="{span: 19}">
<a-input placeholder="请输入材料名称"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="关联事项:" :label-col="{span: 4}" :wrapper-col="{span: 19}">
<a-select mode="default" style="width: 100%" placeholder="请选择事项" :showSearch="true">
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
{{ (i + 9).toString(36) + i }}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="材料形式:">
<a-select default-value="1">
<a-select-option value="1">
纸质
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="材料必要性:">
<a-select default-value="1">
<a-select-option value="1">
必要
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="材料类型:">
<a-select default-value="1">
<a-select-option value="1">
原件
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="电子材料格式:">
<a-select default-value="1">
<a-select-option value="1">
不限
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="来源渠道:">
<a-select default-value="1">
<a-select-option value="1">
申请人自备
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="纸质材料份数:">
<a-input />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="纸质材料规格:">
<a-select default-value="1">
<a-select-option value="1">
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="减免模式:">
<a-select default-value="1">
<a-select-option value="1">
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="盖印方式:">
<a-select default-value="1" aria-placeholder="请选择盖章或盖手印方式">
<a-select-option value="1">
盖章
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="是否减免:">
<a-radio-group :default-value="1">
<a-radio :value="1">
</a-radio>
<a-radio :value="2">
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="是否容缺:" :label-col="{span: 4}" :wrapper-col="{span: 19}">
<a-radio-group :default-value="1">
<a-radio :value="1">
必要
</a-radio>
<a-radio :value="2">
非必要
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="上传附件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传空白表格 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="上传附件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传示例样表 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="来源渠道说明:">
<a-textarea />
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="填报须知:">
<a-textarea />
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="受理标准:">
<a-textarea />
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="要求提供材料的依据:">
<a-textarea />
</a-form-model-item>
</a-col>
<a-col :span="12" class="up_load_file">
<a-form-model-item label="备注:">
<a-textarea />
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible=true
},
handleCancel() {
this.visible=false
}
}
}
</script>
<style lang="less" scope>
.ant-upload-list-item-info{
width: 200px !important
}
.ant-upload-list-item{
margin: 8px 0
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="一件事事项列表"
width="1300px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-row :gutter="[40, 0]" type="flex" justify="start">
<a-col :span="12">
<div class="search_block">
<a-button class="delclass btnclass">批量删除</a-button>
<a-form-model layout="inline" class="search">
<a-input-group>
<a-form-model-item>
<a-select default-value="jack">
<a-select-option value="jack">
Jack (100)
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入事项名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-input-group>
</a-form-model>
</div>
<a-table
:columns="Columns"
:data-source="delItemData"
bordered
:row-selection="{ selectedRowKeys: delItemRowKeys }"
>
<template slot="operation" slot-scope="text, record">
<span class="del" @click="delItem(record.key)">删除</span>
</template>
</a-table>
</a-col>
<a-col :span="12">
<div class="search_block">
<a-button class="addclass btnclass">批量加入</a-button>
<a-form-model layout="inline" class="search">
<a-form-model-item>
<a-select default-value="jack">
<a-select-option value="jack">
Jack (100)
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入事项名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-table
:columns="Columns"
:data-source="addItemData"
bordered
:row-selection="{ selectedRowKeys: addItemRowKeys }"
>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="addItem(record.key)">加入</span>
</template>
</a-table>
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
const delItemData=[
{
key: '1',
id: '5'
}
]
const Columns=[
{
title: '部门',
dataIndex: 'key'
},
{
title: '事项名称',
dataIndex: 'id'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
const addItemData= [
{
key: '1',
id: '5'
}
]
export default {
data () {
return {
visible: false,
delItemRowKeys: [],
addItemRowKeys: [],
delItemData,
Columns,
addItemData,
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="选择材料"
width="1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-row :gutter="[40, 0]" type="flex" justify="start">
<a-col :span="8">
<div class="mate_list" v-for="(item, index) in this.mateList" :key="index">
<div class="mate_name">{{item}}</div><a-icon type="close" @click="delMate(index)"/>
</div>
</a-col>
<a-col :span="16">
<div class="search_block">
<a-button class="addclass btnclass">批量加入</a-button>
<a-form-model layout="inline" class="search">
<a-form-model-item>
<a-input-search placeholder="请输入材料名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-table
:columns="Columns"
:data-source="materialData"
bordered
:row-selection="{ selectedRowKeys: materialRowKeys }"
>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="addMaterial(record.key)">加入</span>
</template>
</a-table>
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
const Columns=[
{
title: '材料名称',
dataIndex: 'key'
},
{
title: '关联事项',
dataIndex: 'id'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
const materialData= [
{
key: '1',
id: '5'
}
]
export default {
data () {
return {
visible: false,
Columns,
materialData,
materialRowKeys: [],
mateList:['按非法违法文峰区文峰区危房发顺丰说我EVE我']
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
},
// 删除材料列表
delMate() {
this.$message.success("删除材料成功")
}
}
}
</script>
<style scoped lang="less">
.mate_list{
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
color: #1890ff;
padding: 0 5px;
margin-bottom: 5px;
.mate_name{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 250px;
}
}
</style>
<template>
<div>
<div v-if="visible">
<a-row :gutter="[40, 0]" type="flex" justify="start">
<a-col :span="6">
<div>
<div class="card_title">申请信息</div>
<div class="box">
<div class="info_item">
<div>一件事名称</div><div></div>
</div>
<div class="info_item">
<div>申请人姓名</div><div></div>
</div>
<div class="info_item">
<div>申请人电话</div><div></div>
</div>
<div class="info_item">
<div>申请人身份证号码</div><div>511111111111111111</div>
</div>
<div class="info_item">
<div>申请人所属地点</div><div></div>
</div>
<div class="info_item">
<div>申请时间</div><div></div>
</div>
<div class="info_item">
<div>是否代办</div><div></div>
</div>
<div v-if="isCommision">
<div class="info_item">
<div>代办人姓名</div><div></div>
</div>
<div class="info_item">
<div>代办人电话</div><div></div>
</div>
</div>
<div class="info_item">
<div>取件方式</div><div></div>
</div>
<div class="info_item">
<div>初审状态</div><div></div>
</div>
<div v-if="stateAll[state].firstDetail">
<div class="info_item">
<div>初审人员</div><div></div>
</div>
<div class="info_item">
<div>初审时间</div><div></div>
</div>
<div class="info_item">
<div>初审批注</div><div></div>
</div>
</div>
<div v-if="stateAll[state].trailState">
<div class="info_item">
<div>审批状态</div><div></div>
</div>
<div v-if="stateAll[state].trailDetail">
<div class="info_item">
<div>审批人员</div><div></div>
</div>
<div class="info_item">
<div>审批时间</div><div></div>
</div>
<div class="info_item">
<div>审批批注</div><div></div>
</div>
</div>
</div>
<div v-if="stateAll[state].popMessage" class="info_item">
<div>提示信息</div><div></div>
</div>
</div>
</div>
</a-col>
<a-col :span="12">
<div v-if="!stateAll[state].mateTabs">
<div class="card_title">材料列表</div>
<div class="box">
<div class="meta_item">
<div class="meta_title">
<div>材料名称</div>
<a-button class="addclass btnclass">下载</a-button>
</div>
<div>
<img class="mate_pic" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="" @click="preview">
</div>
</div>
</div>
</div>
<div v-else>
<a-tabs default-active-key="1">
<a-tab-pane class="box" key="1" tab="审批详情">
<div>
部门审批完成度(n/n),n个部门通过,n个部门拒绝
</div>
<div>
<a-card>
<div class="flex">
<div class="department">部门</div>
<div :class="trailStatus?'trail-suc':'trail-fail'">{{trailStatus?'审批通过':'审批拒绝'}}</div>
</div>
<div>审批批注:</div>
<div class="lineation"></div>
<a-row>
<a-col :span="6">审批人员:<span>东方不败</span></a-col>
<a-col :span="8">审批时间:<span>xxxx-xx-xx xx:xx:xx</span></a-col>
</a-row>
</a-card>
</div>
</a-tab-pane>
<a-tab-pane class="box" key="2" tab="材料列表">
<div class="meta_item">
<div class="meta_title">
<div>材料名称</div>
</div>
<div>
<img class="mate_pic" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="" @click="preview">
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
<div class="trail_box" v-if="stateAll[state].notCareful">
<div>
<a-checkbox checked>
审批后自动跳转到下一条
</a-checkbox>
</div>
<div>
<a-button class="btnclass" v-if="stateAll[state].backList" @click="toList">返回列表</a-button>
<a-button class="btnclass delclass" @click="onRefuse">{{btnText}}拒绝</a-button>
<a-button class="btnclass addclass" @click="onAccept">{{btnText}}通过</a-button>
</div>
<div class="page_turn">
<div>上一条</div>
<div>下一条</div>
</div>
</div>
<div class="trail_box" v-else>
<div></div>
<div>
<a-button class="btnclass" @click="toList">返回列表</a-button>
</div>
<div class="page_turn">
<div>上一条</div>
<div>下一条</div>
</div>
</div>
</a-col>
<a-col :span="6">
<div>
<div class="card_title">问答报告</div>
<div>
<div>这是一个问题</div>
<div>
<a-checkbox checked>
这是一个选项
</a-checkbox>
</div>
</div>
</div>
</a-col>
</a-row>
</div>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<AcceptModal ref="acceptModal"/>
<RefuseModal :status="status" ref="refuseModal"/>
</div>
</template>
<script>
import AcceptModal from './Modal/Accept'
import RefuseModal from './Modal/Refuse'
export default {
components: {
AcceptModal,
RefuseModal
},
props:{
// 按钮文字
btnText: {
type: String,
required: true
},
/**
* state
* 0 初审 未初审
* 1 初审通过
* 2 初审拒绝
* 3 审批(管理员) 审批通过
* 4 审批拒绝
* 5 审批(部门) 未审批
* 6 审批通过
* 7 审批拒绝
*
*/
state: {
type: Number,
required: true
},
// 是否代办
isCommision: {
type: Boolean,
required: true
}
},
data () {
return {
visible: false,
previewVisible: false,
previewImage: '',
trailStatus: false,
status: 1,
/**
* firstDetail 初审详情(人员,时间,批注)
* trailState 审批状态
* trailDetail 审批详情(人员,时间,批注)
* popMessage 提示信息
* mateTabs
* notCareful 未审时包含的拒绝和通过等
* backList 部门审批的返回列表
*/
stateAll: [
{ firstDetail: false, trailState: false, trailDetail: false, popMessage: false, mateTabs: false, notCareful: true, backList: true },
{ firstDetail: true, trailState: false, trailDetail: false, popMessage: false, mateTabs: false, notCareful: false, backList: false },
{ firstDetail: true, trailState: false, trailDetail: false, popMessage: false, mateTabs: false, notCareful: false, backList: false },
{ firstDetail: true, trailState: true, trailDetail: true, popMessage: true, mateTabs: true, notCareful: false, backList: false },
{ firstDetail: true, trailState: true, trailDetail: true, popMessage: true, mateTabs: true, notCareful: false, backList: false },
{ firstDetail: true, trailState: true, trailDetail: false, popMessage: false, mateTabs: false, notCareful: true, backList: true },
{ firstDetail: true, trailState: true, trailDetail: true, popMessage: false, mateTabs: false, notCareful: false, backList: false },
{ firstDetail: true, trailState: true, trailDetail: true, popMessage: false, mateTabs: false, notCareful: false, backList: false },
]
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.previewVisible = false
},
preview(v) {
this.previewVisible = true
this.previewImage = v.target.currentSrc
},
onRefuse() {
if(this.state == 0) {
this.status = 0
}else if(this.state == 5) {
this.status = 1
}
this.$refs.refuseModal.show()
},
onAccept() {
this.$refs.acceptModal.show()
},
toList() {
this.visible = false
this.$emit('backList')
}
}
}
</script>
<style scoped lang="less">
.flex{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
/deep/.ant-card-body{
line-height: 50px !important;
padding: 0 24px !important;
}
.department{
font-size: 18px;
font-weight: bold;
}
.trail-suc{
color: #3eaf7c;
font-size: 16px;
font-weight: bold;
}
.trail-fail{
color: #f5222d;
font-size: 16px;
font-weight: bold;
}
.lineation{
width: 100%;
border-top: 1px solid #eee;
position: absolute;
left: 0;
}
.box{
padding: 0 15px;
height: 65vh;
overflow-Y: auto;
}
/deep/.ant-card{
margin: 5px 0 !important;
}
/deep/.ant-tabs-nav{
width: 100% !important;
}
/deep/.ant-tabs-tab{
width: 45% !important;
text-align: center;
}
.trail_box{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin-top: 15px;
}
.mate_pic{
margin: 5px 15px;
width: 50px;
height: 50px;
}
.page_turn{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
width: 20%;
}
.info_item{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 5px 0;
font-size: 14px;
}
.meta_item{
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.meta_title{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="初审结果"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-row :gutter="[40, 10]" type="flex" justify="start">
<a-col :span="24">
初审意见:<span>初审拒绝</span>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
bordered
>
<template slot="operation">
<span class="redact">上传</span>
</template>
</a-table>
</a-spin>
</a-col>
<a-col :span="24">
<a-textarea placeholder="请输入批注" allow-clear />
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
const columns = [
{
title: '序号',
dataIndex: ''
},
{
title: '材料名称',
dataIndex: ''
},
{
title: '上传状态',
dataIndex: ''
},
{
title: '操作',
scopedSlots: { customRender: 'operation' }
},
]
const data = [
{key:1}
]
export default {
data () {
return {
spinning: false,
visible: false,
columns,
data
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
title="审批结果"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-row :gutter="[40, 10]" type="flex" justify="start">
<a-col :span="24">
审批结果:<span>审批通过</span>
</a-col>
<a-col :span="24">
<a-textarea placeholder="请输入批注" allow-clear />
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="stateAll[status].title"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-row :gutter="[40, 10]" type="flex" justify="start">
<a-col :span="24">
{{stateAll[status].detail}}<span>{{stateAll[status].result}}</span>
</a-col>
<a-col :span="24">
<a-textarea placeholder="请输入批注" allow-clear />
</a-col>
</a-row>
<div class="btn_box">
<a-button class="addclass btnclass btn"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="handleCancel"> 取消 </a-button>
</div>
</a-modal>
</div>
</template>
<script>
export default {
props: {
status: {
type: Number,
required: true
}
},
data () {
return {
visible: false,
stateAll: [
{ title:'初审结果', detail: '初审意见', result: '初审拒绝' },
{ title:'审批结果', detail: '审批结果', result: '审批拒绝' },
]
}
},
methods: {
show() {
this.visible = true
},
handleCancel() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" > 新增 </a-button>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="start">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">编辑</a>
<a class="del" @click="delmodal">删除</a>
</span>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
PubModal,
DelModal
},
data () {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "设备编号",
dataIndex: "name",
},
{
title: "IP",
dataIndex: "adress",
},
{
title: "端口号",
dataIndex: "phone",
},
{
title: "取件柜地址",
dataIndex: "createTime",
},
{
title: "超时时间(天)",
dataIndex: "createTimet",
},
{
title: "临近超时(天)",
dataIndex: "createTimes",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
addclick() {
this.title= '新增取件柜'
this.$refs.pubModal.show()
},
delmodal() {
this.message= '取件柜'
this.$refs.delModal.show()
},
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
width="1000px"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4}"
:wrapper-col="{ span: 18}"
>
<a-form-model-item label="设备编号:">
<a-input placeholder="请输入设备编号" />
</a-form-model-item>
<a-form-model-item label="IP地址:">
<a-input placeholder="请输入IP地址" />
</a-form-model-item>
<a-form-model-item label="管理员密码:">
<a-input placeholder="请输入密码" />
</a-form-model-item>
<a-form-model-item label="取件柜地址:">
<a-cascader :options="options" change-on-select placeholder="请选择区域"/>
<a-input placeholder="请输入详细地址" />
</a-form-model-item>
<a-form-model-item label="超时时间:">
<a-input placeholder="请输入超时时间(天)" />
</a-form-model-item>
<a-form-model-item label="临近超时:">
<a-input placeholder="请输入临近超时(天)" />
</a-form-model-item>
<a-form-model-item label="联系方式:">
<a-input placeholder="请输入联系方式" />
</a-form-model-item>
<a-form-model-item label="是否启用短信:">
<a-switch default-checked />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="close" > 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:['title'],
data () {
return {
visible: false,
options: [
{
value: 'Zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州',
children: [
{
value: 'xihu',
label: '西湖',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" > 新增 </a-button>
<div class="search">
<a-input-search placeholder="请输入快递员姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<div class="concent">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">编辑</a>
<a class="del" @click="delmodal">删除</a>
</span>
</a-table>
</a-spin>
</div>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
PubModal,
DelModal
},
data() {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "姓名",
dataIndex: "user",
},
{
title: "电话",
dataIndex: "name",
},
{
title: "账号",
dataIndex: "phone",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
addclick() {
this.title = '新增快递员'
this.$refs.pubModal.show()
},
delmodal() {
this.message = '快递员'
this.$refs.delModal.show()
},
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="姓名:">
<a-input placeholder="请输入姓名" />
</a-form-model-item>
<a-form-model-item label="联系电话:">
<a-input placeholder="请输入联系电话" />
</a-form-model-item>
<a-form-model-item label="用户名:">
<a-input placeholder="请输入用户名" />
</a-form-model-item>
<a-form-model-item label="密码:">
<a-input placeholder="请输入密码" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="close" > 取消 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:['title'],
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-button
class="btnclass addclass"
@click="returnOne"
style="margin: 20px 0"
>&lt; 返回上一级</a-button
>
<div class="message">
<span></span>
基本信息
</div>
<a-form-model ref="Form" layout="inline" :model="emsPick" :rules="ruleForm">
<a-row>
<a-col :span="24">
<a-form-model-item
label="唯一标识"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="identification"
>
<a-input
v-model.trim="emsPick.identification"
placeholder="请输入唯一标识,建议使用英文,并且统一命名规则"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="接口名称"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="portName"
>
<a-input
v-model.trim="emsPick.portName"
placeholder="请输入接口名称"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="接口地址"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="portUrl"
>
<a-input
v-model.trim="emsPick.portUrl"
placeholder="请输入接口地址"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="接口文档"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="portDoc"
>
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
@change="handleChange"
>
<a-button type="primary">上传</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="请求类型"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="portType"
>
<a-radio-group v-model="emsPick.portType">
<a-radio value="公共接口">公共接口</a-radio>
<a-radio value="站点接口">站点接口</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="请求方式"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="portWay"
>
<a-radio-group v-model="emsPick.portWay">
<a-radio value="POST">POST</a-radio>
<a-radio value="GET">GET</a-radio>
<a-radio value="Web Service">Web Service</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="接口描述"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="describe"
>
<a-textarea
:rows="4"
v-model="emsPick.describe"
/> </a-form-model-item
></a-col>
<div class="message">
<span></span>
参数信息
</div>
<a-col :span="24">
<a-form-model-item
label="头部参数"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
style="width: 100%; margin-left: -38px"
>
<table
border="1"
style="
margin: 0.3rem;
border-color: rgba(216, 216, 216, 0.30196078431372547);
width: 100%;
"
>
<tr class="header">
<th>参数名称</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
<th>示例值</th>
<th>操作</th>
</tr>
<tr
style="height: 0.54rem"
v-for="(item, index) in emsPick.contentList"
:key="index"
>
<td>
<a-input
v-model.trim="item.headName"
placeholder="请输入参数名称"
/>
</td>
<td>
<a-select
v-model.trim="item.headype"
placeholder="请输入类型"
>
<a-select-option value="11"> integer </a-select-option>
</a-select>
</td>
<td>
<a-checkbox :value="item.headis"> </a-checkbox>
</td>
<td>
<a-input
v-model.trim="item.headText"
placeholder="请输入备注说明"
/>
</td>
<td>
<a-input
v-model.trim="item.headExample"
placeholder="请输入示例值"
/>
</td>
<td class="deletes" @click="headDelete(index)">删除</td>
</tr>
<tr>
<td class="addNum" colspan="6" @click="headAdd">+增加一条</td>
</tr>
</table>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="请求参数"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
style="width: 100%; margin-left: -38px"
>
<table
border="1"
style="
margin: 0.3rem;
border-color: rgba(216, 216, 216, 0.30196078431372547);
width: 100%;
"
>
<tr class="header">
<th>参数名称</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
<th>示例值</th>
<th>操作</th>
</tr>
<tr
style="height: 0.54rem"
v-for="(item, index) in emsPick.portList"
:key="index"
>
<td>
<a-input
v-model.trim="item.headName"
placeholder="请输入参数名称"
/>
</td>
<td>
<a-select
v-model.trim="item.headype"
placeholder="请输入类型"
>
<a-select-option value="11"> integer </a-select-option>
</a-select>
</td>
<td>
<a-checkbox :value="item.headis"> </a-checkbox>
</td>
<td>
<a-input
v-model.trim="item.headText"
placeholder="请输入备注说明"
/>
</td>
<td>
<a-input
v-model.trim="item.headExample"
placeholder="请输入示例值"
/>
</td>
<td class="deletes" @click="portDelete(index)">删除</td>
</tr>
<tr>
<td class="addNum" colspan="6" @click="portAdd">+增加一条</td>
</tr>
</table>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="返回参数"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
style="width: 100%; margin-left: -38px"
>
<table
border="1"
style="
margin: 0.3rem;
border-color: rgba(216, 216, 216, 0.30196078431372547);
width: 100%;
"
>
<tr class="header">
<th>参数名称</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
<th>示例值</th>
<th>操作</th>
</tr>
<tr
style="height: 0.54rem"
v-for="(item, index) in emsPick.returnList"
:key="index"
>
<td>
<a-input
v-model.trim="item.headName"
placeholder="请输入参数名称"
/>
</td>
<td>
<a-select
v-model.trim="item.headype"
placeholder="请输入类型"
>
<a-select-option value="11"> integer </a-select-option>
</a-select>
</td>
<td>
<a-checkbox :value="item.headis"> </a-checkbox>
</td>
<td>
<a-input
v-model.trim="item.headText"
placeholder="请输入备注说明"
/>
</td>
<td>
<a-input
v-model.trim="item.headExample"
placeholder="请输入示例值"
/>
</td>
<td class="deletes" @click="returnDelete(index)">删除</td>
</tr>
<tr>
<td class="addNum" colspan="6" @click="returnAdd">+增加一条</td>
</tr>
</table>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="返回校验"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="verify"
>
<a-input
v-model.trim="emsPick.verify"
placeholder="请输入返回校验"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="返回实例"
:labelCol="{ lg: { span: 2 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="example"
>
<a-textarea
:rows="4"
v-model="emsPick.example"
/> </a-form-model-item
></a-col>
</a-row>
<div>
<a-button
class="addclass btnclass"
style="margin: 0 20px"
@click="handleOk"
>
确定
</a-button>
<a-button class="quclass btnclass" @click="reset"> 重置 </a-button>
</div>
</a-form-model>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
identification: [
{ required: true, message: "此处为必填项", trigger: "blur" },
],
portName: [
{ required: true, message: "此处为必填项", trigger: "blur" },
],
portUrl: [{ required: true, message: "此处为必填项", trigger: "blur" }],
example: [{ required: true, message: "此处为必填项", trigger: "blur" }],
},
emsPick: {
portType: "公共接口",
contentList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
portList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
returnList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
},
headers: {
authorization: "authorization-text",
},
};
},
methods: {
returnOne() {
this.$router.push({ path: "ports", query: {} });
},
handleChange(info) {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
if (info.file.status === "done") {
this.$message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === "error") {
this.$message.error(`${info.file.name} file upload failed.`);
}
},
headDelete(i) {
this.emsPick.contentList.forEach((obj) => {
if (obj.id == i) {
this.emsPick.contentList.splice(i, 1);
}
});
},
headAdd() {
this.emsPick.contentList.push({
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
});
this.emsPick.contentList.forEach((obj, i) => {
obj.id = i;
});
},
portDelete(i) {
this.emsPick.portList.forEach((obj) => {
if (obj.id == i) {
this.emsPick.portList.splice(i, 1);
}
});
},
portAdd() {
this.emsPick.portList.push({
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
});
this.emsPick.portList.forEach((obj, i) => {
obj.id = i;
});
},
returnDelete(i) {
this.emsPick.returnList.forEach((obj) => {
if (obj.id == i) {
this.emsPick.returnList.splice(i, 1);
}
});
},
returnAdd() {
this.emsPick.returnList.push({
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
});
this.emsPick.returnList.forEach((obj, i) => {
obj.id = i;
});
},
handleOk() {
this.$refs.Form.validate((valid) => {
if (valid) {
console.log(this.emsPick);
} else {
console.log(this.emsPick);
return false;
}
});
},
reset() {
this.emsPick = {
identification: "",
portName: "",
portUrl: "",
portType: "",
portWay: "",
describe: "",
contentList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
portList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
returnList: [
{
id: 0,
headName: "",
headype: "integer",
headis: false,
headText: "",
headExample: "",
},
],
verify: "",
example: "",
};
},
},
mounted() {
if (this.$route.query.list) {
this.emsPick = this.$route.query.list;
}
},
watch: {
"$route.query.list": function (newVal) {
if (newVal) {
this.emsPick = newVal;
}
},
},
};
</script>
<style lang="less" scoped>
@import "@/assets/css/common.less";
.message {
span {
display: inline-block;
height: 30px;
width: 4px;
border: 2px solid @redact;
margin-bottom: -9px;
margin-right: 7px;
}
}
table input {
border: none;
}
table input:focus {
border: none;
box-shadow: none;
}
.header {
height: 0.54rem;
background: @gray-3;
}
.addNum {
text-align: center;
color: @redact;
background: @gray-3;
}
.deletes {
color: @error-color;
}
/deep/.ant-row .ant-form-item {
margin: 5px 0;
width: 70%;
}
</style>
\ No newline at end of file
<template>
<div>
<div>
<div class="top">
<div>
<a-button type="primary" @click="addPort" style="margin: 20px 0">新增接口</a-button>
<a-button type="danger" style="margin: 20px 20px">批量删除</a-button>
</div>
<div>
<a-cascader
:options="options"
placeholder="全部类型"
v-model="alltype"
@change="onChangedep"
style="width: 150px"
/>
<a-cascader
:options="optionsWay"
placeholder="全部请求方式"
v-model="allway"
@change="onChangeWay"
style="width: 150px; margin-left: 20px"
/>
<a-input-search
placeholder="请输入接口名称搜索"
enter-button="搜索"
v-model="allsearch"
@search="onSearchPort"
style="width: 350px; margin-left: 20px"
>
</a-input-search>
</div>
</div>
<a-table
bordered
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns"
:data-source="data"
>
<div slot="action" slot-scope="text, record" class="table_action">
<span @click="editAction(record)" class="redact edit">编辑</span>
<span @click="depAction(record)" class="del delete">删除</span>
</div>
</a-table>
</div>
</div>
</template>
<script>
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
number: i,
portName: "前锋区业务查询服务",
portType: "公共接口",
portWay: "POST",
});
}
export default {
data() {
return {
ruleForm: [],
columns: [
{
title: "序号",
dataIndex: "number",
},
{
title: "接口名称",
dataIndex: "portName",
},
{
title: "接口类型",
dataIndex: "portType",
},
{
title: "请求方式",
dataIndex: "portWay",
},
{
title: "操作",
width: 200,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
alltype:'',
allway:'',
allsearch:'',
data,
timeSelect: [
"09:00:00",
"10:00:00",
"11:00:00",
"12:00:00",
"13:00:00",
"14:00:00",
"15:00:00",
"16:00:00",
"17:00:00",
],
visible: false,
itemData: {},
selectedRowKeys: [],
options: [
{
value: "1",
label: "公共接口",
},
{
value: "2",
label: "站点接口",
},
],
optionsWay: [
{
value: "1",
label: "POST",
},
{
value: "2",
label: "GET",
},
],
};
},
methods: {
addPort(){
this.$router.push({path:'basis',query:{}})
},
editAction(data) {
this.$router.push({path:'basis',query:{
list:data
}})
},
depAction() {},
onChange() {},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
itemHandleOk() {},
onChangedep() {},
onChangeWay() {},
onSearchPort() {},
},
};
</script>
<style lang="less" scoped>
.table_action {
color: @primary-color;
cursor: pointer;
display: flex;
justify-content: space-around;
}
.delete {
color: @error-color;
cursor: pointer;
}
.edit {
cursor: pointer;
}
.top {
display: flex;
justify-content: space-between;
}
/deep/.ant-row .ant-form-item {
margin: 0;
width: 100%;
.ant-input-number {
width: 100%;
}
}
/deep/.ant-col .ant-col-24 {
margin: 0;
}
/deep/.ant-form-inline .ant-form-item-with-help {
margin: 0;
}
</style>
\ No newline at end of file
<template>
<div class="reserbasics">
</div>
</template>
<script>
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="basics">
<div class="agreement">
预约协议设置<span
>设置群众在使用预约排号服务之前须阅读知悉该使用协议</span
>
<div>
<editor ref="fuwenben"></editor>
</div>
</div>
<div class="time">
预约时间设置
<span
>设置预约排号服务支持预约的时限,比如未来3个工作日即指今天、明天、后天</span
>
<div>
<a-input-number
id="inputNumber"
v-model="timeValue"
:min="1"
:max="100"
@change="onChangeNum"
/>个工作日
</div>
</div>
<div class="isNote">
是否启用短信<span
>设置在使用预约排号服务的过程中,系统向预约群众推送短信的功能</span
>
<div>
<a-switch default-checked v-model="isNote" @change="onChangeNote" />
</div>
</div>
<div class="isGuide">
是否需要引导<span
>启用引导之后,系统使用简单问答的方式对群众的办事需求进行筛选;不启用引导,则按“业务-事项”进行筛选</span
>
<div>
<a-switch default-checked v-model="isGuide" @change="onChangeGuide" />
</div>
</div>
<div class="imgUpload">
宣传图片上传<span>设置预约排号服务网页上展示的宣传图片</span>
<div class="clearfix">
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
:file-list="fileList"
@preview="handlePreview"
@change="handleChange"
>
<div v-if="fileList.length < 5">
<a-icon type="plus" />
<div class="ant-upload-text">添加图片</div>
</div>
</a-upload>
<a-modal
:visible="previewVisible"
:footer="null"
@cancel="handleCancel"
>
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</div>
<div>
<a-button
class="addclass btnclass"
style="margin: 0 20px"
@click="handleOk"
>
确定
</a-button>
<a-button class="quclass btnclass"> 重置 </a-button>
</div>
</div>
</template>
<script>
import Editor from "@/components/Editor";
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
export default {
components: {
Editor,
},
data() {
return {
content: "",
timeValue: 0,
isNote: true,
isGuide: true,
loading: false,
imageUrl: "",
previewVisible: false,
previewImage: "",
fileList: [],
};
},
methods: {
onChangeNum(value) {
console.log(value);
},
onChangeNote(checked) {
console.log(checked);
},
onChangeGuide(checked) {
console.log(checked);
},
handleCancel() {
this.previewVisible = false;
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
handleChange({ fileList }) {
this.fileList = fileList;
},
handleOk() {
if (this.$refs.fuwenben.content) {
this.content = this.$refs.fuwenben.content.substr(3 ,this.$refs.fuwenben.content.length-7);
}
},
},
};
</script>
<style lang="less" scoped>
.agreement,
.time,
.isNote,
.isGuide,
.imgUpload {
font-size: 14px;
color: #333333;
span {
font-size: 12px;
color: #888888;
display: inline-block;
margin: 10px 0;
margin-left: 20px;
}
}
.agreement {
width: 100%;
height: 100%;
div {
width: 1200px;
height: 400px;
}
}
.time {
margin-top: 60px;
}
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
\ No newline at end of file
<template>
<div>
<a-button class="btnclass addclass" @click="addClass" style="margin: 20px 0"
>新增分类</a-button
>
<a-table bordered :columns="columns" :data-source="data">
<div slot="action" slot-scope="text, record" class="table_action redact">
<span @click="addAction(record)">添加子集</span>
<span @click="itemAction(record)">业务/事项</span>
<span @click="editAction(record)" class="edit">编辑</span>
<span @click="depAction(record)" class="delete">删除</span>
</div></a-table
>
<div class="addmodal">
<a-modal
v-model="addVisible"
title="新增分类"
:footer="null"
width="800px"
>
<div class="add_text">
<a-form-model
ref="Form"
layout="inline"
:model="emsPick"
:rules="ruleForm"
>
<a-row>
<a-col :span="24">
<a-form-model-item
label="父级名称"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
身份证办理</a-form-model-item
></a-col
>
<a-col :span="24">
<a-form-model-item
label="分类名称"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="className"
>
<a-input
v-model.trim="emsPick.className"
placeholder="请输入分类名称"
:disabled="wxyrtdisable"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="问题设置"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="issue"
>
<a-input
v-model.trim="emsPick.issue"
placeholder="请输入问题"
:disabled="wxyrtdisable"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="温馨提示"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<editor
ref="fuwenben"
style="height: 260px"
></editor> </a-form-model-item
></a-col>
<a-col
:span="24"
style="position: relative; top: 92px; left: 40%"
>
<a-form-model-item
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<a-button class="quclass btnclass btn" @click="isdelete"> 取消 </a-button>
<a-button class="btnclass addclass btn" @click="addHandleOk">
确认
</a-button>
</a-form-model-item></a-col
>
</a-row>
</a-form-model>
</div>
</a-modal>
</div>
<div class="itemmodal">
<a-modal
v-model="itemVisible"
title="添加业务事项"
:footer="null"
width="800px"
style="top: 200px"
>
<div class="item_text">
<a-form-model
ref="itemForm"
layout="inline"
:model="itemData"
:rules="ruleForm"
>
<a-row>
<a-col :span="24">
<a-form-model-item
label="业务名称"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="className"
>
<a-select
v-model.trim="itemData.name"
:disabled="wxyrtdisable"
>
<a-select-option
v-for="item in nameSelect"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="事项名称"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="metterName"
>
<a-select
v-model.trim="itemData.metterName"
:disabled="wxyrtdisable"
>
<a-select-option
v-for="item in metterSelect"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</a-form-model-item>
</a-col>
<a-col
:span="24"
style="position: relative; top: 92px; left: 40%"
>
<a-form-model-item
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<a-button class="quclass btnclass btn" @click="isdelete"> 取消 </a-button>
<a-button class="btnclass addclass btn" @click="itemHandleOk">
确认
</a-button>
</a-form-model-item></a-col
>
</a-row>
</a-form-model>
</div>
</a-modal>
</div>
<div class="editmodal">
<a-modal
v-model="editVisible"
title="编辑分类"
:footer="null"
width="800px"
>
<div class="edit_text">
<a-form-model
ref="editForm"
layout="inline"
:model="editData"
:rules="ruleForm"
>
<a-row>
<a-col :span="24">
<a-form-model-item
label="分类名称"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="className"
>
<a-input
v-model.trim="editData.className"
placeholder="请输入分类名称"
:disabled="wxyrtdisable"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="问题设置"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="issue"
>
<a-input
v-model.trim="editData.issue"
placeholder="请输入问题"
:disabled="wxyrtdisable"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="温馨提示"
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<editor
ref="fuwenben"
style="height: 300px"
></editor> </a-form-model-item
></a-col>
<a-col
:span="24"
style="position: relative; top: 92px; left: 40%"
>
<a-form-model-item
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<a-button class="quclass btnclass btn" @click="isdelete"> 取消 </a-button>
<a-button class="btnclass addclass btn" @click="editHandleOk">
确认
</a-button>
</a-form-model-item></a-col
>
</a-row>
</a-form-model>
</div>
</a-modal>
</div>
</div>
</template>
<script>
import Editor from "@/components/Editor";
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
className: "身份证办理",
id: i,
name: "公安户籍类",
metterName: "民办学校(幼儿园)办学层次、类别变更审批",
});
}
export default {
components: {
Editor,
},
data() {
return {
ruleForm: {
className: [
{ required: false, message: "此处为必填项", trigger: "blur" },
],
issue: [{ required: false, message: "此处为必填项", trigger: "blur" }],
},
options: [
{
value: "1",
label: "公共服务部",
},
{
value: "1",
label: "网络理政部",
},
{
value: "1",
label: "党政建设部",
},
],
columns: [
{
title: "分类名称",
dataIndex: "className",
},
{
title: "ID",
dataIndex: "id",
},
{
title: "业务名称",
dataIndex: "name",
},
{
title: "事项名称",
dataIndex: "metterName",
},
{
title: "操作",
width: 300,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
data,
addVisible: false,
itemVisible: false,
editVisible: false,
emsPick: {
className: "",
issue: "",
},
itemData: {
name: "公安户籍类",
metterName: "18岁以上办身份证",
},
editData: {},
wxyrtdisable: false,
nameSelect: ["公安户籍类"],
metterSelect: ["18岁以上办身份证"],
isadd:true
};
},
methods: {
addClass(){
this.editVisible = true;
this.isadd = true
},
addAction() {
this.addVisible = true;
},
itemAction() {
this.itemVisible = true;
},
editAction(data) {
this.editVisible = true;
this.isadd = false
this.editData = data
},
depAction(value) {
console.log("111" + value);
},
addHandleOk() {
if (this.$refs.fuwenben.content) {
this.emsPick.content = this.$refs.fuwenben.content.substr(3 ,this.$refs.fuwenben.content.length-7);
}
this.addVisible = false;
// this.$refs.Form.validate((valid) => {
// })
},
itemHandleOk() {
if (this.$refs.fuwenben.content) {
this.itemData.content = this.$refs.fuwenben.content.substr(3 ,this.$refs.fuwenben.content.length-7);
}
this.itemVisible = false;
// this.$refs.itemForm.validate((valid) => {
// })
},
editHandleOk() {
if (this.$refs.fuwenben.content) {
this.editData.content = this.$refs.fuwenben.content.substr(3 ,this.$refs.fuwenben.content.length-7);
}
if(this.isadd){
console.log('新增')
}else{
console.log('编辑')
}
this.editVisible = false;
// this.$refs.itemForm.validate((valid) => {
// })
},
isdelete(){
this.addVisible = false;
this.itemVisible = false;
this.editVisible = false;
}
},
};
</script>
<style lang="less" scoped>
.table_action {
cursor: pointer;
display: flex;
justify-content: space-around;
}
.add_text,
.edit_text {
height: 600px;
div {
font-size: 14px;
margin: 5px 0;
}
}
.item_text {
height: 300px;
div {
font-size: 14px;
margin: 10px 0;
}
}
.delete {
color: @error-color;
}
.edit {
color: @primary-color;
}
/deep/.ant-row .ant-form-item {
margin: 0;
width: 100%;
}
/deep/.ant-col .ant-col-24 {
margin: 0;
}
/deep/.ant-form-inline .ant-form-item-with-help {
margin: 0;
}
</style>
\ No newline at end of file
<template>
<div class="additem">
<div class="title">
<a-button
class="btnclass addclass"
@click="returnOne"
style="margin: 20px 0"
>&lt; 返回上一级
</a-button>
<div>请选择需要设置的事项</div>
</div>
<div class="header">
<a-cascader
:options="options"
placeholder="请选择部门"
@change="onChangedep"
style="width: 150px; margin-right: 20px"
/>
<a-input-search
placeholder="请输入事项名称搜索"
@search="onSearchMatter"
style="width: 300px; margin-right: 50px"
class="search"
>
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</div>
<a-table
bordered
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns"
:data-source="data"
>
</a-table>
<div class="footer">
<div>
<span>已选择{{12}}个事项</span>
<span>清空选中列表</span>
</div>
<div>
<span>查看事项列表</span>
<span>取消设置</span>
<span>设置时间</span>
</div>
</div>
</div>
</template>
<script>
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
matter: "县公安局",
name: "机动车登记证、行驶证核发",
});
}
export default {
data() {
return {
options: [
{
value: "1",
label: "公共服务部",
},
{
value: "1",
label: "网络理政部",
},
{
value: "1",
label: "党政建设部",
},
],
columns: [
{
title: "部门",
dataIndex: "matter",
},
{
title: "事项名称",
dataIndex: "name",
},
],
data,
selectedRowKeys: [],
};
},
methods: {
returnOne() {
this.$destroy.go(-1);
},
onChangedep() {},
onSearchMatter(value) {
console.log(value);
},
depAction(value) {
console.log(value);
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
},
};
</script>
<style lang="less" scoped>
.additem {
.title {
display: flex;
justify-content: space-between;
div {
width: 100%;
line-height: 80px;
text-align: center;
font-size: 16px;
font-weight: 600;
margin-right: 100px;
}
}
.header {
text-align: right;
margin-bottom: 20px;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 150px;
background: #fff;
}
}
</style>
\ No newline at end of file
<template>
<div class="matter">
<div class="left">
<p>预约系统事项列表</p>
<div class="left_top">
<a-button class="delclass btnclass"> 批量删除 </a-button>
<a-cascader
:options="options"
placeholder="请选择部门"
@change="onChangedep"
style="width: 150px; margin-left: 150px"
/>
<a-input-search
placeholder="请输入事项名称搜索"
@search="onSearchMatter"
style="width: 300px"
class="search"
>
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</div>
<a-table
bordered
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns"
:data-source="data"
>
<span
slot="operation"
slot-scope="text, record"
@click="depAction(record)"
class="delete del"
>删除</span
></a-table
>
</div>
<div class="right">
<p>站点事项列表</p>
<div class="left_top">
<a-button class="addclass btnclass"> 批量加入 </a-button>
<a-cascader
:options="options"
placeholder="请选择部门"
@change="onChangedep"
style="width: 150px; margin-left: 150px"
/>
<a-input-search
placeholder="请输入事项名称搜索"
@search="onSearchMatter"
style="width: 300px"
class="search"
>
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 搜索
</a-button>
</a-input-search>
</div>
<a-table
bordered
:row-selection="{
selectedRowKeys: selectedRowKeysRight,
onChange: onSelectChangeRight,
}"
:columns="columnsZhan"
:data-source="data"
>
<span
slot="action"
slot-scope="text, record"
@click="addAction(record)"
class="add redact"
>加入</span
></a-table
>
</div>
</div>
</template>
<script>
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
matter: "县公安局",
name: "机动车登记证、行驶证核发",
});
}
export default {
components: {},
data() {
return {
options: [
{
value: "1",
label: "公共服务部",
},
{
value: "1",
label: "网络理政部",
},
{
value: "1",
label: "党政建设部",
},
],
columns: [
{
title: "部门",
dataIndex: "matter",
},
{
title: "事项名称",
dataIndex: "name",
},
{
title: "操作",
dataIndex: "operation",
scopedSlots: { customRender: "operation" },
},
],
columnsZhan: [
{
title: "部门",
dataIndex: "matter",
},
{
title: "事项名称",
dataIndex: "name",
},
{
title: "操作",
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
data,
selectedRowKeys: [],
selectedRowKeysRight: [],
loading: false,
};
},
methods: {
onChangedep(value) {
console.log(value);
},
onSearchMatter(value) {
console.log(value);
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
onSelectChangeRight(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeysRight = selectedRowKeys;
},
depAction(value) {
console.log(value);
},
addAction(value) {
console.log(value);
},
},
};
</script>
<style lang="less" scoped>
.matter {
width: 100%;
height: 100%;
display: flex;
.left,
.right {
width: 50%;
height: 100%;
// background: @gray-1;
p {
font-size: 14px;
}
.left_top {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
}
}
.left {
padding-right: 20px;
border-right: 1px solid #f0f2f5;
}
.right {
margin-left: 20px;
}
.delete {
color: @error-color;
cursor: pointer;
}
.add {
cursor: pointer;
}
/deep/.button {
cursor: pointer;
}
</style>
\ No newline at end of file
<template>
<div>
<div>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.title">
<a-button
class="btnclass addclass"
@click="addQuantum"
style="margin: 20px 0"
>{{ tabNum == 1 ? "新增时段" : "新增" }}</a-button
>
<a-table bordered :columns="columns" :data-source="data">
<span
slot="itemName"
slot-scope="text, record"
@click="itemDetails(record)"
class="edit redact"
>{{ text }}等几个事项</span
>
<div slot="action" slot-scope="text, record" class="table_action">
<span
v-if="tabNum == 1"
@click="editAction(record)"
class="edit redact"
>编辑</span
>
<div v-else>
<span @click="alterTime(record)" class="edit redact"
>修改时间</span
>
<span @click="alterItem(record)" class="edit redact"
>修改事项</span
>
<span @click="alterNum(record)" class="edit redact"
>修改人数</span
>
</div>
<span @click="depAction(record)" class="delete">删除</span>
</div>
</a-table>
</a-tab-pane>
</a-tabs>
</div>
<div>
<a-modal
v-model="visible"
title="编辑时段"
:footer="null"
width="500px"
style="top: 200px"
>
<div class="item_text">
<a-form-model
ref="Form"
layout="inline"
:model="itemData"
:rules="ruleForm"
>
<a-row>
<a-col :span="24">
<a-form-model-item
label="开始时间"
:labelCol="{ lg: { span: 4 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="startTime"
>
<a-select v-model.trim="itemData.startTime">
<a-select-option
v-for="item in timeSelect"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="结束时间"
:labelCol="{ lg: { span: 4 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="endTime"
>
<a-select v-model.trim="itemData.endTime">
<a-select-option
v-for="item in timeSelect"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="预约人数"
:labelCol="{ lg: { span: 4 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
prop="people"
>
<a-input-number
id="inputNumber"
v-model.trim="itemData.people"
:min="1"
:max="100"
@change="onChange"
/>
</a-form-model-item>
</a-col>
<a-col :span="24" style="position: relative; left: 40%">
<a-form-model-item
:labelCol="{ lg: { span: 3 }, sm: { span: 10 } }"
:wrapperCol="{ lg: { span: 19 }, sm: { span: 14 } }"
>
<a-button class="quclass btnclass btn" @click="isdelete">
取消
</a-button>
<a-button class="btnclass addclass btn" @click="itemHandleOk">
确认
</a-button>
</a-form-model-item></a-col
>
</a-row>
</a-form-model>
</div>
</a-modal>
</div>
</div>
</template>
<script>
const data = [];
for (let i = 0; i < 15; i++) {
data.push({
number: i,
startTime: "09:00:00",
endTime: "10:00:00",
people: "5",
});
}
const ordinaryData = [];
for (let i = 0; i < 15; i++) {
ordinaryData.push({
number: i,
startTime: "09:00:00",
endTime: "10:00:00",
people: "5",
});
}
const delayedData = [];
for (let i = 0; i < 15; i++) {
delayedData.push({
number: i,
dates: "周六",
timeQuantum: "09:00:00~12:00:00",
itemName: "工商营业执照办理",
poepNum: "5",
});
}
const specialData = [];
for (let i = 0; i < 15; i++) {
specialData.push({
number: i,
workday: "周六",
itemName: "工商营业执照办理",
poepNum: "5",
});
}
export default {
data() {
return {
tabs: [
{
key: 1,
title: "一般事项时段设置",
},
{
key: 2,
title: "延时事项时段设置",
},
{
key: 3,
title: "特殊事项时段设置",
},
],
columns: [
{
title: "序号",
dataIndex: "number",
},
{
title: "开始时间",
dataIndex: "startTime",
},
{
title: "结束时间",
dataIndex: "endTime",
},
{
title: "预约人数",
dataIndex: "people",
},
{
title: "操作",
width: 200,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
ordinary_columns: [
{
title: "序号",
dataIndex: "number",
},
{
title: "开始时间",
dataIndex: "startTime",
},
{
title: "结束时间",
dataIndex: "endTime",
},
{
title: "预约人数",
dataIndex: "people",
},
{
title: "操作",
width: 200,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
delayed_columns: [
{
title: "序号",
dataIndex: "number",
},
{
title: "日期",
dataIndex: "dates",
},
{
title: "时间段",
dataIndex: "timeQuantum",
},
{
title: "事项名称",
dataIndex: "itemName",
scopedSlots: { customRender: "itemName" },
},
{
title: "预约人数",
dataIndex: "poepNum",
},
{
title: "操作",
width: 300,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
special_columns: [
{
title: "序号",
dataIndex: "number",
},
{
title: "工作日",
dataIndex: "workday",
},
{
title: "事项名称",
dataIndex: "itemName",
scopedSlots: { customRender: "itemName" },
},
{
title: "预约人数",
dataIndex: "poepNum",
},
{
title: "操作",
width: 300,
dataIndex: "action",
scopedSlots: { customRender: "action" },
},
],
data,
ordinaryData,
delayedData,
specialData,
ruleForm: [],
tabNum: 1,
timeSelect: [
"09:00:00",
"10:00:00",
"11:00:00",
"12:00:00",
"13:00:00",
"14:00:00",
"15:00:00",
"16:00:00",
"17:00:00",
],
visible: false,
itemData: {},
};
},
methods: {
//tab切换
callback(e) {
this.tabNum = e;
if (e == 1) {
this.columns = this.ordinary_columns;
this.data = this.ordinaryData;
} else if (e == 2) {
this.columns = this.delayed_columns;
this.data = this.delayedData;
} else if (e == 3) {
this.columns = this.special_columns;
this.data = this.specialData;
}
},
//新增打开madel
addQuantum() {
if (this.tabNum == 1) {
this.visible = true;
}else{
this.$router.push({path:'additem'})
}
},
//编辑
editAction(data) {
this.visible = true;
this.itemData = data
},
alterTime() {},
alterItem() {},
alterNum() {},
//删除
depAction() {},
//点击事项
itemDetails() {},
//编辑时段等事件
onChange() {},
itemHandleOk() {
this.visible = false;
},
isdelete() {
this.visible = false;
},
},
mounted() {
//初始化table表头及数据
this.columns = this.ordinary_columns;
this.data = this.ordinaryData;
},
};
</script>
<style lang="less" scoped>
@import "@/assets/css/common.less";
.table_action {
color: @primary-color;
cursor: pointer;
display: flex;
justify-content: space-around;
}
.delete {
color: @error-color;
cursor: pointer;
}
.edit {
cursor: pointer;
}
/deep/.ant-row .ant-form-item {
margin: 0;
width: 100%;
.ant-input-number {
width: 100%;
}
}
/deep/.ant-col .ant-col-24 {
margin: 0;
}
/deep/.ant-form-inline .ant-form-item-with-help {
margin: 0;
}
/deep/.ant-tabs-nav-scroll {
border-bottom: 2px solid @gray-5;
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
font-size: 14px;
font-weight: 600;
color: @redact;
}
/deep/.ant-tabs-nav .ant-tabs-tab:hover {
color: @redact;
}
/deep/.ant-tabs-ink-bar {
height: 3px;
background: @redact;
}
// .redact {
// color: @redact;
// }
</style>
\ No newline at end of file
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass" >新增</a-button>
<div class="search">
<a-input-search placeholder="请输入设备名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<a-row>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact" @click="branModal">关联部门</a>
<a class="redact m12">编辑</a>
<a class="del" @click="delModal">删除</a>
</span>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubModal :title="title" ref="pubModal"/>
<CorreModal ref="correModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import CorreModal from './Modal/CorreModal'
import DelModal from '@/components/delmodal/index'
export default {
components:{
PubModal,
CorreModal,
DelModal
},
data() {
return {
spinning: false,
title: '',
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "设备名称",
dataIndex: "name",
},
{
title: "所属楼栋",
dataIndex: "adress",
},
{
title: "所属楼层",
dataIndex: "phone",
},
{
title: "设备位置",
dataIndex: "phones",
},
{
title: "关联部门",
dataIndex: "phonees",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
addclick() {
this.title = '新增样表设备'
this.$refs.pubModal.show()
},
delModal() {
this.message= '样表机'
this.$refs.delModal.show()
},
branModal() {
this.$refs.correModal.show()
},
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="关联部门"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<div>设备名称:MJY</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:row-selection="{
selectedRowKeys: selectedRowKeys
}"
>
</a-table>
</a-spin>
<a-form-model>
<a-form-model-item class="btn_box">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
spinning: false,
visible: false,
selectedRowKeys: [],
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "部门名称",
dataIndex: "name",
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="设备名称:">
<a-input placeholder="请输入设备名称" />
</a-form-model-item>
<a-form-model-item label="中心名称:">
<a-input placeholder="请输入中心名称" />
</a-form-model-item>
<a-form-model-item label="设置位置:">
<a-input placeholder="请输入设备位置(X坐标,Y坐标,楼层)"/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:['title'],
data() {
return {
visible: false,
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-row :gutter="[80, 0]" type="flex" justify="center" style="padding: 0 40px">
<a-col :span="12">
<div class="card_title">样表系统事项列表</div>
<div class="search_block search">
<a-button class="delclass btnclass" > 批量删除 </a-button>
<a-form-model layout="inline">
<a-form-model-item>
<a-select default-value="lucy">
<a-select-option value="lucy"> 全部部门 </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入事项名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:row-selection="{
selectedRowKeys: selectedRowKeys
}"
>
<div slot="action">
<div @click="delmodal" class="del">删除</div>
</div>
</a-table>
</a-spin>
</a-col>
<a-col :span="12">
<div class="card_title">站点事项列表</div>
<div class="search_block">
<a-button class="addclass btnclass" > 批量加入 </a-button>
<a-form-model layout="inline" class="search">
<a-form-model-item>
<a-select default-value="lucy" >
<a-select-option value="lucy"> 全部部门 </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入事项名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:row-selection="{
selectedRowKeys: selectedRowKeys
}"
>
<span slot="action">
<div class="redact">加入</div>
</span>
</a-table>
</a-spin>
</a-col>
</a-row>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import DelModal from '@/components/delmodal/index'
export default {
components: {
DelModal
},
data () {
return {
spinning: false,
message: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
selectedRowKeys: [],
columns: [
{
title: "部门",
dataIndex: "name",
},
{
title: "事项名称",
dataIndex: "adress",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
}
},
methods: {
delmodal() {
this.message = '样表系统事项'
this.$refs.delModal.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-row :gutter="[80, 0]" type="flex" justify="center" style="padding: 0 40px">
<a-col :span="12">
<div class="card_title">事项文件夹目录</div>
<div class="search_block search" style="justify-content: flex-end">
<a-form-model layout="inline">
<a-form-model-item>
<a-select default-value="lucy">
<a-select-option value="lucy"> 全部部门 </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-input-search placeholder="请输入事项名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:row-selection="{
selectedRowKeys: selectedRowKeys
}"
>
<div slot="action">
<div class="redact" @click="addFile">添加文件夹</div>
</div>
</a-table>
</a-spin>
</a-col>
<a-col :span="12">
<div class="card_title">样表管理</div>
<div class="search_block search">
<a-button class="addclass btnclass" @click="addForm"> 新增 </a-button>
<a-form-model layout="inline">
<a-form-model-item>
<a-input-search placeholder="请输入样表名称">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</a-form-model-item>
</a-form-model>
</div>
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:row-selection="{
selectedRowKeys: selectedRowKeys
}"
>
<template slot="action">
<span class="redact" @click="formDetail">详情</span>
<span class="redact">升序</span>
<span class="redact">降序</span>
<span class="del" @click="delModal">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<PubFile :title="title" ref="pubFile"/>
<AddForm ref="addForm"/>
<FormDetail ref="formDetail"/>
</div>
</template>
<script>
import PubFile from './Modal/PubFile'
import AddForm from './Modal/AddForm'
import FormDetail from './Modal/FormDetail'
export default {
components: {
PubFile,
AddForm,
FormDetail
},
data() {
return {
spinning: false,
title: '',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
selectedRowKeys: [],
columns: [
{
title: "事项名称",
dataIndex: "name",
align: 'left'
},
{
title: "部门明德亨",
dataIndex: "age"
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park",
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
},
],
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
},
],
expandedRowKeys: [],
}
},
methods: {
delModal() {
},
addForm() {
this.$refs.addForm.show()
},
addFile() {
this.title = '新增事项'
this.$refs.pubFile.show()
},
formDetail() {
this.$refs.formDetail.show()
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="新增样表"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
class="up_load_file"
>
<a-form-model-item label="样表名称:">
<a-input placeholder="请输入样表名称" />
</a-form-model-item>
<a-form-model-item label="样表文件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传样表文件 </a-button>
<span>请上传pdf、jpg格式文件,用于样表展示</span>
</a-upload>
</a-form-model-item>
<a-form-model-item label="填表文件:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传填表文件 </a-button>
<span>请上传xls、xlsx格式文件,用于群众填表</span>
</a-upload>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
title="样表详情"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 5 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="样表名称:">
<span>采矿权新立审批复审文件</span>
</a-form-model-item>
<a-form-model-item label="样表文件:">
<span>采矿权新立审批复审文件</span>
</a-form-model-item>
<a-form-model-item label="填表文件:">
<span>采矿权新立审批复审文件</span>
</a-form-model-item>
<a-form-model-item label="身份excle坐标:">
<span>采矿权新立审批复审文件</span>
</a-form-model-item>
<a-form-model-item label="数据excle坐标:">
<span>采矿权新立审批复审文件</span>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{ span: 4 }"
:wrapper-col="{ span: 14 }"
>
<a-form-model-item label="事项名称:">
<span>采矿权新立</span>
</a-form-model-item>
<a-form-model-item label="文件夹标题:">
<a-input type="text" placeholder="请输入文件夹标题"/>
</a-form-model-item>
<a-form-model-item label="备注:">
<a-textarea :rows="4" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" >确认</a-button>
<a-button class="quclass btnclass btn" @click="close" >取消</a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props:['title'],
data () {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div id="Staff">
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass">新增人员</a-button>
<div class="search">
<a-input-search placeholder="请输入姓名搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<div class="concent">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">编辑</a>
<!-- <div class="line"></div> -->
<a class="del" @click="delmodal">删除</a>
</span>
</a-table>
</a-spin>
</div>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from "./Modal/PubModal"
import DelModal from "@/components/delmodal/index"
export default {
components: {
PubModal,
DelModal,
},
props: {},
data() {
return {
spinning: false,
title: '',
message: '',
style: {
background: "#2E9AFF",
fontSize: "14px",
borderRadius: "4px",
color: "#fff",
border: "none",
},
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "账号",
dataIndex: "user",
},
{
title: "姓名",
dataIndex: "name",
},
{
title: "电话",
dataIndex: "phone",
},
{
title: "所属部门",
dataIndex: "department",
},
{
title: "创建时间",
dataIndex: "createTime",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
user: "121",
name: "小明",
phone: "12345678954",
department: "安全部",
createTime: "2021-05-24 10:00:00",
},
],
};
},
computed: {},
methods: {
addclick() {
this.title= '添加审计人员'
this.$refs.pubModal.show()
},
delmodal() {
this.message= '工作人员'
this.$refs.delModal.show()
}
},
created() {},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div >
<a-modal
v-model="visible"
:title="title"
:footer="null"
@cancel="close"
class="delmodel"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:model="form"
:label-col="labelCol"
:wrapper-col="wrapperCol"
:rules="rules"
>
<a-form-model-item label="姓名:">
<a-input placeholder="请输入姓名" />
</a-form-model-item>
<a-form-model-item label="手机:">
<a-input placeholder="请输入电话" />
</a-form-model-item>
<a-form-model-item label="用户名:">
<a-input placeholder="请输入用户名" />
</a-form-model-item>
<a-form-model-item label="密码:">
<a-input placeholder="请输入密码" />
</a-form-model-item>
<a-form-model-item label="所属部门:">
<a-select default-value="lucy" >
<a-select-option value="lucy"> Lucy </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="备注:">
<a-textarea
placeholder="请输入备注"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="close"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: ['title'],
data() {
return {
visible: false,
labelCol: {
span: 4,
},
wrapperCol: {
span: 18,
},
form: {
name: "",
},
rules: {
placeCode: [
{
required: true,
message: "请输入场所码",
trigger: "change",
},
],
},
}
},
computed: {},
methods: {
show(){
this.visible= true
},
close() {
this.visible= false
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div class="search_block">
<a-button @click="addclick" class="addclass btnclass">新增</a-button>
<div class="search">
<a-input-search placeholder="请输入便民服务中心名称搜索">
<a-button slot="enterButton" class="chaxun"
><a-icon type="search" /> 查询
</a-button>
</a-input-search>
</div>
</div>
<div class="concent">
<a-spin :spinning="spinning">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
>
<span slot="number" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action">
<a class="redact">编辑</a>
<a class="del" @click="delmodal">删除</a>
</span>
</a-table>
</a-spin>
</div>
<PubModal :title="title" ref="pubModal"/>
<DelModal :message="message" ref="delModal"/>
</div>
</template>
<script>
import PubModal from "./Modal/PubModal"
import DelModal from "@/components/delmodal/index"
export default {
components:{
PubModal,
DelModal
},
props: {},
data() {
return {
spinning: false,
title: '',
message:'',
pagination: {
pageSizeOptions: ["10", "20", "30", "40", "50"],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
},
columns: [
{
title: "序号",
dataIndex: "number",
scopedSlots: {
customRender: "number",
},
},
{
title: "名称",
dataIndex: "name",
},
{
title: "位置",
dataIndex: "adress",
},
{
title: "咨询电话",
dataIndex: "phone",
},
{
title: "创建时间",
dataIndex: "createTime",
},
{
title: "操作",
scopedSlots: {
customRender: "action",
},
},
],
data: [
{
key: 1,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
{
key: 2,
name: "东升镇",
adress: "四川省成都市",
phone: "12345678954",
createTime: "2021-05-24 10:00:00",
},
],
};
},
computed: {},
methods: {
addclick() {
this.title = '新增'
this.$refs.pubModal.show()
},
delmodal() {
this.message= '便民中心'
this.$refs.delModal.show()
}
},
created() {},
}
</script>
<style scoped lang="less">
</style>
<template>
<div >
<a-modal v-model="visible" :title="title" :footer="null" @cancel="close" width="1000px">
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
:rules="rules"
>
<a-form-model-item label="名称:">
<a-input v-model="form.name" placeholder="请输入便民服务中心名称"/>
</a-form-model-item>
<a-form-model-item label="中心地址:">
<a-cascader :options="options" change-on-select placeholder="Please select" @change="onChange"/>
<a-input placeholder="请输入详细地址" />
</a-form-model-item>
<a-form-model-item label="中心坐标:">
<a-input placeholder="请输入中心坐标" />
</a-form-model-item>
<a-form-model-item label="邮编:">
<a-input placeholder="请输入邮编" />
</a-form-model-item>
<a-form-model-item label="服务时间:">
<a-input placeholder="请输入服务时间" />
</a-form-model-item>
<a-form-model-item label="入驻部门:">
<a-input placeholder="请输入入驻部门" />
</a-form-model-item>
<a-form-model-item label="建成时间:">
<a-date-picker />
</a-form-model-item>
<a-form-model-item label="工作人员数量:">
<a-input placeholder="请输入工作人员数量" />
</a-form-model-item>
<a-form-model-item label="咨询电话:">
<a-input placeholder="请输入咨询电话" />
</a-form-model-item>
<a-form-model-item label="投诉电话:">
<a-input placeholder="请输入投诉电话" />
</a-form-model-item>
<a-form-model-item label="基本情况:">
<a-textarea
placeholder="请输入基本情况"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-model-item>
<a-form-model-item label="入驻项目:">
<a-textarea
placeholder="请输入入驻项目"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button class="addclass btnclass btn" > 确认 </a-button>
<a-button class="quclass btnclass btn" @click="close"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
export default {
props: {
title:{
type: String,
}
},
data() {
return {
options: [
{
value: 'Zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州',
children: [
{
value: 'xihu',
label: '西湖',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
visible: false,
form: {
name: "",
},
rules: {
placeCode: [
{
required: true,
message: "请输入场所码",
trigger: "change",
},
],
},
}
},
methods: {
show(){
this.visible= true
},
close() {
this.visible= false
},
onChange(value) {
console.log(value)
},
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="12" style="text-align: left">
<a-button class="btnclass addclass" @click="addModal">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="floorpic" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.floorpic"
@click="handlePreview(record)"
/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<pubmodal :title="title" ref="pubModal"/>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
const data = [
{
key: '1',
floorpic: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '标题',
dataIndex: ''
},
{
title: '缩略图',
dataIndex: 'floorpic',
scopedSlots: { customRender: 'floorpic' }
},
{
title: '创建时间',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
// 提示内容
message: '',
// 删除的值
delkey: '',
// 缩略图弹出框
previewVisible: false,
// 缩略图路径
previewImage: '',
pagination: {
defaultPageSize: 5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
}
}
},
methods: {
addModal () {
this.title = '新增'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑'
this.$refs.pubModal.show()
},
delModal () {
this.message = '主题式审批'
this.$refs.delModal.show()
},
delList () {
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.floorpic
this.previewVisible = true
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
>
<a-row :gutter="[0, 16]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="标题:">
<a-input/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="排序:">
<a-input/>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="图片展示:" :key="upkey">
<a-upload
name="file"
v-model="fileList"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange"
>
<a-button class="btnclass addclass"> 上传图片 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="内容:">
<a-input type="textarea" />
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn" @click="onSubmit(title)"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="reset(title)"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
export default {
// 弹出框标题
props: ['title'],
data () {
return {
// 显示
visible: false,
headers: {
authorization: 'authorization-text'
},
// 上传文件列表
fileList: [],
// 随机值
upkey: '',
}
},
methods: {
show () {
this.visible = true
},
// 关闭弹出框
handleCancel () {
this.visible = false
},
// 提交
onSubmit () {
this.visible = false
},
// 选择上传文件
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.fileList = info.fileList
this.addForm.address = imageUrl
})
}
},
// 上传文件之前
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'video/x-matroska'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt100M = file.size / 1024 / 1024 < 100
if (!isLt100M) {
this.$message.error('Image must smaller than 100MB!')
}
return isJpgOrPng && isLt100M
},
// 重置
reset () {
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<a-form-model>
<div class="card_title">基础信息</div>
<a-row :gutter="[8,16]" class="baserow" type="flex" justify="start">
<a-col :span="8">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="导视机抬头:">
<a-input placeholder="请输入导视机抬头"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="百度地图坐标:">
<a-input placeholder="请输入百度地图坐标"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="腾讯地图坐标:">
<a-input placeholder="请输入腾讯地图坐标"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="中心网站:">
<a-input placeholder="请输入中心网站"/>
</a-form-model-item>
</a-col>
<a-col :span="8" class="up_load_file">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="单位宣传视频:">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<a-button class="addclass"> 上传单位宣传视频 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[8,16]" type="flex" justify="start">
<a-col :span="8" class="up_load_pic">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="导视机logo:">
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">
添加图片
</div>
</div>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="8" class="up_load_pic">
<a-form-model-item :label-col="{span: 6}" :wrapper-col="{span: 15}" label="总平图:">
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">
添加图片
</div>
</div>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item :label-col="{span: 2}" :wrapper-col="{span: 15}" label="单位介绍:">
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 15, offset: 2}">
<a-button class="btnclass addclass btn"> 确定 </a-button>
<a-button class="btnclass quclass btn">重置 </a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
editor: null
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
}
}
}
</script>
<style scoped lang="less">
.baserow{
/deep/.ant-form-item-label{
height: 60px !important;
}
/deep/.ant-form-item-control-wrapper{
height: 55px !important;
}
}
</style>
<template>
<!--S 拖动组件 -->
<div class="drag moveDiv" @mousedown="move($event)">
<slot name="drag"></slot>
</div><!--E 拖动组件 -->
</template>
<script>
export default {
data() {
return {
}
},
methods: {
move(e){
console.log(e.target.id)
let odiv = e.target //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft
let disY = e.clientY - odiv.offsetTop
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
//绑定元素位置到positionX和positionY上面
this.positionX = top
this.positionY = left
let oWidth = odiv.offsetWidth
let oWrapWidth = odiv.parentNode.offsetWidth
let oHeight = odiv.offsetHeight
let oWrapHeight = odiv.parentNode.offsetHeight
if(top< 0 && left< 0){
top = 0
left = 0
}else if(top+oHeight >oWrapHeight && left+oWidth > oWrapWidth){
top = oWrapHeight - oHeight
left = oWrapWidth - oWidth
}else if(top+oHeight >oWrapHeight && left< 0){
top = oWrapHeight - oHeight
left = 0
}else if(left+oWidth > oWrapWidth && top< 0){
left = oWrapWidth - oWidth
top = 0
}else if(top< 0) {
top = 0
}else if(left< 0) {
left = 0
}else if(left+oWidth > oWrapWidth){
left = oWrapWidth - oWidth
}else if(top+oHeight >oWrapHeight){
top = oWrapHeight - oHeight
}
console.log(left, top)
//移动当前元素
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
</script>
<style lang="less" scoped>
.drag {
position: absolute;
left: 0;
right: 0;
z-index: 999;
}
</style>
\ No newline at end of file
<template>
<div>
<div v-if="panelSwitch == '主页'">
<div class="card_title">部门坐标</div>
<a-row :gutter="[8, 16]" type="flex" justify="space-between">
<a-col :span="24">
<a-button class="btnclass addclass" @click="routeDepart">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="partcolumns" :data-source="partdata" bordered :pagination="pagination">
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="routeDepart(record)">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<div class="card_title">窗口坐标</div>
<a-row :gutter="[30, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-button class="btnclass addclass" @click="routeWindow">
新增
</a-button>
</a-col>
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="windowcolumns" :data-source="windowdata" bordered :pagination="pagination">
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="routeWindow(record)">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
</div>
<!-- 部门坐标页面 -->
<div v-else-if="panelSwitch == '部门'">
<a-form-model :label-col="{md: 6}" :wrapper-col="{span: 18}">
<a-row :gutter="[8,8]" class="baserow" type="flex" justify="start">
<a-col :span="24">
<div class="card_title">部门坐标信息</div>
</a-col>
<a-col :span="8">
<a-form-model-item label="前端名称:">
<a-input placeholder="请输入前端名称" style="width: 265px"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属部门:">
<a-select default-value="jack" style="width: 265px">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8"></a-col>
<a-col :span="8">
<a-form-model-item label="所属楼栋">
<a-select default-value="jack" style="width: 265px">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属楼层:">
<a-select default-value="jack" style="width: 265px">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[8,20]" type="flex" justify="start">
<a-col :span="24">
请将图标拖动至对应部门的位置
</a-col>
<a-col :span="24" style="padding: 0">
<div style="height:300px;background:#0195ff;">
<drag class="drag1" id="done" :style="{background:'url('+imgPen+')',backgroundSize:'100% 100%'}"></drag>
<drag class="drag1" id="dtwo" :style="{background:'url('+imgPen2+')',backgroundSize:'100% 100%',left:'20px',top:'0'}"></drag>
</div>
</a-col>
</a-row>
<a-form-model-item>
<a-button class="btnclass addclass btn" @click="turnMain()"> 确认 </a-button>
<a-button class="btnclass quclass btn" @click="turnMain()"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</div>
<!-- 窗口坐标页面 -->
<div v-else>
<a-form-model :label-col="{md: 6}" :wrapper-col="{span: 18}">
<a-row :gutter="[8,16]" type="flex" justify="start">
<a-col :span="24">
<div class="card_title">窗口坐标信息</div>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属楼栋:">
<a-select default-value="1栋">
<a-select-option value="1栋">
1栋
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="所属楼层:">
<a-select default-value="1层">
<a-select-option value="1层">
1层
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8"></a-col>
<a-col :span="8">
<a-form-model-item label="选择窗口:">
<a-select default-value="jack">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="窗口编号:">
<a-select default-value="1">
<a-select-option value="1">
1
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="8"></a-col>
<a-col :span="16">
<a-form-model-item label="内容:" :label-col="{span: 3}" :wrapper-col="{span: 21}">
<a-input type="textarea" />
</a-form-model-item>
</a-col>
<a-col :span="8"></a-col>
<a-col :span="8">
<a-form-model-item label="左上角坐标:">
<a-input></a-input>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="右上角坐标:">
<a-input></a-input>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[8,20]" type="flex" justify="start">
<a-col :span="24">
请将图标拖动至对应部门的位置
</a-col>
<a-col :span="24">
<div style="height:300px;background:#0195ff"></div>
</a-col>
</a-row>
<a-form-model-item>
<a-button class="btnclass addclass btn" @click="turnMain()"> 确认 </a-button>
<a-button class="btnclass quclass btn" @click="turnMain()"> 取消 </a-button>
</a-form-model-item>
</a-form-model>
</div>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import Modal from '@/components/delmodal/index'
import Drag from './Drag/index.vue'
const partdata = [
{
key: '1',
partname: '',
frontname: '',
xcoord: '',
ycoord: '',
building: '',
floor: '',
time: ''
}
]
const windowdata = [
{
key: '1',
windowname: '',
titlename: '',
rightbottom: '',
building: '',
floor: ''
}
]
const partcolumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '部门名称',
dataIndex: ''
},
{
title: '前端名称',
dataIndex: ''
},
{
title: 'X坐标',
dataIndex: ''
},
{
title: 'Y坐标',
dataIndex: ''
},
{
title: '所属楼栋',
dataIndex: ''
},
{
title: '所属楼层',
dataIndex: ''
},
{
title: '操作时间',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
const windowcolumns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '窗口名称',
dataIndex: ''
},
{
title: '标题',
dataIndex: ''
},
{
title: '右下角',
dataIndex: ''
},
{
title: '所属楼栋',
dataIndex: ''
},
{
title: '所属楼层',
dataIndex: ''
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
data () {
return {
spinning: false,
partdata, // 部门数据
windowdata, // 窗口数据
partcolumns, // 部门列表
windowcolumns, // 窗口列表
message: '', // 弹出框信息
delkey: '', // 删除的表格
panelSwitch: '主页', //显示判断
previewVisible: false, // 缩略图弹出框
previewImage: '', // 缩略图路径
pagination: {
defaultPageSize: 5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
},
imgPen:require('../../../assets/img/pen.jpg'),
imgPen2:require('../../../assets/img/pen2.jpg')
}
},
// 组件
components: {
// 删除框组件
delmodal: Modal,
drag: Drag
},
methods: {
routeDepart () {
this.panelSwitch = '部门'
},
routeWindow () {
this.panelSwitch = '窗口'
},
turnMain () {
this.panelSwitch = '主页'
},
delList (num) {
const data = [...this.data]
this.data = data.filter(item => item.key !== num)
},
editModal () {
this.title = '编辑'
this.$store.commit('SET_BTNVISIBLE', true)
},
delModal (val) {
this.delkey = val
this.message = '部门坐标'
this.$store.commit('SET_DELVISIBLE', true)
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.floorpic
this.previewVisible = true
}
}
}
</script>
<style lang="less" scoped>
.drag{
height: 20px;
width: 20px;
background: white;
color: black
}
.drag1{
height: 20px;
width: 20px;
}
</style>
<template>
<div>
<div class="search_block">
<a-button class="btnclass addclass" @click="addModal">
新增
</a-button>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="floorpic" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.floorpic"
@click="handlePreview(record)"
/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<pubmodal :title="title" ref="pubModal"/>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
floorpic: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '所属楼栋',
dataIndex: ''
},
{
title: '所属楼层',
dataIndex: ''
},
{
title: '楼层图',
dataIndex: 'floorpic',
scopedSlots: { customRender: 'floorpic' }
},
{
title: '手机版楼层图',
dataIndex: '',
scopedSlots: { customRender: '' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
// 弹出框标题
title: '',
block: '',
message: '',
delkey: '',
// 缩略图弹出框
previewVisible: false,
// 缩略图路径
previewImage: '',
pagination: {
defaultPageSize: 5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
}
}
},
methods: {
addModal () {
this.title = '新增'
this.block = 'floor'
this.$refs.pubModal.show()
},
editModal () {
this.title = '编辑'
this.block = 'floor'
this.$refs.pubModal.show()
},
delModal () {
this.message = '楼层图'
this.$refs.delModal.show()
},
delList () {
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.floorpic
this.previewVisible = true
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon
type="close-circle"
slot="closeIcon"
theme="filled"
/>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
>
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="所属楼栋:">
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="所属楼层:">
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="设备楼层图:" :key="upkey">
<a-upload
name="file"
v-model="fileList"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange"
>
<a-button class="btnclass addclass"> 上传图片 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="手机楼层图:" :key="upkey">
<a-upload
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
>
<a-button class="btnclass addclass"> 上传图片 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn" @click="onSubmit(title)"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="reset(title)"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
export default {
// 弹出框标题
props: ['title'],
data () {
return {
// 显示
visible: false,
headers: {
authorization: 'authorization-text'
},
// 上传文件列表
fileList: [],
// 随机值
upkey: '',
}
},
methods: {
show () {
this.visible = true
},
// 关闭弹出框
handleCancel () {
this.visible = false
},
// 提交
onSubmit () {
this.visible = false
},
// 选择上传文件
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.fileList = info.fileList
this.addForm.address = imageUrl
})
}
},
// 上传文件之前
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'video/x-matroska'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt100M = file.size / 1024 / 1024 < 100
if (!isLt100M) {
this.$message.error('Image must smaller than 100MB!')
}
return isJpgOrPng && isLt100M
},
// 重置
reset () {
}
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<a-row :gutter="[30, 20]" type="flex" justify="space-between">
<a-col :span="8">
<div class="search_block">
<a-button class="btnclass addclass">
新增
</a-button>
</div>
<a-spin :spinning="spinning">
<a-tree :tree-data="treeData" ></a-tree>
</a-spin>
</a-col>
<a-col :span="16">
<div class="search_block">
<a-button class="btnclass addclass">
新增
</a-button>
</div>
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered>
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :disabled="true" :checked="record.use"/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="redact" @click="editModal">编辑</span>
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import Modal from '@/components/delmodal/index'
const treeData = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{ title: 'leaf', key: '0-0-0-0' },
{ title: 'leaf', key: '0-0-0-1' }
]
},
{
title: 'parent 1-1',
key: '0-0-1'
}
]
}
]
const data = [
{
key: '1',
type: '1',
matter: '2',
address: '3',
time: '4',
floorpic: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '分类名称',
dataIndex: 'type'
},
{
title: '事项名称',
dataIndex: 'matter'
},
{
title: '附件地址',
dataIndex: 'address'
},
{
title: '创建时间',
dataIndex: 'time'
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
export default {
// 组件
components: {
// 删除框组件
delmodal: Modal
},
data () {
return {
spinning: false,
treeData,
data,
columns,
message: '',
delkey: ''
}
},
methods: {
editModal () {
this.title = '编辑'
},
delModal (val) {
this.delkey = val
this.message = '事项管理'
this.$refs.delModal.show()
},
delList () {}
}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<a-row class="t_center">
<a-col :span="6">
<div>导视机系统标准版</div>
<img width="100%" height="220px" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="">
<a-button class="btnclass addclass btn">使用中</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="less">
.t_center{
text-align: center;
}
</style>
<template>
<div>
<div class="search_block">
<div>
<a-button class="addclass btnclass" @click="addModal">
新增
</a-button>
<a-button class="green" @click="vpModal"> 设置视频/轮播 </a-button>
</div>
<div class="warning_text">
<a-icon type="info-circle" />
请勿上传大于100M的视频文件,待视频上传完成再提交!
</div>
</div>
<a-row :gutter="[0, 20]" type="flex" justify="space-between">
<a-col :span="24">
<a-spin :spinning="spinning">
<a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
<template slot="url" slot-scope="text, record">
<img
style="width: 50px; heigth: 50px"
:src="record.url"
@click="handlePreview(record)"
/>
</template>
<template slot="use" slot-scope="text, record">
<a-switch default-checked :disabled="true" :checked="record.use"/>
</template>
<template slot="operation" slot-scope="text, record">
<span class="del" @click="delModal(record.key)">删除</span>
</template>
</a-table>
</a-spin>
</a-col>
</a-row>
<!-- 图片预览弹出框 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<pubmodal :title="title" ref="pubModal"/>
<delmodal :message="message" :delkey="delkey" @delList="delList" ref="delModal"/>
</div>
</template>
<script>
import PubModal from './Modal/PubModal'
import DelModal from '@/components/delmodal/index'
export default {
components: {
pubmodal: PubModal,
delmodal: DelModal
},
data () {
const data = [
{
key: '1',
use: false,
type: '轮播图',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}
]
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '标题',
dataIndex: ''
},
{
title: '视频/轮播',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '创建时间',
dataIndex: 'phone'
},
{
title: '是否使用',
dataIndex: 'use',
scopedSlots: { customRender: 'use' }
},
{
title: '操作',
dataIndex: '',
scopedSlots: { customRender: 'operation' }
}
]
return {
spinning: false,
data,
columns,
title: '',
block: '',
message: '',
delkey: '',
previewVisible: false,
previewImage: '',
pagination: {
defaultPageSize: 5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger: false,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, pageSize) => pageSize
}
}
},
methods: {
addModal () {
this.title = '新增'
this.$refs.pubModal.show()
},
vpModal () {
this.title = '设置视频/轮播'
this.$refs.pubModal.show()
},
delModal (val) {
this.delkey = val
this.message = '轮播图/视频'
this.$refs.delModal.show()
},
delList (num) {
const data = [...this.data]
this.data = data.filter(item => item.key !== num)
},
handleCancel () {
this.visible = false
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url
this.previewVisible = true
}
}
}
</script>
<style lang="less" scoped>
.green {
color: white;
background: #03b17d;
margin-left: 10px;
}
.warning_text {
color: #f96717;
line-height: 30px;
font-weight: 600;
}
.ant-upload-list-item {
left: 70px;
}
</style>
<template>
<div>
<!-- 弹出框 -->
<a-modal
class="modal"
v-model="visible"
@cancel="handleCancel"
:footer="null"
:title="title"
>
<a-icon type="close-circle" slot="closeIcon" theme="filled" />
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 15}"
:model="addForm"
ref="addFormRef"
v-if="title == '新增'"
>
<!-- 新增内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="标题:" prop="addTitle">
<a-input v-model="addForm.addTitle"/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="视频/轮播:" prop="addRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(addForm.addRadio)"
v-model="addForm.addRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24" class="up_load_file">
<a-form-model-item label="上传文件:" :key="upkey">
<a-upload
name="file"
v-model="fileList"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange"
>
<a-button class="btnclass addclass"> 上传文件 </a-button>
</a-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model
:label-col="{span: 4}"
:wrapper-col="{span: 10}"
:model="setForm"
ref="setFormRef"
v-else
>
<!-- 视频和轮播内容 -->
<a-row :gutter="[8, 8]" type="flex" justify="start">
<a-col :span="24">
<a-form-model-item label="设置显示:" prop="setRadio">
<a-radio-group name="radioGroup"
:defaultValue="Number(setForm.addRadio)"
v-model="setForm.setRadio"
@change="change"
>
<a-radio :value="1">视频</a-radio>
<a-radio :value="2">轮播图片</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="显示时间:" prop="time">
<a-input suffix="秒" placeholder="请输入时间" v-model="setForm.time"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<a-form-model>
<a-form-model-item :wrapper-col="{span: 20, offset: 4}">
<a-button class="addclass btnclass btn" @click="onSubmit(title)"> 确认 </a-button>
<a-button class="quclass btnclass btn" @click="reset(title)"> 重置 </a-button>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
// 新增内容
const addForm = {
addTitle: '',
addRadio: 1,
address: ''
}
// 设置轮播/图片内容
const setForm = {
setRadio: 1,
time: ''
}
// 关联设备内容
const faciltyData = [
{
key: '1',
equipment: '',
remark: '轮播图'
}
]
// 关联设备表格
const columns = [
{
title: '序号',
dataIndex: 'key'
},
{
title: '设备编号',
dataIndex: 'equipment'
},
{
title: '备注',
dataIndex: 'remark'
}
]
export default {
// 弹出框标题
props: ['title'],
data () {
return {
// 显示
visible: false,
headers: {
authorization: 'authorization-text'
},
// 新增表单
addForm,
// 被选中的项
checked: '视频',
// 上传文件列表
fileList: [],
// 随机值
upkey: '',
// 视频/轮播设置表单
setForm,
// 关联设备表格
faciltyData,
// 关联设备表格参数
columns,
// 选中的行
selectedRowKeys: []
}
},
methods: {
show () {
this.visible = true
},
// 关闭弹出框
handleCancel () {
this.selectedRowKeys = []
this.visible = false
},
// 提交
onSubmit (val) {
if(val == '新增'){
const pramas = {
adtitle: this.addForm.addTitle,
type: this.checked,
url: this.addForm.address
}
this.$emit('add', pramas)
this.upkey = Math.random()
}else {
const pramas = {
type: this.checked,
time: this.setForm.time
}
this.$emit('set', pramas)
}
this.visible = false
},
// 选择器
change(e) {
if (e.target.value == 1)
this.checked = '视频'
else
this.checked = '轮播图片'
},
// 选择上传文件
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.fileList = info.fileList
this.addForm.address = imageUrl
})
}
},
// 上传文件之前
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'video/x-matroska'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt100M = file.size / 1024 / 1024 < 100
if (!isLt100M) {
this.$message.error('Image must smaller than 100MB!')
}
return isJpgOrPng && isLt100M
},
// 重置
reset (title) {
if (title == '新增') {
this.$nextTick(()=>{
this.fileList = []
this.addForm.address = ''
this.checked = '视频'
this.upkey = Math.random()
this.$refs.addFormRef.resetFields()
})
}else if (title == '设置视频/轮播') {
this.$nextTick(()=>{
this.checked = '视频'
this.$refs.setFormRef.resetFields()
})
}else {
this.selectedRowKeys = []
}
}
}
}
</script>
<style lang="less" scoped>
</style>
// 视图组件
const view = {
tabs: () => import('@/layouts/tabs'),
blank: () => import('@/layouts/BlankView'),
page: () => import('@/layouts/PageView'),
PageTabView: () => import('@/layouts/PageTabView')
}
// 路由组件注册
const routerMap = {
login: {
authority: '*',
path: '/login',
component: () => import('@/pages/login')
},
demo: {
name: '演示页',
renderMenu: false,
component: () => import('@/pages/demo')
},
exp403: {
authority: '*',
name: 'exp403',
path: '403',
component: () => import('@/pages/exception/403')
},
exp404: {
name: 'exp404',
path: '404',
component: () => import('@/pages/exception/404')
},
exp500: {
name: 'exp500',
path: '500',
component: () => import('@/pages/exception/500')
},
root: {
path: '/',
name: '首页',
redirect: '/login',
component: view.tabs
},
parent1: {
name: '父级路由1',
icon: 'dashboard',
component: view.blank
},
parent2: {
name: '父级路由2',
icon: 'form',
component: view.page
},
exception: {
name: '异常页',
icon: 'warning',
component: view.blank
},
home:{
component: () => import('@/pages/efficiencyAi/home/index')
},
window: {
name: '窗口管理',
icon: 'warning',
component: () => import('@/pages/efficiencyAi/window/list')
},
user: {
component: () => import('@/pages/efficiencyAi/setting/user/list')
},
devices: {
component: view.PageTabView
},
camera:{
component: () => import('@/pages/efficiencyAi/device/camera/list')
},
servers:{
component: () => import('@/pages/efficiencyAi/device/server/list')
},
aimodel:{
component: () => import('@/pages/efficiencyAi/aimodel/list')
},
video: {
component: view.PageTabView
},
windowvideo:{
component: () => import('@/pages/efficiencyAi/video/windowvideo/list')
},
workvideo:{
component: () => import('@/pages/efficiencyAi/video/workvideo/list')
},
monitor:{
component: () => import('@/pages/efficiencyAi/monitor/list')
},
appeal:{
component: () => import('@/pages/efficiencyAi/appeal/list')
},
setting: {
component: view.PageTabView
},
auth:{
component: () => import('@/pages/efficiencyAi/setting/auth/list')
},
log:{
component: () => import('@/pages/efficiencyAi/setting/log/list')
},
versions:{
component: () => import('@/pages/efficiencyAi/setting/versions/list')
},
analyse:{
component: () => import('@/pages/efficiencyAi/analyse/list')
},
palyer:{
component: () => import('@/pages/efficiencyAi/palyer/list')
},
group:{
component: () => import('@/pages/efficiencyAi/group/list')
},
target:{
component: () => import('@/pages/efficiencyAi/target/list')
}
}
export default routerMap
...@@ -169,108 +169,6 @@ const options = { ...@@ -169,108 +169,6 @@ const options = {
}, },
], ],
}, },
// {
// path: "basicset",
// name: "基础设置",
// meta: {
// icon: "setting",
// },
// component: BlankView,
// children: [
// {
// path: "website",
// name: "站点管理",
// component: () => import("@/pages/basicset/site/website"),
// },
// {
// path: "deploy",
// name: "部署模块管理",
// component: () => import("@/pages/basicset/deploy/deploy"),
// },
// {
// path: "business",
// name: "业务事项管理",
// component: () => import("@/pages/basicset/business/business"),
// },
// {
// path: "addbusiness",
// name: "新增事项",
// component: () =>
// import("@/pages/basicset/addbusiness/addbusiness.vue"),
// meta: { invisible: true },
// },
// {
// path: "department",
// name: "部门窗口管理",
// component: () => import("@/pages/basicset/dept/department"),
// },
// {
// path: "personnel",
// name: "工作人员管理",
// component: () => import("@/pages/basicset/workman/personnel"),
// },
// {
// path: "surface",
// component: () => import("@/pages/basicset/surface/index"),
// children: [
// {
// path: "",
// name: "皮肤管理",
// component: () => import("@/pages/basicset/surface/surface"),
// meta: { invisible: true },
// },
// {
// path: "addsurfacetemplate",
// name: "新增皮肤m模板",
// component: () =>
// import("@/pages/basicset/surface/AddSurfaceTemplate"),
// meta: { invisible: true },
// },
// ],
// },
// {
// path: "configurat",
// name: "短信配置",
// component: () => import("@/pages/basicset/sms/configurat"),
// },
// {
// path: "festival",
// name: "节假日配置",
// component: () => import("@/pages/basicset/holiday/festival"),
// },
// {
// path: "appmarket",
// component: () => import("@/pages/basicset/appmarket/Index"),
// children: [
// {
// path: "",
// name: "应用集市",
// component: () =>
// import("@/pages/basicset/appmarket/AppMarket"),
// meta: { invisible: true },
// },
// {
// path: "appdetails",
// name: "应用详情",
// component: () =>
// import("@/pages/basicset/appmarket/AppDetails"),
// meta: { invisible: true },
// },
// ],
// },
// // {
// // path: 'qrcode',
// // name: '二维码设置',
// // component: () => import('@/pages/basicset/qrcode'),
// // },
// // {
// // path: 'skins',
// // name: '皮肤管理',
// // component: () => import('@/pages/basicset/skins/skins'),
// // },
// ],
// },
], ],
}, },
], ],
......
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