Skip to content

B
bill-manager-ui
Commit 291db38f authored by YIyiyi's avatar YIyiyi
Browse files
Options

feat: 数据集市静态页面

parent d5232f63
Show whitespace changes
Inline Side-by-side
Showing with 814 additions and 5 deletions
admin_2/.env.development
View file @ 291db38f
#开发环境
NODE_ENV = "development"
VUE_APP_API_BASE_URL=http://192.168.0.98:11078
VUE_APP_API_IMG_URL=http://192.168.0.98:11078/
VUE_APP_API_BASE_URL=http://112.19.80.237:11078
admin_2/.env.production
View file @ 291db38f
......@@ -3,4 +3,3 @@ NODE_ENV = production
VUE_APP_API_BASE_URL=/basics_api
VUE_APP_API_portal_URL=/portal_home
VUE_APP_API_IMG_URL = /basics_api/
admin_2/src/assets/css/common.less
View file @ 291db38f
......@@ -157,3 +157,11 @@
margin: 0px !important;
}
.search-popover{
box-shadow: 0 0 12px 0 rgba(24, 144, 255, 0.1);
border: 1px solid var(--primary);
.popper__arrow::after{
border-bottom-color: var(--primary) !important;
}
}
\ No newline at end of file
admin_2/src/components/autoRegister/AreaTree.vue 0 → 100644
View file @ 291db38f
<template>
<div class="h-full w-full">
<el-tree
:data="siteTree"
:props="defaultProps"
node-key="id"
highlight-current
:current-node-key="curKey"
accordion
:expand-on-click-node="false"
:default-expanded-keys="[curKey]"
@node-click="handleNodeClick"
>
<div slot-scope="{ node }">
<i class="el-icon-location primary"></i>
{{ node.label }}
</div>
</el-tree>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "AreaTree",
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
curKey: "1",
};
},
computed: {
...mapState("user", ["areaTree"]),
siteTree() {
let obj = {
id: "",
label: "全部数据",
type: "site",
children: [],
};
obj.children = this.areaTree;
return [obj];
},
},
created() {},
methods: {
handleNodeClick(data) {
if (data.type != "site") {
return;
}
console.log(data);
},
},
};
</script>
<style lang="less" scoped>
:deep(.el-tree) {
min-width: 100%;
display: inline-block !important;
}
:deep(.el-tree--highlight-current) {
.el-tree-node.is-current > .el-tree-node__content {
color: var(--primary);
background: #0000;
}
}
:deep(.el-tree-node__content) {
align-self: baseline;
}
</style>
admin_2/src/components/autoRegister/TabHeader.vue 0 → 100644
View file @ 291db38f
<template>
<div class="tab-header">
<i v-if="icon" :class="['mr-2', 'primary', icon]"></i>
<span class="label">{{ label }}</span>
</div>
</template>
<script>
export default {
name: "TabHeader",
props: {
icon: {
type: String,
default: "",
},
label: {
type: String,
default: "",
},
},
};
</script>
<style lang="less" scoped>
.tab-header {
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding: 0px 15px;
font-size: 14px;
position: relative;
cursor: default;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #e4e7ed;
z-index: 1;
}
.label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
}
}
</style>
admin_2/src/layouts/Layouts.vue
View file @ 291db38f
......@@ -23,11 +23,33 @@
</template>
<script>
import { mapMutations } from "vuex";
import Header from "./components/Header.vue";
import { getSiteTree } from "@/api/site";
export default {
components: {
Header,
},
data() {
return {};
},
created() {
this.getSiteTree();
},
methods: {
...mapMutations("user", ["SET_areaTree"]),
// 获取个人站点树
async getSiteTree() {
let res = await getSiteTree({
page: 1,
size: -1,
});
if (res.data.code == 1) {
let { siteTree } = res.data.data;
this.SET_areaTree(siteTree);
}
},
},
};
</script>
......
admin_2/src/pages/engine/Engine.vue
View file @ 291db38f
......@@ -123,6 +123,7 @@ export default {
justify-content: center;
background-color: #fff;
cursor: pointer;
transition: height 100ms;
}
.router-link-active {
height: 100%;
......
admin_2/src/pages/market/EvaluateReport.vue 0 → 100644
View file @ 291db38f
<template>
<div class="flex h-full w-full flex-col gap-4">
<!-- 顶部搜索 -->
<div class="w-ful flex items-center justify-between">
<div class="flex items-center gap-4">
<el-button type="primary" size="small">导出</el-button>
<div>评价次数：<span class="take-total-num">223次</span></div>
<div class="text-[14px] text-[#999]">
统计时间段：2024-12-12 ~ 2024-12-12
</div>
</div>
<div class="flex items-center">
<el-form ref="form" inline size="small" :model="form">
<el-form-item>
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
</el-form-item>
</el-form>
</div>
<el-popover
placement="bottom"
trigger="click"
popper-class="search-popover"
>
<div class="w-full">
<el-form ref="form2" inline size="small" :model="form2">
<el-form-item>
<el-checkbox-group v-model="form2.type">
<el-checkbox label="预约业务" name="type"></el-checkbox>
<el-checkbox label="呼叫业务" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
</el-form-item>
</el-form>
</div>
<el-button type="text" slot="reference">
高级搜索
<i class="el-icon-d-arrow-right"></i>
</el-button>
</el-popover>
</div>
<div class="main max-w-[1396px] flex-1">
<y-table border :tableData="tableData" :column="column"> </y-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
form: {},
form2: {
type: [],
},
tableData: [],
column: [
{
type: "selection",
width: "50",
align: "center",
fixed: "left",
},
{
type: "index",
label: "序号",
width: "50",
align: "center",
fixed: "left",
},
{
label: "站点名称",
align: "center",
width: "150",
},
{
label: "业务名称",
align: "center",
width: "150",
},
{
label: "预约编码",
align: "center",
width: "150",
},
{
label: "叫号状态",
align: "center",
width: "150",
},
{
label: "窗口名",
align: "center",
width: "150",
},
{
label: "窗口编号",
align: "center",
width: "150",
},
{
label: "流水号",
align: "center",
width: "150",
},
{
label: "呼叫转移",
align: "center",
width: "150",
},
{
label: "身份证号",
align: "center",
width: "150",
},
{
label: "姓名",
align: "center",
width: "150",
},
{
label: "手机号",
align: "center",
width: "150",
},
{
label: "工作人员",
align: "center",
width: "150",
},
{
label: "工号",
align: "center",
width: "150",
},
{
label: "取号方式",
align: "center",
width: "150",
},
{
label: "部门名称",
align: "center",
width: "150",
},
{
label: "大厅名称",
align: "center",
width: "150",
},
{
label: "取号时间",
align: "center",
width: "150",
},
{
label: "叫号时间",
align: "center",
width: "150",
},
{
label: "结束时间",
align: "center",
width: "150",
},
{
label: "等待时间",
align: "center",
width: "150",
},
{
label: "办理时间",
align: "center",
width: "150",
},
{
label: "扩展编号",
align: "center",
width: "150",
},
{
label: "操作",
align: "center",
fixed: "right",
width: "100",
},
],
};
},
};
</script>
<style lang="less" scoped>
.take-total-num {
color: var(--primary);
font-weight: 600;
}
:deep(.el-form--inline) {
display: flex;
align-items: center;
.el-form-item {
margin-bottom: 0px;
}
}
.el-icon-d-arrow-right {
transform: rotate(90deg);
}
</style>
admin_2/src/pages/market/Market.vue
View file @ 291db38f
<template>
<div>数据集市</div>
<div class="flex h-full w-full gap-5">
<div
class="area-tree-box flex h-full w-[20%] flex-col rounded-[4px] bg-white"
>
<TabHeader icon="el-icon-notebook-2" label="组织架构"></TabHeader>
<div class="w-full flex-1 overflow-auto p-[20px]">
<AreaTree></AreaTree>
</div>
</div>
<div class="flex h-full flex-1 flex-col bg-white">
<el-tabs :value="activeKey" @tab-click="changeRouter">
<el-tab-pane v-for="v in subMenus" :key="v.path" :name="v.path">
<template slot="label">
<i v-if="v.meta.icon" :class="['mr5', 'primary', v.meta.icon]"></i>
<span class="tab-label">{{ v.meta.title }}</span>
</template>
</el-tab-pane>
</el-tabs>
<div class="out-box flex-1 p-[20px]">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {};
import { findBottomSubarrays } from "@/utils";
export default {
data() {
return {
subMenus: [],
};
},
computed: {
activeKey() {
return this.$route.path;
},
},
created() {
this.getSubMenus();
},
methods: {
changeRouter(e) {
this.$router.push(e.name);
},
// 获取当前顶层路由下的所有子路由
getSubMenus() {
let path = this.$route?.meta.activeMenu
? this.$route.meta.activeMenu
: this.$route.path;
let options = this.$router.options.routes[0].children;
let curRouters = options.filter((v) => v.path == path);
this.subMenus = findBottomSubarrays(curRouters).filter(
(v) => !v.meta.hidden
);
},
},
};
</script>
<style lang="less" scoped></style>
admin_2/src/pages/market/QueueUpReport.vue 0 → 100644
View file @ 291db38f
<template>
<div class="flex h-full w-full flex-col gap-4">
<!-- 顶部搜索 -->
<div class="w-ful flex items-center justify-between">
<div class="flex items-center gap-4">
<el-button type="primary" size="small">导出</el-button>
<div>取号次数：<span class="take-total-num">223次</span></div>
<div class="text-[14px] text-[#999]">
统计时间段：2024-12-12 ~ 2024-12-12
</div>
</div>
<div class="flex items-center">
<el-form ref="form" inline size="small" :model="form">
<el-form-item>
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
</el-form-item>
</el-form>
</div>
<el-popover
placement="bottom"
trigger="click"
popper-class="search-popover"
>
<div class="w-full">
<el-form ref="form2" inline size="small" :model="form2">
<el-form-item>
<el-checkbox-group v-model="form2.type">
<el-checkbox label="预约业务" name="type"></el-checkbox>
<el-checkbox label="呼叫业务" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
</el-form-item>
</el-form>
</div>
<el-button type="text" slot="reference">
高级搜索
<i class="el-icon-d-arrow-right"></i>
</el-button>
</el-popover>
</div>
<div class="main max-w-[1396px] flex-1">
<y-table border :tableData="tableData" :column="column"> </y-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
form: {},
form2: {
type: [],
},
tableData: [],
column: [
{
type: "selection",
width: "50",
align: "center",
fixed: "left",
},
{
type: "index",
label: "序号",
width: "50",
align: "center",
fixed: "left",
},
{
label: "站点名称",
align: "center",
width: "150",
},
{
label: "业务名称",
align: "center",
width: "150",
},
{
label: "预约编码",
align: "center",
width: "150",
},
{
label: "叫号状态",
align: "center",
width: "150",
},
{
label: "窗口名",
align: "center",
width: "150",
},
{
label: "窗口编号",
align: "center",
width: "150",
},
{
label: "流水号",
align: "center",
width: "150",
},
{
label: "呼叫转移",
align: "center",
width: "150",
},
{
label: "身份证号",
align: "center",
width: "150",
},
{
label: "姓名",
align: "center",
width: "150",
},
{
label: "手机号",
align: "center",
width: "150",
},
{
label: "工作人员",
align: "center",
width: "150",
},
{
label: "工号",
align: "center",
width: "150",
},
{
label: "取号方式",
align: "center",
width: "150",
},
{
label: "部门名称",
align: "center",
width: "150",
},
{
label: "大厅名称",
align: "center",
width: "150",
},
{
label: "取号时间",
align: "center",
width: "150",
},
{
label: "叫号时间",
align: "center",
width: "150",
},
{
label: "结束时间",
align: "center",
width: "150",
},
{
label: "等待时间",
align: "center",
width: "150",
},
{
label: "办理时间",
align: "center",
width: "150",
},
{
label: "扩展编号",
align: "center",
width: "150",
},
{
label: "操作",
align: "center",
fixed: "right",
width: "100",
},
],
};
},
};
</script>
<style lang="less" scoped>
.take-total-num {
color: var(--primary);
font-weight: 600;
}
:deep(.el-form--inline) {
display: flex;
align-items: center;
.el-form-item {
margin-bottom: 0px;
}
}
.el-icon-d-arrow-right {
transform: rotate(90deg);
}
</style>
admin_2/src/router/index.js
View file @ 291db38f
......@@ -75,6 +75,27 @@ const routes = [
icon: "el-icon-office-building",
title: "数据集市",
},
redirect: "/market/queueupreport",
children: [
{
path: "/market/queueupreport",
hideChildrenInMenu: true,
component: () => import("@/pages/market/QueueUpReport"),
meta: {
title: "排队数据报表",
activeMenu: "/market",
},
},
{
path: "/market/evaluatereport",
hideChildrenInMenu: true,
component: () => import("@/pages/market/EvaluateReport"),
meta: {
title: "评价数据报表",
activeMenu: "/market",
},
},
],
},
{
path: "/system",
......
admin_2/src/store/modules/user.js
View file @ 291db38f
......@@ -9,6 +9,7 @@ export default {
sysName: "", // 系统名称
sysLogo: "", // 系统logo
path: "", // 门户跳转过来的路由
areaTree: [], // 个人区域树
},
getters: {
siteId(state) {
......@@ -52,6 +53,9 @@ export default {
SET_token(state, token) {
state.token = token;
},
SET_areaTree(state, areaTree) {
state.areaTree = areaTree;
},
// 重置所有仓库状态
reset: () => {},
......
admin_2/src/utils/index.js
View file @ 291db38f
......@@ -97,3 +97,20 @@ export function uniqueFunc(arr, field) {
const res = new Map();
return arr.filter((item) => !res.has(item[field]) && res.set(item[field], 1));
}
// 递归获取底层子数组
export function findBottomSubarrays(arr) {
let bottomSubarrays = [];
function recursiveSearch(subArr) {
for (let item of subArr) {
if (item.children && item.children.length) {
recursiveSearch(item.children);
} else {
bottomSubarrays.push(...subArr);
break;
}
}
}
recursiveSearch(arr);
return bottomSubarrays;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment