村民圈
This commit is contained in:
yanran200730
@@ -2,7 +2,7 @@
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return Promise.resolve();
|
||||
else {
|
||||
let contexts = require.context('../project/shandong/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
|
||||
let contexts = require.context('../packages', true, /(\/.+)\/App[^\/]+\.vue$/);
|
||||
if (contexts) {
|
||||
contexts.keys().map((e) => {
|
||||
if (contexts(e).default) {
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="appDispatchManagement">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Detail from './components/Detail'
|
||||
import Add from './components/Add'
|
||||
import List from './components/List'
|
||||
|
||||
export default {
|
||||
name: "AppDispatchManagement",
|
||||
label: '公文流转',
|
||||
|
||||
components: {List, Detail, Add},
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: []
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
methods:{
|
||||
onChange (data) {
|
||||
if (data.type === 'detail') {
|
||||
this.component = 'Detail'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'add') {
|
||||
console.log(123)
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.appDispatchManagement{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
388
packages/shandong/AppDispatchManagement/components/Add.vue
Normal file
388
packages/shandong/AppDispatchManagement/components/Add.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<section class="managementDetail">
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title title="公文登记" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-card title="公文信息">
|
||||
<template slot="content">
|
||||
<div class="form_div mar-t16">
|
||||
<el-form
|
||||
ref="rules"
|
||||
:model="form"
|
||||
:rules="formRules"
|
||||
size="small"
|
||||
label-suffix="："
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="公文名称" prop="documentName">
|
||||
<el-input
|
||||
v-model="form.documentName"
|
||||
placeholder="请输入..."
|
||||
maxlength="50"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="公文编号" prop="documentCode">
|
||||
<el-input
|
||||
v-model="form.documentCode"
|
||||
placeholder="请输入..."
|
||||
maxlength="50"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="公文类型" prop="documentType">
|
||||
<el-select
|
||||
v-model="form.documentType"
|
||||
placeholder="请选择..."
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('officialDocumentName')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="保密等级">
|
||||
<el-select
|
||||
v-model="form.confidentialityLevel"
|
||||
placeholder="请选择..."
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('officialDocumentConfidentialityLevel')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="阅示类型" prop="readType">
|
||||
<el-select @change="readTypeChange"
|
||||
v-model="form.readType"
|
||||
placeholder="请选择..."
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('officialDocumentReadType')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="紧急程度">
|
||||
<el-select
|
||||
v-model="form.emergencyLevel"
|
||||
placeholder="请选择..."
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('officialDocumentEmergencyLevel')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="发文机关">
|
||||
<el-input
|
||||
v-model="form.issuingUnit"
|
||||
placeholder="请输入..."
|
||||
maxlength="50"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="发文字号">
|
||||
<el-input
|
||||
v-model="form.issuingFont"
|
||||
placeholder="请输入..."
|
||||
maxlength="50"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="签发人">
|
||||
<el-input
|
||||
v-model="form.signer"
|
||||
placeholder="请输入..."
|
||||
maxlength="50"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
placeholder="请输入..."
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件">
|
||||
<div class="upload">
|
||||
<ai-uploader :instance="instance" v-model="form.files" fileType="file" :limit="9" @change="onChange"></ai-uploader>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="流转信息">
|
||||
<template #content>
|
||||
<span class="form-label">流转对象：</span>
|
||||
<div class="user-content">
|
||||
<ai-wechat-selecter slot="append" :instance="instance" v-model="form.flowUsers" isShowUser :isMultiple="isMultiple"></ai-wechat-selecter>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="delete-btn footer-btn" @click="cancel(true)">取消</el-button>
|
||||
<el-button class="footer-btn" type="primary" @click="save('rules', '1')">保存并流转</el-button>
|
||||
<el-button class="footer-btn" @click="save('rules', '0')">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "managementDetail",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
documentName: '',
|
||||
documentCode: '',
|
||||
documentType: '',
|
||||
confidentialityLevel: '',
|
||||
readType: '',
|
||||
emergencyLevel: '',
|
||||
issuingTime: '',
|
||||
issuingUnit: '',
|
||||
issuingFont: '',
|
||||
signer: '',
|
||||
overDescription: '',
|
||||
overTime: '',
|
||||
deliver: '',
|
||||
remark: '',
|
||||
files: [],
|
||||
fileIds: [],
|
||||
flowUsers: [],
|
||||
},
|
||||
isMultiple: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formRules(){
|
||||
return {
|
||||
documentName: [{required: true, message: "请输入公文名称", trigger: 'change' }],
|
||||
documentCode: [{required: true, message: "请输入公文编号", trigger: 'change' }],
|
||||
documentType: [{required: true, message: "请选择公文类型", trigger: 'change' }],
|
||||
readType: [{required: true, message: "请选择阅示类型", trigger: 'change' }],
|
||||
}
|
||||
},
|
||||
colConfigs(){
|
||||
return [
|
||||
{
|
||||
prop: 'meetingUserName',
|
||||
align: 'center',
|
||||
label: '姓名',
|
||||
},
|
||||
{
|
||||
prop: 'meetingUserPhone',
|
||||
align: 'center',
|
||||
label: '手机号码',
|
||||
},
|
||||
{
|
||||
prop: 'meetingUnitName',
|
||||
align: 'center',
|
||||
label: '所属部门',
|
||||
},
|
||||
{
|
||||
slot: 'joinStatus',
|
||||
},
|
||||
{
|
||||
slot: 'option',
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.dict.load('issuingUnit','officialDocumentEmergencyLevel', 'officialDocumentReadType', 'officialDocumentConfidentialityLevel', 'officialDocumentName');
|
||||
},
|
||||
mounted() {
|
||||
if(this.params.id) {
|
||||
this.getDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange() {
|
||||
|
||||
},
|
||||
readTypeChange() {
|
||||
if(this.form.readType == 0) {
|
||||
this.isMultiple = false
|
||||
if(this.form.flowUsers.length > 1) {
|
||||
this.form.flowUsers = []
|
||||
}
|
||||
}else {
|
||||
this.isMultiple = true
|
||||
}
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/appofficialdocumentinfo/queryDetailById?id=${this.params.id}&flag=0`, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.form = {...res.data}
|
||||
this.form.files = this.form.files || []
|
||||
}
|
||||
});
|
||||
},
|
||||
save(formName, status){
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.submit(status)
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
submit(status) {
|
||||
var flowUsers = []
|
||||
this.form.flowUsers.map(item => {
|
||||
var info = {
|
||||
flowUserId: item.id,
|
||||
flowUserName: item.name,
|
||||
avatar: item.avatar
|
||||
}
|
||||
flowUsers.push(info)
|
||||
})
|
||||
|
||||
this.form.fileIds = []
|
||||
if(this.form.files.length) {
|
||||
this.form.files.map((item) => {
|
||||
this.form.fileIds.push(item.id)
|
||||
})
|
||||
}
|
||||
this.instance.post(`/app/appofficialdocumentinfo/addOrUpdate`, {
|
||||
...this.form,
|
||||
status: status,
|
||||
flowUsers: flowUsers
|
||||
}, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(this.params.id){
|
||||
this.$message.success("编辑成功");
|
||||
}else{
|
||||
this.$message.success("提交成功");
|
||||
}
|
||||
this.cancel(true)
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
},
|
||||
downFileAll () {
|
||||
if (this.form.files.length > 0) {
|
||||
this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
|
||||
responseType: 'blob',
|
||||
params: {
|
||||
id: this.form.id
|
||||
}
|
||||
}).then((res) => {
|
||||
const link = document.createElement('a')
|
||||
let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
||||
link.style.display = 'none'
|
||||
link.href = URL.createObjectURL(blob)
|
||||
var num = ''
|
||||
for (let i = 0; i < 10; i++) {
|
||||
num += Math.ceil(Math.random() * 10)
|
||||
}
|
||||
link.setAttribute('download', '公文文件' + '.zip')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
} else {
|
||||
this.$message.error('暂无附件提供下载')
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.managementDetail {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f3f6f9;
|
||||
.above{
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
.left{
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
.el-date-editor.el-input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.iconEdit,.Edit{
|
||||
color:#5088FF;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.form-label{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
.user-content{
|
||||
display: inline-block;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
563
packages/shandong/AppDispatchManagement/components/Detail.vue
Normal file
563
packages/shandong/AppDispatchManagement/components/Detail.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<section class="managementDetail">
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title title="公文详情" isShowBottomBorder isShowBack @onBackClick="cancel(true)">
|
||||
<template #rightBtn>
|
||||
<ai-wechat-selecter :instance="instance" v-model="addUser" :isMultiple="form.readType == '0' ? false : true" @change="onChange" v-if="form.status === '0'">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="iconfont iconMediaPlayer_Play">
|
||||
开始流转
|
||||
</el-button>
|
||||
</ai-wechat-selecter>
|
||||
<ai-wechat-selecter :instance="instance" v-model="addUser" :isMultiple="form.readType == '0' ? false : true" @change="onChange" v-if="form.status === '2' && form.readType == '0'">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="iconfont iconResetting">
|
||||
再次流转
|
||||
</el-button>
|
||||
</ai-wechat-selecter>
|
||||
<el-button
|
||||
@click="endCirculation"
|
||||
v-if="form.status === '1'"
|
||||
size="small"
|
||||
icon="iconfont iconReject">
|
||||
结束流转</el-button>
|
||||
</template>
|
||||
</ai-title>
|
||||
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-card :title="form.documentName">
|
||||
<template slot="content">
|
||||
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="3">
|
||||
<ai-info-item label="公文编号："><span>{{form.documentCode || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="公文类型："><span>{{$dict.getLabel("officialDocumentName", form.documentType) || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="保密等级："><span>{{$dict.getLabel("officialDocumentConfidentialityLevel", form.confidentialityLevel) || '-'}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
<ai-wrapper label-width="80px" :columnsNumber="3">
|
||||
<ai-info-item label="阅示类型："><span>{{$dict.getLabel("officialDocumentReadType", form.readType) || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="紧急程度："><span>{{$dict.getLabel("officialDocumentEmergencyLevel", form.emergencyLevel) || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="发文机关："><span>{{dict.getLabel('issuingUnit',form.issuingUnit)|| '-'}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
<ai-wrapper label-width="80px" :columnsNumber="3">
|
||||
<ai-info-item label="发文字号："><span>{{form.issuingFont || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="签发人："><span>{{form.signer || '-'}}</span></ai-info-item>
|
||||
<ai-info-item label="发文时间："><span>{{form.createTime || '-'}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
<ai-wrapper label-width="80px" :columnsNumber="1">
|
||||
<ai-info-item label="备注："><span>{{form.remark || '-'}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
<ai-bar title="附件" >
|
||||
<template slot="right" v-if="form.files && form.files.length">
|
||||
<span class="Edit" @click="downFileAll"><i class="iconfont iconDownload"></i>下载全部</span>
|
||||
</template>
|
||||
</ai-bar>
|
||||
<ai-file-list v-if="form.files && form.files.length"
|
||||
:fileList="form.files"
|
||||
:fileOps="{ name: 'name', size: 'fileSizeStr' }"
|
||||
></ai-file-list>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="流转信息">
|
||||
<template #right>
|
||||
<ai-wechat-selecter :instance="instance" v-model="addFlow" @change="addPeople" v-if="form.readType==0 && form.status !== '2'">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="iconfont iconAdd">
|
||||
指派人员
|
||||
</el-button>
|
||||
</ai-wechat-selecter>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<ai-wrapper
|
||||
label-width="70px"
|
||||
:columnsNumber="3">
|
||||
<ai-info-item label="流转状态："><span :class="'status-' + form.status">{{ dict.getLabel('documentStatus', form.status) }}</span></ai-info-item>
|
||||
<ai-info-item label="当前流转对象：" label-width="98px" v-if="form.readType === '0'">{{ form.flowUserName || '-' }}</ai-info-item>
|
||||
<ai-info-item></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="流转记录">
|
||||
<template #right>
|
||||
<ai-wechat-selecter :instance="instance" v-model="addFlow" @change="addFlowChange" v-if="form.readType === '1' && (form.status === '1' || form.status === '0') && $permissions('app_appofficialdocumentinfo_edit')">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="iconfont iconAdd">
|
||||
添加人员
|
||||
</el-button>
|
||||
</ai-wechat-selecter>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="ai-steps" v-if="form.readType === '0'">
|
||||
<div class="ai-steps__item" v-for="(item, index) in form.flowUsers" :key="index">
|
||||
<div class="ai-steps__item--left">
|
||||
<div class="ai-steps__item__avatar">
|
||||
<img :src="item.avatar" v-if="item.avatar">
|
||||
<h2 v-else>{{ formatName(item.flowUserName) }}</h2>
|
||||
<i class="iconfont iconSteps_Finished"></i>
|
||||
</div>
|
||||
<div class="ai-steps__item--content">
|
||||
<span>{{ dict.getLabel('documentFlowStatus', item.flowStatus) }}</span>
|
||||
<h2>{{ item.flowUserName }}</h2>
|
||||
<p v-if="item.description">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-steps__item--right">{{ item.flowTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-table
|
||||
class="table"
|
||||
v-if="form.readType === '1'"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:isShowPagination="false"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
:border="true">
|
||||
<el-table-column slot="options" label="操作" align="center" width="120px">
|
||||
<template slot-scope="{ row }">
|
||||
<span
|
||||
v-if="$permissions('app_appofficialdocumentinfo_edit')"
|
||||
class="iconfont iconDelete"
|
||||
title="删除"
|
||||
style="cursor: pointer;"
|
||||
@click="remove(row.id)">
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "managementDetail",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
documentName: '',
|
||||
documentCode: '',
|
||||
documentType: '',
|
||||
confidentialityLevel: '',
|
||||
readType: '',
|
||||
emergencyLevel: '',
|
||||
issuingTime: '',
|
||||
issuingUnit: '',
|
||||
issuingFont: '',
|
||||
signer: '',
|
||||
overDescription: '',
|
||||
overTime: '',
|
||||
deliver: '',
|
||||
remark: '',
|
||||
files: [],
|
||||
fileIds: [],
|
||||
flowUsers: [],
|
||||
},
|
||||
isAdd: true,
|
||||
isMultiple: true,
|
||||
addUser: [],
|
||||
addFlow: [],
|
||||
tableData: [],
|
||||
search: {
|
||||
size: 10,
|
||||
current: 1
|
||||
},
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{ prop: 'flowUserName', label: '姓名', align: 'center' },
|
||||
{ prop: 'readTime', label: '时间', align: 'center' },
|
||||
{
|
||||
prop: 'readStatus',
|
||||
label: '阅示情况',
|
||||
align: 'center',
|
||||
render: (h, params) => {
|
||||
return h('span', {
|
||||
style: {
|
||||
color: params.row.readStatus === '0' ? '#FF8822' : '#2EA222'
|
||||
}
|
||||
}, this.$dict.getLabel('readingStatus', params.row.readStatus))
|
||||
}
|
||||
},
|
||||
{ slot: 'options', label: '操作', align: 'center' }
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formRules(){
|
||||
return {
|
||||
documentName: [{required: true, message: "请输入公文名称", trigger: 'change' }],
|
||||
documentCode: [{required: true, message: "请输入公文编号", trigger: 'change' }],
|
||||
documentType: [{required: true, message: "请选择公文类型", trigger: 'change' }],
|
||||
readType: [{required: true, message: "请选择阅示类型", trigger: 'change' }],
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.dict.load('issuingUnit','officialDocumentEmergencyLevel', 'officialDocumentReadType', 'officialDocumentConfidentialityLevel', 'officialDocumentName', 'documentFlowStatus', 'readingStatus');
|
||||
},
|
||||
mounted() {
|
||||
this.form = this.params
|
||||
this.showDetail = true
|
||||
this.isAdd = false
|
||||
this.getDetail()
|
||||
|
||||
},
|
||||
methods: {
|
||||
remove (id) {
|
||||
if(this.form.flowUsers.length<=1){
|
||||
return this.$message.error("至少留一个流转对象！");
|
||||
}
|
||||
this.$confirm('确定删除该传阅人员吗？').then(() => {
|
||||
this.instance.post(`/app/appofficialdocumentflow/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
formatName (name) {
|
||||
if(name == undefined){
|
||||
return
|
||||
}
|
||||
return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
|
||||
},
|
||||
addPeople() { //指派人员
|
||||
this.instance.post(`/app/appofficialdocumentinfo/flowById`,null,{
|
||||
params:{
|
||||
flowUserId:this.addFlow[0].id,
|
||||
flowUserName:this.addFlow[0].name,
|
||||
avatar:this.addFlow[0].avatar,
|
||||
flag:0,
|
||||
id:this.form.id,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
message:"指派成功",
|
||||
type:"success"
|
||||
})
|
||||
this.getDetail()
|
||||
this.addFlow = []
|
||||
}
|
||||
})
|
||||
},
|
||||
addFlowChange() { //添加传阅人员
|
||||
let data = this.form
|
||||
const fileIds = data.files.length ? data.files.map(item => item.id) : []
|
||||
const flowUsers = [...this.addFlow].map(item => {
|
||||
return {
|
||||
flowUserId: item.id,
|
||||
flowUserName: item.name,
|
||||
avatar: item.avatar
|
||||
}
|
||||
})
|
||||
delete data.files
|
||||
this.instance.post(`/app/appofficialdocumentflow/add`, {
|
||||
id: this.form.id,
|
||||
...data,
|
||||
status: '1',
|
||||
flowUsers,
|
||||
fileIds
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('添加成功')
|
||||
this.getDetail()
|
||||
this.addFlow = []
|
||||
}
|
||||
})
|
||||
},
|
||||
onChange() {
|
||||
if (!this.addUser.length) {
|
||||
return this.$message.error('请选择流转人员')
|
||||
}
|
||||
|
||||
if (this.form.readType === '0' && this.form.status === '0') {
|
||||
// 开始流转
|
||||
let data = this.form
|
||||
const flowUsers = [...this.addUser].map(item => {
|
||||
return {
|
||||
flowUserId: item.id,
|
||||
flowUserName: item.name,
|
||||
avatar: item.avatar
|
||||
}
|
||||
})
|
||||
const fileIds = data.files.length ? data.files.map(item => item.id) : []
|
||||
delete data.files
|
||||
this.instance.post(`/app/appofficialdocumentinfo/addOrUpdate`, {
|
||||
id: this.form.id,
|
||||
...data,
|
||||
status: '1',
|
||||
flowUsers: flowUsers,
|
||||
fileIds
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('流转成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 再次流转
|
||||
this.instance.post(`/app/appofficialdocumentinfo/flowById`, null, {
|
||||
params: {
|
||||
flag: '1',
|
||||
flowUserId: this.addUser[0].id,
|
||||
flowUserName: this.addUser[0].name,
|
||||
avatar: this.addUser[0].avatar,
|
||||
id: this.form.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('添加成功')
|
||||
this.getDetail(this.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
readTypeChange() {
|
||||
if(this.form.readType == 0) {
|
||||
this.isMultiple = false
|
||||
if(this.form.flowUsers.length > 1) {
|
||||
this.form.flowUsers = []
|
||||
}
|
||||
}else {
|
||||
this.isMultiple = true
|
||||
}
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/appofficialdocumentinfo/queryDetailById?id=${this.params.id}&flag=0`, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.form = {...res.data}
|
||||
this.form.files = this.form.files || []
|
||||
if (res.data.readType === '1') {
|
||||
this.tableData = res.data.flowUsers
|
||||
this.total = res.data.flowUsers.length
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
save(formName, status){
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.submit(status)
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
submit(status) {
|
||||
this.form.flowUsers.map(item => {
|
||||
item.flowUserId = item.id,
|
||||
item.flowUserName = item.name
|
||||
})
|
||||
|
||||
this.form.fileIds = []
|
||||
if(this.form.files.length) {
|
||||
this.form.files.map((item) => {
|
||||
this.form.fileIds.push(item.id)
|
||||
})
|
||||
}
|
||||
this.instance.post(`/app/appofficialdocumentinfo/addOrUpdate`, {
|
||||
...this.form,
|
||||
status: status
|
||||
}, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(!this.isAdd){
|
||||
this.$message.success("编辑成功");
|
||||
}else{
|
||||
this.$message.success("提交成功");
|
||||
this.cancel(true)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addCancel() {
|
||||
if(this.params.id) { //新增
|
||||
this.cancel(true)
|
||||
}else {
|
||||
this.showDetail = true
|
||||
}
|
||||
},
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
},
|
||||
downFileAll () {
|
||||
if (this.form.files.length > 0) {
|
||||
this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
|
||||
responseType: 'blob',
|
||||
params: {
|
||||
id: this.form.id
|
||||
}
|
||||
}).then((res) => {
|
||||
const link = document.createElement('a')
|
||||
let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
||||
link.style.display = 'none'
|
||||
link.href = URL.createObjectURL(blob)
|
||||
var num = ''
|
||||
for (let i = 0; i < 10; i++) {
|
||||
num += Math.ceil(Math.random() * 10)
|
||||
}
|
||||
link.setAttribute('download', '公文文件' + '.zip')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
} else {
|
||||
this.$message.error('暂无附件提供下载')
|
||||
}
|
||||
},
|
||||
endCirculation () {
|
||||
this.$confirm('确定结束流转？').then(() => {
|
||||
this.instance.post(`/app/appofficialdocumentinfo/finishById?id=${this.form.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('操作成功')
|
||||
this.cancel(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.managementDetail {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f3f6f9;
|
||||
.above{
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
.left{
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
.el-date-editor.el-input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.iconEdit,.Edit{
|
||||
color:#5088FF;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.ai-steps {
|
||||
padding-bottom: 40px;
|
||||
.ai-steps__item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 44px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 40px;
|
||||
width: 1px;
|
||||
height: 44px;
|
||||
background: #DDDDDD;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-steps__item--left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.ai-steps__item--content {
|
||||
span {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 4px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 8px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-steps__item__avatar {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 0;
|
||||
color: #2ea222;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
img, h2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-steps__item--right {
|
||||
margin-left: 20px;
|
||||
flex-shrink: 0;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
310
packages/shandong/AppDispatchManagement/components/List.vue
Normal file
310
packages/shandong/AppDispatchManagement/components/List.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<ai-list class="AppDispatchManagement">
|
||||
<template slot="title">
|
||||
<ai-title title="公文流转" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<ai-select
|
||||
v-model="searchObj.documentType"
|
||||
placeholder="选择公文类型"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('officialDocumentName')"
|
||||
></ai-select>
|
||||
<ai-select
|
||||
v-model="searchObj.confidentialityLevel"
|
||||
placeholder="选择保密等级"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('officialDocumentConfidentialityLevel')"
|
||||
></ai-select>
|
||||
<ai-select
|
||||
v-model="searchObj.status"
|
||||
placeholder="选择流转状态"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('documentStatus')"
|
||||
></ai-select>
|
||||
<ai-select
|
||||
v-model="searchObj.readType"
|
||||
placeholder="选择阅示类型"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('officialDocumentReadType')"
|
||||
></ai-select>
|
||||
|
||||
<!-- <el-row class="dateRange" type="flex" align="middle">
|
||||
<span class="dateLabel">操作时间</span>
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="searchObj.createTimeStart"
|
||||
placeholder="开始日期"
|
||||
@change="page.current = 1, getList()"
|
||||
value-format="yyyy-MM-dd" />
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="searchObj.createTimeEnd"
|
||||
placeholder="结束日期"
|
||||
@change="page.current = 1, getList()"
|
||||
value-format="yyyy-MM-dd" />
|
||||
</el-row> -->
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input placeholder="输入公文名称/编号"
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
@change="(page.current = 1), getList()"
|
||||
clearable
|
||||
prefix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar class="mt10">
|
||||
<template slot="left">
|
||||
<el-button type="primary" icon="iconfont iconAdd" @click="toAdd({})"
|
||||
>添加
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
row-key="id"
|
||||
default-expand-all
|
||||
:tree-props="{ children: 'merchandiseList' }"
|
||||
:size.sync="page.size"
|
||||
@getList="getList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column slot="selection" type="selection" width="55"></el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center" width="200">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button v-if="row.status != 0" type="text" @click="goDetail(row)">详情</el-button>
|
||||
<el-button v-if="row.status == 0" type="text" @click="toAdd(row)">编辑</el-button>
|
||||
<el-button type="text" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "management",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
areaId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
documentType: '',
|
||||
confidentialityLevel: '',
|
||||
readType: '',
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
name: '',
|
||||
},
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
tableData: [],
|
||||
shopList: [],
|
||||
ids: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{slot: "selection", label: "", align: "center"},
|
||||
{
|
||||
prop: "documentCode",
|
||||
label: "公文编号",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
prop: "documentName",
|
||||
label: "公文名称",
|
||||
},
|
||||
{
|
||||
prop: "documentType",
|
||||
label: "公文类型",
|
||||
width: 120,
|
||||
align: "center",
|
||||
formart: (documentType) =>
|
||||
this.$dict.getLabel("officialDocumentName", documentType),
|
||||
},
|
||||
{
|
||||
prop: "readType",
|
||||
label: "阅示类型",
|
||||
width: 120,
|
||||
align: "center",
|
||||
formart: (readType) =>
|
||||
this.$dict.getLabel("officialDocumentReadType", readType),
|
||||
},
|
||||
{
|
||||
prop: "confidentialityLevel",
|
||||
label: "保密等级",
|
||||
width: 120,
|
||||
align: "center",
|
||||
formart: (confidentialityLevel) =>
|
||||
this.$dict.getLabel("officialDocumentConfidentialityLevel", confidentialityLevel),
|
||||
},
|
||||
{
|
||||
prop: "flowUserName",
|
||||
label: "当前流转对象",
|
||||
width: 180,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
label: "流转状态",
|
||||
width: 120,
|
||||
align: "center",
|
||||
render: (h, {row}) => {
|
||||
return h('span', {style: {color: this.dict.getColor('documentStatus', row.status)}}, this.dict.getLabel('documentStatus', row.status))
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "createTime",
|
||||
label: "操作时间",
|
||||
width: 180,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
prop: "createUserName",
|
||||
label: "操作人",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{slot: "options", label: "操作"},
|
||||
];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.dict.load('officialDocumentName', 'officialDocumentConfidentialityLevel', 'officialDocumentReadType', 'documentStatus').then(() => {
|
||||
this.$nextTick(() => this.getList())
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeTime() {
|
||||
this.page.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appofficialdocumentinfo/list`, null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records;
|
||||
this.tableData.map((item) => {
|
||||
if (item.createTime) {
|
||||
item.createTime = item.createTime.substring(0, 10)
|
||||
} else {
|
||||
item.createTime = '-'
|
||||
}
|
||||
})
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
Object.keys(this.searchObj).forEach((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.searchObj.createTimeStart = null;
|
||||
this.searchObj.createTimeEnd = null;
|
||||
this.getList();
|
||||
},
|
||||
toAdd(params) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: params
|
||||
})
|
||||
},
|
||||
goDetail(row) {
|
||||
this.$emit('change', {
|
||||
type: 'detail',
|
||||
params: {
|
||||
...row
|
||||
}
|
||||
})
|
||||
},
|
||||
del(item) {
|
||||
this.$confirm("删除后不可恢复，是否要删除该公文？", {
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.instance
|
||||
.post(`/app/appofficialdocumentinfo/delete?ids=${item.id}`)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("删除成功！");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.forEach(e => {
|
||||
this.ids.push(e.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppDispatchManagement {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f3f6f9;
|
||||
|
||||
::v-deep .el-range-editor--small.el-input__inner {
|
||||
width: 258px;
|
||||
}
|
||||
|
||||
::v-deep .dateRange {
|
||||
.dateLabel {
|
||||
height: 32px;
|
||||
border: 1px solid #D0D4DC;
|
||||
line-height: 32px;
|
||||
padding: 0 8px;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 0;
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.iconCorrect {
|
||||
color: #53b43b;
|
||||
}
|
||||
|
||||
.iconReject {
|
||||
color: #e75555;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,766 @@
|
||||
<template>
|
||||
<section class="statistics tabs-init el-tabs__content_f3f6f9">
|
||||
<div style="margin-top: 16px;height: 270px;">
|
||||
<div class="left">
|
||||
<div class="item-left mar-b16">
|
||||
<div class="item-left-title">公文总数</div>
|
||||
<div class="item-left-num" style="color:#4B87FE;">{{totalOfficialDocumentStatistics}}</div>
|
||||
</div>
|
||||
<div class="item-left">
|
||||
<div class="item-left-title">本月新增</div>
|
||||
<div class="item-left-num" style="color:#2EA222;">{{newMonthonStatistics}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="chart-content" style="padding-right:0;">
|
||||
<div class="chart-line">
|
||||
<div class="chart-title">近12个月公文登记情况</div>
|
||||
<div v-if="lineChartData.length"
|
||||
class="chart-info"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 206px;
|
||||
padding: 16px 16px 20px 0;
|
||||
box-sizing: border-box;
|
||||
"
|
||||
id="chartLine"
|
||||
></div>
|
||||
<ai-empty v-else style="height: 148px;"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content">
|
||||
<div class="chart-line" style="margin-right: 16px;">
|
||||
<div class="chart-title">阅示类型统计</div>
|
||||
<div style="overflow:hidden;">
|
||||
<div
|
||||
class="chart-info"
|
||||
style="
|
||||
width: 288px;
|
||||
height: 288px;
|
||||
padding: 16px 0 0 16px;
|
||||
box-sizing: border-box;
|
||||
float:left;
|
||||
"
|
||||
id="readType"
|
||||
></div>
|
||||
<div class="list-type mar-t102">
|
||||
<div class="item" v-for="(item, index) in readTypeList" :key="index">
|
||||
<div class="type-title">
|
||||
<span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
|
||||
</div>
|
||||
<div class="num">{{item.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-title">公文类型统计</div>
|
||||
<div style="overflow:hidden;">
|
||||
<div
|
||||
class="chart-info"
|
||||
style="
|
||||
width: 288px;
|
||||
height: 288px;
|
||||
padding: 16px 0 0 16px;
|
||||
box-sizing: border-box;
|
||||
float:left;
|
||||
"
|
||||
id="docType"
|
||||
></div>
|
||||
<div class="list-type mar-t60">
|
||||
<div class="item" v-for="(item, index) in docTypeList" :key="index">
|
||||
<div class="type-title">
|
||||
<span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
|
||||
</div>
|
||||
<div class="num">{{item.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import charts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "statistics",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
readTypeList: [
|
||||
{
|
||||
title: '传阅',
|
||||
num: '0',
|
||||
bgColor: '#4B87FE'
|
||||
},
|
||||
{
|
||||
title: '批示',
|
||||
num: '0',
|
||||
bgColor: '#FFAA44'
|
||||
}
|
||||
],
|
||||
docTypeList: [
|
||||
{
|
||||
title: '决议',
|
||||
num: '0',
|
||||
bgColor: '#FF4466'
|
||||
},
|
||||
{
|
||||
title: '决定',
|
||||
num: '0',
|
||||
bgColor: '#FFAA44'
|
||||
},
|
||||
{
|
||||
title: '通知',
|
||||
num: '0',
|
||||
bgColor: '#4B87FE'
|
||||
},
|
||||
{
|
||||
title: '通告',
|
||||
num: '0',
|
||||
bgColor: '#45A3FF'
|
||||
},
|
||||
{
|
||||
title: '函',
|
||||
num: '0',
|
||||
bgColor: '#2EA222'
|
||||
},
|
||||
{
|
||||
title: '其它',
|
||||
num: '0',
|
||||
bgColor: '#B244FF'
|
||||
},
|
||||
],
|
||||
lineChartTitle: [],
|
||||
lineChartData: [],
|
||||
totalOfficialDocumentStatistics: 0,
|
||||
newMonthonStatistics: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user"]),
|
||||
},
|
||||
mounted() {
|
||||
this.getInfo()
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
this.instance.post(`/app/appofficialsenddeliverinfo/getStatistics`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.newMonthonStatistics = res.data.newMonthonStatistics || 0
|
||||
this.totalOfficialDocumentStatistics = res.data.totalOfficialSendStatistics || 0
|
||||
if(res.data.officialRegistrationStatistics && res.data.officialRegistrationStatistics.length) {
|
||||
res.data.officialRegistrationStatistics.map(item => {
|
||||
this.lineChartTitle.push(item.name)
|
||||
this.lineChartData.push(item.v1)
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.setLineChart()
|
||||
})
|
||||
|
||||
}
|
||||
if(res.data.readTheTypeStatistics && res.data.readTheTypeStatistics.length) {
|
||||
res.data.readTheTypeStatistics.map(item => {
|
||||
if(item.name == 0){
|
||||
this.readTypeList[1].num = item.v1 || 0
|
||||
}
|
||||
if(item.name == 1){
|
||||
this.readTypeList[0].num = item.v1 || 0
|
||||
}
|
||||
})
|
||||
this.setReadChart()
|
||||
}
|
||||
if(res.data.officialSendTypeStatistics && res.data.officialSendTypeStatistics.length) {
|
||||
res.data.officialSendTypeStatistics.map(item => {
|
||||
if(item.name == 0){
|
||||
this.docTypeList[0].num = item.v1
|
||||
}
|
||||
if(item.name == 1){
|
||||
this.docTypeList[1].num = item.v1
|
||||
}
|
||||
if(item.name == 3){
|
||||
this.docTypeList[2].num = item.v1
|
||||
}
|
||||
if(item.name == 2){
|
||||
this.docTypeList[3].num = item.v1
|
||||
}
|
||||
if(item.name == 4){
|
||||
this.docTypeList[4].num = item.v1
|
||||
}
|
||||
if(item.name == 5){
|
||||
this.docTypeList[5].num = item.v1
|
||||
}
|
||||
})
|
||||
this.setDocChart()
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
setLineChart() {
|
||||
var chartLine = charts.init(document.getElementById("chartLine"));
|
||||
var option = {
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: this.lineChartTitle,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#26f",
|
||||
},
|
||||
},
|
||||
data: this.lineChartData,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartLine.setOption(option);
|
||||
},
|
||||
setReadChart() {
|
||||
var chart = charts.init(document.getElementById("readType"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["50%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%',
|
||||
fontSize: '14',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.readTypeList[0].num,
|
||||
name: '传阅',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4B87FE'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.readTypeList[1].num,
|
||||
name: '批示',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FFAA44'
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
setDocChart() {
|
||||
var chart = charts.init(document.getElementById("docType"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["50%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%',
|
||||
fontSize: '14',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.docTypeList[0].num,
|
||||
name: '决议',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FF4466'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.docTypeList[1].num,
|
||||
name: '决定',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FFAA44'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.docTypeList[2].num,
|
||||
name: '通知',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4B87FE'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.docTypeList[3].num,
|
||||
name: '通告',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#45A3FF'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.docTypeList[4].num,
|
||||
name: '函',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2EA222'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.docTypeList[5].num,
|
||||
name: '其它',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#B244FF'
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f3f6f9;
|
||||
// overflow: hidden;
|
||||
.left{
|
||||
width: 29%;
|
||||
float: left;
|
||||
margin-left: 16px;
|
||||
.item-left{
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
.item-left-title{
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
padding: 20px 0 16px 0;
|
||||
}
|
||||
.item-left-num{
|
||||
font-size: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: calc(70% - 20px);
|
||||
float: left;
|
||||
}
|
||||
.mar-t102{
|
||||
margin-top: 102px;
|
||||
}
|
||||
.mar-t60{
|
||||
margin-top: 60px;
|
||||
}
|
||||
.list-type{
|
||||
width:calc(100% - 360px);
|
||||
float:right;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
padding-right: 40px;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.type-title{
|
||||
color: #666;
|
||||
.item-color-bg{
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4B87FE;
|
||||
border-radius: 1px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
// height: 336px;
|
||||
border-radius: 4px;
|
||||
padding: 0 16px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.chart-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.chart-title {
|
||||
line-height: 48px;
|
||||
border-bottom: 1px solid #e6e8ee;
|
||||
padding-left: 16px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tab-row {
|
||||
padding: 16px 16px 16px 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tab-col {
|
||||
height: 64px;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
margin-right: 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(216, 224, 232, 1);
|
||||
overflow: hidden;
|
||||
|
||||
.tab-title {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.tab-num {
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
font-family: DINAlternate-Bold, serif;
|
||||
float: right;
|
||||
line-height: 64px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-col:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 20px 8px 0 16px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #d8e0e8;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px 0 16px;
|
||||
|
||||
b {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
#ASBarChart {
|
||||
height: 286px;
|
||||
|
||||
& + .no-data {
|
||||
margin: 83px auto;
|
||||
}
|
||||
}
|
||||
|
||||
#PartyAgePieChart,
|
||||
#PartyEduPieChart {
|
||||
height: 264px;
|
||||
|
||||
& + .no-data {
|
||||
margin: 72px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.party_title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
text-indent: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.party_content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
|
||||
.party_left {
|
||||
width: 280px;
|
||||
background: #eaedf1;
|
||||
border: 1px solid #d8dce3;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.p {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background: #d9e0e9;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
text-indent: 16px;
|
||||
}
|
||||
|
||||
.left_tree {
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.left_cont {
|
||||
width: 95%;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 80px);
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tree {
|
||||
background: #eaedf1;
|
||||
}
|
||||
|
||||
.right_btn {
|
||||
width: 96px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
|
||||
li {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
text-indent: 12px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #eff6ff;
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #f5f6f7;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
border-top: 1px solid #d8dce3;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.party_right {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
margin-left: 11px;
|
||||
|
||||
.total-panel {
|
||||
margin-bottom: 21px;
|
||||
|
||||
li {
|
||||
flex: 1;
|
||||
margin-right: 32px;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border: 1px solid #d8e0e8;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
font-weight: bold;
|
||||
height: 97px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 20px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
display: flex;
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f3f6f9;
|
||||
box-shadow: inset 0px 1px 0px 0px #eeeeee;
|
||||
|
||||
button {
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
.content {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #d8e0e8;
|
||||
border-bottom: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 28px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
color: #5088ff;
|
||||
width: 88px;
|
||||
float: right;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.vc-input-120 {
|
||||
width: 120px !important;
|
||||
float: right;
|
||||
padding-right: 16px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 120px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
packages/shandong/AppVillageCode/AppVillageCode.vue
Normal file
66
packages/shandong/AppVillageCode/AppVillageCode.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="doc-circulation ailist-wrapper">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
|
||||
export default {
|
||||
name: 'AppVillageCode',
|
||||
label: '一村一码',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: []
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange (data) {
|
||||
if (data.type === 'Add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.doc-circulation {
|
||||
height: 100%;
|
||||
background: #F3F6F9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
135
packages/shandong/AppVillageCode/components/Add.vue
Normal file
135
packages/shandong/AppVillageCode/components/Add.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<ai-detail>
|
||||
<template slot="title">
|
||||
<ai-title title="添加二维码" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
</ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<el-form class="ai-form" ref="form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="地区" style="width: 100%;" prop="codeName">
|
||||
<span style="color: #666;">{{ form.areaName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="二维码名称" prop="codeName" :rules="[{ required: true, message: '请输入二维码名称', trigger: 'blur' }]">
|
||||
<el-input size="small" placeholder="请输入二维码名称" style="width: 328px;" v-model="form.codeName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%;" label="二维码类型" prop="type" :rules="[{ required: true, message: '请选择二维码类型', trigger: 'change' }]">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio label="0">群二维码</el-radio>
|
||||
<el-radio label="1">个人二维码</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传二维码" prop="codeUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传二维码', trigger: 'change' }]">
|
||||
<ai-uploader :instance="instance" v-model="form.codeUrl" :limit="1"></ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Add',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
form: {
|
||||
areaId: '',
|
||||
codeName: '',
|
||||
areaName: '',
|
||||
code: '',
|
||||
codeUrl: [],
|
||||
type: '',
|
||||
},
|
||||
id: '',
|
||||
areaList: []
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getAreaList()
|
||||
|
||||
if (this.params && this.params.areaId && !this.params.id) {
|
||||
this.form.areaId = this.params.areaId
|
||||
this.form.areaName = this.params.areaName
|
||||
}
|
||||
|
||||
if (this.params && this.params.id) {
|
||||
this.id = this.params.id
|
||||
this.getInfo(this.params.id)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appeveryvillagecode/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = res.data
|
||||
this.form.codeUrl = [{
|
||||
url: res.data.codeUrl
|
||||
}]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getAreaList() {
|
||||
this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.areaList = res.data.map(item => {
|
||||
item.dictName = item.name
|
||||
item.dictValue = item.id
|
||||
|
||||
return item
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose () {
|
||||
this.form.explain = ''
|
||||
},
|
||||
|
||||
confirm () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appeveryvillagecode/addOrUpdate`, {
|
||||
...this.form,
|
||||
codeUrl: this.form.codeUrl[0].url
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
422
packages/shandong/AppVillageCode/components/List.vue
Normal file
422
packages/shandong/AppVillageCode/components/List.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<ai-list class="villagecode">
|
||||
<template slot="title">
|
||||
<ai-title title="一村一码" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template #left>
|
||||
<div class="villagecode-left">
|
||||
<div class="villagecode-left__title">
|
||||
<h2>村列表</h2>
|
||||
</div>
|
||||
<div class="addressBook-left__list">
|
||||
<div class="addressBook-left__list--title">
|
||||
<el-input
|
||||
class="addressBook-left__list--search"
|
||||
size="mini"
|
||||
placeholder="请输入地区名称"
|
||||
v-model="unitName"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<el-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:data="areaTree"
|
||||
highlight-current
|
||||
:current-node-key="search.areaId"
|
||||
:default-expanded-keys="defaultExpanded"
|
||||
:default-checked-keys="defaultChecked"
|
||||
@current-change="onTreeChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" :disabled="isShowAdd" icon="iconfont iconAdd" @click="toAdd('')">添加活码</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="tags" label="标签">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-tags">
|
||||
<el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="160"
|
||||
:visible-arrow="false"
|
||||
popper-class="wechat-message__container"
|
||||
trigger="hover">
|
||||
<el-button type="text" slot="reference">二维码</el-button>
|
||||
<div style="font-size: 0;">
|
||||
<img class="message-info__img" :src="row.codeUrl">
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: 0,
|
||||
title: '',
|
||||
areaId: ''
|
||||
},
|
||||
defaultExpanded: [],
|
||||
defaultChecked: [],
|
||||
areaTree: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
currIndex: -1,
|
||||
areaList: [],
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{prop: 'codeName', label: '名称', align: 'left'},
|
||||
{prop: 'type', label: '二维码类型', align: 'left', formart: v => v === '0' ? '群二维码' : '个人二维码'},
|
||||
{prop: 'createUserName', label: '创建人'},
|
||||
{prop: 'createTime', label: '创建时间'},
|
||||
{slot: 'options', label: '操作'}
|
||||
],
|
||||
areaName: '',
|
||||
unitName: '',
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isShowAdd () {
|
||||
const str = this.search.areaId.substr(this.search.areaId.length - 3)
|
||||
|
||||
return str === '000'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
unitName (val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.search.areaId = this.user.info.areaId
|
||||
this.areaName = this.user.info.areaName
|
||||
this.getTree()
|
||||
this.getAreaList()
|
||||
this.getList()
|
||||
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appeveryvillagecode/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
|
||||
onTreeChange (e) {
|
||||
this.search.areaId = e.id
|
||||
this.areaName = e.name
|
||||
this.search.current = 1
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
getTree () {
|
||||
this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
let parent = res.data.map(v => {
|
||||
v.label = v.name
|
||||
v.children = []
|
||||
|
||||
return v
|
||||
}).filter(e => !e.parentid)[0]
|
||||
this.defaultExpanded = [parent.id]
|
||||
this.defaultChecked = [parent.id]
|
||||
this.search.areaId = parent.id
|
||||
this.addChild(parent, res.data)
|
||||
this.areaTree = [parent]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(parent.id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
addChild (parent, list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].parentId === parent.id) {
|
||||
parent.children.push(list[i])
|
||||
}
|
||||
}
|
||||
|
||||
if (list.length > 0) {
|
||||
parent['children'].map(v => this.addChild(v, list))
|
||||
}
|
||||
},
|
||||
|
||||
getAreaList() {
|
||||
this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.areaList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appeveryvillagecode/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
areaName: this.areaName,
|
||||
id: id || '',
|
||||
areaId: this.search.areaId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.villagecode {
|
||||
.table-tags {
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__list {
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px 8px;
|
||||
overflow: auto;
|
||||
|
||||
.addressBook-left__tags--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 8px 0 16px;
|
||||
color: #222222;
|
||||
|
||||
&.addressBook-left__tags--item-active, &:hover {
|
||||
background: #E8EFFF;
|
||||
color: #2266FF;
|
||||
|
||||
i, span {
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
color: #8e9ebf;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__list--title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.addressBook-left__list--search {
|
||||
flex: 1;
|
||||
::v-deep input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 84px;
|
||||
flex-shrink: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent!important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree__empty-text {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.villagecode-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #FAFAFB;
|
||||
|
||||
.villagecode-left__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #E5E5E5;
|
||||
|
||||
h2 {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.villagecode-left__list {
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px 0;
|
||||
overflow: auto;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 24px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: #2266FF;
|
||||
background: #E8EFFF;
|
||||
}
|
||||
|
||||
&.left-active {
|
||||
color: #2266FF;
|
||||
border-color: #2266FF;
|
||||
background: #E8EFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-list__content--right {
|
||||
|
||||
.ai-list__content--right-wrapper {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-info__img {
|
||||
font-size: 0;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
66
packages/shandong/AppVillagersCircle/AppVillagersCircle.vue
Normal file
66
packages/shandong/AppVillagersCircle/AppVillagersCircle.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="doc-circulation ailist-wrapper">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Detail from './components/Detail'
|
||||
|
||||
export default {
|
||||
name: 'AppVillagersCircle',
|
||||
label: '村民圈',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: []
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Detail
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange (data) {
|
||||
if (data.type === 'Detail') {
|
||||
this.component = 'Detail'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.doc-circulation {
|
||||
height: 100%;
|
||||
background: #F3F6F9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
105
packages/shandong/AppVillagersCircle/components/Detail.vue
Normal file
105
packages/shandong/AppVillagersCircle/components/Detail.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<ai-detail>
|
||||
<template slot="title">
|
||||
<ai-title title="村民圈详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
</ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基础信息">
|
||||
<ai-wrapper slot="content">
|
||||
<ai-info-item label="主题" :value="info.content" isLine></ai-info-item>
|
||||
<ai-info-item label="发布地区" :value="info.areaName" isLine></ai-info-item>
|
||||
<ai-info-item label="议事截止时间" :value="info.discussDeadline"></ai-info-item>
|
||||
<ai-info-item label="公示截止时间" :value="info.publicityDeadline"></ai-info-item>
|
||||
<ai-info-item label="议事类型" :value="dict.getLabel('discussType', info.type)" isLine></ai-info-item>
|
||||
<ai-info-item label="是否匿名投票" v-if="info.type === '1'" :value="info.anonymous === '1' ? '是' : '否'"></ai-info-item>
|
||||
<ai-info-item label="投票方式" v-if="info.type === '1'" :value="info.voteType === '0' ? '单选' : '多选'"></ai-info-item>
|
||||
<ai-info-item label="图片" isLine>
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
disabled
|
||||
v-model="info.images"
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowAdd"
|
||||
width="680px"
|
||||
height="580px"
|
||||
title="发表意见"
|
||||
@close="onClose"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="发表意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请发表你的观点和意见', trigger: 'blur' }]">
|
||||
<el-input size="small" type="textarea" :rows="5" show-word-limit :maxlength="140" placeholder="请发表你的观点和意见" v-model="form.content"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'Detail',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
id: '',
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
isShowAdd: false,
|
||||
form: {
|
||||
content: ''
|
||||
},
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getInfo(this.params.id)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.info.images = res.data.images ? JSON.parse(res.data.images) : []
|
||||
this.type = res.data.type
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose () {
|
||||
this.form.content = ''
|
||||
},
|
||||
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
173
packages/shandong/AppVillagersCircle/components/List.vue
Normal file
173
packages/shandong/AppVillagersCircle/components/List.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<ai-list class="notice">
|
||||
<template slot="title">
|
||||
<ai-title title="村民圈" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance" @change="search.current = 1, getList()"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<ai-select placeholder="请选择状态" v-model="search.type" clearable @change="search.current = 1, getList()" :selectList="dict.getDict('discussType')"></ai-select>
|
||||
<ai-select placeholder="请选择话题" v-model="search.status" clearable @change="search.current = 1, getList()" :selectList="dict.getDict('discussStatus')"></ai-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.title"
|
||||
class="search-input"
|
||||
size="small"
|
||||
@keyup.enter.native="search.current = 1, search.title, getList()"
|
||||
placeholder="请输入发布人姓名"
|
||||
clearable
|
||||
@clear="search.current = 1, search.title = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="tags" label="标签">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-tags">
|
||||
<el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
|
||||
<el-button type="text" title="取消公示" @click="changeStatus(row)" :disabled="row.status !== '1'">结束公示</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: '',
|
||||
type: '',
|
||||
title: '',
|
||||
areaId: ''
|
||||
},
|
||||
currIndex: -1,
|
||||
areaList: [],
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{ prop: 'content', label: '议事主题', align: 'left', width: '200px' },
|
||||
{ prop: 'type', label: '议事类型', align: 'center', formart: v => this.dict.getLabel('discussType', v) },
|
||||
{ prop: 'createUserName', label: '话事人', align: 'center' },
|
||||
{ prop: 'msgCountTotal', label: '观点数量', align: 'center', formart: v => v === 0 ? '-' : v },
|
||||
{ prop: 'voteCount', label: '投票数量', align: 'center', formart: v => v === 0 ? '-' : v },
|
||||
{ prop: 'status', label: '发布状态', align: 'center', formart: v => this.dict.getLabel('discussStatus', v) },
|
||||
{ prop: 'createTime', label: '发布时间', align: 'center' },
|
||||
{ slot: 'options', label: '操作', align: 'center' }
|
||||
],
|
||||
areaName: '',
|
||||
unitName: '',
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created () {
|
||||
this.search.areaId = this.user.info.areaId
|
||||
this.dict.load(['discussType', 'discussStatus']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appvillagediscuss/listUp`, null, {
|
||||
params: {
|
||||
type: 0,
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records.map(v => {
|
||||
return {
|
||||
...v,
|
||||
content: v.content || v.title
|
||||
}
|
||||
})
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
changeStatus (item) {
|
||||
this.$confirm('是否要结束公示', {type: 'warning'}).then(() => {
|
||||
this.instance.post('/app/appvillagediscuss/finishPublic', {
|
||||
status: '2',
|
||||
id: item.id
|
||||
}).then(res => {
|
||||
if (res && res.code == 0) {
|
||||
this.$message.success('结束公示成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appvillagediscuss/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +0,0 @@
|
||||
registry=http://192.168.1.87:4873/
|
||||
email=aixianling@sinoecare.com
|
||||
always-auth=true
|
||||
_auth="YWRtaW46YWRtaW4xMjM="
|
||||
package-lock=false
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="AppGridBlock">
|
||||
<keep-alive include="List">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
:isEdit="isEdit"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
import Add from "./components/add";
|
||||
|
||||
export default {
|
||||
name: "AppGridBlock",
|
||||
label: "网格区块--山东",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
isEdit: false
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Add") {
|
||||
this.component = "Add";
|
||||
this.params = data.params;
|
||||
this.isEdit = data.isEdit
|
||||
}
|
||||
|
||||
if (data.type === "list") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridBlock {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,580 +0,0 @@
|
||||
<template>
|
||||
<div class="add-block">
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title
|
||||
:title="title"
|
||||
:isShowBack="true"
|
||||
:isShowBottomBorder="true"
|
||||
@onBackClick="cancel(false)"
|
||||
></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-card title="层级信息">
|
||||
<template slot="content">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
|
||||
<ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<el-form
|
||||
ref="rules"
|
||||
:model="forms"
|
||||
:rules="formRules"
|
||||
size="small"
|
||||
label-suffix="："
|
||||
label-width="120px"
|
||||
>
|
||||
<ai-card title="基础信息">
|
||||
<template slot="content">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="网格名称" prop="girdName">
|
||||
<el-input
|
||||
v-model="forms.girdName"
|
||||
placeholder="请输入…"
|
||||
:maxlength="50"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格类型" prop="girdType">
|
||||
<el-select
|
||||
v-model="forms.girdType"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('girdType')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否最后一级" prop="isLastLevel">
|
||||
<el-select
|
||||
v-model="forms.isLastLevel"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('isLastLevel')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="网格编码" prop="girdCode">
|
||||
<el-input
|
||||
v-model="forms.girdCode"
|
||||
placeholder="请输入…"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格层级" prop="girdLevel">
|
||||
<el-select
|
||||
v-model="forms.girdLevel"
|
||||
placeholder="请选择"
|
||||
:disabled="isEdit"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('girdLevel')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<ai-card title="其他信息">
|
||||
<template slot="content">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
:options="unitOps"
|
||||
ref="cascader"
|
||||
v-model="forms.eventReportUnitId"
|
||||
:props="unitProps"
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="初始日期" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="forms.startDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止日期" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="forms.endDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="面积" prop="area">
|
||||
<el-input
|
||||
v-model="forms.area"
|
||||
placeholder="面积㎡"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="网格地址" prop="address">
|
||||
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel">
|
||||
<el-button size="small" @click="showMap = true">地图标绘</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel(false)" class="delete-btn footer-btn">
|
||||
取 消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save()" class="footer-btn">
|
||||
提 交
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
<ai-dialog
|
||||
title="网格范围"
|
||||
:visible.sync="showMap"
|
||||
:customFooter="true"
|
||||
:destroyOnClose="true"
|
||||
@opened="beforeSelectMap"
|
||||
border
|
||||
width="850px"
|
||||
>
|
||||
<div class="map">
|
||||
<div class="tipinput">
|
||||
<el-input
|
||||
v-model="searchAddress"
|
||||
@change="addressChange"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
id="tipinput"
|
||||
size="medium"
|
||||
style="width: 200px"
|
||||
></el-input>
|
||||
</div>
|
||||
<div id="panel"></div>
|
||||
<div class="container" id="container"></div>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="forms.plottingStatus == 1"
|
||||
>
|
||||
<el-button type="primary" size="mini" @click="polyEditor.open()"
|
||||
>开始编辑
|
||||
</el-button
|
||||
>
|
||||
<el-button size="mini" @click="polyEditor.close()"
|
||||
>结束编辑
|
||||
</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="forms.plottingStatus == 0"
|
||||
>
|
||||
<el-button size="mini" @click="draw('polygon')"
|
||||
>开始绘制多边形
|
||||
</el-button
|
||||
>
|
||||
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
|
||||
<el-button size="mini" @click="clear()">清除绘制</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button size="medium" @click="showMap = false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="surePotting()"
|
||||
>确认
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "addBlock",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
isEdit: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
address: "",
|
||||
area: "",
|
||||
points: [],
|
||||
endDate: "",
|
||||
eventReportUnit: "",
|
||||
eventReportUnitId: "",
|
||||
girdCode: "",
|
||||
girdLevel: "",
|
||||
girdList: [],
|
||||
girdName: "",
|
||||
girdType: "",
|
||||
isLastLevel: "",
|
||||
parentGirdId: "",
|
||||
parentGirdName: "",
|
||||
startDate: "",
|
||||
plottingStatus: "0",
|
||||
},
|
||||
showMap: false,
|
||||
map: "",
|
||||
mouseTool: "",
|
||||
searchAddress: "",
|
||||
placeSearch: "",
|
||||
overlays: [],
|
||||
options: [],
|
||||
path: [],
|
||||
location: {},
|
||||
polyEditor: "",
|
||||
title: "添加网格区块",
|
||||
parentGirdInfo: {},
|
||||
isAddLastLevel: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user"]),
|
||||
formRules() {
|
||||
return {
|
||||
girdName: [
|
||||
{required: true, message: "请输入网格名称", trigger: "change"},
|
||||
],
|
||||
girdLevel: [
|
||||
{required: true, message: "请选择网格层级", trigger: "change"},
|
||||
],
|
||||
girdCode: [
|
||||
{required: true, message: "请输入网格编号"},
|
||||
{pattern: /^\d+$/g, message: "请输入数字"},
|
||||
]
|
||||
};
|
||||
},
|
||||
unitProps() {
|
||||
return {
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
};
|
||||
},
|
||||
unitOps() {
|
||||
let initData = JSON.parse(JSON.stringify(this.options)),
|
||||
ops = initData.filter((e) => !e.parentId);
|
||||
ops.map((e) => this.addChild(e, initData));
|
||||
return ops;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCorpLocation()
|
||||
if (this.isEdit) {
|
||||
this.title = "编辑网格区块";
|
||||
this.searchDetail();
|
||||
} else {
|
||||
this.forms.parentGirdId = this.params.id;
|
||||
this.forms.parentGirdName = this.params.girdName;
|
||||
this.isAddLastLevel = this.params.girdLevel === '1'
|
||||
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
|
||||
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
|
||||
this.title = "添加网格区块";
|
||||
}
|
||||
// this.getAllUnit(this.user.info.areaId);
|
||||
},
|
||||
methods: {
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
// 获取所有单位
|
||||
getAllUnit(data) {
|
||||
this.options = [];
|
||||
this.instance.post("/admin/sysunit/getAll", null, {
|
||||
params: {areaId: data},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
res.data = res.data.map((a) => {
|
||||
return {...a, label: a.name}
|
||||
});
|
||||
this.options = res.data.filter((e) => !e.parentId);
|
||||
this.options.map((t) => this.addChild(t, res.data));
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeSelectMap() {
|
||||
AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: [], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
});
|
||||
if (this.forms.plottingStatus == 1) {
|
||||
let path = [];
|
||||
this.forms.points.map((e, index) => {
|
||||
path[index] = [e.lng, e.lat];
|
||||
});
|
||||
let polygon = new AMap.Polygon({
|
||||
path: path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: "#1791fc",
|
||||
zIndex: 50,
|
||||
bubble: true,
|
||||
});
|
||||
this.map.add([polygon]);
|
||||
this.map.setFitView();
|
||||
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
|
||||
} else {
|
||||
this.mouseTool = new AMap.MouseTool(this.map);
|
||||
// this.map.add(new AMap.Marker({
|
||||
// position:this.map.getCenter()
|
||||
// }));
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 3, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: "", // 兴趣点城市
|
||||
citylimit: false, //是否强制限制在设置的城市内搜索
|
||||
map: this.map, // 展现结果的地图实例
|
||||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
|
||||
this.eventOn();
|
||||
}
|
||||
})
|
||||
},
|
||||
getCorpLocation() {
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||||
if (res.code == 0) {
|
||||
this.location = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//地图事件绑定
|
||||
eventOn() {
|
||||
this.path = [];
|
||||
this.overlays = [];
|
||||
this.map.on("mousemove", null, this);
|
||||
this.mouseTool.on("draw", ({obj}) => {
|
||||
obj.getPath().map((e) => {
|
||||
this.path.push({lat: e.getLat(), lng: e.getLng()});
|
||||
});
|
||||
this.overlays.push(obj);
|
||||
})
|
||||
},
|
||||
//map搜索
|
||||
addressChange(val) {
|
||||
this.placeSearch.search(val);
|
||||
},
|
||||
close() {
|
||||
this.mouseTool.close(true);
|
||||
},
|
||||
clear() {
|
||||
this.map.remove(this.overlays);
|
||||
this.overlays = [];
|
||||
this.path = [];
|
||||
},
|
||||
draw(type) {
|
||||
switch (type) {
|
||||
case "marker": {
|
||||
this.mouseTool.marker({
|
||||
//同Marker的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "polyline": {
|
||||
this.mouseTool.polyline({
|
||||
strokeColor: "#80d8ff",
|
||||
//同Polyline的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "polygon": {
|
||||
this.mouseTool.polygon({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
borderWeight: 2,
|
||||
strokeWeight: 4,
|
||||
//同Polygon的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "rectangle": {
|
||||
this.mouseTool.rectangle({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
//同Polygon的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "circle": {
|
||||
this.mouseTool.circle({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
//同Circle的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
surePotting() {
|
||||
this.forms.points = [];
|
||||
// this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
|
||||
if (this.forms.plottingStatus == 1) {
|
||||
this.polyEditor
|
||||
.getTarget()
|
||||
.getPath()
|
||||
.map((e) => {
|
||||
this.forms.points.push({lng: e.lng, lat: e.lat});
|
||||
});
|
||||
} else {
|
||||
this.forms.points = [...this.path];
|
||||
}
|
||||
this.showMap = false;
|
||||
},
|
||||
save() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance
|
||||
.post(
|
||||
`/app/appgirdinfo/addOrUpdate`,
|
||||
{
|
||||
...this.forms,
|
||||
},
|
||||
null
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.cancel(true)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDetail() {
|
||||
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
|
||||
params: {id: this.params.id},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.forms = {...res.data};
|
||||
this.parentGirdInfo = res.data.parentGirdInfo;
|
||||
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-logo {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.above {
|
||||
overflow: hidden;
|
||||
padding: 8px 0;
|
||||
|
||||
.left {
|
||||
width: 380px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 380px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 780px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.container {
|
||||
width: 760px;
|
||||
height: 420px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d0d4dc;
|
||||
}
|
||||
|
||||
#panel {
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tipinput {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 38px;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,695 +0,0 @@
|
||||
<template>
|
||||
<div class="app-grid-block">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="left">
|
||||
<ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
/>
|
||||
</ai-tree-menu>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-date-picker
|
||||
v-model="searchObj.createTimeStr"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="创建时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.girdName"
|
||||
size="small"
|
||||
placeholder="输入网格名称"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.girdName = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"
|
||||
/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="iconfont iconAdd"
|
||||
:disabled="info.girdLevel === '3'"
|
||||
@click="(isEdit = false), toAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<ai-download
|
||||
:instance="instance"
|
||||
url="/app/appgirdinfo/exportGirdInfo"
|
||||
:params="{ ...searchObj, ids: ids.join(',') }"
|
||||
fileName="网格区块"
|
||||
>
|
||||
<el-button icon="iconfont iconExported" size="small"
|
||||
>导出全部</el-button
|
||||
>
|
||||
</ai-download>
|
||||
<ai-import
|
||||
ref="import"
|
||||
title="导入"
|
||||
name="网格区块"
|
||||
url="/app/appgirdinfo/downloadGirdInfo"
|
||||
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||
suffixName="xlsx"
|
||||
:customCliker="true"
|
||||
:instance="instance"
|
||||
>
|
||||
<template slot="tips">
|
||||
<p>
|
||||
如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
|
||||
</p>
|
||||
</template>
|
||||
<el-button size="small" icon="iconfont iconImport"
|
||||
>导入</el-button
|
||||
>
|
||||
</ai-import>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
class="mt10"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()"
|
||||
>
|
||||
<el-table-column
|
||||
slot="selectId"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="40"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
slot="options"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="see(row)">编辑</el-button>
|
||||
<el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog
|
||||
title="网格范围"
|
||||
:visible.sync="showMap"
|
||||
:customFooter="true"
|
||||
:destroyOnClose="true"
|
||||
border
|
||||
width="850px"
|
||||
>
|
||||
<div class="map">
|
||||
<div class="tipinput">
|
||||
<el-input
|
||||
v-if="editRow.plottingStatus == 0"
|
||||
v-model="searchAddress"
|
||||
@change="addressChange"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
id="tipinput"
|
||||
size="medium"
|
||||
style="width: 200px"
|
||||
></el-input>
|
||||
</div>
|
||||
<div id="panel" v-if="editRow.plottingStatus == 0"></div>
|
||||
<div class="container" id="container"></div>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="editRow.plottingStatus == 1"
|
||||
>
|
||||
<el-button type="primary" size="mini" @click="beginPoltting()"
|
||||
>开始编辑</el-button
|
||||
>
|
||||
<el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="editRow.plottingStatus == 0"
|
||||
>
|
||||
<el-button size="mini" @click="draw('polygon')"
|
||||
>开始绘制多边形</el-button
|
||||
>
|
||||
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
|
||||
<el-button size="mini" @click="clear()">清除绘制</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button size="medium" @click="showMap = false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="confirm()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
export default {
|
||||
name: "List",
|
||||
label: "网格区块",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
},
|
||||
filterText: "",
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
searchObj: {
|
||||
createTimeStr: "",
|
||||
girdName: "",
|
||||
},
|
||||
tableData: [],
|
||||
info: {},
|
||||
ids: [],
|
||||
showMap: false,
|
||||
map: "",
|
||||
polyEditor: "",
|
||||
editRow: {},
|
||||
searchAddress: "",
|
||||
mouseTool: "",
|
||||
placeSearch: "",
|
||||
path: [],
|
||||
overlays: [],
|
||||
isEdit: false,
|
||||
searchId: "",
|
||||
fileList: [],
|
||||
location: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTreeList();
|
||||
this.getList();
|
||||
this.getCorpLocation()
|
||||
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let _ = this;
|
||||
return [
|
||||
{ type: 'selection'},
|
||||
{
|
||||
prop: "girdName",
|
||||
align: "left",
|
||||
label: "网格名称",
|
||||
},
|
||||
{
|
||||
prop: "girdCode",
|
||||
align: "center",
|
||||
label: "网格编码",
|
||||
},
|
||||
{
|
||||
prop: "girdType",
|
||||
align: "center",
|
||||
label: "网格类型",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "girdLevel",
|
||||
align: "center",
|
||||
label: "网格层级",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "plottingStatus",
|
||||
align: "center",
|
||||
label: "标绘状态",
|
||||
render(h, { row }) {
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
color: _.dict.getColor("plottingStatus", row.plottingStatus),
|
||||
},
|
||||
},
|
||||
_.dict.getLabel("plottingStatus", row.plottingStatus)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "createTime",
|
||||
align: "center",
|
||||
label: "创建时间",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, row.createTime.substring(0, 11));
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "girdMemberNames",
|
||||
align: "center",
|
||||
width: 200,
|
||||
label: "网格员",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getCorpLocation(){
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||
if(res.code==0){
|
||||
this.location = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(val) {
|
||||
this.info = { ...val };
|
||||
this.searchId = val.id;
|
||||
this.getList();
|
||||
},
|
||||
getTreeList() {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/listByTop", null, null)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = [...res.data];
|
||||
this.info = { ...this.treeObj.treeList[0] };
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
deleteTree(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
getList() {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
//添加二级网格
|
||||
addTwoLevel() {
|
||||
this.info = { ...this.treeObj.treeList[0] };
|
||||
this.toAdd()
|
||||
},
|
||||
toAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: this.info,
|
||||
isEdit: this.isEdit
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.isAdd = false;
|
||||
this.$nextTick(() => {
|
||||
this.getList();
|
||||
this.getTreeList();
|
||||
});
|
||||
},
|
||||
poltting(row) {
|
||||
this.showMap = true;
|
||||
this.editRow = { ...row };
|
||||
AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: [], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
zoom: 14,
|
||||
});
|
||||
if (this.editRow.plottingStatus == 1) {
|
||||
let path = [];
|
||||
this.editRow.points.map((e, index) => {
|
||||
path[index] = [e.lng, e.lat];
|
||||
});
|
||||
let polygon = new AMap.Polygon({
|
||||
path: path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: "#1791fc",
|
||||
zIndex: 50,
|
||||
bubble: true,
|
||||
});
|
||||
this.map.add([polygon]);
|
||||
this.map.setFitView();
|
||||
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
|
||||
} else {
|
||||
this.mouseTool = new AMap.MouseTool(this.map);
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 3, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: "", // 兴趣点城市
|
||||
citylimit: false, //是否强制限制在设置的城市内搜索
|
||||
map: this.map, // 展现结果的地图实例
|
||||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
|
||||
this.eventOn();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
see(row) {
|
||||
this.info = { ...row };
|
||||
this.isEdit = true;
|
||||
this.toAdd()
|
||||
},
|
||||
draw(type) {
|
||||
switch (type) {
|
||||
case "marker": {
|
||||
this.mouseTool.marker({
|
||||
//同Marker的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "polyline": {
|
||||
this.mouseTool.polyline({
|
||||
strokeColor: "#80d8ff",
|
||||
//同Polyline的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "polygon": {
|
||||
this.mouseTool.polygon({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
borderWeight: 2,
|
||||
strokeWeight: 4,
|
||||
//同Polygon的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "rectangle": {
|
||||
this.mouseTool.rectangle({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
//同Polygon的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "circle": {
|
||||
this.mouseTool.circle({
|
||||
fillColor: "#00b0ff",
|
||||
strokeColor: "#80d8ff",
|
||||
//同Circle的Option设置
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
//map搜索
|
||||
addressChange(val) {
|
||||
this.placeSearch.search(val);
|
||||
},
|
||||
close() {
|
||||
this.mouseTool.close(true);
|
||||
},
|
||||
clear() {
|
||||
this.map.remove(this.overlays);
|
||||
this.overlays = [];
|
||||
this.path = [];
|
||||
},
|
||||
beginPoltting() {
|
||||
this.polyEditor.open();
|
||||
},
|
||||
finishPoltting() {
|
||||
this.polyEditor.close();
|
||||
},
|
||||
confirm() {
|
||||
let path = [];
|
||||
if (this.editRow.plottingStatus == 1) {
|
||||
this.polyEditor
|
||||
.getTarget()
|
||||
.getPath()
|
||||
.map((e) => {
|
||||
path.push({ lng: e.lng, lat: e.lat });
|
||||
});
|
||||
} else {
|
||||
path = [...this.path];
|
||||
}
|
||||
delete this.editRow.points;
|
||||
this.instance
|
||||
.post(
|
||||
`/app/appgirdinfo/addOrUpdate`,
|
||||
{
|
||||
...this.editRow,
|
||||
points: path,
|
||||
},
|
||||
null
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.getList();
|
||||
this.showMap = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
eventOn() {
|
||||
this.path = [];
|
||||
this.overlays = [];
|
||||
this.map.on("mousemove", this.showInfoMove, this);
|
||||
this.mouseTool.on("draw", ({ type, obj }) => {
|
||||
obj.getPath().map((e) => {
|
||||
this.path.push({ lat: e.getLat(), lng: e.getLng() });
|
||||
});
|
||||
this.overlays.push(obj);
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-grid-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent!important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree__empty-text {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 780px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.container {
|
||||
width: 760px;
|
||||
height: 420px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d0d4dc;
|
||||
}
|
||||
|
||||
#panel {
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tipinput {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 38px;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .treePanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-tree {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +0,0 @@
|
||||
import component from './AppGridBlock.vue'
|
||||
|
||||
component.install = function (Vue) {
|
||||
Vue.component(component.name, component)
|
||||
}
|
||||
export default component
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="AppGridMap">
|
||||
<keep-alive :include="['List']">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
|
||||
export default {
|
||||
name: "AppGridMap",
|
||||
label: "网格地图",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Add") {
|
||||
this.component = "Add";
|
||||
this.params = data.params;
|
||||
}
|
||||
|
||||
if (data.type === "list") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridMap {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,669 +0,0 @@
|
||||
<template>
|
||||
<div class="gridMap">
|
||||
<ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
|
||||
<div class="drawer" ref="drawer">
|
||||
<div v-if="show" class="drawer-content">
|
||||
<b>网格地图</b>
|
||||
<div class="tree">
|
||||
<div class="input">
|
||||
<el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
|
||||
</div>
|
||||
<header class="header">
|
||||
<span>网格列表</span>
|
||||
</header>
|
||||
<div class="tree-div">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBtn" :class="{show}" @click="show=!show">
|
||||
<i class="iconfont iconArrow_Right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppGridMap',
|
||||
label: "网格地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
mapLib: null,
|
||||
show: true,
|
||||
retryMapCount: 0,
|
||||
polygons: [],
|
||||
|
||||
drawer: false,
|
||||
filterText: "",
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
},
|
||||
ops: {},
|
||||
|
||||
path: [],
|
||||
searchObj: {
|
||||
onlineStatus: "",
|
||||
girdMemberName: "",
|
||||
},
|
||||
member: {
|
||||
memberList: [],
|
||||
},
|
||||
currInfo: {},
|
||||
infoWindowHtml: "",
|
||||
marker: {},
|
||||
activeId: null,
|
||||
labels: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.dict.load("onlineStatus")
|
||||
this.getTreeList().then(() => {
|
||||
this.getLeafNodes()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
getTreeList() {
|
||||
return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = res.data;
|
||||
|
||||
this.$nextTick(() => {
|
||||
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onMapInit () {
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||
if (res.code === 0) {
|
||||
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getLeafNodes() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick (val) {
|
||||
if (val.girdLevel === '0') {
|
||||
this.getLeafNodes()
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
if (!arr.length) {
|
||||
return this.$message.error('该网格还未标绘')
|
||||
}
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
fitBounds(latLngList, count = 0) {
|
||||
let {mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (latLngList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let boundsN = latLngList[0].getLat();
|
||||
let boundsS = boundsN;
|
||||
let boundsW = latLngList[0].getLng();
|
||||
let boundsE = boundsW;
|
||||
latLngList.forEach((point) => {
|
||||
point.getLat() > boundsN && (boundsN = point.getLat());
|
||||
point.getLat() < boundsS && (boundsS = point.getLat());
|
||||
point.getLng() > boundsE && (boundsE = point.getLng());
|
||||
point.getLng() < boundsW && (boundsW = point.getLng());
|
||||
});
|
||||
return new TMap.LatLngBounds(
|
||||
new TMap.LatLng(boundsS, boundsW),
|
||||
new TMap.LatLng(boundsN, boundsE)
|
||||
);
|
||||
} else {
|
||||
if (count < 5) {
|
||||
this.fitBounds(latLngList, ++count)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderGridMap(paths) {
|
||||
let {map, mapLib: TMap } = this
|
||||
if (TMap) {
|
||||
if (this.polygons.length > 0) {
|
||||
this.polygons.forEach(e => e.destroy())
|
||||
this.labels.forEach(e => {
|
||||
e.destroy(e.id)
|
||||
})
|
||||
this.polygons = []
|
||||
this.labels = []
|
||||
}
|
||||
if (paths?.length > 0) {
|
||||
let bounds = []
|
||||
paths.forEach((path, i) => {
|
||||
let polygon = new TMap.MultiPolygon({
|
||||
map, styles: {
|
||||
default: new TMap.PolygonStyle({
|
||||
showBorder: true,
|
||||
borderColor: '#5088FF',
|
||||
borderWidth: 2,
|
||||
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
|
||||
})
|
||||
},
|
||||
id: path.id,
|
||||
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
|
||||
})
|
||||
this.polygons.push(polygon)
|
||||
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
|
||||
|
||||
polygon.on('click', e => {
|
||||
// const id = e.target.id
|
||||
// this.getGridInfo(id)
|
||||
})
|
||||
|
||||
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
|
||||
|
||||
var position = TMap.geometry.computeCentroid(points)
|
||||
|
||||
let label = new TMap.MultiLabel({
|
||||
id: `label~${path.id}`,
|
||||
data: path.id,
|
||||
map: map,
|
||||
styles: {
|
||||
building: new TMap.LabelStyle({
|
||||
color: '#3777FF',
|
||||
size: 20,
|
||||
alignment: 'center',
|
||||
verticalAlignment: 'middle'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: `label-class-${i}`,
|
||||
styleId: 'building',
|
||||
position: position,
|
||||
content: path.girdName,
|
||||
}
|
||||
]
|
||||
})
|
||||
this.labels.push(label)
|
||||
label.on('click', e => {
|
||||
// this.getGridInfo(e.target.id.split('~')[1])
|
||||
});
|
||||
})
|
||||
bounds = bounds.reduce((a, b) => {
|
||||
return this.fitBounds([
|
||||
a.getNorthEast(),
|
||||
a.getSouthWest(),
|
||||
b.getNorthEast(),
|
||||
b.getSouthWest(),
|
||||
]);
|
||||
});
|
||||
map.fitBounds(bounds, {padding: 100})
|
||||
}
|
||||
}
|
||||
},
|
||||
hasClass(ele, cls) {
|
||||
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
|
||||
},
|
||||
addClass(ele, cls) {
|
||||
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
|
||||
},
|
||||
removeClass(ele, cls) {
|
||||
if (this.hasClass(ele, cls)) {
|
||||
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
|
||||
ele.className = ele.className.replace(reg, " ");
|
||||
}
|
||||
},
|
||||
changClass(ele, className) {
|
||||
if (!this.hasClass(ele, className)) {
|
||||
this.addClass(ele, className);
|
||||
} else {
|
||||
this.removeClass(ele, className);
|
||||
}
|
||||
},
|
||||
percentage() {
|
||||
if (this.member.onlineNumber == 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return (
|
||||
100 *
|
||||
(this.member.onlineNumber / this.member.allMemberNumber)
|
||||
).toFixed(2);
|
||||
}
|
||||
},
|
||||
getMemberList() {
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
|
||||
if (res.code == 0) {
|
||||
let markers = [];
|
||||
this.member = res.data;
|
||||
this.member.memberList.map((e) => {
|
||||
if (e.onlineStatus == "1") {
|
||||
markers.push({lng: e.lng, lat: e.lat, name: e.name});
|
||||
}
|
||||
});
|
||||
this.initMap(null, null, markers);
|
||||
}
|
||||
});
|
||||
},
|
||||
clickMember(marker) {
|
||||
if (marker.onlineStatus == 1) {
|
||||
this.activeId = marker.id;
|
||||
this.marker = marker;
|
||||
this.infoWindowContent(marker);
|
||||
}
|
||||
},
|
||||
infoWindowContent(marker) {
|
||||
this.instance
|
||||
.post(`/app/location/xyToAddress`, null, {
|
||||
params: {
|
||||
x: marker.lat,
|
||||
y: marker.lng,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.infoWindowHtml = `<div class="info">
|
||||
<p>
|
||||
<span class="name">${marker.name}</span>
|
||||
<span class="lat">${marker.lng},${marker.lat}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="lat">${res.data}</span>
|
||||
</p>
|
||||
<p class="address">
|
||||
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
|
||||
</p>
|
||||
</div>`;
|
||||
this.initMap(false, marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
queryTrajectory() {
|
||||
this.instance
|
||||
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
|
||||
params: {
|
||||
userId: this.marker.userId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
let path = [];
|
||||
if (res.data) {
|
||||
res.data.map((e, index) => {
|
||||
path[index] = [e.lng, e.lat];
|
||||
});
|
||||
}
|
||||
this.initMap(path, this.marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gridMap {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.drawer-btn {
|
||||
position: absolute;
|
||||
left: 280px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
border-top: 40px solid transparent;
|
||||
border-bottom: 40px solid transparent;
|
||||
border-left: 16px solid #333c53;
|
||||
border-right: 0 solid transparent;
|
||||
transition: all 0.5s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
font-size: 26px;
|
||||
color: rgb(255, 255, 255);
|
||||
left: -21px;
|
||||
top: -14px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hide {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.drawer-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
background: #333c53;
|
||||
|
||||
& > b {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
height: calc(100% - 28px - 76px);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.map-search {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
justify-content: space-between;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.member-list {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px - 28px);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #1d2336;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #1a1e2c;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
background: #282f45;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 20px 0;
|
||||
color: #7a88bb;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
background: #3e4a69;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: #282f45;
|
||||
border: 1px solid #282f45;
|
||||
}
|
||||
|
||||
.tree-div {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px - 28px);
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #1a1e2c;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
background: #282f45;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
width: 100%;
|
||||
|
||||
.el-tree__empty-block {
|
||||
background: #333c53;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
background: #333c53;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
.el-tree-node__label {
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
left: -280px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
&.show > .iconfont {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.map {
|
||||
.info {
|
||||
width: 280px;
|
||||
height: 98px;
|
||||
background: #fff;
|
||||
padding: 8px 0 0 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 20px;
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lat {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title_info {
|
||||
width: 68px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amap-marker-label {
|
||||
border: 1px solid rgb(141, 139, 139);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div class="AppGridMember">
|
||||
<keep-alive :include="['List']">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
import Add from "./components/add";
|
||||
import Family from "./components/Family";
|
||||
|
||||
export default {
|
||||
name: "AppGridMember",
|
||||
label: "网格管理员",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
Family
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Add") {
|
||||
this.component = "Add";
|
||||
this.params = data.params;
|
||||
}
|
||||
|
||||
if (data.type === "Family") {
|
||||
this.component = "Family"
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === "list") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridMember {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,499 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="Family">
|
||||
<template slot="title">
|
||||
<ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
|
||||
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
|
||||
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
|
||||
<el-option
|
||||
v-for="(item,i) in girdList"
|
||||
:key="i"
|
||||
:label="item.girdName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
@keyup.enter.native="search.current = 1, getList()"
|
||||
placeholder="姓名/身份证/联系方式"
|
||||
clearable
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="remove(row.gmrId)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="890px"
|
||||
@close="closeDialog"
|
||||
title="添加户主"
|
||||
@onConfirm="onConfirm">
|
||||
<ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
|
||||
<span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
|
||||
<el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in girdList"
|
||||
:key="i"
|
||||
:label="item.girdName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="AiWechatSelecter-container">
|
||||
<div class="AiWechatSelecter-container__left" v-loading="isLoading">
|
||||
<div class="AiWechatSelecter-header">
|
||||
<div class="AiWechatSelecter-header__left">
|
||||
<h2>户主信息列表</h2>
|
||||
</div>
|
||||
<el-input
|
||||
class="search-input"
|
||||
size="mini"
|
||||
placeholder="请输入姓名/身份证号"
|
||||
v-model="name"
|
||||
clearable
|
||||
@keyup.enter.native="getUserList()"
|
||||
@clear="name = '', getUserList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<el-scrollbar class="AiWechatSelecter-list">
|
||||
<el-checkbox-group v-model="chooseUser">
|
||||
<el-checkbox
|
||||
:label="`${item.name}~${item.id}`"
|
||||
v-for="(item, index) in userList"
|
||||
:key="index">
|
||||
{{ item.name }}-{{ item.idNumber }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<AiEmpty v-if="!this.userList.length"></AiEmpty>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="AiWechatSelecter-container__right">
|
||||
<div class="AiWechatSelecter-header AiWechatSelecter-header__right">
|
||||
<h2>已选择</h2>
|
||||
<el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
|
||||
</div>
|
||||
<el-scrollbar class="AiWechatSelecter-list">
|
||||
<div class="tags-wrapper">
|
||||
<el-tag
|
||||
v-for="(item, index) in chooseUser"
|
||||
:key="index"
|
||||
closable
|
||||
@close="del(item)"
|
||||
size="small"
|
||||
type="info">
|
||||
{{ item.split('~')[0] }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'Family',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
girdId: ''
|
||||
},
|
||||
isLoading: false,
|
||||
form: {
|
||||
|
||||
},
|
||||
userList: [],
|
||||
name: '',
|
||||
chooseUser: [],
|
||||
isShow: false,
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{ type: 'selection', label: '' },
|
||||
{ prop: 'name', label: '户主姓名', align: 'left', width: '200px' },
|
||||
{ prop: 'idNumber', label: '身份证号', align: 'center' },
|
||||
{ prop: 'phone', label: '联系方式', align: 'center' },
|
||||
{ prop: 'girdName', label: '所属网格', align: 'center' },
|
||||
{ prop: 'createTime', label: '添加时间', align: 'center' },
|
||||
{ slot: 'options', label: '操作', align: 'center' }
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
ids: [],
|
||||
disabledLevel: 0,
|
||||
girdList: [],
|
||||
girdId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created() {
|
||||
this.areaId = this.user.info.areaId
|
||||
this.disabledLevel = this.user.info.areaList.length
|
||||
this.dict.load('epidemicDangerousAreaLevel').then(() => {
|
||||
this.getGirdList()
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getGirdList() {
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.girdList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getListInit() {
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList () {
|
||||
this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
girdMemberId: this.params.id,
|
||||
areaId: this.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
if (!this.ids) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
this.remove(this.ids.join(','))
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e.map(v => v.gmrId)
|
||||
},
|
||||
|
||||
clearAll () {
|
||||
this.chooseUser = []
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
if(!this.girdId) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (!this.chooseUser.length) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
|
||||
const residentList = this.chooseUser.map(v => {
|
||||
return {
|
||||
girdMemberId: this.params.id,
|
||||
name: v.split('~')[0],
|
||||
residentId: v.split('~')[1],
|
||||
girdId: this.girdId
|
||||
}
|
||||
})
|
||||
this.instance.post(`/app/appgirdmemberresident/add`, {
|
||||
residentList
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.$message.success('添加成功')
|
||||
this.closeDialog()
|
||||
}
|
||||
})
|
||||
},
|
||||
closeDialog() {
|
||||
this.isShow = false
|
||||
this.chooseUser = []
|
||||
this.girdId = ''
|
||||
this.name = ''
|
||||
this.areaId = this.user.info.areaId
|
||||
this.getUserList()
|
||||
},
|
||||
|
||||
del (e) {
|
||||
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
|
||||
},
|
||||
|
||||
getUserList () {
|
||||
this.isLoading = true
|
||||
this.instance.post(`/app/appresident/list`, null, {
|
||||
params: {
|
||||
current: 1,
|
||||
size: 200,
|
||||
con: this.name,
|
||||
householdName: 1,
|
||||
areaId: this.areaId,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userList = res.data.records
|
||||
}
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
onBack () {
|
||||
this.$emit('change', {
|
||||
type: 'list'
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Family {
|
||||
.AiWechatSelecter-container {
|
||||
display: flex;
|
||||
height: 380px;
|
||||
margin-top: 20px;
|
||||
|
||||
::v-deep {
|
||||
.el-icon-circle-close {
|
||||
display: inline-block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
& > span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tree-user__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: auto;
|
||||
margin-top: 2px;
|
||||
// align-items: inherit;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mask-btn__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mask-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.userlist-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 17px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userlist-item__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 280px;
|
||||
background: #FCFCFC;
|
||||
border: 1px solid #D0D4DC;
|
||||
}
|
||||
|
||||
.AiWechatSelecter-list {
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px 0;
|
||||
|
||||
::v-deep .el-scrollbar__wrap {
|
||||
margin-bottom: 0!important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
padding: 0 8px;
|
||||
|
||||
.el-checkbox {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-container__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.AiWechatSelecter-container__right {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
|
||||
.AiWechatSelecter-list {
|
||||
.tags-wrapper {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.el-tag {
|
||||
margin: 0 8px 8px 0px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 8px 0 0;
|
||||
border-bottom: 1px solid #D0D4DC;
|
||||
background: #F5F7FA;
|
||||
|
||||
.AiWechatSelecter-header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
||||
h2 {
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
color: #2266FF;
|
||||
border-color: #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 28px;
|
||||
padding: 7px 5px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-header__right {
|
||||
padding: 0 8px;
|
||||
|
||||
h2 {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,543 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%">
|
||||
<ai-detail class="add">
|
||||
<template #title>
|
||||
<ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form
|
||||
ref="rules"
|
||||
:model="forms"
|
||||
:rules="formRules"
|
||||
size="small"
|
||||
label-suffix="："
|
||||
label-width="136px">
|
||||
<ai-card title="基础信息" >
|
||||
<template #right v-if="title=='网格员详情'">
|
||||
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="above" v-if="editOne==true">
|
||||
<div class="left">
|
||||
<el-form-item label="网格员姓名" prop="name" >
|
||||
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
|
||||
<template #append>
|
||||
<ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
|
||||
<el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
|
||||
</ai-wechat-selecter>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选用日期" prop="selectionDate" >
|
||||
<el-date-picker
|
||||
v-model="forms.selectionDate"
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="medium"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idNumber" >
|
||||
<el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="照片" prop="photo">
|
||||
<!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
|
||||
<ai-avatar :instance="instance" v-model="forms.photo"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above" v-if="editOne==true">
|
||||
<div class="left">
|
||||
<el-form-item label="出生日期" prop="birthday" >
|
||||
<el-date-picker
|
||||
v-model="forms.birthday"
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="medium"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone" >
|
||||
<el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="性别" prop="sex" >
|
||||
<el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('sex')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮箱" prop="mail" >
|
||||
<el-input v-model="forms.mail" placeholder="请输入…"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="editOne==false">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
|
||||
<ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
|
||||
<ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
|
||||
<ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
|
||||
<ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
|
||||
<ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="照片：" v-if="forms.photo">
|
||||
<span >
|
||||
<ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
|
||||
</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="关联信息" >
|
||||
<template #right v-if="title=='网格员详情'">
|
||||
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<template v-if="editTwo==true">
|
||||
<el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
|
||||
<el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
|
||||
<div class="form-flex">
|
||||
<el-select v-model="item.checkType" placeholder="请选择网格角色">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
|
||||
<template slot="append">
|
||||
<el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
|
||||
<!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
|
||||
</el-form-item>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="是否特殊网格员" prop="isGirdMember" >
|
||||
<el-radio-group v-model="forms.isGirdMember">
|
||||
<el-radio label="0">否</el-radio>
|
||||
<el-radio label="1">是</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌" prop="politicsStatus" >
|
||||
<el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
|
||||
<el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="education" >
|
||||
<el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="个人简介" prop="introduction" >
|
||||
<el-input
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
v-model="forms.introduction">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人生格言" prop="motto" >
|
||||
<el-input
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
v-model="forms.motto">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="editTwo==false">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
|
||||
<ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
|
||||
<ai-info-item label="是否特殊网格员：">
|
||||
<span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
|
||||
<ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
|
||||
<ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
|
||||
<ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
|
||||
<ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
|
||||
<div class="grid">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:check-strictly="true"
|
||||
show-checkbox
|
||||
:default-checked-keys="currCheckedKeys"
|
||||
default-expand-all
|
||||
@check="onCheckChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer" >
|
||||
<el-button size="medium" @click="showGrid=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
<template #footer v-if="title=='添加网格员'">
|
||||
<el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
|
||||
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "add",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
params: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: [],
|
||||
currIndex: 0,
|
||||
forms: {
|
||||
birthday: "",
|
||||
education: "",
|
||||
girdId: "",
|
||||
girdInfoList: [],
|
||||
girdMemberType: "",
|
||||
id: "",
|
||||
wxUserId: '',
|
||||
introduction: "",
|
||||
isGirdMember: "",
|
||||
mail: "",
|
||||
motto: "",
|
||||
name: "",
|
||||
phone: "",
|
||||
photo: "",
|
||||
politicsStatus: "",
|
||||
selectionDate: "",
|
||||
sex: "",
|
||||
userId: "",
|
||||
},
|
||||
options: [{
|
||||
value: '2',
|
||||
label: '网格长'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '网格员'
|
||||
}],
|
||||
showGrid: false,
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
checkedKeys: [],
|
||||
},
|
||||
girdInfoStr: '',
|
||||
photoList: [],
|
||||
title: "添加网格员",
|
||||
editOne: false,
|
||||
editTwo: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.beforeSelectTree()
|
||||
if (this.params.id) {
|
||||
this.searchDetail();
|
||||
this.title = "网格员详情";
|
||||
this.editOne = false;
|
||||
this.editTwo = false;
|
||||
} else {
|
||||
this.title = "添加网格员";
|
||||
this.editOne = true;
|
||||
this.editTwo = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currCheckedKeys () {
|
||||
if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
|
||||
return [this.forms.girdInfoList[this.currIndex].id]
|
||||
}
|
||||
|
||||
return []
|
||||
},
|
||||
formRules() {
|
||||
let phonePass = (rule, value, callback) => {
|
||||
let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
|
||||
if (value) {
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("联系电话格式错误"));
|
||||
}
|
||||
} else {
|
||||
callback(new Error("请输入联系电话"));
|
||||
}
|
||||
};
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: "请输入网格员姓名", trigger: "change" },
|
||||
],
|
||||
selectionDate: [
|
||||
{ required: true, message: "请选择选用日期", trigger: "change" },
|
||||
],
|
||||
phone: [{ required: true, validator: phonePass, trigger: "blur" }],
|
||||
girdInfoList: [
|
||||
{ required: true, message: "请选择责任网络", trigger: "change" },
|
||||
],
|
||||
mail: [
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
|
||||
onCheckChange (e) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.getCheckedKeys().forEach(v => {
|
||||
this.$refs.tree.setChecked(v, false)
|
||||
})
|
||||
this.$refs.tree.setChecked(e.id, true)
|
||||
})
|
||||
},
|
||||
|
||||
removeGrid (index) {
|
||||
this.forms.girdInfoList.splice(index, 1)
|
||||
},
|
||||
|
||||
addGrid () {
|
||||
this.forms.girdInfoList.push({
|
||||
id: '',
|
||||
girdName: '',
|
||||
checkType: ''
|
||||
})
|
||||
},
|
||||
photoChange(val) {
|
||||
this.forms.photo = val[0].url;
|
||||
},
|
||||
getSelectPerson(val) {
|
||||
this.forms.name = val[0].name;
|
||||
this.forms.phone = val[0].phone;
|
||||
this.forms.userId = val[0].sysUserId
|
||||
this.forms.wxUserId = val[0].id
|
||||
},
|
||||
getCheckedTree() {
|
||||
if (!this.$refs.tree.getCheckedNodes().length) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (this.$refs.tree.getCheckedNodes().length > 1) {
|
||||
return this.$message.error('不支持多选')
|
||||
}
|
||||
this.$set(this.forms.girdInfoList, this.currIndex, {
|
||||
...this.$refs.tree.getCheckedNodes()[0],
|
||||
checkType: this.forms.girdInfoList[this.currIndex].checkType
|
||||
})
|
||||
this.showGrid = false;
|
||||
},
|
||||
handleClose(tag) {
|
||||
this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
|
||||
},
|
||||
beforeSelectTree() {
|
||||
this.treeObj.checkedKeys = [];
|
||||
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = res.data;
|
||||
this.forms.girdInfoList.map((e) => {
|
||||
this.treeObj.checkedKeys.push(e.id);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
for (let i = 0; i < this.forms.girdInfoList.length; i++) {
|
||||
const currInfo = this.forms.girdInfoList[i]
|
||||
const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
|
||||
arr.splice(i, 1)
|
||||
const sameInfo = arr.filter(v => v.id === currInfo.id)
|
||||
if (!currInfo.checkType) {
|
||||
return this.$message.error('请选择网格员类型')
|
||||
}
|
||||
|
||||
if (!currInfo.id) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
|
||||
return this.$message.error(`一级、二级网格不能添加网格员`)
|
||||
}
|
||||
|
||||
if (sameInfo.length) {
|
||||
return this.$message.error('不能选择同一网格重复绑定')
|
||||
}
|
||||
}
|
||||
|
||||
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
|
||||
...this.forms,
|
||||
girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (this.title == "添加网格员") {
|
||||
this.cancel(true)
|
||||
} else {
|
||||
this.editOne = false
|
||||
this.editTwo = false
|
||||
this.searchDetail()
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDetail() {
|
||||
this.instance
|
||||
.post(`/app/appgirdmemberinfo/queryDetailById`, null, {
|
||||
params: { id: this.params.id },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.forms = {
|
||||
...res.data,
|
||||
girdInfoList: res.data.girdInfoList || []
|
||||
};
|
||||
this.users = [{
|
||||
name: res.data.name,
|
||||
phone: res.data.phone,
|
||||
userId: res.data.id,
|
||||
id: res.data.wxUserId
|
||||
}]
|
||||
this.girdInfoStr = ''
|
||||
this.photoList = [{ url: this.forms.photo }];
|
||||
if (res.data.girdInfoList) {
|
||||
res.data.girdInfoList.forEach((e) => {
|
||||
this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName} `
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
height: 100%;
|
||||
|
||||
.form-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > .el-button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
}
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
// background-color: #fff;
|
||||
// padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-tag {
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
}
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
.above{
|
||||
display: flex;
|
||||
.left, .right{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="list">
|
||||
<template slot="title">
|
||||
<ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-date-picker
|
||||
v-model="searchObj.selectionDate"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="选用时间">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
placeholder="网格员/责任网格"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.name = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar style="padding: 16px 0 0">
|
||||
<template slot="left">
|
||||
<el-button
|
||||
icon="iconfont iconAdd"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="add('')"
|
||||
>添加</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()">
|
||||
<el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
|
||||
<el-button type="text" @click="add(row.id)">查看</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "list",
|
||||
label: "网格员管理",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
name: "",
|
||||
selectionDate: "",
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
goAdd: false,
|
||||
tableData: [],
|
||||
fileList: [],
|
||||
ids: [],
|
||||
detail: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let _ = this;
|
||||
return [
|
||||
{
|
||||
type: "selection",
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "网格员姓名",
|
||||
},
|
||||
{
|
||||
prop: "girdInfoListStr",
|
||||
align: "center",
|
||||
label: "责任网格",
|
||||
},
|
||||
{
|
||||
prop: "phone",
|
||||
align: "center",
|
||||
label: "联系电话",
|
||||
},
|
||||
{
|
||||
prop: "selectionDate",
|
||||
align: "center",
|
||||
label: "选用时间",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格员？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberinfo/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
add(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toFamily (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Family',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div class="AppBroadcast">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
|
||||
export default {
|
||||
label: '播发记录',
|
||||
name: 'AppBroadcast',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type == 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppBroadcast {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,333 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%">
|
||||
<ai-detail class="Add">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||
<ai-bar title="基础信息"></ai-bar>
|
||||
<div class="flex">
|
||||
<el-form-item label="播发内容" prop="mediaId">
|
||||
<ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放设备" prop="serialNo">
|
||||
<ai-select v-model="formData.serialNo" placeholder="播放设备" clearable :selectList="equipmentList"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播发级别" prop="messageLevel">
|
||||
<ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable :selectList="$dict.getDict('dlbMessageUrgency')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放方式" prop="taskType" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.taskType">
|
||||
<el-radio label="0">立即播放</el-radio>
|
||||
<el-radio label="1">定时播放</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="定时策略" prop="cyclingType" v-if="formData.taskType != 0">
|
||||
<ai-select v-model="formData.cyclingType" placeholder="定时策略" clearable :selectList="$dict.getDict('dlbDyclingType')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放天数" prop="checkList" class="buildingTypes" v-if="formData.taskType != 0 && formData.cyclingType == 2">
|
||||
<el-checkbox-group v-model="formData.checkList">
|
||||
<el-checkbox label="1">每周一</el-checkbox>
|
||||
<el-checkbox label="2">每周二</el-checkbox>
|
||||
<el-checkbox label="3">每周三</el-checkbox>
|
||||
<el-checkbox label="4">每周四</el-checkbox>
|
||||
<el-checkbox label="5">每周五</el-checkbox>
|
||||
<el-checkbox label="6">每周六</el-checkbox>
|
||||
<el-checkbox label="7">每周日</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放天数" prop="broadcastDay" v-if="formData.taskType != 0 && formData.cyclingType == 3">
|
||||
<el-input v-model="formData.broadcastDay" placeholder="播放天数" clearable size="small" maxlength="4"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate" v-if="formData.taskType != 0">
|
||||
<el-date-picker v-model="formData.startDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime" v-if="formData.taskType != 0">
|
||||
<el-time-picker v-model="formData.startTime" placeholder="开始时间" size="small" :picker-options="{ start: newDate, minTime: newDate}" value-format="HH:mm:ss"></el-time-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" v-if="formData.taskType != 0">
|
||||
<el-time-picker v-model="formData.endTime" placeholder="结束时间" size="small" :picker-options="{ start: formData.startTime, minTime: formData.startTime}" value-format="HH:mm:ss"></el-time-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
let startTimePass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
var myDate = new Date();
|
||||
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||
if (this.timeToSec(value) - this.timeToSec(time)> 0) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('开始时间要大于当前时间'));
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请选择开始时间'));
|
||||
}
|
||||
};
|
||||
let endTimePass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (this.timeToSec(value) - this.timeToSec(this.formData.startTime)> 0) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('结束时间要大于开始时间'));
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请选择结束时间'));
|
||||
}
|
||||
}
|
||||
return {
|
||||
formData: {
|
||||
mediaId: '',
|
||||
serialNo: '',
|
||||
messageLevel: '',
|
||||
cyclingType: '',
|
||||
taskType: '0',
|
||||
cyclingDate: '',
|
||||
broadcastDay: '',
|
||||
startDate: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
checkList: []
|
||||
},
|
||||
formRules: {
|
||||
mediaId: [
|
||||
{ required: true, message: '请选择播发内容', trigger: 'change' }
|
||||
],
|
||||
serialNo: [
|
||||
{ required: true, message: '请选择播放设备', trigger: 'change' }
|
||||
],
|
||||
messageLevel: [
|
||||
{ required: true, message: '请选择播发级别', trigger: 'change' }
|
||||
],
|
||||
cyclingType: [
|
||||
{ required: true, message: '请选择定时策略', trigger: 'change' }
|
||||
],
|
||||
taskType: [
|
||||
{ required: true, message: '请选择播放方式', trigger: 'change' }
|
||||
],
|
||||
broadcastDay: [
|
||||
{ required: true, message: '请输入播放天数', trigger: 'change' }
|
||||
],
|
||||
startDate: [
|
||||
{ required: true, message: '请选择开始日期', trigger: 'change' }
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, validator: startTimePass, trigger: 'change' }
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, validator: endTimePass, trigger: 'change' }
|
||||
],
|
||||
checkList: [
|
||||
{ required: true, message: '播放天数', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
mediaList: [],
|
||||
equipmentList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
newDate() {
|
||||
var myDate = new Date();
|
||||
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||
return time
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('dlbMessageUrgency', 'dlbBroadTaskType', 'dlbDyclingType').then(() => {
|
||||
this.getEquipmentList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getMediaList() {
|
||||
this.instance.post(`/app/appdlbresource/list?current=1&size=10000`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.mediaList = []
|
||||
if(res.data && res.data.records.length) {
|
||||
res.data.records.map((item) => {
|
||||
let info = {
|
||||
dictName: item.name,
|
||||
dictValue: item.id
|
||||
}
|
||||
this.mediaList.push(info)
|
||||
})
|
||||
}
|
||||
if(this.params.id) {
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getEquipmentList() {
|
||||
this.instance.post(`/app/appdlbquipment/getDlbDeviceList?current=1&size=10000&devStatus=5&keyword=`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.equipmentList = []
|
||||
if(res.data && res.data.records.length) {
|
||||
res.data.records.map((item) => {
|
||||
let info = {
|
||||
dictName: item.deviceName,
|
||||
dictValue: item.serialNo
|
||||
}
|
||||
this.equipmentList.push(info)
|
||||
})
|
||||
}
|
||||
this.getMediaList()
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.formData.checkList.length) {
|
||||
this.formData.cyclingDate = this.formData.checkList.join(',')
|
||||
}
|
||||
this.formData.coverageType = '4'
|
||||
this.formData.id = ''
|
||||
this.instance.post(`/app/appzyvideobroadcast/play`, {
|
||||
...this.formData,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/appzyvideobroadcast/queryDetailById?id=${this.params.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.formData = {
|
||||
...res.data,
|
||||
checkList: []
|
||||
}
|
||||
this.formData.mediaId = String(this.formData.mediaId)
|
||||
this.formData.cyclingType = String(this.formData.cyclingType)
|
||||
if(this.formData.cyclingDate) {
|
||||
this.formData.checkList = this.formData.cyclingDate.split(',')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
timeToSec(time) {
|
||||
var s = "";
|
||||
var hour = time.split(":")[0];
|
||||
var min = time.split(":")[1];
|
||||
var second = time.split(":")[2];
|
||||
s = Number(hour * 3600) + Number(min * 60) + Number(second)
|
||||
return s;
|
||||
},
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Add {
|
||||
height: 100%;
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
background-color: #fff;
|
||||
padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mapDialog {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.searchPlaceInput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
top: 30px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
#searchPlaceOutput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 25px;
|
||||
height: initial;
|
||||
top: 80px;
|
||||
background: white;
|
||||
z-index: 250;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.auto-item {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="播发记录" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<ai-select v-model="search.messageType" placeholder="媒资类型" clearable
|
||||
:selectList="$dict.getDict('dlbResourceType')"
|
||||
@change=";(page.current = 1), getList()"></ai-select>
|
||||
<ai-select v-model="search.messageUrgency" placeholder="级别" clearable
|
||||
:selectList="$dict.getDict('dlbMessageUrgency')"
|
||||
@change=";(page.current = 1), getList()"></ai-select>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input v-model="search.messageName" size="small" placeholder="媒资名称" clearable
|
||||
@keyup.enter.native=";(page.current = 1), getList()"
|
||||
@clear=";(page.current = 1), (search.messageName = ''), getList()"
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar class="ai-search-ba mar-t10">
|
||||
<template slot="left">
|
||||
<!-- <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button> -->
|
||||
<!-- <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> -->
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" :dict="dict"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="onAdd(row.broadcastId)">复制</el-button>
|
||||
<el-button type="text" @click="cancel(row.broadcastId)"
|
||||
v-if="row.broadcastStatus == 0 || row.broadcastStatus == 1 || row.broadcastStatus == 2">撤回
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
messageName: '',
|
||||
messageType: '',
|
||||
messageUrgency: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{prop: 'messageName', label: '媒资名称', width: 400},
|
||||
{prop: 'messageType', label: '媒资类型', align: 'center', dict: "dlbResourceType"},
|
||||
{prop: 'messageUrgency', label: '级别', align: 'center', dict: "dlbMessageUrgency"},
|
||||
{prop: 'taskType', label: '播发方式', align: 'center', dict: "dlbBroadTaskType"},
|
||||
{prop: 'startDate', label: '开始时间', align: 'center', width: 180},
|
||||
{prop: 'broadcastStatus', label: '状态', align: 'center', dict: "dlbBroadcastStatus"},
|
||||
{prop: 'areaName', label: '地区', align: 'center'},
|
||||
{prop: 'createUserName', label: '创建人', align: 'center'},
|
||||
{slot: 'options'},
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
param() {
|
||||
return {
|
||||
...this.search,
|
||||
areaId: this.user.info?.areaId,
|
||||
ids: this.ids,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.areaId = this.user.info.areaId
|
||||
this.dict.load('dlbResourceType', 'dlbMessageUrgency', 'dlbBroadTaskType', 'dlbBroadcastStatus', 'dlbMessageUrgency').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecords`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = parseInt(res.data.total)
|
||||
}
|
||||
})
|
||||
},
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel(id) {
|
||||
this.$confirm('确定撤回该广播?').then(() => {
|
||||
this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('撤回成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
|
||||
.mar-t10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="AppEquipmentManage">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
|
||||
export default {
|
||||
label: '广播设备管理',
|
||||
name: 'AppEquipmentManage',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type == 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppEquipmentManage {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="广播设备管理" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="right">
|
||||
<el-input v-model="search.keyword" size="small" placeholder="设备名称/设备编号" clearable
|
||||
@keyup.enter.native=";(page.current = 1), getList()"
|
||||
@clear=";(page.current = 1), (search.keyword = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar class="ai-search-ba mar-t10">
|
||||
<template slot="left">
|
||||
<!-- <el-button icon="iconfont" type="primary" size="small">数据同步</el-button> -->
|
||||
<!-- <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> -->
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="options" label="操作" align="center" width="280" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="close(row.id)">停播</el-button>
|
||||
<el-button type="text" @click="bind(row)">绑定行政区划</el-button>
|
||||
<el-button type="text" @click="locate=true">地图标绘</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<el-dialog
|
||||
title="绑定行政区划"
|
||||
:visible.sync="bindVisible"
|
||||
width="800px">
|
||||
<ai-area-get :instance="instance" v-model="areaId" :root="user.info.areaId" @select="handleAreaSelect"/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="bindVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="bindArea">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<locate-dialog v-model="locate" :ins="instance" @confirm="bindLocate"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import LocateDialog from "../../../monitor/components/locateDialog";
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
components: {LocateDialog},
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
bind: '',
|
||||
keyword: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{
|
||||
prop: 'deviceName',
|
||||
label: '设备名称',
|
||||
},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: '所属行政区划',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'serialNo',
|
||||
label: '设备编号',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'devStatus',
|
||||
label: '设备状态',
|
||||
width: '100',
|
||||
align: 'center',
|
||||
render: (h, {row}) => {
|
||||
return h('span', null, this.dict.getLabel('dlbDevStatus', row.devStatus))
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'bind',
|
||||
label: '是否绑定区划',
|
||||
width: '120',
|
||||
align: 'center',
|
||||
render: (h, {row}) => {
|
||||
return h('span', null, this.dict.getLabel('yesOrNo', row.bind))
|
||||
},
|
||||
},
|
||||
{
|
||||
slot: 'options',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
bindVisible: false,
|
||||
changeInfo: {},
|
||||
locate: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
|
||||
created () {
|
||||
this.dict.load('dlbDevStatus', 'yesOrNo').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
bind(item) {
|
||||
this.areaId = ''
|
||||
this.changeInfo = item
|
||||
this.bindVisible = true
|
||||
},
|
||||
handleAreaSelect(v) {
|
||||
this.changeInfo.areaName = v?.[0]?.label
|
||||
},
|
||||
bindArea() {
|
||||
if (!this.areaId) {
|
||||
return this.$message.error('请先选择行政区划')
|
||||
}
|
||||
this.changeInfo.areaId = this.areaId
|
||||
this.instance.post(`/app/appdlbquipment/addOrUpdate`, this.changeInfo).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('绑定行政区划成功！')
|
||||
this.bindVisible = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
bindLocate(locate) {
|
||||
if (locate) {
|
||||
let {lat, lng} = locate.location, {changeInfo} = this
|
||||
this.instance.post("/app/appdlbquipment/addOrUpdate", {
|
||||
...changeInfo, lat, lng
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("地图标绘成功!")
|
||||
this.locate = true
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
close(id) {
|
||||
this.$confirm('确定停播该设备?').then(() => {
|
||||
this.instance.post(`/app/appdlbquipment/stop?deviceId=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('停播成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appdlbquipment/getDlbDeviceList`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = parseInt(res.data.total)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
|
||||
.mar-t10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="AppMediaManage">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
import Play from './components/Play'
|
||||
|
||||
export default {
|
||||
label: '媒资管理',
|
||||
name: 'AppMediaManage',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
Play
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
if (data.type === 'Play') {
|
||||
this.component = 'Play'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type == 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppMediaManage {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,189 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%">
|
||||
<ai-detail class="Add">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title title="添加媒资信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||
<ai-bar title="基础信息"></ai-bar>
|
||||
<div class="flex">
|
||||
<el-form-item label="媒资类型" prop="type" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio label='1'>音频广播</el-radio>
|
||||
<el-radio label='3'>文本广播</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒资名称" prop="name" class="buildingTypes">
|
||||
<el-input size="small" v-model="formData.name" placeholder="请输入" maxlength="30" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本内容" prop="content" class="buildingTypes" v-if="formData.type == 3">
|
||||
<el-input size="small" type="textarea" :rows="2" v-model="formData.content" placeholder="请输入" maxlength="12000" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传音频" prop="file" class="buildingTypes" v-if="formData.type == 1">
|
||||
<ai-uploader
|
||||
:isShowTip="true"
|
||||
:instance="instance"
|
||||
v-model="formData.file"
|
||||
fileType="file"
|
||||
acceptType=".mp3"
|
||||
:limit="1">
|
||||
<template slot="tips">最多上传1个附件,单个文件最大10MB<br/>支持.mp3格式
|
||||
</template>
|
||||
</ai-uploader>
|
||||
<ai-audio :src="formData.file[0].url" style="width: 40px;height: 40px;margin-top:20px;" v-if="formData.file.length"></ai-audio>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
type: '1',
|
||||
name: '',
|
||||
content: '',
|
||||
file: [],
|
||||
url: ''
|
||||
},
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入媒资名称', trigger: 'change' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入文本内容', trigger: 'change' }
|
||||
],
|
||||
file: [
|
||||
{ required: true, message: '请上传音频', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.instance.defaults.timeout = 6000000
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.formData.file.length) {
|
||||
this.formData.url = this.formData.file[0].url
|
||||
}
|
||||
this.instance.post(`/app/appdlbresource/addResource`, {...this.formData}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Add {
|
||||
height: 100%;
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
background-color: #fff;
|
||||
padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mapDialog {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.searchPlaceInput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
top: 30px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
#searchPlaceOutput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 25px;
|
||||
height: initial;
|
||||
top: 80px;
|
||||
background: white;
|
||||
z-index: 250;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.auto-item {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,188 +0,0 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="媒资管理" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<ai-select v-model="search.type" placeholder="媒资类型" clearable :selectList="$dict.getDict('dlbResourceType')"
|
||||
@change=";(page.current = 1), getList()"></ai-select>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input v-model="search.name" size="small" placeholder="媒资名称" clearable
|
||||
@keyup.enter.native=";(page.current = 1), getList()"
|
||||
@clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar class="ai-search-ba mar-t10">
|
||||
<template slot="left">
|
||||
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
|
||||
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="content" label="内容" width="200" show-overflow-tooltip>
|
||||
<template slot-scope="{ row }">
|
||||
<span type="text" v-if="row.type == 3">{{ row.content }}</span>
|
||||
<ai-audio v-else-if="row.type == 1 && row.url" :src="row.url" skin="flat"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||
<div class="table-options" slot-scope="{ row }">
|
||||
<el-button type="text" @click="play(row.id)">播发</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
type: '',
|
||||
name: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{type: 'selection', width: 100, align: 'center'},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '媒资名称',
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '媒资类型',
|
||||
width: '100',
|
||||
align: 'center',
|
||||
render: (h, {row}) => {
|
||||
return h('span', null, this.dict.getLabel('dlbResourceType', row.type))
|
||||
},
|
||||
},
|
||||
{
|
||||
slot: 'content',
|
||||
},
|
||||
{prop: 'createTime', label: '创建时间', align: 'center'},
|
||||
{
|
||||
prop: 'createUserName',
|
||||
label: '创建人',
|
||||
align: 'center',
|
||||
},
|
||||
// { prop: 'liveBuildingArea', label: '状态', align: 'center',width: 120 },
|
||||
// { prop: 'liveBuildingArea', label: '发布次数', align: 'center',width: 120 },
|
||||
{
|
||||
slot: 'options',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
param() {
|
||||
return {
|
||||
...this.search,
|
||||
areaId: this.user.info?.areaId,
|
||||
ids: this.ids,
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.dict.load('dlbResourceType').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/appdlbresource/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
play (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Play',
|
||||
params: {
|
||||
id: id || ''
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id || '',
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据?').then(() => {
|
||||
this.instance.post(`/app/appdlbresource/delete?id=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
|
||||
.mar-t10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-card title="基础信息">
|
||||
<template #content>
|
||||
<el-form class="ai-form" :model="formData" :rules="formRules" ref="ruleForm" label-width="120px">
|
||||
<el-form-item label="播发内容" prop="mediaId">
|
||||
<ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放设备" prop="serialNo">
|
||||
<ai-select v-model="formData.serialNo" placeholder="播放设备" clearable
|
||||
:selectList="equipmentList"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播发级别" prop="messageLevel">
|
||||
<ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable
|
||||
:selectList="$dict.getDict('dlbMessageUrgency')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放方式" prop="taskType" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.taskType">
|
||||
<el-radio label="0">立即播放</el-radio>
|
||||
<el-radio label="1">定时播放</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="定时策略" prop="cyclingType" v-if="formData.taskType != 0">
|
||||
<ai-select v-model="formData.cyclingType" placeholder="定时策略" clearable
|
||||
:selectList="$dict.getDict('dlbDyclingType')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放天数" prop="checkList" class="buildingTypes"
|
||||
v-if="formData.taskType != 0 && formData.cyclingType == 2">
|
||||
<el-checkbox-group v-model="formData.checkList">
|
||||
<el-checkbox label="1">每周一</el-checkbox>
|
||||
<el-checkbox label="2">每周二</el-checkbox>
|
||||
<el-checkbox label="3">每周三</el-checkbox>
|
||||
<el-checkbox label="4">每周四</el-checkbox>
|
||||
<el-checkbox label="5">每周五</el-checkbox>
|
||||
<el-checkbox label="6">每周六</el-checkbox>
|
||||
<el-checkbox label="7">每周日</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="播放天数" prop="broadcastDay" v-if="formData.taskType != 0 && formData.cyclingType == 3">
|
||||
<el-input v-model="formData.broadcastDay" placeholder="播放天数" clearable size="small"
|
||||
maxlength="4"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate" v-if="formData.taskType != 0">
|
||||
<el-date-picker v-model="formData.startDate" type="date" placeholder="选择日期" size="small"
|
||||
value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime" v-if="formData.taskType != 0">
|
||||
<el-time-picker v-model="formData.startTime" placeholder="开始时间" size="small"
|
||||
:picker-options="{ start: newDate, minTime: newDate}"
|
||||
value-format="HH:mm:ss"></el-time-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" v-if="formData.taskType != 0">
|
||||
<el-time-picker v-model="formData.endTime" placeholder="结束时间" size="small"
|
||||
:picker-options="{ start: formData.startTime, minTime: formData.startTime}"
|
||||
value-format="HH:mm:ss"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
let startTimePass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
var myDate = new Date();
|
||||
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||
if (this.timeToSec(value) - this.timeToSec(time) > 0) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('开始时间要大于当前时间'));
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请选择开始时间'));
|
||||
}
|
||||
};
|
||||
let endTimePass = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (this.timeToSec(value) - this.timeToSec(this.formData.startTime) > 0) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('结束时间要大于开始时间'));
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请选择结束时间'));
|
||||
}
|
||||
}
|
||||
return {
|
||||
formData: {
|
||||
mediaId: '',
|
||||
serialNo: '',
|
||||
messageLevel: '',
|
||||
cyclingType: '',
|
||||
taskType: '0',
|
||||
cyclingDate: '',
|
||||
broadcastDay: '',
|
||||
startDate: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
checkList: []
|
||||
},
|
||||
formRules: {
|
||||
mediaId: [
|
||||
{required: true, message: '请选择播发内容', trigger: 'change'}
|
||||
],
|
||||
serialNo: [
|
||||
{required: true, message: '请选择播放设备', trigger: 'change'}
|
||||
],
|
||||
messageLevel: [
|
||||
{required: true, message: '请选择播发级别', trigger: 'change'}
|
||||
],
|
||||
cyclingType: [
|
||||
{required: true, message: '请选择定时策略', trigger: 'change'}
|
||||
],
|
||||
taskType: [
|
||||
{required: true, message: '请选择播放方式', trigger: 'change'}
|
||||
],
|
||||
broadcastDay: [
|
||||
{required: true, message: '请输入播放天数', trigger: 'change'}
|
||||
],
|
||||
startDate: [
|
||||
{required: true, message: '请选择开始日期', trigger: 'change'}
|
||||
],
|
||||
startTime: [
|
||||
{required: true, validator: startTimePass, trigger: 'change'}
|
||||
],
|
||||
endTime: [
|
||||
{required: true, validator: endTimePass, trigger: 'change'}
|
||||
],
|
||||
checkList: [
|
||||
{required: true, message: '播放天数', trigger: 'change'}
|
||||
],
|
||||
},
|
||||
mediaList: [],
|
||||
equipmentList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
newDate() {
|
||||
var myDate = new Date();
|
||||
return myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('dlbMessageUrgency', 'dlbBroadTaskType', 'dlbDyclingType')
|
||||
Promise.all([this.getEquipmentList(), this.getMediaList()]).then(() => {
|
||||
this.formData.mediaId = this.params.id
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getMediaList() {
|
||||
return this.instance.post(`/app/appdlbresource/list?current=1&size=10000`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.mediaList = res.data.records?.map((item) => ({
|
||||
dictName: item.name,
|
||||
dictValue: item.id
|
||||
})) || []
|
||||
}
|
||||
})
|
||||
},
|
||||
getEquipmentList() {
|
||||
return this.instance.post(`/app/appdlbquipment/getDlbDeviceList?current=1&size=10000&devStatus=5`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.equipmentList = res.data.records?.map((item) => ({
|
||||
dictName: item.deviceName,
|
||||
dictValue: item.serialNo
|
||||
})) || []
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.formData.checkList.length) {
|
||||
this.formData.cyclingDate = this.formData.checkList.join(',')
|
||||
}
|
||||
this.formData.coverageType = '4'
|
||||
this.formData.id = ''
|
||||
this.instance.post(`/app/appzyvideobroadcast/play`, {
|
||||
...this.formData,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/appzyvideobroadcast/queryDetailById?id=${this.params.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.formData = {
|
||||
...res.data,
|
||||
checkList: []
|
||||
}
|
||||
this.formData.mediaId = String(this.formData.mediaId)
|
||||
this.formData.cyclingType = String(this.formData.cyclingType)
|
||||
if (this.formData.cyclingDate) {
|
||||
this.formData.checkList = this.formData.cyclingDate.split(',')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
timeToSec(time) {
|
||||
var s = "";
|
||||
var hour = time.split(":")[0];
|
||||
var min = time.split(":")[1];
|
||||
var second = time.split(":")[2];
|
||||
s = Number(hour * 3600) + Number(min * 60) + Number(second)
|
||||
return s;
|
||||
},
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<section class="AppMonitorDevice">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="监控设备管理" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #right>
|
||||
<el-input prefix-icon="iconfont iconSearch" v-model="search.title" placeholder="设备名、MAC号" clearable
|
||||
@change="page.current=1,getTableData()" size="small"/>
|
||||
<el-button type="primary" icon="iconfont iconSearch" @click="page.current=1,getTableData()">查询</el-button>
|
||||
<el-button icon="iconfont iconResetting" @click="search={},page.current=1,getTableData()">重置</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
||||
:size.sync="page.size" @getList="getTableData">
|
||||
<el-table-column label="操作" slot="options" align="center">
|
||||
<el-row type="flex" slot-scope="{row}" align="middle" justify="center">
|
||||
<ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
|
||||
@change="handleSubmit(row)">
|
||||
<el-button type="text">绑定</el-button>
|
||||
</ai-area>
|
||||
<el-button type="text" @click="handleLocate(row)">标绘</el-button>
|
||||
<div/>
|
||||
<el-button type="text" @click="handleShow(row)">设置</el-button>
|
||||
</el-row>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
|
||||
<setting-dialog v-model="dialog" :ins="instance"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocateDialog from "../components/locateDialog";
|
||||
import SettingDialog from "../components/settingDialog";
|
||||
|
||||
export default {
|
||||
name: "AppMonitorDevice",
|
||||
components: {SettingDialog, LocateDialog},
|
||||
label: "监控设备管理",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
device: this
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: 'selection'},
|
||||
{label: "设备名", prop: "deviceName"},
|
||||
{label: "上级归属", prop: "areaName"},
|
||||
{label: "设备型号", prop: "devModel"},
|
||||
{label: "MAC号", prop: "devMac"},
|
||||
{label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
|
||||
{slot: "options"}
|
||||
]
|
||||
},
|
||||
isDetail() {
|
||||
return !!this.$route.query?.id
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {startTime: null, endTime: null, title: ""},
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
tableData: [],
|
||||
locate: false,
|
||||
dialog: false,
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load("zyDeviceBindStatus")
|
||||
if (this.isDetail) {
|
||||
//TODO 待补充
|
||||
} else this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
|
||||
params: {...this.search, ...this.page}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit(row) {
|
||||
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||
...row, id: row.deviceId
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShow(row) {
|
||||
this.dialog = true
|
||||
this.detail = row
|
||||
},
|
||||
handleLocate(row, locate) {
|
||||
if (locate) {
|
||||
let {lat, lng} = locate.location
|
||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
||||
this.locate = false
|
||||
this.getTableData()
|
||||
})
|
||||
} else {
|
||||
this.locate = true
|
||||
this.detail = row
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppMonitorDevice {
|
||||
::v-deep .AiSearchBar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<section class="AppMonitorManage">
|
||||
<device-slider :show.sync="slider" :ins="instance" :dict="dict" @select="handleSelectMonitor"
|
||||
:render-item="renderTreeItem" ref="DeviceSlider"/>
|
||||
<div class="monitorPane">
|
||||
<div class="headerBar">
|
||||
<el-select default-first-option size="small" v-model="splitScreen">
|
||||
<i slot="prefix" class="iconfont iconjdq_led_Led1"/>
|
||||
<el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
|
||||
</el-select>
|
||||
<!-- <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
|
||||
</div>
|
||||
<div class="videoList">
|
||||
<div class="videoBox" v-for="(m,i) in monitors" :key="i" :style="currentSplitStyle">
|
||||
<iframe :src="m.url" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
|
||||
allowusermedia frameBorder="no"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
|
||||
@closed="selected={}">
|
||||
<el-form ref="form" :model="selected" label-width="80px" size="small" :rules="rules">
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="selected.name" clearable/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(selected,v)"/>
|
||||
<ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :instance="instance" ref="BindArea"
|
||||
@change="handleSubmit(selected)"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeviceSlider from "../components/deviceSlider";
|
||||
import LocateDialog from "../components/locateDialog";
|
||||
|
||||
export default {
|
||||
name: "AppMonitorManage",
|
||||
components: {LocateDialog, DeviceSlider},
|
||||
label: "监控实况",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
computed: {
|
||||
splitOps() {
|
||||
return [
|
||||
{label: "单分屏", value: 1, per: "100%"},
|
||||
{label: "四分屏", value: 4, per: "49%"},
|
||||
{label: "九分屏", value: 9, per: "32%"}
|
||||
]
|
||||
},
|
||||
currentSplitStyle() {
|
||||
let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
|
||||
return {width: per, height: per}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slider: true,
|
||||
fullscreen: false,
|
||||
splitScreen: 1,
|
||||
monitors: [],
|
||||
dialog: false,
|
||||
locate: false,
|
||||
selected: {},
|
||||
rules: {
|
||||
name: [{required: true, message: "请填写 设备名称"}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFullscreen() {
|
||||
this.fullscreen = !this.fullscreen
|
||||
this.$fullscreen(this.fullscreen)
|
||||
},
|
||||
handleSelectMonitor(monitor) {
|
||||
let {id} = monitor,
|
||||
index = this.monitors.findIndex(e => e.id == id)
|
||||
if (index > -1) {
|
||||
this.monitors.splice(index, 1)
|
||||
this.monitors.map((e, i) => {
|
||||
if (i > index) {
|
||||
this.showMonitor(e, true)
|
||||
}
|
||||
})
|
||||
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
||||
this.$message.warning("可分屏监控已满,请先取消其他的监控")
|
||||
} else {
|
||||
this.showMonitor(monitor)
|
||||
}
|
||||
},
|
||||
showMonitor(monitor, refresh = false) {
|
||||
let {id: deviceId} = monitor
|
||||
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||
params: {deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let data = JSON.parse(res.data)
|
||||
if (refresh) {
|
||||
monitor.url = data.url
|
||||
} else if (this.splitScreen == 1) {
|
||||
this.monitors = [{...monitor, ...data}]
|
||||
} else {
|
||||
this.monitors.push({...monitor, ...data})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
renderTreeItem: function (h, {node, data}) {
|
||||
let show = data.deviceStatus==1 ? 'show' : ''
|
||||
if (node.isLeaf) {
|
||||
return (
|
||||
<div class="flexRow">
|
||||
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
||||
<div>{node.label}</div>
|
||||
<el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
|
||||
<i class="iconfont iconMore"/>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
||||
<el-dropdown-item command="area">行政地区</el-dropdown-item>
|
||||
<el-dropdown-item command="locate">地图标绘</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
)
|
||||
} else return (
|
||||
<div class="flexRow">
|
||||
<div>{node.label}</div>
|
||||
{data.id != 'no_area' ? <div class="sta">
|
||||
<p>{data.online || 0}</p>/{data.sum || 0}
|
||||
</div>
|
||||
: <div/>}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
handleSliderOption(command, data) {
|
||||
this.selected = JSON.parse(JSON.stringify({...data, command}))
|
||||
if (command == "edit") {//修改名称
|
||||
this.dialog = true
|
||||
} else if (command == "area") {//绑定areaId
|
||||
this.$refs.BindArea?.chooseArea()
|
||||
} else if (command == "locate") {//地图标绘
|
||||
this.locate = true
|
||||
}
|
||||
},
|
||||
handleSubmit(row) {
|
||||
delete row.createTime
|
||||
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||
...row
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.dialog = false
|
||||
this.$refs.DeviceSlider?.getDevices()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleLocate(row, locate) {
|
||||
if (locate) {
|
||||
let {lat, lng} = locate.location
|
||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
||||
this.locate = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.monitors = []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppMonitorManage {
|
||||
display: flex;
|
||||
background: #202330;
|
||||
height: 100%;
|
||||
|
||||
.monitorPane {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 20px 20px 20px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::v-deep .headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner, .el-button {
|
||||
color: #fff;
|
||||
max-width: 100px;
|
||||
background: #2C2F3E;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.videoList {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.videoBox {
|
||||
background: #000;
|
||||
flex-shrink: 0;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-tree-node__content:hover {
|
||||
.menuBtn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .flexRow {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
.iconfont {
|
||||
color: #89b;
|
||||
|
||||
&.show {
|
||||
color: #19D286;
|
||||
}
|
||||
}
|
||||
|
||||
.sta {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
& > p {
|
||||
color: #19D286;
|
||||
}
|
||||
}
|
||||
|
||||
.menuBtn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,211 +0,0 @@
|
||||
<template>
|
||||
<section class="AppMonitorMap">
|
||||
<device-slider :show.sync="slider" :ins="instance" :dict="dict" @list="v=>list=v" @select="markerClickEvent"/>
|
||||
<div id="amap"/>
|
||||
<div ref="selectedInfoWin" class="selected">
|
||||
<b>{{ selected.deviceName }}</b>
|
||||
<div>{{ selected.lng }}，{{ selected.lat }}</div>
|
||||
<div v-if="selected.address">{{ selected.address }}</div>
|
||||
<div btn @click="handleShowMonitor">查看监控</div>
|
||||
</div>
|
||||
<el-dialog class="monitorDialog" :modal="false" :visible.sync="dialog" :title="selected.deviceName||'视频监控'"
|
||||
width="640px" @closed="monitor=''">
|
||||
<iframe v-if="monitor" :src="monitor" allow="autoplay *; microphone *; fullscreen *" allowfullscreen
|
||||
allowtransparency allowusermedia frameBorder="no"/>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeviceSlider from "../components/deviceSlider";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
export default {
|
||||
name: "AppMonitorMap",
|
||||
components: {DeviceSlider},
|
||||
label: "监控地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slider: true,
|
||||
AMap: null,
|
||||
map: null,
|
||||
selected: {},
|
||||
list: [],
|
||||
deviceToken: "",
|
||||
dialog: false,
|
||||
monitor: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(v) {
|
||||
if (v.length > 0) {
|
||||
this.renderDevicesOnMap()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
return new Promise(resolve => AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc",
|
||||
version: '2.0',
|
||||
plugins: ['AMap.Marker', 'AMap.PlaceSearch'],
|
||||
}).then(AMap => {
|
||||
this.AMap = AMap
|
||||
this.map = new this.AMap.Map('amap', {
|
||||
zoom: 14,
|
||||
})
|
||||
resolve()
|
||||
}))
|
||||
},
|
||||
renderDevicesOnMap() {
|
||||
this.list?.map(e => {
|
||||
if (this.AMap && e?.lat) {
|
||||
e.marker = new this.AMap.Marker({
|
||||
icon: this.$cdn + 'monitor/camera.png',
|
||||
position: new this.AMap.LngLat(e.lng, e.lat)
|
||||
}).on('click', () => this.markerClickEvent(e))
|
||||
this.map.add(e.marker)
|
||||
}
|
||||
})
|
||||
},
|
||||
markerClickEvent(device) {
|
||||
if (device?.marker) {
|
||||
this.map?.setCenter(new this.AMap.LngLat(device.lng, device.lat))
|
||||
device.marker.setIcon(this.$cdn + 'monitor/cameraSelected.png')
|
||||
this.selected = device
|
||||
let win = new this.AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
autoMove: true,
|
||||
closeWhenClickMap: true,
|
||||
content: this.$refs.selectedInfoWin
|
||||
}).on('close', () => {
|
||||
device.marker.setIcon(this.$cdn + 'monitor/camera.png')
|
||||
this.selected = {}
|
||||
})
|
||||
win.open(this.map, new this.AMap.LngLat(device.lng, device.lat))
|
||||
}
|
||||
},
|
||||
getDeviceToken() {
|
||||
this.instance.post("/app/appzyvideoequipment/getAppUserToken").then(res => {
|
||||
if (res?.data) {
|
||||
this.deviceToken = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShowMonitor() {
|
||||
this.dialog = true
|
||||
this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||
params: {token: this.deviceToken, deviceId: this.selected.deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let data = JSON.parse(res.data)
|
||||
this.monitor = data.url
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initMap().then(() => setTimeout(() => this.renderDevicesOnMap(), 1000))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppMonitorMap {
|
||||
background: #202330;
|
||||
position: relative;
|
||||
|
||||
.deviceSlider {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 66;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #fff;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 12px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
b {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
div[btn] {
|
||||
cursor: pointer;
|
||||
color: #89b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep .monitorDialog {
|
||||
|
||||
.el-dialog__header {
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: linear-gradient(180deg, #313B5B 0%, #1B202F 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
position: relative;
|
||||
top: unset;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-marker-label {
|
||||
border-color: transparent;
|
||||
box-shadow: 1px 1px 0 0 rgba(#999, .2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<section class="deviceSlider">
|
||||
<div class="mainPane" v-if="show">
|
||||
<div flex overview>
|
||||
<b>监控设备</b>
|
||||
<div>
|
||||
<div>设备总数：{{ overview.total }}</div>
|
||||
<div flex>在线设备：<p v-text="overview.online"/></div>
|
||||
</div>
|
||||
<el-progress type="circle" :width="40" :percentage="overview.percent" color="#19D286" :stroke-width="4"/>
|
||||
</div>
|
||||
<div flex search>
|
||||
<el-select v-model="search.bind" size="mini" placeholder="全部" clearable @change="onChange">
|
||||
<el-option v-for="(op,i) in dict.getDict('deviceStatus')" :key="i" :value="op.dictValue"
|
||||
:label="op.dictName"/>
|
||||
</el-select>
|
||||
<el-input v-model="search.name" size="mini" placeholder="设备名称" prefix-icon="el-icon-search"
|
||||
@change="handleTreeFilter" clearable/>
|
||||
</div>
|
||||
<div title>设备列表</div>
|
||||
<div fill class="deviceList">
|
||||
<el-scrollbar>
|
||||
<el-tree ref="deviceTree" :data="treeData" :props="propsConfig" @node-click="handleNodeClick"
|
||||
:render-content="renderItem" :filter-node-method="handleFilter"/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBtn" :class="{show}" @click="handleShow">
|
||||
<i class="iconfont iconArrow_Right"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "deviceSlider",
|
||||
props: {
|
||||
show: Boolean,
|
||||
ins: Function,
|
||||
dict: Object,
|
||||
renderItem: Function
|
||||
},
|
||||
computed: {
|
||||
overview() {
|
||||
let total = this.list?.length || 0,
|
||||
online = this.list?.filter(e => e.deviceStatus == 1)?.length || 0
|
||||
return {
|
||||
total, online,
|
||||
percent: Math.ceil(online / total * 100) || 0
|
||||
}
|
||||
},
|
||||
propsConfig() {
|
||||
return {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
},
|
||||
treeData() {
|
||||
let {list, noArea, staData} = this
|
||||
let meta = [staData?.reduce((t, e) => {
|
||||
return t.type <= e.type ? t : e
|
||||
}, {name: '读取中...'})]
|
||||
meta.map(p => this.addChild(p, [...staData, ...list].map(s => ({
|
||||
...s,
|
||||
parentId: s.areaId || s.parent_id
|
||||
}))))
|
||||
return [...meta, {
|
||||
id: 'no_area',
|
||||
name: '未知区划',
|
||||
children: noArea
|
||||
}]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
noArea: [],
|
||||
staData: [],
|
||||
name: '',
|
||||
search: {
|
||||
bind: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$emit('update:show', !this.show)
|
||||
},
|
||||
getDevices() {
|
||||
this.ins.post("/app/appzyvideoequipment/tree", null, {
|
||||
params: {size: 999}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data.count
|
||||
this.list = res.data.list
|
||||
this.noArea = res.data.noArea
|
||||
this.$emit('list', this.list)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.$emit('select', data)
|
||||
},
|
||||
handleFilter(v, data) {
|
||||
if (!v) {
|
||||
return !this.search.bind ? true : data.deviceStatus === this.search.bind
|
||||
}
|
||||
|
||||
return data?.name?.indexOf(v) > -1 && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
|
||||
},
|
||||
handleTreeFilter(v) {
|
||||
this.$refs.deviceTree?.filter(v)
|
||||
},
|
||||
|
||||
onChange () {
|
||||
this.$refs.deviceTree?.filter(this.search.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load("deviceStatus")
|
||||
this.getDevices()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deviceSlider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: #fff;
|
||||
|
||||
div[flex] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[fill] {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mainPane {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: #333C53;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
b {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div[overview], div[search] {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
gap: 4px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
::v-deep.el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
div[title] {
|
||||
height: 28px;
|
||||
background: #3E4A69;
|
||||
padding: 0 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
::v-deep.deviceList {
|
||||
padding: 0 8px;
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
box-sizing: content-box;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-progress__text, p {
|
||||
color: #19D286;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #282F45;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
.el-tree-node:focus > .el-tree-node__content, .el-tree-node__content:hover {
|
||||
background: rgba(#fff, .1);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__icon {
|
||||
color: #89b;
|
||||
}
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
&.show > .iconfont {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<section class="locateDialog">
|
||||
<ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
|
||||
@opened="$nextTick(()=>initMap())"
|
||||
@onConfirm="handleConfirm">
|
||||
<div id="amap" v-if="dialog"/>
|
||||
<div class="poi">
|
||||
<el-input ref="poiInput" v-model="search" size="small" clearable @change="handleSearch" placeholder="请输入地点"/>
|
||||
</div>
|
||||
<el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
|
||||
label-position="left">
|
||||
<div class="header">
|
||||
<i class="iconfont iconLocation"/>
|
||||
<span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
|
||||
</div>
|
||||
<el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
|
||||
<el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
|
||||
<el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
export default {
|
||||
name: "locateDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "visible",
|
||||
},
|
||||
props: {
|
||||
visible: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
search: "",
|
||||
poi: null,
|
||||
map: null,
|
||||
AMap: null,
|
||||
selected: {},
|
||||
geo: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.dialog = v
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc",
|
||||
version: '2.0',
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
|
||||
}).then(AMap => {
|
||||
this.AMap = AMap
|
||||
this.map = new AMap.Map('amap', {
|
||||
zoom: 14,
|
||||
}).on('click', res => {
|
||||
this.map.clearMap()
|
||||
this.selected = {location: res.lnglat}
|
||||
this.poi?.searchNearBy('', res.lnglat, 100)
|
||||
});
|
||||
this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
|
||||
this.map.clearMap()
|
||||
if (poiList?.length > 0) {
|
||||
poiList?.pois?.map(e => {
|
||||
let marker = new AMap.Marker({
|
||||
position: e.location,
|
||||
}).on('click', () => this.selected = e)
|
||||
this.map.add(marker)
|
||||
})
|
||||
} else {
|
||||
let marker = new AMap.Marker({
|
||||
position: this.selected.location,
|
||||
})
|
||||
this.map.add(marker)
|
||||
}
|
||||
})
|
||||
this.geo = new AMap.Geolocation({
|
||||
enableHighAccuracy: true,//是否使用高精度定位
|
||||
zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
|
||||
})
|
||||
this.map.addControl(this.geo)
|
||||
})
|
||||
},
|
||||
handleSearch(v) {
|
||||
if (v) {
|
||||
this.poi.searchNearBy(v, this.map.getCenter(), 50000)
|
||||
}
|
||||
},
|
||||
handleConfirm() {
|
||||
if (this.selected?.location) {
|
||||
this.$emit('confirm', this.selected)
|
||||
} else {
|
||||
this.$message.error('请先选择坐标位置')
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dialog = this.visible
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.locateDialog {
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
height: 480px;
|
||||
position: relative;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
|
||||
.amap-logo, .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.amap-marker-label {
|
||||
border-color: transparent;
|
||||
box-shadow: 1px 1px 0 0 rgba(#999, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.poi {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
flex-direction: column;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
background: #fff;
|
||||
min-width: 200px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header {
|
||||
color: #fff;
|
||||
background: #26f;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<section class="settingDialog">
|
||||
<ai-dialog :visible.sync="dialog" title="基础设置" @close="$emit('visible',false)">
|
||||
<el-form ref="deviceForm" size="small" label-width="140px">
|
||||
<el-form-item label="设备名称" class="full">
|
||||
<el-input v-model="form.name" clearable placeholder="设备名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="摄像头状态">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="高清视频">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="摄像头麦克风">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态指示灯">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="夜视">
|
||||
<el-radio v-model="form.status" label="自动"/>
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转180°">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="WIFI网络" class="full">-</el-form-item>
|
||||
<el-form-item label="MAC地址">(34:75:6b:c9:10)</el-form-item>
|
||||
<el-form-item label="摄像头型号">C71</el-form-item>
|
||||
<el-form-item label="固件">20.0326.251.2486</el-form-item>
|
||||
<el-form-item label="嵌入式应用">2.3.37.8954</el-form-item>
|
||||
<el-form-item label="IMEI">110003953100302</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "settingDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "visible",
|
||||
},
|
||||
props: {
|
||||
visible: Boolean,
|
||||
detail: {default: () => ({})}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.dialog = v
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = JSON.parse(JSON.stringify(this.form))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settingDialog {
|
||||
.el-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
width: 50%;
|
||||
|
||||
.el-form-item__label {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"AppAccount": "账号管理",
|
||||
"AppDictionary": "数据字典",
|
||||
"AppQyWxConfig": "企业微信配置",
|
||||
"AppUserInfo": "个人中心",
|
||||
"AppRightsManager": "权限管理",
|
||||
"AppAccountRole": "账号角色",
|
||||
"AppMenuManager": "菜单管理"
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"name": "dvcp-shandong-apps",
|
||||
"description": "shandong版本应用",
|
||||
"version": "1.0.0",
|
||||
"main": "dist/dvcp-shandong-apps.common.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"registry": "http://192.168.1.87:4873/"
|
||||
},
|
||||
"dependencies": {
|
||||
"dvcp-dv-ui": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -65,10 +65,10 @@ module.exports = {
|
||||
//设置代理,可解决跨5
|
||||
'/lan': {
|
||||
// target: "https://gsgate.cunwuyun.cn/",
|
||||
// target: 'http://192.168.1.87:9000/',
|
||||
target: 'http://192.168.1.87:9000/',
|
||||
// target: "http://192.168.1.113:9998/",
|
||||
// target: "http://192.168.1.245:9000/",
|
||||
target: "http://192.168.1.34:19898",
|
||||
// target: "http://192.168.1.34:19898",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
//地址重写
|
||||
|
||||
Reference in New Issue
Block a user