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>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-show="(fileList.length < max && !readonly)">
|
<div class="item" v-show="fileList.length < max && !readonly">
|
||||||
<el-upload
|
<el-upload
|
||||||
ref="uploadEl"
|
ref="uploadEl"
|
||||||
class="uploader"
|
class="uploader"
|
||||||
|
|
@ -82,7 +82,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="tip" class="el-upload__tip">
|
<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" />
|
<el-alert :title="tip" type="error" show-icon :closable="false" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -121,11 +121,6 @@ const props = defineProps({
|
||||||
default: "",
|
default: "",
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
//图片服务器拼接地址
|
|
||||||
baseUrl: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
//图片服务ID
|
//图片服务ID
|
||||||
uuid: {
|
uuid: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -230,12 +225,6 @@ const handleRemove = (val: any) => {
|
||||||
emits("onUpdate", arr);
|
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>
|
<style lang="scss" scoped>
|
||||||
.pic-contaner {
|
.pic-contaner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.picture {
|
.picture {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
.uploader {
|
.uploader {
|
||||||
width: fit-content !important;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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) {
|
: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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,242 +1,277 @@
|
||||||
<script setup name="ImageUpload">
|
<script setup name="ImageUpload">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
action: {
|
action: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
headers: {
|
headers: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {},
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {},
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'file'
|
default: "file",
|
||||||
},
|
},
|
||||||
url: {
|
url: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: "",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 2
|
default: 2,
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 150
|
default: 150,
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 150
|
default: 150,
|
||||||
},
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: "",
|
||||||
},
|
},
|
||||||
notip: {
|
notip: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
ext: {
|
ext: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => ['jpg', 'png', 'gif', 'bmp']
|
default: () => ["jpg", "png", "gif", "bmp"],
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:url', 'on-success'])
|
const emit = defineEmits(["update:url", "on-success"]);
|
||||||
|
|
||||||
const uploadData = ref({
|
const uploadData = ref({
|
||||||
imageViewerVisible: false,
|
imageViewerVisible: false,
|
||||||
progress: {
|
progress: {
|
||||||
preview: '',
|
preview: "",
|
||||||
percent: 0
|
percent: 0,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
// 预览
|
// 预览
|
||||||
function preview() {
|
function preview() {
|
||||||
uploadData.value.imageViewerVisible = true
|
uploadData.value.imageViewerVisible = true;
|
||||||
}
|
}
|
||||||
// 关闭预览
|
// 关闭预览
|
||||||
function previewClose() {
|
function previewClose() {
|
||||||
uploadData.value.imageViewerVisible = false
|
uploadData.value.imageViewerVisible = false;
|
||||||
}
|
}
|
||||||
// 移除
|
// 移除
|
||||||
function remove() {
|
function remove() {
|
||||||
emit('update:url', '')
|
emit("update:url", "");
|
||||||
}
|
}
|
||||||
function beforeUpload(file) {
|
function beforeUpload(file) {
|
||||||
const fileName = file.name.split('.')
|
const fileName = file.name.split(".");
|
||||||
const fileExt = fileName[fileName.length - 1]
|
const fileExt = fileName[fileName.length - 1];
|
||||||
const isTypeOk = props.ext.indexOf(fileExt) >= 0
|
const isTypeOk = props.ext.indexOf(fileExt) >= 0;
|
||||||
const isSizeOk = file.size / 1024 / 1024 < props.size
|
const isSizeOk = file.size / 1024 / 1024 < props.size;
|
||||||
if (!isTypeOk) {
|
if (!isTypeOk) {
|
||||||
ElMessage.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
|
ElMessage.error(`上传图片只支持 ${props.ext.join(" / ")} 格式！`);
|
||||||
}
|
}
|
||||||
if (!isSizeOk) {
|
if (!isSizeOk) {
|
||||||
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
|
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`);
|
||||||
}
|
}
|
||||||
if (isTypeOk && isSizeOk) {
|
if (isTypeOk && isSizeOk) {
|
||||||
uploadData.value.progress.preview = URL.createObjectURL(file)
|
uploadData.value.progress.preview = URL.createObjectURL(file);
|
||||||
}
|
}
|
||||||
return isTypeOk && isSizeOk
|
return isTypeOk && isSizeOk;
|
||||||
}
|
}
|
||||||
function onProgress(file) {
|
function onProgress(file) {
|
||||||
uploadData.value.progress.percent = ~~file.percent
|
uploadData.value.progress.percent = ~~file.percent;
|
||||||
}
|
}
|
||||||
function onSuccess(res) {
|
function onSuccess(res) {
|
||||||
uploadData.value.progress.preview = ''
|
uploadData.value.progress.preview = "";
|
||||||
uploadData.value.progress.percent = 0
|
uploadData.value.progress.percent = 0;
|
||||||
emit('on-success', res)
|
emit("on-success", res);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="upload-container">
|
<div class="upload-container">
|
||||||
<el-upload
|
<el-upload
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
:action="action"
|
:action="action"
|
||||||
:data="data"
|
:data="data"
|
||||||
:name="name"
|
:name="name"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
:on-progress="onProgress"
|
:on-progress="onProgress"
|
||||||
:on-success="onSuccess"
|
:on-success="onSuccess"
|
||||||
drag
|
drag
|
||||||
class="image-upload"
|
class="image-upload"
|
||||||
>
|
>
|
||||||
<el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
|
<el-image
|
||||||
<template #error>
|
v-if="url === ''"
|
||||||
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
|
:src="url === '' ? placeholder : url"
|
||||||
<el-icon>
|
:style="`width:${width}px;height:${height}px;`"
|
||||||
<svg-icon name="ep:plus" />
|
fit="fill"
|
||||||
</el-icon>
|
>
|
||||||
</div>
|
<template #error>
|
||||||
</template>
|
<div
|
||||||
</el-image>
|
class="image-slot"
|
||||||
<div v-else class="image">
|
:style="`width:${width}px;height:${height}px;`"
|
||||||
<el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
>
|
||||||
<div class="mask">
|
<el-icon>
|
||||||
<div class="actions">
|
<svg-icon name="ep:plus" />
|
||||||
<span title="预览" @click.stop="preview">
|
</el-icon>
|
||||||
<el-icon>
|
</div>
|
||||||
<svg-icon name="ep:zoom-in" />
|
</template>
|
||||||
</el-icon>
|
</el-image>
|
||||||
</span>
|
<div v-else class="image">
|
||||||
<span title="移除" @click.stop="remove">
|
<el-image
|
||||||
<el-icon>
|
:src="url"
|
||||||
<svg-icon name="ep:delete" />
|
:style="`width:${width}px;height:${height}px;`"
|
||||||
</el-icon>
|
fit="fill"
|
||||||
</span>
|
/>
|
||||||
</div>
|
<div class="mask">
|
||||||
</div>
|
<div class="actions">
|
||||||
</div>
|
<span title="预览" @click.stop="preview">
|
||||||
<div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
|
<el-icon>
|
||||||
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
<svg-icon name="ep:zoom-in" />
|
||||||
<el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
|
</el-icon>
|
||||||
</div>
|
</span>
|
||||||
</el-upload>
|
<span title="移除" @click.stop="remove">
|
||||||
<div v-if="!notip" class="el-upload__tip">
|
<el-icon>
|
||||||
<div style="display: inline-block;">
|
<svg-icon name="ep:delete" />
|
||||||
<el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
|
</el-icon>
|
||||||
</div>
|
</span>
|
||||||
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
<el-image-viewer
|
||||||
|
v-if="uploadData.imageViewerVisible"
|
||||||
|
:url-list="[url]"
|
||||||
|
@close="previewClose"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.upload-container {
|
.upload-container {
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
.el-image {
|
.el-image {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.image {
|
.image {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.mask {
|
.mask {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--el-overlay-color-lighter);
|
background-color: var(--el-overlay-color-lighter);
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s;
|
||||||
.actions {
|
.actions {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@include position-center(xy);
|
@include position-center(xy);
|
||||||
span {
|
span {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--el-color-white);
|
color: var(--el-color-white);
|
||||||
transition: color 0.1s, transform 0.1s;
|
transition: color 0.1s, transform 0.1s;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.5);
|
transform: scale(1.5);
|
||||||
}
|
|
||||||
.el-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.el-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:hover .mask {
|
}
|
||||||
opacity: 1;
|
&:hover .mask {
|
||||||
}
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.image-upload {
|
.image-upload {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
:deep(.el-upload) {
|
:deep(.el-upload) {
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
&.is-dragover {
|
&.is-dragover {
|
||||||
border-width: 1px;
|
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,6 @@ const setValue = () => {
|
||||||
}
|
}
|
||||||
const handleUpload = (e) => {
|
const handleUpload = (e) => {
|
||||||
const files = Array.prototype.slice.call(e.target.files)
|
const files = Array.prototype.slice.call(e.target.files)
|
||||||
// console.log(files, "files")
|
|
||||||
if (!files) {
|
if (!files) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
const Layout = () => import('@/layout/index.vue')
|
const Layout = () => import('@/layout/index.vue')
|
||||||
export default {
|
export default {
|
||||||
path: '/emergency',
|
path: '/emer',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: '/emergency/procession',
|
redirect: '/emer/procession',
|
||||||
name: 'emergency',
|
name: 'emer',
|
||||||
meta: {
|
meta: {
|
||||||
auth: "emer",
|
auth: "emer",
|
||||||
title: '应急管理',
|
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',
|
path: '/trends',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
name: 'trends',
|
name: 'trends',
|
||||||
redirect: '/trends/index',
|
redirect: '/trends/t-index',
|
||||||
meta: {
|
meta: {
|
||||||
auth: "trends",
|
auth: "trends",
|
||||||
title: '工作动态',
|
title: '工作动态',
|
||||||
icon: 'point',
|
icon: 'point',
|
||||||
activeMenu: '/work-trends/index'
|
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'index',
|
path: 't-index',
|
||||||
name: 'index',
|
name: 't-index',
|
||||||
component: () => import('@/views/work-trends/index.vue'),
|
component: () => import('@/views/work-trends/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
auth: "home.home",
|
auth: "trends.index",
|
||||||
title: '工作动态',
|
title: '工作动态',
|
||||||
sidebar: false
|
sidebar: false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,8 @@ import emergency from "./modules/emergency";
|
||||||
import system from "./modules/system";
|
import system from "./modules/system";
|
||||||
import base from './modules/basemanage';
|
import base from './modules/basemanage';
|
||||||
import trends from './modules/work-trends';
|
import trends from './modules/work-trends';
|
||||||
|
import manage from './modules/work-manage';
|
||||||
|
import statistic from './modules/statistic';
|
||||||
|
|
||||||
// 动态路由（异步路由、导航栏路由）
|
// 动态路由（异步路由、导航栏路由）
|
||||||
let asyncRoutes = [
|
let asyncRoutes = [
|
||||||
|
|
@ -120,6 +122,8 @@ let asyncRoutes = [
|
||||||
base,
|
base,
|
||||||
emergency,
|
emergency,
|
||||||
trends,
|
trends,
|
||||||
|
manage,
|
||||||
|
statistic,
|
||||||
system,
|
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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
onMounted(() => {
|
import axios from "axios";
|
||||||
import.meta.env.VITE_IFRAMEURL = 123;
|
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>
|
</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>
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,9 +1,73 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<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>
|
</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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,94 @@
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div class="percentage-content">
|
||||||
</template>
|
<el-radio-group class="rg" v-model="tabIndex">
|
||||||
|
<template v-for="item in tabs" :key="item.val">
|
||||||
<script lang='ts' setup>
|
<el-radio-button class="rb" :label="item.val">{{
|
||||||
</script>
|
item.name
|
||||||
|
}}</el-radio-button>
|
||||||
<style lang="scss" scoped>
|
</template>
|
||||||
</style>
|
</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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import FileUpload from "@/components/CustomUpload/index.vue";
|
||||||
|
import { getUUID } from "@/utils/common";
|
||||||
|
const formData = ref({});
|
||||||
|
const uuid = ref(getUUID());
|
||||||
</script>
|
</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>
|
</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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user