feat：结构调整
This commit is contained in:
lijianzhong
parent
250776897a
commit
ff7dc7d58b
3
public/json/config.json
Normal file
3
public/json/config.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"fileurl": ""
|
||||
}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-show="(fileList.length < max && !readonly)">
|
||||
<div class="item" v-show="fileList.length < max && !readonly">
|
||||
<el-upload
|
||||
ref="uploadEl"
|
||||
class="uploader"
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="tip" class="el-upload__tip">
|
||||
<div style="display: inline-block;">
|
||||
<div style="display: inline-block">
|
||||
<el-alert :title="tip" type="error" show-icon :closable="false" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -121,11 +121,6 @@ const props = defineProps({
|
|||
default: "",
|
||||
required: true,
|
||||
},
|
||||
//图片服务器拼接地址
|
||||
baseUrl: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
//图片服务ID
|
||||
uuid: {
|
||||
type: String,
|
||||
|
|
@ -230,12 +225,6 @@ const handleRemove = (val: any) => {
|
|||
emits("onUpdate", arr);
|
||||
}
|
||||
});
|
||||
// const index =
|
||||
// arr.filter((item) => item.sysdocumentid === item.sysdocumentid)
|
||||
// console.log(index);
|
||||
|
||||
// arr.splice(index, 1);
|
||||
// emits("onUpdate", arr);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -322,88 +311,88 @@ onMounted(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.pic-contaner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.picture {
|
||||
flex-wrap: wrap;
|
||||
display: inline-flex;
|
||||
.uploader {
|
||||
width: fit-content !important;
|
||||
}
|
||||
.img {
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px #999 dashed;
|
||||
}
|
||||
.file-content {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.file-name {
|
||||
font-size: 10px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateX(12%) translateY(6%);
|
||||
}
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
transition: opacity 0.3s;
|
||||
.actions {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include position-center(xy);
|
||||
span {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-white);
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.picture {
|
||||
flex-wrap: wrap;
|
||||
display: inline-flex;
|
||||
.uploader {
|
||||
width: fit-content !important;
|
||||
}
|
||||
.img {
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px #999 dashed;
|
||||
}
|
||||
.file-content {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.file-name {
|
||||
font-size: 10px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateX(12%) translateY(6%);
|
||||
}
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
transition: opacity 0.3s;
|
||||
.actions {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include position-center(xy);
|
||||
span {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-white);
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-upload--picture-card) {
|
||||
--el-upload-picture-card-size: v-bind(props.height + "px") !important;
|
||||
--el-upload-picture-card-size: v-bind(props.height + "px") !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,242 +1,277 @@
|
|||
<script setup name="ImageUpload">
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
headers: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 150
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 150
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
notip: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => ['jpg', 'png', 'gif', 'bmp']
|
||||
}
|
||||
})
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
headers: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
notip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
ext: {
|
||||
type: Array,
|
||||
default: () => ["jpg", "png", "gif", "bmp"],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:url', 'on-success'])
|
||||
const emit = defineEmits(["update:url", "on-success"]);
|
||||
|
||||
const uploadData = ref({
|
||||
imageViewerVisible: false,
|
||||
progress: {
|
||||
preview: '',
|
||||
percent: 0
|
||||
}
|
||||
})
|
||||
imageViewerVisible: false,
|
||||
progress: {
|
||||
preview: "",
|
||||
percent: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// 预览
|
||||
function preview() {
|
||||
uploadData.value.imageViewerVisible = true
|
||||
uploadData.value.imageViewerVisible = true;
|
||||
}
|
||||
// 关闭预览
|
||||
function previewClose() {
|
||||
uploadData.value.imageViewerVisible = false
|
||||
uploadData.value.imageViewerVisible = false;
|
||||
}
|
||||
// 移除
|
||||
function remove() {
|
||||
emit('update:url', '')
|
||||
emit("update:url", "");
|
||||
}
|
||||
function beforeUpload(file) {
|
||||
const fileName = file.name.split('.')
|
||||
const fileExt = fileName[fileName.length - 1]
|
||||
const isTypeOk = props.ext.indexOf(fileExt) >= 0
|
||||
const isSizeOk = file.size / 1024 / 1024 < props.size
|
||||
if (!isTypeOk) {
|
||||
ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
|
||||
}
|
||||
if (!isSizeOk) {
|
||||
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
|
||||
}
|
||||
if (isTypeOk && isSizeOk) {
|
||||
uploadData.value.progress.preview = URL.createObjectURL(file)
|
||||
}
|
||||
return isTypeOk && isSizeOk
|
||||
const fileName = file.name.split(".");
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = props.ext.indexOf(fileExt) >= 0;
|
||||
const isSizeOk = file.size / 1024 / 1024 < props.size;
|
||||
if (!isTypeOk) {
|
||||
ElMessage.error(`上传图片只支持 ${props.ext.join(" / ")} 格式！`);
|
||||
}
|
||||
if (!isSizeOk) {
|
||||
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`);
|
||||
}
|
||||
if (isTypeOk && isSizeOk) {
|
||||
uploadData.value.progress.preview = URL.createObjectURL(file);
|
||||
}
|
||||
return isTypeOk && isSizeOk;
|
||||
}
|
||||
function onProgress(file) {
|
||||
uploadData.value.progress.percent = ~~file.percent
|
||||
uploadData.value.progress.percent = ~~file.percent;
|
||||
}
|
||||
function onSuccess(res) {
|
||||
uploadData.value.progress.preview = ''
|
||||
uploadData.value.progress.percent = 0
|
||||
emit('on-success', res)
|
||||
uploadData.value.progress.preview = "";
|
||||
uploadData.value.progress.percent = 0;
|
||||
emit("on-success", res);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
:action="action"
|
||||
:data="data"
|
||||
:name="name"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="onProgress"
|
||||
:on-success="onSuccess"
|
||||
drag
|
||||
class="image-upload"
|
||||
>
|
||||
<el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
|
||||
<template #error>
|
||||
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:plus" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else class="image">
|
||||
<el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
||||
<div class="mask">
|
||||
<div class="actions">
|
||||
<span title="预览" @click.stop="preview">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:zoom-in" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span title="移除" @click.stop="remove">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:delete" />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
|
||||
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
||||
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="!notip" class="el-upload__tip">
|
||||
<div style="display: inline-block;">
|
||||
<el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
|
||||
</div>
|
||||
<div class="upload-container">
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
:action="action"
|
||||
:data="data"
|
||||
:name="name"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="onProgress"
|
||||
:on-success="onSuccess"
|
||||
drag
|
||||
class="image-upload"
|
||||
>
|
||||
<el-image
|
||||
v-if="url === ''"
|
||||
:src="url === '' ? placeholder : url"
|
||||
:style="`width:${width}px;height:${height}px;`"
|
||||
fit="fill"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="image-slot"
|
||||
:style="`width:${width}px;height:${height}px;`"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:plus" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else class="image">
|
||||
<el-image
|
||||
:src="url"
|
||||
:style="`width:${width}px;height:${height}px;`"
|
||||
fit="fill"
|
||||
/>
|
||||
<div class="mask">
|
||||
<div class="actions">
|
||||
<span title="预览" @click.stop="preview">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:zoom-in" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span title="移除" @click.stop="remove">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:delete" />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
|
||||
</div>
|
||||
<div
|
||||
v-show="url === '' && uploadData.progress.percent"
|
||||
class="progress"
|
||||
:style="`width:${width}px;height:${height}px;`"
|
||||
>
|
||||
<el-image
|
||||
:src="uploadData.progress.preview"
|
||||
:style="`width:${width}px;height:${height}px;`"
|
||||
fit="fill"
|
||||
/>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:width="Math.min(width, height) * 0.8"
|
||||
:percentage="uploadData.progress.percent"
|
||||
/>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="!notip" class="el-upload__tip">
|
||||
<div style="display: inline-block">
|
||||
<el-alert
|
||||
:title="`上传图片支持 ${ext.join(
|
||||
' / '
|
||||
)} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`"
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-image-viewer
|
||||
v-if="uploadData.imageViewerVisible"
|
||||
:url-list="[url]"
|
||||
@close="previewClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-container {
|
||||
line-height: initial;
|
||||
line-height: initial;
|
||||
}
|
||||
.el-image {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
transition: opacity 0.3s;
|
||||
.actions {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include position-center(xy);
|
||||
span {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-white);
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
transition: opacity 0.3s;
|
||||
.actions {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include position-center(xy);
|
||||
span {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-white);
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.image-upload {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
:deep(.el-upload) {
|
||||
.el-upload-dragger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
&.is-dragover {
|
||||
border-width: 1px;
|
||||
}
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--el-text-color-placeholder);
|
||||
background-color: transparent;
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
}
|
||||
.el-progress {
|
||||
z-index: 1;
|
||||
@include position-center(xy);
|
||||
.el-progress__text {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-upload-dragger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
&.is-dragover {
|
||||
border-width: 1px;
|
||||
}
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--el-text-color-placeholder);
|
||||
background-color: transparent;
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
}
|
||||
.el-progress {
|
||||
z-index: 1;
|
||||
@include position-center(xy);
|
||||
.el-progress__text {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ const setValue = () => {
|
|||
}
|
||||
const handleUpload = (e) => {
|
||||
const files = Array.prototype.slice.call(e.target.files)
|
||||
// console.log(files, "files")
|
||||
if (!files) {
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
const Layout = () => import('@/layout/index.vue')
|
||||
export default {
|
||||
path: '/emergency',
|
||||
path: '/emer',
|
||||
component: Layout,
|
||||
redirect: '/emergency/procession',
|
||||
name: 'emergency',
|
||||
redirect: '/emer/procession',
|
||||
name: 'emer',
|
||||
meta: {
|
||||
auth: "emer",
|
||||
title: '应急管理',
|
||||
|
|
|
|||
25
src/router/modules/statistic.js
Normal file
25
src/router/modules/statistic.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
const Layout = () => import('@/layout/index.vue')
|
||||
|
||||
export default {
|
||||
path: '/statistic',
|
||||
component: Layout,
|
||||
name: 'statistic',
|
||||
redirect: '/statistic/s-index',
|
||||
meta: {
|
||||
auth: "statistic",
|
||||
title: '统计分析',
|
||||
icon: 'point',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 's-index',
|
||||
name: 's-index',
|
||||
component: () => import('@/views/statistic/index.vue'),
|
||||
meta: {
|
||||
auth: "statistic.index",
|
||||
title: '统计分析',
|
||||
sidebar: false
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
26
src/router/modules/work-manage.js
Normal file
26
src/router/modules/work-manage.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
const Layout = () => import('@/layout/index.vue')
|
||||
|
||||
export default {
|
||||
path: '/work',
|
||||
component: Layout,
|
||||
name: 'work',
|
||||
redirect: '/work/w-index',
|
||||
meta: {
|
||||
auth: "daily",
|
||||
title: '工作管理',
|
||||
icon: 'point',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'w-index',
|
||||
name: 'w-index',
|
||||
component: () => import('@/views/work-manage/index.vue'),
|
||||
meta: {
|
||||
auth: "daily",
|
||||
icon: 'point',
|
||||
title: '工作管理',
|
||||
sidebar: false
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -4,20 +4,19 @@ export default {
|
|||
path: '/trends',
|
||||
component: Layout,
|
||||
name: 'trends',
|
||||
redirect: '/trends/index',
|
||||
redirect: '/trends/t-index',
|
||||
meta: {
|
||||
auth: "trends",
|
||||
title: '工作动态',
|
||||
icon: 'point',
|
||||
activeMenu: '/work-trends/index'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'index',
|
||||
path: 't-index',
|
||||
name: 't-index',
|
||||
component: () => import('@/views/work-trends/index.vue'),
|
||||
meta: {
|
||||
auth: "home.home",
|
||||
auth: "trends.index",
|
||||
title: '工作动态',
|
||||
sidebar: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,6 +106,8 @@ import emergency from "./modules/emergency";
|
|||
import system from "./modules/system";
|
||||
import base from './modules/basemanage';
|
||||
import trends from './modules/work-trends';
|
||||
import manage from './modules/work-manage';
|
||||
import statistic from './modules/statistic';
|
||||
|
||||
// 动态路由（异步路由、导航栏路由）
|
||||
let asyncRoutes = [
|
||||
|
|
@ -120,6 +122,8 @@ let asyncRoutes = [
|
|||
base,
|
||||
emergency,
|
||||
trends,
|
||||
manage,
|
||||
statistic,
|
||||
system,
|
||||
]
|
||||
}
|
||||
|
|
|
|||
131
src/views/statistic/components/gz.vue
Normal file
131
src/views/statistic/components/gz.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="cName"
|
||||
align="center"
|
||||
:resizable="true"
|
||||
label="村名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
:resizable="true"
|
||||
label="常规工作"
|
||||
>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="进行中"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="已完成"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="db"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="督办工作"
|
||||
>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="进行中"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="已完成"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yj"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="应急工作"
|
||||
>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="进行中"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="已完成"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dj"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="党建工作"
|
||||
>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="进行中"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="cz"
|
||||
align="center"
|
||||
label="已完成"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
69
src/views/statistic/components/hj.vue
Normal file
69
src/views/statistic/components/hj.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="cName"
|
||||
align="center"
|
||||
:resizable="true"
|
||||
label="村名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="本地户籍">
|
||||
</el-table-column>
|
||||
<el-table-column prop="yj" :resizable="true" align="center" label="常驻人口">
|
||||
</el-table-column>
|
||||
<el-table-column prop="yj" :resizable="true" align="center" label="流动人口">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
76
src/views/statistic/components/rylx.vue
Normal file
76
src/views/statistic/components/rylx.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="cName" :resizable="true" align="center" label="村名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="常住人口">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="脱贫户">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="新生儿">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="在校生">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="残疾人">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="低保户">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="五保户">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="党员">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="村组干部">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
67
src/views/statistic/components/tj.vue
Normal file
67
src/views/statistic/components/tj.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="cName"
|
||||
align="center"
|
||||
:resizable="true"
|
||||
label="村名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="劳动关系">
|
||||
</el-table-column>
|
||||
<el-table-column prop="yj" :resizable="true" align="center" label="民事调解">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
71
src/views/statistic/components/yj.vue
Normal file
71
src/views/statistic/components/yj.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="cName"
|
||||
align="center"
|
||||
:resizable="true"
|
||||
label="村名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dj" :resizable="true" align="center" label="地震">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cz" align="center" :resizable="true" label="火灾">
|
||||
</el-table-column>
|
||||
<el-table-column prop="db" :resizable="true" align="center" label="防汛">
|
||||
</el-table-column>
|
||||
<el-table-column prop="yj" :resizable="true" align="center" label="治安">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ cName: "xxx村名" }, { cName: "xxx村名" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
73
src/views/statistic/index.vue
Normal file
73
src/views/statistic/index.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<el-radio-group class="rg" v-model="tabIndex">
|
||||
<template v-for="item in tabs" :key="item.val">
|
||||
<el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
<div class="content">
|
||||
<transition name="main" mode="out-in" appear>
|
||||
<component :is="tabs[tabIndex].compon" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import GZ from "./components/gz.vue";
|
||||
import YJ from "./components/yj.vue";
|
||||
import TJ from "./components/tj.vue";
|
||||
import HJ from "./components/hj.vue";
|
||||
import RYLX from "./components/rylx.vue";
|
||||
|
||||
const tabIndex = ref(0);
|
||||
const tabs = ref([
|
||||
{ name: "工作统计", val: 0, compon: GZ },
|
||||
{ name: "应急统计", val: 1, compon: YJ },
|
||||
{ name: "调解统计", val: 2, compon: TJ },
|
||||
{ name: "户籍统计", val: 3, compon: HJ },
|
||||
{ name: "人员类型统计", val: 4, compon: RYLX },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.percentage-content {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rg {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.el-radio-button__inner) {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,72 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:rules="ruleForm"
|
||||
:model="formData"
|
||||
class="center-form"
|
||||
>
|
||||
<el-form-item label="文件上传接口" style="width: 94%">
|
||||
<el-input placeholder="请输入" type="input" v-model="formData.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="option">
|
||||
<el-button @click="save" type="primary" class="btn">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang='ts' setup>
|
||||
onMounted(() => {
|
||||
import.meta.env.VITE_IFRAMEURL = 123;
|
||||
});
|
||||
import axios from "axios";
|
||||
const formData = ref({});
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
const save = () => {
|
||||
axios
|
||||
.put("/json/config.json", {
|
||||
fileurl: 123,
|
||||
})
|
||||
.then((res) => {
|
||||
axios.get("/json/config.json").then((suc) => {
|
||||
alert("成功--------->" + JSON.stringify(suc));
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.option {
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,9 +1,73 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:rules="ruleForm"
|
||||
:model="formData"
|
||||
class="center-form"
|
||||
>
|
||||
<el-form-item label="系统名称" style="width: 94%">
|
||||
<el-input placeholder="请输入" type="input" v-model="formData.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="版权信息" style="width: 94%">
|
||||
<el-input
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="logo图标" style="width: 94%">
|
||||
<file-upload OTCType="logo" :uuid="uuid" userId="123" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="option">
|
||||
<el-button @click="save" type="primary" class="btn">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import FileUpload from "@/components/CustomUpload/index.vue";
|
||||
import { getUUID } from "@/utils/common";
|
||||
const formData = ref({});
|
||||
const uuid = ref(getUUID());
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
const save = () => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.option {
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,94 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
<div class="percentage-content">
|
||||
<el-radio-group class="rg" v-model="tabIndex">
|
||||
<template v-for="item in tabs" :key="item.val">
|
||||
<el-radio-button class="rb" :label="item.val">{{
|
||||
item.name
|
||||
}}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
<div class="content">
|
||||
<div class="qedit">
|
||||
<QuillEditor
|
||||
class="qedit"
|
||||
:value="form.content"
|
||||
@updateValue="getMsg"
|
||||
/>
|
||||
</div>
|
||||
<div class="option">
|
||||
<el-button type="primary" class="btn">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const tabIndex = ref(0);
|
||||
const tabs = ref([
|
||||
{ name: "用户协议", val: 0 },
|
||||
{ name: "隐私协议", val: 1 },
|
||||
]);
|
||||
|
||||
const form = ref<any>({ content: "" });
|
||||
const getMsg = (val) => {
|
||||
form.content = val;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.percentage-content {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rg {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.el-radio-button__inner) {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.qedit {
|
||||
height: 63vh;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin: 50px 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,71 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:rules="ruleForm"
|
||||
:model="formData"
|
||||
label-width="130"
|
||||
class="center-form"
|
||||
>
|
||||
<el-form-item label="初始密码" style="width: 94%">
|
||||
<el-input placeholder="请输入" type="input" v-model="formData.pwd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="强制修改密码时间" style="width: 94%">
|
||||
<el-input
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口加密类型" style="width: 94%">
|
||||
<el-input
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="option">
|
||||
<el-button type="primary" class="btn">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import FileUpload from "@/components/CustomUpload/index.vue";
|
||||
import { getUUID } from "@/utils/common";
|
||||
const formData = ref({});
|
||||
const uuid = ref(getUUID());
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.option {
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
60
src/views/work-manage/components/cg.vue
Normal file
60
src/views/work-manage/components/cg.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!-- 工作统计 -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="export" class="icon" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="year" align="center" label="年份" width="120"/>
|
||||
<el-table-column prop="year" align="center" label="工作内容" />
|
||||
<el-table-column prop="year" align="center" label="状态" width="120"/>
|
||||
<el-table-column prop="year" align="center" label="处理人" width="200"/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([{ year: "2023" }, { year: "2024" }]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
10
src/views/work-manage/components/db.vue
Normal file
10
src/views/work-manage/components/db.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<div>督办工作</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
10
src/views/work-manage/components/tj.vue
Normal file
10
src/views/work-manage/components/tj.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<div>调解工作</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
10
src/views/work-manage/components/yj.vue
Normal file
10
src/views/work-manage/components/yj.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<div>应急工作</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
71
src/views/work-manage/index.vue
Normal file
71
src/views/work-manage/index.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<el-radio-group class="rg" v-model="tabIndex">
|
||||
<template v-for="item in tabs" :key="item.val">
|
||||
<el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
<div class="content">
|
||||
<transition name="main" mode="out-in" appear>
|
||||
<component :is="tabs[tabIndex].compon" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import CG from "./components/cg.vue";
|
||||
import DB from "./components/db.vue";
|
||||
import YJ from "./components/yj.vue";
|
||||
import TJ from "./components/tj.vue";
|
||||
|
||||
const tabIndex = ref(0);
|
||||
const tabs = ref([
|
||||
{ name: "常规工作", val: 0, compon: CG },
|
||||
{ name: "督办工作", val: 1, compon: DB },
|
||||
{ name: "应急事件", val: 2, compon: YJ },
|
||||
{ name: "调解工作", val: 3, compon: TJ },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.percentage-content {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rg {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.el-radio-button__inner) {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,185 @@
|
|||
<template>
|
||||
<div>123</div>
|
||||
<div class="percentage-content">
|
||||
<el-radio-group class="rg" v-model="tabIndex">
|
||||
<template v-for="item in tabs" :key="item.val">
|
||||
<el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
<div class="content">
|
||||
<div class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="tool-item" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<svg-icon name="add" class="icon" />
|
||||
<span>新增</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 30%">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="search"
|
||||
placeholder="请输入关键字"
|
||||
class="search-input"
|
||||
>
|
||||
<template #append>
|
||||
<span class="search-bottom">
|
||||
<svg-icon name="search" class="icon_class" />
|
||||
<span>搜索</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="loading"
|
||||
class="table"
|
||||
v-loading="tableDataloading"
|
||||
:data="tableData"
|
||||
header-row-class-name="el-one-header"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:resizable="true"
|
||||
width="100"
|
||||
label="序列"
|
||||
type="index"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cName"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="村庄名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="村长"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="phone"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="联系电话"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
width="300"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="operate"
|
||||
@click="(dialogVisible = true), (currentItem = scope.row)"
|
||||
>
|
||||
<svg-icon name="edit" class="icon"></svg-icon>
|
||||
<span class="edit">编辑</span>
|
||||
</span>
|
||||
<span
|
||||
class="operate"
|
||||
@click="(currentItem = scope.row), (visible = true)"
|
||||
>
|
||||
<svg-icon name="detail" class="icon"></svg-icon>
|
||||
<span class="detail">详情</span>
|
||||
</span>
|
||||
<span class="operate" @click="del(scope.row, '删除')">
|
||||
<svg-icon name="delete" class="icon"></svg-icon>
|
||||
<span class="func">删除</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const tabIndex = ref(0);
|
||||
const tabs = ref([
|
||||
{ name: "党建统领", val: 0 },
|
||||
{ name: "经济生态", val: 1 },
|
||||
{ name: "公共服务", val: 2 },
|
||||
{ name: "平安法治", val: 3 },
|
||||
]);
|
||||
|
||||
const search = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const tableData = ref([
|
||||
{ cName: "xxx村名", name: "村长名称", phone: "村长电话" },
|
||||
]);
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const currentItem = ref({});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.percentage-content {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rg {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.el-radio-button__inner) {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
height: 100%;
|
||||
padding: 0.83333vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
.table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user