样式调整

This commit is contained in:
zhujiyan
2024-08-27 18:37:46 +08:00
parent f8995d043b
commit e9a0347b0e
8 changed files with 466 additions and 166 deletions

View File

@@ -50,6 +50,7 @@
:border="border" :border="border"
:row-key="rowKey" :row-key="rowKey"
@selection-change="selectionChange" @selection-change="selectionChange"
class="custom-table-header"
> >
<!-- 默认插槽 --> <!-- 默认插槽 -->
<slot /> <slot />
@@ -331,3 +332,8 @@ defineExpose({
enumMap enumMap
}); });
</script> </script>
<style lang="scss" scoped>
::v-deep .custom-table-header .el-table__header-wrapper .el-table__header{
background-color: red !important; /* 修改为你想要的颜色 */
}
</style>

View File

@@ -1,32 +1,46 @@
<template> <template>
<div class="footer flx-align-center pl10"> <div class="footer flx-align-center pl10">
<el-dropdown> <el-dropdown>
<!-- <span class="el-dropdown-link"> <!-- <span class="el-dropdown-link">
{{ title }} {{ title }}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<arrow-down /> <arrow-down />
</el-icon> </el-icon>
</span> --> </span> -->
<el-button type="primary"> <el-button type="primary">
{{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon> {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button> </el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item @click="title='模拟式模式'">模拟式模式</el-dropdown-item> <el-dropdown-item @click="title = '模拟式模式'"
<el-dropdown-item @click="title='数字式模式'">数字式模式</el-dropdown-item> >模拟式模块</el-dropdown-item
<el-dropdown-item @click="title='对比式模式'">对比式模式</el-dropdown-item> >
<el-dropdown-item @click="title = '数字式模式'"
</el-dropdown-menu> >数字式模块</el-dropdown-item
</template> >
</el-dropdown> <el-dropdown-item @click="title = '对比式模式'"
<!-- <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a> --> >对比式模块</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<p> <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a></p>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, computed } from "vue"; import { ref, reactive, computed } from "vue";
const title=ref('模拟式模式') const title = ref("模拟式模块");
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "./index.scss"; @import "./index.scss";
.footer{
position: relative;
p{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
}
}
</style> </style>

View File

@@ -23,7 +23,12 @@
/* mask image */ /* mask image */
.mask-image { .mask-image {
padding-right: 50px; padding-right: 50px;
mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent); mask-image: linear-gradient(
90deg,
#000000 0%,
#000000 calc(100% - 50px),
transparent
);
} }
/* custom card */ /* custom card */
@@ -139,15 +144,22 @@
table { table {
width: 100%; width: 100%;
} }
.el-table__header th { .el-table__header th,
height: 45px; .el-table-fixed-column--left th,
.el-table-fixed-column--right th {
// height: 45px;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
color: var(--el-text-color-primary); // color: var(--el-text-color-primary);
background: var(--el-fill-color-light); // background: var(--el-fill-color-light);
height: 40px;
background: var(--el-color-primary) !important;
color: #fff;
} }
.el-table__row { .el-table__row {
height: 45px; // height: 45px;
height: 40px;
font-size: 14px; font-size: 14px;
.move { .move {
cursor: move; cursor: move;
@@ -232,7 +244,9 @@
.el-select { .el-select {
width: 100%; width: 100%;
} }
.el-select-dropdown__item:hover {
background: red !important;
}
// drawer-form 中存在两列 form-item 样式 // drawer-form 中存在两列 form-item 样式
.drawer-multiColumn-form { .drawer-multiColumn-form {
display: flex; display: flex;
@@ -258,6 +272,6 @@
} }
} }
.el-form-item{ .el-form-item {
margin-right: 10px !important; margin-right: 10px !important;
} }

View File

@@ -1,89 +1,346 @@
<template> <template>
<div class="table"> <div class="planList">
<el-table :data="tableData" stripe style="width: 100%; height: 100%"> <ProTable
<el-table-column fixed type="selection" width="55" /> ref="proTable"
<el-table-column align="center" prop="date" label="设备序列号" fixed /> :columns="columns"
<el-table-column :request-api="getTableList"
align="center" :init-param="initParam"
prop="name" :data-callback="dataCallback"
label="设备类型" @drag-sort="sortTable"
/> :height="tableHeight"
<el-table-column >
align="center" <!-- 表格操作 -->
prop="state" <!-- <template #operation="scope">
label="制造厂商" <el-button
/> type="primary"
<el-table-column link
align="center" :icon="View"
prop="address" @click="openDrawer('查看', scope.row)"
label="MAC/IP" >查看</el-button
show-overflow-tooltip >
/> <el-button
<!-- <el-table-column align="center" fixed="right" label="操作" width="120"> type="primary"
<template #default> link
<el-button link type="primary" size="small" @click="handleClick"> :icon="EditPen"
删除 @click="openDrawer('编辑', scope.row)"
</el-button> >导出</el-button
<el-button link type="primary" size="small">修改</el-button> >
</template> <el-button
</el-table-column> --> type="primary"
</el-table> link
:icon="Delete"
@click="deleteAccount(scope.row)"
>删除</el-button
>
</template> -->
</ProTable>
</div> </div>
</template> </template>
<script lang="ts" setup>
import { ref, onMounted } from "vue"; <script setup lang="tsx" name="useProTable">
const handleClick = () => { import { ref, reactive, onMounted } from "vue";
console.log("click"); import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import {
CirclePlus,
Delete,
EditPen,
Download,
Upload,
View,
Refresh,
Search,
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
const tableHeight = ref(0);
tableHeight.value = "350";
// 跳转详情页
const toDetail = () => {
router.push(
`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
);
};
const searchForm = ref({
intervalType: 0,
time: ["2024-08-20", "2024-08-27"],
searchBeginTime: "",
searchEndTime: "",
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0,
});
// ProTable 实例
const proTable = ref<ProTableInstance>();
// 如果表格需要初始化请求参数,直接定义传给 ProTable (之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([]);
// console.log(data, ">>>>>>>>>>>");
// tableList.value = data;
// console.log(tableList.value, "?????????????????????177");
const dataCallback = (data: any) => {
return {
list: data || data.data || data.list,
total: data.length || data.total, //total
};
};
console.log(proTable.value, "proTable.value?proTable.value?proTable.value?");
// 如果你想在请求之前对当前请求参数做一些操作可以自定义如下函数params 为当前所有的请求参数(包括分页),最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
newParams.createTime && (newParams.startTime = newParams.createTime[0]);
newParams.createTime && (newParams.endTime = newParams.createTime[1]);
delete newParams.createTime;
return getPlanList(newParams);
};
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: "selection", fixed: "left", width: 70 },
{
prop: "checkMode",
label: "设备序列号",
render: (scope) => {
return scope.row.checkMode == 0
? "设备1"
: scope.row.checkMode == 1
? "设备2"
: scope.row.checkMode == 2
? "设备3"
: scope.row.checkMode;
},
},
{
prop: "checkMode",
label: "设备类型",
render: (scope) => {
return scope.row.checkMode == 0
? "PQS991"
: scope.row.checkMode == 1
? "PQS882"
: scope.row.checkMode == 2
? "PQS6666"
: scope.row.checkMode;
},
},
{
prop: "checkFrom",
label: "制造厂商",
render: (scope) => {
return scope.row.checkFrom == 0
? "南京灿能"
: scope.row.checkFrom == 1
? "南瑞继保"
: scope.row.checkFrom == 2
? "/"
: scope.row.checkFrom;
},
},
{
prop: "numberFromName",
label: "MAC/IP",
render: (scope) => {
return scope.row.numberFromName == 0
? "192.168.0.1"
: scope.row.numberFromName == 1
? "192.168.0.2"
: scope.row.numberFromName == 2
? "192.168.0.3"
: scope.row.numberFromName;
},
},
// {
// prop: "checkExe",
// label: "检测脚本",
// render: (scope) => {
// return scope.row.checkExe == 0
// ? "国网入网检测脚本(单影响量-模拟式)"
// : scope.row.checkExe == 1
// ? "国网入网检测脚本"
// : scope.row.checkExe == 2
// ? "/"
// : scope.row.checkExe;
// },
// },
// {
// prop: "wctx",
// label: "误差体系",
// render: (scope) => {
// return scope.row.wctx == 0
// ? "Q/GDW 1650.2- 2016"
// : scope.row.wctx == 1
// ? "Q/GDW 10650.2 - 2021"
// : scope.row.wctx == 2
// ? "/"
// : scope.row.wctx;
// },
// },
// {
// prop: "checkStatus",
// label: "检测状态",
// width: 120,
// render: (scope) => {
// return scope.row.checkStatus == 1
// ? "未检测"
// : scope.row.checkStatus == 2
// ? "检测中"
// : scope.row.checkStatus == 3
// ? "检测完成"
// : scope.row.checkStatus;
// },
// },
// {
// prop: "checkReport",
// label: "检测报告",
// width: 120,
// render: (scope) => {
// return scope.row.checkReport == 1
// ? "未生成"
// : scope.row.checkReport == 2
// ? "部分生成"
// : scope.row.checkReport == 3
// ? "全部生成"
// : scope.row.checkReport;
// },
// },
// {
// prop: "checkResult",
// label: "检测结果",
// width: 120,
// render: (scope) => {
// return scope.row.checkReport == 1
// ? "/"
// : scope.row.checkReport == 2
// ? "符合"
// : scope.row.checkReport == 3
// ? "不符合"
// : scope.row.checkReport;
// },
// },
// {
// prop: "parentNode",
// label: "父节点",
// width: 90,
// render: (scope) => {
// return scope.row.checkReport == 0
// ? "/"
// : scope.row.checkReport == 1
// ? "检测计划1"
// : scope.row.checkReport == 2
// ? "检测计划2"
// : scope.row.checkReport == 3
// ? "检测计划3"
// : scope.row.checkReport;
// },
// },
// { prop: "operation", label: "操作", fixed: "right", width: 250 },
]);
//重置查询条件
const resetSearchForm = () => {
searchForm.value = {
intervalType: 0,
time: ["2024-08-20", "2024-08-27"],
searchBeginTime: "",
searchEndTime: "",
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0,
};
};
//查询
const handleSearch = () => {
proTable.value?.getTableList();
};
//重置
const handleRefresh = () => {
proTable.value?.getTableList();
};
// 表格拖拽排序
const sortTable = ({
newIndex,
oldIndex,
}: {
newIndex?: number;
oldIndex?: number;
}) => {
console.log(newIndex, oldIndex);
console.log(proTable.value?.tableData);
ElMessage.success("修改列表排序成功");
}; };
const tableData = [ // 删除用户信息
{ const deleteAccount = async (params: User.ResUserList) => {
date: "B0000F03", await useHandleData(
name: "PQS882", deleteUser,
state: "南京灿能", { id: [params.id] },
city: "Los Angeles", `删除【${params.username}`
address: "192.168.0.0.0",
zip: "CA 90036",
tag: "Home",
},
{
date: "B0000F02",
name: "PQS882",
state: "南京灿能",
city: "Los Angeles",
address: "192.168.0.0.0",
zip: "CA 90036",
tag: "Office",
},
{
date: "B0000F04",
name: "PQS882",
state: "南京灿能",
city: "Los Angeles",
address: "192.168.0.0.0",
zip: "CA 90036",
tag: "Home",
},
{
date: "B0000F01",
name: "PQS882",
state: "南京灿能",
city: "Los Angeles",
address: "192.168.0.0.0",
zip: "CA 90036",
tag: "Office",
},
];
onMounted(() => {
console.log(
tableData,
"tableDatatableDatatableDatatableDatatableDatatableDatatableData"
); );
proTable.value?.getTableList();
};
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, "删除所选用户信息");
proTable.value?.clearSelection();
proTable.value?.getTableList();
};
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
await useHandleData(
resetUserPassWord,
{ id: params.id },
`重置【${params.username}】用户密码`
);
proTable.value?.getTableList();
};
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(
changeUserStatus,
{ id: row.id, status: row.status == 1 ? 0 : 1 },
`切换【${row.username}】用户状态`
);
proTable.value?.getTableList();
};
onMounted(() => {
console.log(proTable.value?.tableData);
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.table { .planList {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
::v-deep .el-select {
width: 150px !important;
}
.el-form {
width: 100%;
display: flex;
flex-wrap: wrap;
.el-form-item {
display: flex;
align-items: center;
justify-content: space-between;
.el-button {
margin: 0 !important;
margin-right: 10px !important;
}
}
}
</style> </style>

View File

@@ -1,26 +1,38 @@
<template> <template>
<div class="plan_tree"> <div class="plan_tree">
<el-input placeholder="请输入计划名称" v-model="searchForm.planName"></el-input> <div class="search_view">
<el-input
placeholder="请输入计划名称"
v-model="searchForm.planName"
></el-input>
<Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;" @click.stop="detail({})" />
</div>
<div class="tree_container"> <div class="tree_container">
<el-tree :data="data" ref="treeRef" :filter-node-method="filterNode" :props="defaultProps" node-key="id" <el-tree
default-expand-all :default-checked-keys="defaultChecked" @node-click="handleNodeClick"> :data="data"
ref="treeRef"
:filter-node-method="filterNode"
:props="defaultProps"
node-key="id"
default-expand-all
:default-checked-keys="defaultChecked"
@node-click="handleNodeClick"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<Platform v-if="!data.pid" style="width:14px;height: 12px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
</span> </span>
</template> </template>
</el-tree> </el-tree>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from "vue"; import { ref, onMounted, defineExpose, watch } from "vue";
import { import { Menu,Platform} from "@element-plus/icons-vue";
Menu const emit = defineEmits(["jump"]);
} from '@element-plus/icons-vue'
const emit = defineEmits(['jump'])
const data: any = ref([]); const data: any = ref([]);
const defaultProps = { const defaultProps = {
children: "children", children: "children",
@@ -30,11 +42,11 @@ const defaultProps = {
const searchForm = ref({ const searchForm = ref({
planName: "", planName: "",
}); });
const defaultChecked = ref([]) const defaultChecked = ref([]);
const getTreeData = (val: any) => { const getTreeData = (val: any) => {
defaultChecked.value = [] defaultChecked.value = [];
data.value = val; data.value = val;
defaultChecked.value.push(data.value[0].children[0].id) defaultChecked.value.push(data.value[0].children[0].id);
}; };
const filterText = ref(""); const filterText = ref("");
const treeRef = ref(); const treeRef = ref();
@@ -55,11 +67,9 @@ const filterNode = (value: string, data) => {
return data.name.includes(value); return data.name.includes(value);
}; };
// 点击详情 // 点击详情
const detail=(e:any) => { const detail = (e: any) => {
emit("jump", e);
emit('jump',e) };
}
onMounted(() => { onMounted(() => {
console.log(); console.log();
}); });
@@ -74,7 +84,18 @@ defineExpose({ getTreeData });
padding: 5px; padding: 5px;
height: calc(100% - 70px); height: calc(100% - 70px);
background-color: #fff; background-color: #fff;
.search_view {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
padding: 0 5px;
box-sizing: border-box;
align-items: center;
.el-input{
margin-top: 6px;
}
}
.el-input { .el-input {
width: 100%; width: 100%;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;

View File

@@ -105,28 +105,6 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 功能选择 -->
<div class="container_function">
<div class="function_title"><p>功能选择</p></div>
<div class="function_main">
<div
class="function_item"
:class="
item.checked ? 'function_item checked_function' : 'function_item'
"
v-for="(item, index) in tabsList"
:key="index"
@click="handleCheckFunction(index)"
>
<div class="item_img">
<img :src="item.img" alt="" />
</div>
<div class="item_text">
<p>{{ item.label }}</p>
</div>
</div>
</div>
</div>
<!-- 饼图 --> <!-- 饼图 -->
<div class="container_charts"> <div class="container_charts">
<div class="charts_info"> <div class="charts_info">
@@ -171,6 +149,28 @@
ref="pieRef3" ref="pieRef3"
></pie> ></pie>
</div> </div>
</div>
<!-- 功能选择 -->
<div class="container_function">
<!-- <div class="function_title"><p>功能选择</p></div> -->
<div class="function_main">
<div
class="function_item"
:class="
item.checked ? 'function_item checked_function' : 'function_item'
"
v-for="(item, index) in tabsList"
:key="index"
@click="handleCheckFunction(index)"
>
<div class="item_img">
<img :src="item.img" alt="" />
</div>
<div class="item_text">
<p>{{ item.label }}</p>
</div>
</div>
</div>
</div> </div>
<!-- 列表数据 --> <!-- 列表数据 -->
<div class="container_table"> <div class="container_table">
@@ -187,10 +187,7 @@ import { useRouter } from "vue-router";
import tree from "../components/tree.vue"; import tree from "../components/tree.vue";
import Table from "../components/table.vue"; import Table from "../components/table.vue";
import { data } from "@/api/plan/static.json"; import { data } from "@/api/plan/static.json";
import { import { Refresh, Search } from "@element-plus/icons-vue";
Refresh,
Search,
} from "@element-plus/icons-vue";
const treeRef = ref(); const treeRef = ref();
const form: any = ref({ const form: any = ref({
activeTabs: 0, //功能选择 activeTabs: 0, //功能选择
@@ -471,7 +468,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
.function_title { .function_title {
height: 100%; height: 100%;
height: 20px;
width: 100px; width: 100px;
// line-height: 70px; // line-height: 70px;
display: flex; display: flex;
@@ -541,7 +538,7 @@ onMounted(() => {
} }
.container_charts { .container_charts {
width: 100%; width: 100%;
height: 200px; min-height: 200px !important;
// border: 2px solid green; // border: 2px solid green;
background-color: #eee; background-color: #eee;
display: flex; display: flex;
@@ -559,6 +556,7 @@ onMounted(() => {
.container_table { .container_table {
width: 100%; width: 100%;
flex: 1; flex: 1;
// height: 400px;
border-radius: 4px; border-radius: 4px;
} }
} }

View File

@@ -42,19 +42,19 @@ const activeIndex = ref("1-1");
const router = useRouter(); const router = useRouter();
const modeList = [ const modeList = [
{ {
name: "模拟式模", name: "模拟式模",
subName: "未启用模拟式检测计划", subName: "未启用模拟式检测计划",
img: "/src/assets/images/dashboard/1.svg", img: "/src/assets/images/dashboard/1.svg",
isActive: true, isActive: true,
}, },
{ {
name: "数字式模", name: "数字式模",
subName: "启用数字检测计划", subName: "启用数字检测计划",
img: "/src/assets/images/dashboard/2.svg", img: "/src/assets/images/dashboard/2.svg",
isActive: false, isActive: false,
}, },
{ {
name: "对比式模", name: "对比式模",
subName: "启用对比式检测计划", subName: "启用对比式检测计划",
img: "/src/assets/images/dashboard/3.svg", img: "/src/assets/images/dashboard/3.svg",
isActive: false, isActive: false,

View File

@@ -63,6 +63,10 @@
>查询</el-button >查询</el-button
> >
<el-button :icon="Refresh" @click="handleRefresh">重置</el-button> <el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
<el-button type="primary" :icon="Upload" @click="handleRefresh">导入</el-button>
<el-button type="primary" :icon="Check" @click="handleRefresh">合并</el-button>
<el-button type="primary" :icon="Plus" @click="handleRefresh">新增</el-button>
<el-button type="danger" :icon="Delete" @click="handleRefresh">删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -150,6 +154,8 @@ import {
Download, Download,
Upload, Upload,
View, View,
Check,
Plus,
Refresh, Refresh,
Search, Search,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
@@ -270,7 +276,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
}, },
{ {
prop: "numberFromName", prop: "numberFromName",
label: "数字源名称", label: "源名称",
render: (scope) => { render: (scope) => {
return scope.row.numberFromName == 0 return scope.row.numberFromName == 0
? "分钟统计数据最大值" ? "分钟统计数据最大值"
@@ -349,22 +355,6 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
: scope.row.checkReport; : scope.row.checkReport;
}, },
}, },
{
prop: "parentNode",
label: "父节点",
width: 90,
render: (scope) => {
return scope.row.checkReport == 0
? "/"
: scope.row.checkReport == 1
? "检测计划1"
: scope.row.checkReport == 2
? "检测计划2"
: scope.row.checkReport == 3
? "检测计划3"
: scope.row.checkReport;
},
},
{ prop: "operation", label: "操作", fixed: "right", width: 250 }, { prop: "operation", label: "操作", fixed: "right", width: 250 },
]); ]);
//重置查询条件 //重置查询条件