同步6/16
This commit is contained in:
Zy
@@ -1,144 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const searchFilterType = ['住户姓名', '住户编号', '手机号', '身份证号'];
|
||||
|
||||
const SearchForm = ref({
|
||||
searchFilter: 0,
|
||||
searchText: ''
|
||||
});
|
||||
|
||||
const Search = () => {
|
||||
console.log(SearchForm.value);
|
||||
};
|
||||
const Reset = () => {
|
||||
SearchForm.value = {
|
||||
searchFilter: 0,
|
||||
searchText: ''
|
||||
};
|
||||
};
|
||||
|
||||
// ! ==================================================
|
||||
const queryParams = ref({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
});
|
||||
const userlist = Array.from({ length: 10 }).fill({
|
||||
id: 1,
|
||||
name: '张三',
|
||||
phone: '13888888888',
|
||||
type: '普通用户',
|
||||
address: '湖北省武汉市武昌区',
|
||||
status: '正常',
|
||||
idcard: '420000000000000000'
|
||||
});
|
||||
const total = ref(100);
|
||||
const columns = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名称'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '用户类型'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '用户状态'
|
||||
},
|
||||
{
|
||||
prop: 'idcard',
|
||||
label: '身份证号',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '手机号'
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: '用户地址',
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
function handleEdit(row: any) {
|
||||
console.log(row);
|
||||
}
|
||||
function handleDelete(row: any) {
|
||||
console.log(row);
|
||||
}
|
||||
function handleReview(row: any) {
|
||||
console.log(row);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="houseUserBox w-full mt-4">
|
||||
<div class="houseUserTitle">住户查询</div>
|
||||
<div class="houseUserContent flex flex-col">
|
||||
<div class="houserUser_SearchBox flex items-center mb-2">
|
||||
<div class="flex-1 flex items-center">
|
||||
<div class="min-w-20">精准查询</div>
|
||||
<!-- 下拉筛选 -->
|
||||
<el-select class="max-w-40" v-model="SearchForm.searchFilter" placeholder="请选择">
|
||||
<el-option v-for="(item, index) in searchFilterType" :key="index" :label="item" :value="index"></el-option>
|
||||
</el-select>
|
||||
<!-- 搜索框 -->
|
||||
<el-input style="flex: 0.5" class="ml-4" placeholder="请输入" v-model="SearchForm.searchText"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-button class="SearchBtn" type="primary" @click="Search">搜索</el-button>
|
||||
<el-button class="ml-4 ResetBtn" @click="Reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="houseUser_Search_ListBox flex-1">
|
||||
<el-table :data="userlist">
|
||||
<el-table-column type="index" width="80" />
|
||||
<el-table-column prop="name" align="center" label="住户姓名" />
|
||||
<el-table-column prop="name" align="center" label="类型" />
|
||||
<el-table-column prop="name" align="center" label="状态" />
|
||||
<el-table-column prop="name" align="center" label="证件号码" />
|
||||
<el-table-column prop="name" align="center" label="手机号" />
|
||||
<el-table-column prop="name" align="center" label="房间" />
|
||||
<el-table-column label="操作" align="center" width="350">
|
||||
<template #default="scope">
|
||||
<el-button text>审核</el-button>
|
||||
<el-button text>编辑</el-button>
|
||||
<el-button text>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.houseUserBox {
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
.houseUserTitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.houseUserContent {
|
||||
.houserUser_SearchBox {
|
||||
justify-content: space-between;
|
||||
.ResetBtn {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
}
|
||||
}
|
||||
.houseUser_Search_ListBox {
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
:deep(.el-table) {
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
src/views/workbench/components/inandout.vue
Normal file
287
src/views/workbench/components/inandout.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="echarts">
|
||||
<div class="nav flex flex-items-center justify-between">
|
||||
<div>
|
||||
<span class="ecarts_title">近一周收入支出趋势</span>
|
||||
<span class="echarts_units">单位（元）</span>
|
||||
</div>
|
||||
<div class="flex flex-items-center justify-center">
|
||||
<div
|
||||
class="actions"
|
||||
@click="changeActive_index(index)"
|
||||
:class="{ active: active_index === index }"
|
||||
v-for="(item, index) in actions"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsbody">
|
||||
<Echarts :key="active_index" :options="chartConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { workSpaceIncomeTrendListApi, workSpaceOutcomeTrendListApi } from '@/api/workflow';
|
||||
import { getLast7Days } from '@/utils/time';
|
||||
import { EChartsOption } from 'echarts';
|
||||
|
||||
const active_index = ref(0);
|
||||
const actions = ref(['全部', '收入', '支出']);
|
||||
|
||||
// 初始化 chartConfig
|
||||
const chartConfig = shallowRef<EChartsOption>({
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '10%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
data: ['收入', '支出'] // 默认显示两个
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: getLast7Days()
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: []
|
||||
});
|
||||
|
||||
// 定义基础样式配置，避免重复
|
||||
const baseLineConfig = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#e2edff' },
|
||||
{ offset: 1, color: '#f2f9ff' }
|
||||
]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
};
|
||||
|
||||
const incomeStyle = {
|
||||
...baseLineConfig,
|
||||
id: 'income-series', // 添加唯一 ID
|
||||
name: '收入',
|
||||
itemStyle: { color: '#1a75ff' },
|
||||
lineStyle: { color: '#1a75ff' },
|
||||
label: { ...baseLineConfig.label, color: '#3f8afc' }
|
||||
};
|
||||
|
||||
const outcomeStyle = {
|
||||
...baseLineConfig,
|
||||
id: 'outcome-series', // 添加唯一 ID
|
||||
name: '支出',
|
||||
itemStyle: { color: '#46d3a4' },
|
||||
lineStyle: { color: '#46d3a4' },
|
||||
label: { ...baseLineConfig.label, color: '#46d3a4' }
|
||||
};
|
||||
|
||||
async function changeChartConfig(val: number) {
|
||||
const id = localStorage.getItem('villageid');
|
||||
if (!id) return;
|
||||
chartConfig.value = {
|
||||
...chartConfig.value,
|
||||
animation: false, // 关闭动画防止残留
|
||||
legend: { data: [] },
|
||||
xAxis: { data: [] },
|
||||
series: []
|
||||
};
|
||||
let dates: string[] = [];
|
||||
let incomes: number[] = [];
|
||||
let expenditures: string[] = [];
|
||||
|
||||
try {
|
||||
// 1. 定义请求 Promise，如果不需请求则 resolve 空数组
|
||||
const incomePromise = val === 0 || val === 1 ? workSpaceIncomeTrendListApi(id) : Promise.resolve([]);
|
||||
const outcomePromise = val === 0 || val === 2 ? workSpaceOutcomeTrendListApi(id) : Promise.resolve([]);
|
||||
// 2. 并行等待，确保顺序一致：[收入数据, 支出数据]
|
||||
const [incomeRes, outcomeRes] = await Promise.all([incomePromise, outcomePromise]);
|
||||
console.log(incomeRes, outcomeRes);
|
||||
|
||||
// 处理收入数据
|
||||
if (incomeRes && incomeRes.length > 0) {
|
||||
const sortedIncome = incomeRes.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
dates = sortedIncome.map((item) => item.date);
|
||||
incomes = sortedIncome.map((item) => item.income);
|
||||
}
|
||||
|
||||
// 处理支出数据
|
||||
if (outcomeRes && outcomeRes.length > 0) {
|
||||
const sortedOutcome = outcomeRes.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
// 如果 dates 为空（例如只有支出数据），则使用支出的日期
|
||||
if (dates.length === 0) {
|
||||
dates = sortedOutcome.map((item) => item.date);
|
||||
}
|
||||
expenditures = sortedOutcome.map((item) => item.expenditure);
|
||||
}
|
||||
|
||||
// 构建 Series
|
||||
const newSeries: any[] = [];
|
||||
const newLegendData: string[] = [];
|
||||
|
||||
// 根据选择添加 Series
|
||||
if (val === 0 || val === 1) {
|
||||
// 全部 或 收入
|
||||
newSeries.push({
|
||||
...incomeStyle,
|
||||
data: incomes
|
||||
});
|
||||
newLegendData.push('收入');
|
||||
}
|
||||
|
||||
if (val === 0 || val === 2) {
|
||||
// 全部 或 支出
|
||||
newSeries.push({
|
||||
...outcomeStyle,
|
||||
data: expenditures
|
||||
});
|
||||
newLegendData.push('支出');
|
||||
}
|
||||
|
||||
// 3. 完全替换 chartConfig 对象
|
||||
// 使用浅拷贝展开运算符创建新对象，确保 Vue 检测到引用变化
|
||||
chartConfig.value = {
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '10%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
data: newLegendData
|
||||
// 如果希望点击图例不隐藏（因为只有一个时没必要），可以配置 selectedMode，但这里保持默认
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates,
|
||||
boundaryGap: false // 折线图通常设置为 false，让线从Y轴开始
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: newSeries
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('获取图表数据失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
function changeActive_index(val: number) {
|
||||
active_index.value = val;
|
||||
changeChartConfig(val);
|
||||
}
|
||||
|
||||
// 初始化加载
|
||||
changeChartConfig(0);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// echarts
|
||||
.echartsbox {
|
||||
height: inherit;
|
||||
.echarts {
|
||||
margin-right: 20px;
|
||||
flex: 1;
|
||||
height: 450px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.ecarts_title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: #303133;
|
||||
line-height: 25px;
|
||||
}
|
||||
.echarts_units {
|
||||
margin-left: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #98a4b2;
|
||||
line-height: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.echarts_all_baoxiu {
|
||||
height: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #98a4b2;
|
||||
line-height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.echarts_all_arrow {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #ccc;
|
||||
transform: rotateZ(45deg);
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 60px;
|
||||
height: 22px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: #f6f7fb;
|
||||
color: #99a5b3;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
&:hover {
|
||||
color: #036aff;
|
||||
background-color: #036cff25;
|
||||
}
|
||||
}
|
||||
.actions.active {
|
||||
color: white;
|
||||
background-color: #036aff;
|
||||
}
|
||||
}
|
||||
.echartsbody {
|
||||
flex: 1;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
382
src/views/workbench/components/quick.vue
Normal file
382
src/views/workbench/components/quick.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div class="quicly_box">
|
||||
<div class="quickly_item" v-for="(item, index) in quickBox" :key="index" @click="handleRouter(item.menuPath)">
|
||||
<div class="quickly_item_icon" v-if="item.menuIcon">
|
||||
<svg-icon :icon-class="item.menuIcon" />
|
||||
</div>
|
||||
<div class="quickly_item_content">{{ item.menuName }}</div>
|
||||
<!-- <div class="actionsbox">
|
||||
<div class="routeactions">
|
||||
<el-icon><Position /></el-icon>
|
||||
<span style="padding-left: 0.1rem">跳转</span>
|
||||
</div>
|
||||
<div class="deleteaction">
|
||||
<el-icon><Delete /></el-icon>
|
||||
<span style="padding-left: 0.1rem">删除</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="deleteaction" @click="delteRoute(item.id)">
|
||||
<el-icon class="icons"><Remove /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="addQuieckDialog" class="quickly_item add">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<span>添加</span>
|
||||
</div>
|
||||
|
||||
<!-- 添加快捷入口 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="repairProjectFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<!-- <el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入" />
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="图标" prop="icon">
|
||||
<el-input v-model="form.icon" placeholder="请输入" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="展示页面" prop="path">
|
||||
<!-- <el-input v-model="form.path" placeholder="请输入" /> -->
|
||||
<el-cascader
|
||||
@change="handleCascader"
|
||||
clearable
|
||||
:props="{ value: 'path', label: 'name', children: 'children' }"
|
||||
v-model="path"
|
||||
:options="quicklylist"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="path">
|
||||
<el-input-number v-model="form.sortOrder"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitQuick">确 定</el-button>
|
||||
<el-button>取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { addQuicklyshortcut, delQuicklyshortcut, getQuicklyshortcut } from '@/api/workflow';
|
||||
import { usePermissionStore } from '@/store/modules/permission';
|
||||
|
||||
// ! 快捷入口
|
||||
const quickBox = ref<
|
||||
{
|
||||
'id': string;
|
||||
'menuId': null;
|
||||
'menuName': string;
|
||||
'menuPath': string;
|
||||
'menuIcon': string;
|
||||
'sortOrder': number;
|
||||
}[]
|
||||
>([]);
|
||||
const router = useRouter();
|
||||
function handleRouter(val: string) {
|
||||
router.push({
|
||||
path: val
|
||||
});
|
||||
}
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: '添加快捷入口'
|
||||
});
|
||||
const form = ref({
|
||||
menuName: '',
|
||||
menuPath: '',
|
||||
menuIcon: '',
|
||||
sortOrder: 1
|
||||
});
|
||||
const path = ref([]);
|
||||
const rules = {
|
||||
menuPath: [{ required: true, trigger: 'blur', message: '请选择快捷入口页面' }]
|
||||
};
|
||||
const quicklylist = ref([]);
|
||||
function addQuieckDialog() {
|
||||
form.value = {
|
||||
menuName: '',
|
||||
menuPath: '',
|
||||
menuIcon: '',
|
||||
sortOrder: 1
|
||||
};
|
||||
const permissionStore = usePermissionStore();
|
||||
const routes = permissionStore.getDefaultRoutes();
|
||||
handleroutestoshowlist(routes);
|
||||
dialog.visible = true;
|
||||
}
|
||||
function getquicklist() {
|
||||
getQuicklyshortcut().then((res) => {
|
||||
quickBox.value = res.data;
|
||||
});
|
||||
}
|
||||
getquicklist();
|
||||
function handleroutestoshowlist(rotues) {
|
||||
// 1. 输入校验：确保 routes 是数组
|
||||
if (!Array.isArray(rotues)) {
|
||||
return [];
|
||||
}
|
||||
const arr = rotues.map((ele) => _hanle(null, ele, 1)).filter((item) => item);
|
||||
quicklylist.value = arr;
|
||||
}
|
||||
function _hanle(parentRoute, currentRoute, level) {
|
||||
// 非页面路由
|
||||
if (currentRoute.hidden && level === 1) {
|
||||
return null;
|
||||
}
|
||||
// 2. 辅助判断：排除常见的非列表/首页关键词（根据业务需求调整）
|
||||
// 使用正则边界匹配，避免误伤 (如 'main' 不匹配 'domain')
|
||||
const excludeKeywords = /(edit|main|Main|view)/i;
|
||||
if (excludeKeywords.test(currentRoute.path)) {
|
||||
return null;
|
||||
}
|
||||
if (!currentRoute.meta) {
|
||||
if (currentRoute.children && currentRoute.children.length > 0) {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const obj = {
|
||||
name: currentRoute.meta.title || '',
|
||||
icon: currentRoute.meta.icon || '',
|
||||
path: currentRoute.path,
|
||||
level: level,
|
||||
children: []
|
||||
};
|
||||
|
||||
// 3. 路径拼接
|
||||
if (parentRoute) {
|
||||
if (currentRoute.path.startsWith('/')) {
|
||||
obj.path = currentRoute.path;
|
||||
} else {
|
||||
const parentPath = parentRoute.path.endsWith('/') ? parentRoute.path.slice(0, -1) : parentRoute.path;
|
||||
const childPath = currentRoute.path.startsWith('/') ? currentRoute.path : '/' + currentRoute.path;
|
||||
obj.path = parentPath + childPath;
|
||||
}
|
||||
}
|
||||
// 4. 递归处理子节点
|
||||
if (level < 2 && currentRoute.children && Array.isArray(currentRoute.children)) {
|
||||
obj.children = currentRoute.children.map((item) => _hanle(obj, item, level + 1)).filter((item) => item !== null); // 过滤掉 null 值
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function handleCascader(val) {
|
||||
const parentpath = val[0];
|
||||
const childrenpath = val[1];
|
||||
const find = quicklylist.value.find((item) => item.path === parentpath);
|
||||
if (find) {
|
||||
const find2 = find.children.find((item) => item.path === childrenpath);
|
||||
if (find2) {
|
||||
form.value = {
|
||||
...form.value,
|
||||
menuIcon: find2.icon,
|
||||
menuName: find2.name,
|
||||
menuPath: find2.path
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
function submitQuick() {
|
||||
addQuicklyshortcut(form.value).then((res) => {
|
||||
ElMessage.success(res.msg);
|
||||
dialog.visible = false;
|
||||
getquicklist();
|
||||
});
|
||||
}
|
||||
function delteRoute(id: string) {
|
||||
delQuicklyshortcut(id).then(() => {
|
||||
getquicklist();
|
||||
});
|
||||
}
|
||||
// ! 快捷入口
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.quicly_box {
|
||||
max-height: 410px;
|
||||
overflow-y: auto;
|
||||
padding-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@media (max-width: 1950px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-height: 410px;
|
||||
}
|
||||
@media (max-width: 1750px) {
|
||||
max-height: 550px;
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
max-height: 550px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
max-height: 550px;
|
||||
}
|
||||
gap: 10px;
|
||||
|
||||
.quickly_item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
height: 56px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px 12px 12px 12px;
|
||||
border: 1px solid #c0daff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
font-size: 0.685rem;
|
||||
@media (max-width: 2000px) {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
@media (max-width: 1500px) {
|
||||
height: 46px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@media (max-width: 1250px) {
|
||||
height: 36px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0084ff09;
|
||||
}
|
||||
.quickly_item_icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.quickly_item_content {
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
// &:hover {
|
||||
// .actionsbox {
|
||||
// opacity: 1;
|
||||
// .routeactions {
|
||||
// transform: rotateY(0deg);
|
||||
// }
|
||||
// .deleteaction {
|
||||
// transform: rotateY(0deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&:hover {
|
||||
.deleteaction {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.deleteaction {
|
||||
position: absolute;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: #bbbbbb42;
|
||||
border: 1px solid #bbbbbb42;
|
||||
text-align: center;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 0 0 0 0.5rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 15px;
|
||||
@media (max-width: 2000px) {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
border-radius: 0 0 0 0.5rem;
|
||||
line-height: 1.4rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
border-radius: 0 0 0 0.5rem;
|
||||
line-height: 1.7rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media (max-width: 1500px) {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
border-radius: 0 0 0 0.5rem;
|
||||
line-height: 1.7rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media (max-width: 1250px) {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 0 0 0 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
i.icons {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
i.icons {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.routeactions,
|
||||
.deleteaction {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
flex: 0.5;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
@media (max-width: 1250px) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.routeactions {
|
||||
background-color: #0083ff;
|
||||
transform-origin: left center;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
.deleteaction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
transform-origin: right center;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.add {
|
||||
text-align: center;
|
||||
color: #036aff;
|
||||
vertical-align: baseline;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/views/workbench/components/repairechartsAll.vue
Normal file
101
src/views/workbench/components/repairechartsAll.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="echarts">
|
||||
<div class="nav flex flex-items-center justify-between">
|
||||
<div>
|
||||
<span class="ecarts_title">近一周报修量趋势</span>
|
||||
<span class="echarts_units">单位（个）</span>
|
||||
</div>
|
||||
<div class="flex flex-items-center justify-center">
|
||||
<span class="echarts_all_baoxiu">全部报修</span>
|
||||
<i class="echarts_all_arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsbody">
|
||||
<repairEcharts />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import repairEcharts from './repairEcharts.vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// echarts
|
||||
.echartsbox {
|
||||
height: inherit;
|
||||
.echarts {
|
||||
margin-right: 20px;
|
||||
flex: 1;
|
||||
height: 450px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.ecarts_title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: #303133;
|
||||
line-height: 25px;
|
||||
}
|
||||
.echarts_units {
|
||||
margin-left: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #98a4b2;
|
||||
line-height: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.echarts_all_baoxiu {
|
||||
height: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #98a4b2;
|
||||
line-height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.echarts_all_arrow {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #ccc;
|
||||
transform: rotateZ(45deg);
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 60px;
|
||||
height: 22px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: #f6f7fb;
|
||||
color: #99a5b3;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
&:hover {
|
||||
color: #036aff;
|
||||
background-color: #036cff25;
|
||||
}
|
||||
}
|
||||
.actions.active {
|
||||
color: white;
|
||||
background-color: #036aff;
|
||||
}
|
||||
}
|
||||
.echartsbody {
|
||||
flex: 1;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
src/views/workbench/components/todo.vue
Normal file
173
src/views/workbench/components/todo.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="h-full">
|
||||
<div class="noticeNav">
|
||||
<div class="noticNav_title">创建办事记录</div>
|
||||
<el-button type="primary" @click="submitTodo">提交</el-button>
|
||||
</div>
|
||||
<div class="noticeBox">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="需求方姓名">
|
||||
<el-input placeholder="请输入姓名" v-model="noticForm.seekName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="办事时间">
|
||||
<el-date-picker
|
||||
v-model="noticForm.handleTime"
|
||||
type="datetime"
|
||||
clearable
|
||||
placeholder="年-月-日 时:分"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="办事内容">
|
||||
<el-input type="textarea" v-model="noticForm.content" :rows="2" placeholder="请输入办事内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件">
|
||||
<el-upload
|
||||
:auto-upload="false"
|
||||
class="upload-demo"
|
||||
:file-list="fileList"
|
||||
:action="uploadUrl"
|
||||
:multiple="true"
|
||||
ref="uploadRef"
|
||||
name="files"
|
||||
:headers="headerToken()"
|
||||
:show-file-list="true"
|
||||
:on-remove="handleAvatarRemove"
|
||||
:on-change="handleProgress"
|
||||
>
|
||||
<div class="uploadBtn flex flex-items-center">
|
||||
<el-icon><Upload /></el-icon>
|
||||
<span>上传文件</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { addHandleLog, uploadAttachments } from '@/api/system/HandleLog';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { UploadFiles, UploadProps, UploadUserFile } from 'element-plus';
|
||||
|
||||
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/handleLog/uploadAttachments';
|
||||
const noticForm = ref({
|
||||
content: '',
|
||||
seekName: '',
|
||||
phone: '',
|
||||
handleTime: '',
|
||||
handlePosition: '',
|
||||
handleLogFileList: [] //附件列表
|
||||
});
|
||||
const fileList = ref<UploadUserFile[]>([]);
|
||||
const uploadRef = ref();
|
||||
function headerToken() {
|
||||
const useStore = useUserStore();
|
||||
return {
|
||||
Authorization: 'Bearer ' + useStore.token
|
||||
};
|
||||
}
|
||||
|
||||
const handleAvatarRemove: UploadProps['onRemove'] = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
||||
fileList.value = uploadFiles;
|
||||
};
|
||||
const handleProgress: UploadProps['onChange'] = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
||||
fileList.value = uploadFiles;
|
||||
};
|
||||
const btnloading = ref(false);
|
||||
function submitTodo() {
|
||||
btnloading.value = true;
|
||||
noticForm.value.handleLogFileList = [];
|
||||
if (fileList.value.length > 0) {
|
||||
const formData = new FormData();
|
||||
fileList.value.forEach((item) => {
|
||||
formData.append('files', item.raw);
|
||||
});
|
||||
uploadAttachments(formData).then((res) => {
|
||||
if (res.data.success.length > 0) {
|
||||
res.data.success.forEach((item) => {
|
||||
const obj = {
|
||||
fileName: item.fileName,
|
||||
filePath: item.url,
|
||||
ossId: item.ossId
|
||||
};
|
||||
noticForm.value.handleLogFileList.push(obj);
|
||||
});
|
||||
}
|
||||
addHandleLog(noticForm.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功');
|
||||
resetTodo();
|
||||
})
|
||||
.finally(() => (btnloading.value = false));
|
||||
});
|
||||
} else {
|
||||
addHandleLog(noticForm.value)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功');
|
||||
resetTodo();
|
||||
})
|
||||
.finally(() => (btnloading.value = false));
|
||||
}
|
||||
}
|
||||
|
||||
function resetTodo() {
|
||||
noticForm.value = {
|
||||
content: '',
|
||||
seekName: '',
|
||||
phone: '',
|
||||
handleTime: '',
|
||||
handlePosition: '',
|
||||
handleLogFileList: [] //附件列表
|
||||
};
|
||||
fileList.value = [];
|
||||
uploadRef.value && uploadRef.value.clearFiles();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.noticeNav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
& .noticNav_title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.noticeBox {
|
||||
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
.upload-demo,
|
||||
:deep(.el-upload.el-upload--text) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
&:deep(.el-upload-list) {
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadBtn {
|
||||
height: 30px;
|
||||
line-height: 20px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(204, 204, 204, 1);
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
src/views/workbench/components/usertable.vue
Normal file
210
src/views/workbench/components/usertable.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="userBox">
|
||||
<div class="title">住户查询</div>
|
||||
<div class="searbox">
|
||||
<div>精准查询</div>
|
||||
<el-select v-model="seachervalue" placeholder="住户姓名" style="width: 240px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-input v-model.trim="searchInput" placeholder="请输入">
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="handleSearch">查询 </el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="name" align="center" label="姓名" width="200" />
|
||||
<el-table-column prop="type" align="center" label="类型" width="80">
|
||||
<template #default="scope">
|
||||
<DictTag :options="com_resident_type" :value="scope.row.type"></DictTag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" align="center" label="与主业主关系" width="150">
|
||||
<template #default="scope">
|
||||
<DictTag :options="com_resident_relationship" :value="scope.row.ownerRelationship"></DictTag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" align="center" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<DictTag :options="com_review" :value="scope.row.status"></DictTag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="idCard" align="center" label="证件号码" />
|
||||
<el-table-column prop="phone" align="center" label="手机号" width="120" />
|
||||
<el-table-column prop="houseName" show-overflow-tooltip align="center" label="房间" />
|
||||
<el-table-column prop="address" fixed="right" width="230" align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" text @click="shenhe(scope.row)"> 审核</el-button>
|
||||
<el-button type="primary" text @click="edit(scope.row)"> 编辑</el-button>
|
||||
<el-button type="primary" text @click="deleteFun(scope.row)"> 删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:background="false"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { delResident, listResident } from '@/api/system/resident';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
|
||||
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
|
||||
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
|
||||
|
||||
const router = useRouter();
|
||||
// ! table
|
||||
const seachervalue = ref('name');
|
||||
const searchInput = ref('');
|
||||
const loading = ref(true);
|
||||
const total = ref(0);
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: '',
|
||||
idCard: '',
|
||||
phone: ''
|
||||
}
|
||||
});
|
||||
const { queryParams } = toRefs(data);
|
||||
// 核心：计算连续序号
|
||||
const indexMethod = (index) => {
|
||||
return (queryParams.value.pageNum - 1) * queryParams.value.pageSize + index + 1;
|
||||
};
|
||||
const options = [
|
||||
{
|
||||
value: 'name',
|
||||
label: '住户姓名'
|
||||
},
|
||||
{
|
||||
value: 'phone',
|
||||
label: '住户手机号'
|
||||
},
|
||||
{
|
||||
value: 'idCard',
|
||||
label: '住户身份证'
|
||||
}
|
||||
];
|
||||
function handleSearch() {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: '',
|
||||
idCard: '',
|
||||
phone: ''
|
||||
};
|
||||
queryParams.value[seachervalue.value] = searchInput.value;
|
||||
getList();
|
||||
}
|
||||
function handleReset() {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: '',
|
||||
idCard: '',
|
||||
phone: ''
|
||||
};
|
||||
searchInput.value = '';
|
||||
getList();
|
||||
}
|
||||
const tableData = ref([]);
|
||||
async function getList() {
|
||||
const res = await listResident(queryParams.value);
|
||||
tableData.value = res.rows;
|
||||
total.value = res.total;
|
||||
}
|
||||
getList();
|
||||
|
||||
function shenhe(row) {
|
||||
router.push({
|
||||
path: '/house/ResidentMain',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
}
|
||||
function edit(row) {
|
||||
router.push({
|
||||
path: '/house/addResident',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
}
|
||||
async function deleteFun(row) {
|
||||
const _ids = row?.id;
|
||||
await proxy?.$modal.confirm('该信息删除后无法恢复，确定要删除吗？').finally(() => (loading.value = false));
|
||||
await delResident(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
}
|
||||
// ! table
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 住户查询
|
||||
.userBox {
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
||||
border: 2px solid #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.searbox {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
div {
|
||||
width: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.el-select {
|
||||
width: 160px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-input {
|
||||
flex: 0.3;
|
||||
}
|
||||
.el-button {
|
||||
color: #0083ff;
|
||||
border-color: #0083ff;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
|
||||
&.el-button--primary {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tablebox {
|
||||
flex: 1;
|
||||
.el-table {
|
||||
min-height: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/workbench/components/villageAllinfo.vue
Normal file
88
src/views/workbench/components/villageAllinfo.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="villageBox">
|
||||
<div class="title">小区概况</div>
|
||||
<div class="villageBody">
|
||||
<div class="village_items" v-for="(item, index) in props.list" :key="index">
|
||||
<div class="icon">
|
||||
<el-image :src="item.icon"></el-image>
|
||||
</div>
|
||||
<div class="infobox">
|
||||
<div class="infoTitle">{{ item.name }}</div>
|
||||
<div class="infoNum">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
list: any[];
|
||||
}>();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 小区概况
|
||||
.villageBox {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
border: 2px solid #ffffff;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
.title {
|
||||
height: 25px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
line-height: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.villageBody {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap; /* 自动换行 */
|
||||
gap: 16px;
|
||||
.village_items {
|
||||
flex: 1;
|
||||
min-width: 160px; /* 小屏自动单列 */
|
||||
margin-right: 10px;
|
||||
min-height: 109px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
|
||||
box-shadow: 0px 4px 8px 0px rgba(0, 104, 255, 0.06);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 1px solid #ffffff;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 46px;
|
||||
box-shadow: inset 0px 0px 20px 0px #ffffff;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #ffffff;
|
||||
margin-right: 15px;
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.infobox {
|
||||
margin-right: 20px;
|
||||
.infoTitle {
|
||||
height: 18px;
|
||||
font-weight: 400;
|
||||
color: #4e5969;
|
||||
line-height: 18px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.infoNum {
|
||||
height: 35px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
src/views/workbench/components/weather.vue
Normal file
156
src/views/workbench/components/weather.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="villageInfoBox flex">
|
||||
<div class="flex-1 flex-items-center">
|
||||
<div class="iconbox">
|
||||
<div
|
||||
class="icon_box_text"
|
||||
:title="`${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power} 温度${weather_icon.temperature}°C`"
|
||||
>
|
||||
{{ getWeatherIcon(weather_icon.iconvalue) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips" v-show="weather_icon.title">
|
||||
{{ `${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power}风` }}
|
||||
<span>温度{{ weather_icon.temperature }}°C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="villageinfo flex-1">
|
||||
<div class="villagename">{{ props.villageinfo.villageName }}</div>
|
||||
<div class="week">
|
||||
<span style="padding-right: 10px">{{ new Date().toLocaleDateString().replaceAll('/', '-') }}</span>
|
||||
<span>{{ numToWeek2(new Date().getDay()) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="white1"></i>
|
||||
<i class="white2"></i>
|
||||
<i class="white3"></i>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getWeatherIcon } from '@/utils/weather';
|
||||
import { numToWeek2 } from '@/utils/time';
|
||||
|
||||
const props = defineProps({
|
||||
villageinfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const weather_icon = ref({
|
||||
iconvalue: null,
|
||||
title: '',
|
||||
// 当前温度 °C
|
||||
temperature: null,
|
||||
// 风向
|
||||
'wind_direction': '',
|
||||
// 风力等级
|
||||
'wind_power': '',
|
||||
// 相对湿度 %
|
||||
'humidity': null
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 小区
|
||||
.villageInfoBox {
|
||||
height: 127px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background: #036aff;
|
||||
padding: 0 2rem;
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
gap: 30px;
|
||||
.tips {
|
||||
font-size: small;
|
||||
color: #ffffff77;
|
||||
margin-top: 10px;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.iconbox {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
font-size: 60px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: default;
|
||||
margin: 0 auto;
|
||||
|
||||
.icon_box_text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
font-size: 70px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 60px;
|
||||
line-height: 0.9;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.villageinfo {
|
||||
margin-left: 20px;
|
||||
.villagename {
|
||||
height: 30px;
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
line-height: 30px;
|
||||
}
|
||||
.week {
|
||||
margin-top: 5px;
|
||||
height: 23px;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: #ffffff;
|
||||
line-height: 23px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 白色装饰
|
||||
.white1,
|
||||
.white2,
|
||||
.white3 {
|
||||
position: absolute;
|
||||
background: #d9d9d9;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 50%) scale(1.5);
|
||||
opacity: 0.1;
|
||||
}
|
||||
.white2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
opacity: 0.08;
|
||||
transform: translate(-20%, 63%) scale(1.5);
|
||||
}
|
||||
.white3 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
opacity: 0.05;
|
||||
transform: translate(-20%, 65%) scale(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,485 +1,9 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="navbar flex flex-items-center">
|
||||
<svg-icon icon-class="viliageIcon" />
|
||||
<span class="ml-2">{{ villageinfo.villageName }}</span>
|
||||
</div>
|
||||
|
||||
<el-row class="mt-20px">
|
||||
<el-col :span="24">
|
||||
<div class="viliageBox">
|
||||
<div class="title">小区概况</div>
|
||||
<div class="viliageInfo">
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="viliageIcon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">123</div>
|
||||
</div>
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">123</div>
|
||||
</div>
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">123</div>
|
||||
</div>
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">123</div>
|
||||
</div>
|
||||
<div class="vilage_item">
|
||||
<div class="info">
|
||||
<div class="info_title">住户总数量</div>
|
||||
<div class="info_value">10000</div>
|
||||
</div>
|
||||
<div class="icon">123</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mt-20px">
|
||||
<el-col :span="9">
|
||||
<el-card>
|
||||
<div class="titlebox">
|
||||
<div>近一周报修量趋势</div>
|
||||
<div class="actionbox">
|
||||
<span>全部报修</span>
|
||||
<i class="arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartbox">
|
||||
<repairEcharts></repairEcharts>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-card>
|
||||
<div class="titlebox">
|
||||
<div>近一周收入支出趋势</div>
|
||||
<div class="arrowto echartTypes">
|
||||
<div class="echarsActions">
|
||||
<div
|
||||
v-for="(item, index) in echartType"
|
||||
:key="index"
|
||||
class="echarsAction"
|
||||
:class="{
|
||||
active: index === currentEchartType
|
||||
}"
|
||||
@click="echartTypeChange(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartbox">
|
||||
<repairEcharts></repairEcharts>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<div class="quickBox">
|
||||
<div class="quickBox_title">快捷入口</div>
|
||||
<div class="quickBox_body">
|
||||
<div class="quick_item" v-for="(item, index) in quickBox" @click="handleRouter(item.url)" :key="index">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- <div class="quick_item quick_add">+ 添加</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mt-20px">
|
||||
<div class="todoBox">
|
||||
<div class="todoBox_title">
|
||||
<div>创建办事记录</div>
|
||||
<el-button size="small" type="primary">提交</el-button>
|
||||
</div>
|
||||
<div class="todoBox_body">
|
||||
<el-form label-width="80px" label-position="top" size="small" v-model="Todo">
|
||||
<el-form-item label="需求方姓名">
|
||||
<el-input v-model="Todo.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="办事时间">
|
||||
<el-date-picker
|
||||
v-model="Todo.createtime"
|
||||
type="datetime"
|
||||
placeholder="yyyy-mm-dd --:--"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
date-format="YYYY MM DD"
|
||||
time-format="HH:mm"
|
||||
>
|
||||
<template #prev-month>
|
||||
<el-icon><CaretLeft /></el-icon>
|
||||
</template>
|
||||
<template #next-month>
|
||||
<el-icon><CaretRight /></el-icon>
|
||||
</template>
|
||||
<template #prev-year>
|
||||
<el-icon>
|
||||
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke-width="1" fill-rule="evenodd">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #next-year>
|
||||
<el-icon>
|
||||
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke-width="1" fill-rule="evenodd">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="办事内容">
|
||||
<el-input v-model="Todo.todoContent" placeholder="请输入办事内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件">
|
||||
<el-upload ref="uploadRef" class="upload-demo" action="" :auto-upload="false" style="width: 100% !important">
|
||||
<template #trigger>
|
||||
<div class="uploadFileBox" style="width: 100%">
|
||||
<el-button type="default" style="width: 100%">
|
||||
<template #icon>
|
||||
<el-icon><Upload /></el-icon>
|
||||
</template>
|
||||
上传文件
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card class="mt-20px">
|
||||
<HouseUser></HouseUser>
|
||||
</el-card>
|
||||
<div class="p-2 h-full flex flex-col">
|
||||
<div class="flex-1 color-gray flex h-full font-size-6 flex-center">维护中，敬请期待...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import repairEcharts from './components/repairEcharts.vue';
|
||||
import HouseUser from './components/HouseUser.vue';
|
||||
import { getVillageByIdAPI } from '@/api/system/community';
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
const villageinfo = ref({
|
||||
'villageId': null,
|
||||
'villageName': ''
|
||||
});
|
||||
// 获取小区
|
||||
function getVillageinfo() {
|
||||
const id = localStorage.getItem('villageid');
|
||||
getVillageByIdAPI(id).then((res) => {
|
||||
villageinfo.value = res.data;
|
||||
houseStore.updateVilageinfo(res.data);
|
||||
});
|
||||
}
|
||||
getVillageinfo();
|
||||
// ! 快捷入口
|
||||
const quickBox = ref([
|
||||
{
|
||||
name: '新建用户',
|
||||
url: '/house/resident'
|
||||
},
|
||||
{
|
||||
name: '车位管理',
|
||||
url: '/carArea/parking'
|
||||
},
|
||||
{
|
||||
name: '新建月卡',
|
||||
url: '/carArea/monthCard'
|
||||
},
|
||||
{
|
||||
name: '新建报修',
|
||||
url: '/repair/repairlist'
|
||||
},
|
||||
{
|
||||
name: '访客记录',
|
||||
url: '/repair/visitorList'
|
||||
},
|
||||
{
|
||||
name: '账单管理',
|
||||
url: '/repair/visitorList'
|
||||
}
|
||||
]);
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
const router = useRouter();
|
||||
function handleRouter(val: string) {
|
||||
router.push({
|
||||
path: val
|
||||
});
|
||||
}
|
||||
// ! 快捷入口
|
||||
|
||||
// ! 代办事项
|
||||
const Todo = ref({
|
||||
name: '',
|
||||
createtime: '',
|
||||
todoContent: '',
|
||||
file: null
|
||||
});
|
||||
// ! 代办事项
|
||||
|
||||
// ! 切换echarts
|
||||
// 切换echarts
|
||||
const echartType = ['全部', '收入', '支出'];
|
||||
|
||||
const currentEchartType = ref(0);
|
||||
const echartTypeChange = (type: number) => {
|
||||
currentEchartType.value = type;
|
||||
};
|
||||
// ! 切换echarts
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
padding: 20px;
|
||||
.navbar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.viliageBox {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.15);
|
||||
height: 220px;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 18px;
|
||||
}
|
||||
.viliageInfo {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
gap: 40px;
|
||||
.vilage_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 120px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.2);
|
||||
border: 1px solid rgba(26, 117, 255, 0.2);
|
||||
padding: 25px 20px;
|
||||
.info_title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.info_value {
|
||||
font-size: 25px;
|
||||
}
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.titlebox {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.actionbox {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
color: #1975ff;
|
||||
.arrow {
|
||||
border-top-color: #1975ff;
|
||||
border-right-color: #1975ff;
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid transparent;
|
||||
transform: rotateZ(45deg);
|
||||
border-top-color: #ccc;
|
||||
border-right-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.echartbox {
|
||||
height: 492px;
|
||||
}
|
||||
.arrowto {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.echartTypes {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
.echarsActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.echarsAction {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 60px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border: 1px solid #1a75ff;
|
||||
margin-left: -1px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #1a75ff;
|
||||
&.active {
|
||||
background-color: #1a75ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 快捷入口
|
||||
.quickBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10px;
|
||||
.quickBox_title {
|
||||
line-height: 25px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.quickBox_body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
.quick_item {
|
||||
height: 40px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border: 1px solid rgba(26, 117, 255, 1);
|
||||
color: #1975ff;
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1500px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
.quick_add {
|
||||
border: 1px solid rgba(26, 117, 255, 1);
|
||||
color: rgba(26, 117, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 待办事项
|
||||
.todoBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
.todoBox_title {
|
||||
line-height: 30px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.todoBox_body {
|
||||
&:deep(.el-form-item__label) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:deep(.el-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:deep(.el-upload, ) {
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
|
||||
width: 100% !important;
|
||||
}
|
||||
// 上传文件
|
||||
.uploadFileBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user