提交 caa0221c authored 作者: 刘旭's avatar 刘旭

更新

上级 b7b03b03
......@@ -9,7 +9,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"ace-builds": "^1.11.2",
"@turf/turf": "^6.5.0",
"axios": "^0.24.0",
"echarts": "^5.3.0",
"element-plus": "^2.2.12",
......@@ -17,17 +17,13 @@
"eslint-plugin-vue": "^8.2.0",
"lodash": "^4.17.21",
"mockjs": "^1.1.0",
"moment": "^2.29.1",
"nprogress": "^0.2.0",
"qs": "^6.10.3",
"socket.io-client": "^4.5.0",
"stylus": "^0.59.0",
"uuid": "^9.0.0",
"vue": "^3.2.33",
"vue-demi": "^0.13.1",
"vue-i18n": "^9.1.10",
"vue-router": "4",
"vue-socket.io": "^3.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
......
差异被折叠。
<template>
<svg aria-hidden="true" class="svg-icon">
<use :xlink:href="symbolId" :fill="color" />
</svg>
<svg aria-hidden="true" class="svg-icon">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon',
},
iconClass: {
type: String,
required: false
},
color: {
type: String,
default: ''
}
})
prefix: {
type: String,
default: "icon",
},
iconClass: {
type: String,
required: false,
},
color: {
type: String,
default: "",
},
});
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
}
</style>
\ No newline at end of file
</style>
<template>
<div>
<div ref="commonEchartRef" :style="{ height: height, width: width }"></div>
</div>
</template>
<script setup lang='ts'>
import { ref, onMounted, watchEffect } from 'vue'
import useEcharts from '@/hooks/useEcharts';
//接收父组件传递的参数
//withDefaults:设置默认值
const props = withDefaults(defineProps<{
width?: string,
height: string,
optios: any
}>(), {
width: '100%',
height: '360px'
})
//定义ref属性
const commonEchartRef = ref<HTMLElement>()
onMounted(() => {
//叹号:断定commonEchartRef.value存在
const { setOptions, resize } = useEcharts(commonEchartRef.value!)
watchEffect(() => {
setOptions(props.optios)
})
//自适应
window.addEventListener('resize', () => {
resize();
})
})
</script>
<style scoped lang='scss'>
</style>
\ No newline at end of file
......@@ -4,17 +4,17 @@
</el-icon>
</template>
<script setup lang="ts">
import { computed } from "vue"
import { Fold, Expand } from "@element-plus/icons-vue"
import { useStore } from "@/store/index"
const store = useStore()
import { Fold, Expand } from "@element-plus/icons-vue";
import { useStore } from "@/store/index";
const store = useStore();
const status = computed(() => {
return store.getters["menu/getCollapse"]
})
return store.getters["menu/getCollapse"];
});
//图标切换
const changeIcon = () => {
store.commit("menu/setCollapse", !status.value)
}
store.commit("menu/setCollapse", !status.value);
};
</script>
<style scoped lang="scss">
.fa-icons {
......
......@@ -11,19 +11,18 @@
</el-menu>
</template>
<script setup lang="ts">
import { computed } from "vue"
import { useRoute } from "vue-router"
import { useStore } from "@/store/index"
import MenuItem from "./MenuItem.vue"
import MenuLogo from "@/layout/menu/MenuLogo.vue"
import { useStore } from "@/store/index";
import MenuItem from "./MenuItem.vue";
import MenuLogo from "@/layout/menu/MenuLogo.vue";
// setup语法糖中 定义的数据和方法,直接可以在模板中使用,无需要 return
const store = useStore()
const store = useStore();
//当前路由
const route = useRoute()
const route = useRoute();
const activeIdex = computed(() => {
const { path } = route
return path
})
const { path } = route;
return path;
});
//菜单数据
const menuList = [
{
......@@ -53,11 +52,11 @@ const menuList = [
icon: "DataLine",
},
},
]
];
const isCollapse = computed(() => {
return store.getters["menu/getCollapse"]
})
return store.getters["menu/getCollapse"];
});
</script>
<style scoped>
@keyframes logoAnimation {
......
<template>
<el-tabs
v-model="activeTab"
@tab-click="clickBtn"
type="card"
closable
@tab-remove="removeTab"
>
<el-tab-pane
v-for="item in tabsList"
:key="item.path"
:label="item.title"
:name="item.path"
></el-tab-pane>
</el-tabs>
<el-tabs
v-model="activeTab"
@tab-click="clickBtn"
type="card"
closable
@tab-remove="removeTab"
>
<el-tab-pane
v-for="item in tabsList"
:key="item.path"
:label="item.title"
:name="item.path"
></el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'
import { ITabe } from '@/store/types'
const route = useRoute()
const router = useRouter()
const store = useStore()
//获取tabs数据
const tabsList = computed(() => {
import { useStore } from "@/store";
import { ITabe } from "@/store/types";
const route = useRoute();
const router = useRouter();
const store = useStore();
//获取tabs数据
const tabsList = computed(() => {
// return store.getters['getTabs']
return store.getters['tabs/getTabs']
})
//当前激活的选项卡,他跟当前激活的路由是一样的;
const activeTab = ref('')
const setActiveTab = () => {
activeTab.value = route.path
}
//删除选项卡
const removeTab = (targetName: string) => {
if (targetName === '/home') return
return store.getters["tabs/getTabs"];
});
//当前激活的选项卡,他跟当前激活的路由是一样的;
const activeTab = ref("");
const setActiveTab = () => {
activeTab.value = route.path;
};
//删除选项卡
const removeTab = (targetName: string) => {
if (targetName === "/home") return;
//选项卡数据列表
const tabs = tabsList.value
const tabs = tabsList.value;
//当前激活的选项卡
let activeName = activeTab.value
let activeName = activeTab.value;
if (activeName === targetName) {
tabs.forEach((tab: ITabe, index: number) => {
if (tab.path === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.path
}
}
})
tabs.forEach((tab: ITabe, index: number) => {
if (tab.path === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.path;
}
}
});
}
//重新设置当前激活的选项卡
activeTab.value = activeName
activeTab.value = activeName;
//重新设置选项卡数据
store.state.tabs.tabsList = tabs.filter(
(tab: ITabe) => tab.path !== targetName
)
(tab: ITabe) => tab.path !== targetName
);
//跳转路由
router.push({ path: activeName })
}
//添加选项卡
const addTab = () => {
router.push({ path: activeName });
};
//添加选项卡
const addTab = () => {
//从当前路由获取path和title
const { path, meta } = route
const { path, meta } = route;
//通过vuex设置
const tab: ITabe = {
path: path,
title: meta.title as string,
}
path: path,
title: meta.title as string,
};
// store.commit('addTabe', tab);
store.commit('tabs/addTabe', tab)
}
//监听路由的变化
watch(
store.commit("tabs/addTabe", tab);
};
//监听路由的变化
watch(
() => route.path,
() => {
//设置激活的选项卡
setActiveTab()
//把当前路由添加到选项卡数据
addTab()
//设置激活的选项卡
setActiveTab();
//把当前路由添加到选项卡数据
addTab();
}
)
//解决刷新数据丢失的问题
const beforeRefresh = () => {
if (route.path != '/login') {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('tabsView', JSON.stringify(tabsList.value))
})
let tabSesson = sessionStorage.getItem('tabsView')
if (tabSesson) {
let oldTabs = JSON.parse(tabSesson)
if (oldTabs.length > 0) {
store.state.tabs.tabsList = oldTabs
);
//解决刷新数据丢失的问题
const beforeRefresh = () => {
if (route.path != "/login") {
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("tabsView", JSON.stringify(tabsList.value));
});
let tabSesson = sessionStorage.getItem("tabsView");
if (tabSesson) {
let oldTabs = JSON.parse(tabSesson);
if (oldTabs.length > 0) {
store.state.tabs.tabsList = oldTabs;
}
}
}
}
}
onMounted(() => {
};
onMounted(() => {
//解决刷新选项卡数据丢失的问题
beforeRefresh()
beforeRefresh();
//设置激活的选项卡
setActiveTab()
setActiveTab();
//把当前路由添加到选项卡数据
addTab()
})
//选项卡点击事件
const clickBtn = (tab: any) => {
const { props } = tab
addTab();
});
//选项卡点击事件
const clickBtn = (tab: any) => {
const { props } = tab;
//跳转路由
router.push({ path: props.name })
}
router.push({ path: props.name });
};
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
:deep(.el-tabs__header) {
margin: 0px;
}
}
:deep(.el-tabs__item) {
:deep(.el-tabs__item) {
height: 26px !important;
line-height: 26px !important;
text-align: center !important;
......@@ -124,24 +123,24 @@
color: #495060;
font-size: 12px !important;
padding: 0px 10px !important;
}
}
:deep(.el-tabs__nav) {
:deep(.el-tabs__nav) {
border: none !important;
}
}
:deep(.is-active) {
:deep(.is-active) {
border-bottom: 1px solid transparent !important;
border: 1px solid #42b983 !important;
background-color: #42b983 !important;
color: #fff !important;
}
}
:deep(.el-tabs__item:hover) {
:deep(.el-tabs__item:hover) {
color: #495060 !important;
}
}
:deep(.is-active:hover) {
:deep(.is-active:hover) {
color: #fff !important;
}
}
</style>
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/index.vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "@/layout/index.vue";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Layout,
redirect: '/home',
children: [
{
path: '/home',
component: () => import('@/views/home/index.vue'),
name: 'home',
{
path: "/",
component: Layout,
redirect: "/home",
children: [
{
path: "/home",
component: () => import("@/views/home/index.vue"),
name: "home",
meta: {
title: "人才库基础设置",
icon: "",
},
},
{
path: "/talentPool",
component: () => import("@/views/talentPool/index.vue"),
name: "talentPool",
meta: {
title: "人才库",
icon: "",
},
},
],
},
{
path: "/login",
name: "login",
component: () => import("@/views/login/login.vue"),
},
{
path: "/bigData",
component: () => import("@/views/bigData/index.vue"),
name: "bigData",
meta: {
title: '人才库基础设置',
icon: '',
title: "人才大数据",
icon: "",
},
},
{
path: '/talentPool',
component: () => import('@/views/talentPool/index.vue'),
name: 'talentPool',
meta: {
title: '人才库',
icon: '',
},
},
{
path: '/bigData',
component: () => import('@/views/bigData/index.vue'),
name: 'bigData',
meta: {
title: '人才大数据',
icon: '',
},
},
],
},
{
path: '/login',
name: 'login',
component: () => import('@/views/login/login.vue'),
},
{
path: '/404',
name: '404',
component: () => import('@/views/exception/404.vue'),
},
// {
// path: '/:catchAll(.*)',
// redirect: '/404'
// }
]
},
{
path: "/404",
name: "404",
component: () => import("@/views/exception/404.vue"),
},
// {
// path: '/:catchAll(.*)',
// redirect: '/404'
// }
];
export const asyncRoutes: Array<RouteRecordRaw> = []
export const asyncRoutes: Array<RouteRecordRaw> = [];
const router = createRouter({
history: createWebHashHistory(),
// routes = routes:routes
routes,
})
history: createWebHashHistory(),
// routes = routes:routes
routes,
});
export function addRoutes(routes: any) {
router.addRoute(routes)
router.addRoute(routes);
}
export default router
export default router;
import { request } from "../config"
export const kingdeeList = (data?: any) => {
return request({
url: "/department/index",
method: "post",
data,
})
}
import { AddDeptModel } from '@/services/api/department/DeptModel'
import { reactive } from 'vue'
export default function useBaseModel() {
//表单验证
const rules = reactive({
parentName: [{
required: true,
message: '请选择上级部门',
trigger: 'change',
}],
name: [{
required: true,
message: '请填写部门名称',
trigger: 'change',
}]
})
//表单数据
const dialogModel = reactive<AddDeptModel>({
type: "",
id: "",
pid: "",
parentName: "",
manager: "",
deptAddress: "",
deptPhone: "",
name: "",
deptCode: "",
orderNum: ""
})
return {
rules,
dialogModel
}
}
\ No newline at end of file
import { ref } from 'vue'
import { AddDeptModel, DeptModel, ListParm } from "@/services/api/department/DeptModel"
import { EditType } from '@/type/BaseEnum';
import useInstance from '@/hooks/useInstance';
import { addDeptApi, editDeptApi, deleteDeptApi } from '@/services/api/department/deptAPI';
import { Result, StatusCode } from '@/type/BastType';
export default function useDept(getDeptList: any, searchParm: ListParm) {
const { global, proxy } = useInstance();
//(vue的官方给的方式)打包的时候会报错
// const addDeptRef = ref<InstanceType<typeof AddAndEdit>>();
const addDeptRef = ref<{ show: (type: string, row?: DeptModel) => void }>();
//搜索
const serachBtn = () => {
getDeptList();
}
//重置
const resetBtn = () => {
//清空搜索框
searchParm.searchName = ''
getDeptList();
}
//新增
const addBtn = () => {
//父组件调用子组件的show方法
addDeptRef.value?.show(EditType.ADD);
}
//编辑
const editBtn = (row: DeptModel) => {
//父组件调用子组件的show方法
addDeptRef.value?.show(EditType.EDIT, row);
}
//删除
const deleteBtn = async (id: number) => {
console.log(global)
let parm = {
id: id
}
const confirm = await global.$myconfirm('确定删除该数据吗?')
if (confirm) {
//执行删除操作
let res = await deleteDeptApi(parm)
if (res && res.code == StatusCode.Success) {
//信息提示
global.$message({ message: res.msg, type: 'success' })
//刷新表格
getDeptList();
}
}
}
//保存
const save = async (parm: AddDeptModel) => {
//提交表单
let res: Result;
if (parm.type == EditType.ADD) { //新增
res = await addDeptApi(parm)
} else { //编辑
res = await editDeptApi(parm)
}
if (res && res.code == StatusCode.Success) {
//信息提示
global.$message({ message: res.msg, type: 'success' })
//刷新表格
getDeptList();
}
}
return {
serachBtn,
addBtn,
editBtn,
deleteBtn,
save,
addDeptRef,
resetBtn
}
}
\ No newline at end of file
/**
* 表格列表的业务逻辑
*/
import { reactive, onMounted, ref, nextTick } from 'vue'
import { DeptListRes, ListParm } from "@/services/api/department/DeptModel"
import { getDeptListApi } from '@/services/api/department/deptAPI'
export default function useDepaTable() {
//表格的高度
const tableHeigth = ref(0);
//定义列表查询参数
const searchParm = reactive<ListParm>({
searchName: ''
})
//定义表格的数据
const tableData = reactive<DeptListRes>({
list: []
})
//获取表格数据
const getDeptList = async () => {
let res = await getDeptListApi(searchParm);
if (res && res.code == 200) {
console.log('加载表格数据')
console.log(res.data)
tableData.list = res.data;
}
}
//首次加载
onMounted(() => {
getDeptList();
nextTick(() => {
tableHeigth.value = window.innerHeight - 200
})
})
return {
searchParm,
tableData,
getDeptList,
tableHeigth
}
}
\ No newline at end of file
import { DeptModel, SelectNode } from '@/services/api/department//DeptModel'
import { reactive, ref } from 'vue'
import { getDeptParentApi } from '@/services/api/department/deptAPI'
import { ElTree } from 'element-plus';
export default function useParent() {
//树的ref属性
const parentTree = ref<InstanceType<typeof ElTree>>();
//上级树的数据
const treeData = reactive({
data: []
})
//选中的数据
const selectNode = reactive<SelectNode>({
id: '',
name: ''
})
//树的属性
const defaultProps = reactive({
children: 'children', //设置树的children
label: 'name', //设置树的名字属性字段
})
//树的点击事件
const handleNodeClick = (data: DeptModel) => {
selectNode.id = data.id;
selectNode.name = data.name
console.log(selectNode)
}
//获取树的数据
const getTreeData = async () => {
let res = await getDeptParentApi();
if (res && res.code == 200) {
treeData.data = res.data;
}
}
//加号和减号的点击事件
const openBtn = (data: DeptModel) => {
console.log(data)
//设置展开或者关闭
data.open = !data.open;
if (parentTree.value) {
parentTree.value.store.nodesMap[data.id].expanded = !data.open;
}
}
return {
treeData,
defaultProps,
handleNodeClick,
getTreeData,
openBtn,
parentTree,
selectNode
}
}
\ No newline at end of file
import { ref } from 'vue'
export default function useSelectParent() {
//parent组件的ref属性
const parentRef = ref<{ show: () => void }>()
//选择上级部门
const selectParent = () =>{
parentRef.value?.show();
}
return {
parentRef,
selectParent
}
}
\ No newline at end of file
import { objectPick } from "@vueuse/shared";
export function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object {
export function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
/**
* 复制对象到新对象,src复制到obj
* @param obj 目标对象
......@@ -12,12 +12,9 @@ export function isValidKey(key: string | number | symbol, object: object): key i
* @param key 源对象属性
*/
export function CopyData<T, K extends keyof T>(obj: T, src: T, key: K) {
obj[key] = src[key]
obj[key] = src[key];
}
/**
* 获取对象属性值
* @param obj 对象
......@@ -25,11 +22,9 @@ export function CopyData<T, K extends keyof T>(obj: T, src: T, key: K) {
* @returns 返回对象属性值
*/
export function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key]
return obj[key];
}
/**
* 清空表单
* @param fromRef 表单的ref属性
......@@ -37,12 +32,12 @@ export function getProperty<T, K extends keyof T>(obj: T, key: K) {
*/
export function resetForm(fromRef: any, obj: any) {
//清空数据
Object.keys(obj).forEach(key => {
obj[key] = ''
})
Object.keys(obj).forEach((key) => {
obj[key] = "";
});
//清除表单的验证
if (fromRef) {
fromRef.resetFields();
fromRef.clearValidate();
}
}
\ No newline at end of file
}
<template>
<!-- <div class="map-ball"></div> -->
<div class="ditrict-chart">
<h1>50283份简历</h1>
<div class="echarts" id="nanshanDistrict"></div>
<el-descriptions title="" direction="vertical" :column="5" border>
<el-descriptions-item align="center" label="网格员"
>4358人</el-descriptions-item
>
<el-descriptions-item align="center" label="海外引进人才"
>988人</el-descriptions-item
>
<el-descriptions-item align="center" label="企业中高层管理人员"
>1999人</el-descriptions-item
>
<el-descriptions-item align="center" label="医生"
>6973人</el-descriptions-item
>
<el-descriptions-item align="center" label="教师"
>2938人</el-descriptions-item
>
</el-descriptions>
</div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import JSON from "../../../Json/NanshanDistrict.json";
import * as turf from "@turf/turf";
function transFormGeoJson(map: any) {
const multiPolygon = turf.multiPolygon(
map.geometry.geometries.map((geometry: any) => {
return geometry.coordinates;
})
);
multiPolygon.properties = map.properties;
return multiPolygon;
}
function toSplit(map: any) {
let tempArr = map.features.map((i: any) => {
if (i.geometry.type != "GeometryCollection") {
return i;
} else {
return transFormGeoJson(i);
}
});
return turf.featureCollection(tempArr);
}
const init = () => {
let myChart = echarts.init(document.getElementById("nanshanDistrict") as any);
let map = eval(JSON as any);
map = toSplit(map);
echarts.registerMap("南山区", map as any, {});
let option = {
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c} (p / km2)",
},
series: [
{
name: "南山区地图",
type: "map",
mapType: "南山区", // 自定义扩展图表类型
label: {
show: true,
},
data: [
{ name: "南山街道", value: 50 },
{ name: "南头街道", value: 100 },
{ name: "前海合作区", value: 150 },
{ name: "沙河街道", value: 200 },
{ name: "蛇口街道", value: 250 },
{ name: "桃源街道", value: 300 },
{ name: "西丽街道", value: 350 },
{ name: "粤海街道", value: 400 },
{ name: "招商街道", value: 800 },
],
nameMap: {
南山街道: "南山街道",
南头街道: "南头街道",
前海合作区: "前海合作区",
沙河街道: "沙河街道",
蛇口街道: "蛇口街道",
桃源街道: "桃源街道",
西丽街道: "西丽街道",
粤海街道: "粤海街道",
招商街道: "招商街道",
},
},
],
};
myChart.setOption(option);
};
defineExpose({
init,
});
</script>
<style lang="scss" scoped>
.ditrict-chart {
display: flex;
flex-direction: column;
h1 {
width: 100%;
height: 50px;
color: #fff;
text-align: center;
margin: 0;
}
.el-descriptions {
width: 100%;
flex: 1;
}
.echarts {
width: 968px;
height: 580px;
}
}
</style>
<template>
<div id="pie"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
const init = () => {
let chartDom: any = document.getElementById("pie");
let myChart = echarts.init(chartDom);
let option;
let datas = [
[
{ name: "圣彼得堡来客", value: 5.6 },
{ name: "陀思妥耶夫斯基全集", value: 1 },
{ name: "史记精注全译(全6册)", value: 0.8 },
{ name: "加德纳艺术通史", value: 0.5 },
{ name: "表象与本质", value: 0.5 },
{ name: "其它", value: 3.8 },
],
];
option = {
title: {
text: "阅读书籍分布",
left: "center",
textStyle: {
color: "#fff",
},
},
series: datas.map(function (data, idx) {
let top = idx * 33.3;
return {
type: "pie",
radius: [20, 60],
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
},
label: {
alignTo: "edge",
formatter: "{name|{b}}\t{time|{c} 小时}",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
color: "#ffffff",
rich: {
time: {
fontSize: 10,
color: "#999",
},
},
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
labelLayout: function (params: any) {
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
data: data,
};
}),
};
option && myChart.setOption(option);
};
defineExpose({
init,
});
</script>
<style lang="scss" scoped>
#pie {
height: 200px;
width: 384px;
}
</style>
<template>
<div id="position"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
const init = () => {
let myChart = echarts.init(document.getElementById("position") as any);
console.log(myChart, "myChart");
let option;
option = {
title: {
text: "职位offer排行榜",
left: "center", // 水平居中
top: "top", // 垂直靠上
textStyle: {
color: "#ffffff",
},
},
// legend: {},
color: ["#7cd7af"],
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
backgroundColor: "#fff",
},
textStyle: {
color: "#ffffff",
}, //x,y轴字体颜色
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
data: [
"运营专员",
"企管部人事",
"呜呜呜呜",
"产品高级经理",
"学管师",
"人力资源部部长",
"火箭发动机研发",
"大客户销售经理",
"产品VP招聘",
],
},
//
series: [
{
name: "排行",
type: "bar",
label: {
show: true,
position: "right",
color: "#ffffff",
formatter: ({ value }: any) => {
return value + "人";
},
},
data: [3, 3, 2, 2, 1, 1, 1, 1, 1],
},
],
};
option && myChart.setOption(option);
};
defineExpose({
init,
});
</script>
<style lang="scss" scoped>
#position {
width: 394px;
height: 360px;
margin-top: 20px;
// background-color: #fff;
padding-right: 10px;
box-sizing: border-box;
}
</style>
<template>
<div class="-container"></div>
<!-- <positionChart ref="positionChartRef" /> -->
<div class="bigData-container">
<div ref="dataScreenRef" class="bigData-content">
<div class="bigData-header">headers</div>
<div class="bigData-main">
<div class="bigData-lf">
<el-descriptions
title="2023年7月30日"
direction="vertical"
:column="2"
border
>
<el-descriptions-item
v-for="item in 8"
:key="item"
align="center"
label="X家"
>企业用户</el-descriptions-item
>
</el-descriptions>
<positionChart ref="positionChartRef" />
</div>
<div class="bigData-ct">
<div class="bigData-map">
<NanshanDistrictChart ref="nanshanDistrictRef" />
</div>
</div>
<div class="bigData-rg">
<el-descriptions title="新增简历" :column="1">
<el-descriptions-item
v-for="item in 19"
:key="item"
align="center"
:label="item + '.王一'"
>
<template #default>
<div>清华大学</div>
<div>销售经理</div>
</template>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div class="bigData-footer">
<pieChart ref="pieRef" />
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import NanshanDistrictChart from "./components/NanshanDistrictChart.vue";
import positionChart from "./components/positionChart.vue";
import pieChart from "./components/pieChart.vue";
<style lang="scss" scoped></style>
const dataScreenRef = ref();
const nanshanDistrictRef = ref();
const positionChartRef = ref();
const pieRef = ref();
// 设置响应式
const resize = () => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
}
};
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
};
onMounted(() => {
nanshanDistrictRef.value.init();
positionChartRef.value.init();
pieRef.value.init();
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
dataScreenRef.value.style.width = `1920px`;
dataScreenRef.value.style.height = `1080px`;
}
window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__title) {
color: #ffffff;
width: 100%;
text-align: center;
}
.bigData-container {
width: 100%;
height: 100%;
background: url("../../assets/bg.png") no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
background-size: cover;
.bigData-content {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
display: flex;
flex-direction: column;
overflow: hidden;
transition: all 0.3s;
transform-origin: left top;
width: 100%;
padding: 20px;
box-sizing: border-box;
.bigData-header {
height: 200px;
width: 100%;
color: #fff;
}
.bigData-main {
box-sizing: border-box;
display: flex;
flex: 1;
width: 100%;
padding: 12px 42px 20px;
.bigData-lf {
width: 394px;
height: 100%;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bigData-ct {
display: flex;
flex: 1;
height: 100%;
margin-right: 40px;
.bigData-map {
position: relative;
box-sizing: border-box;
flex: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.bigData-rg {
width: 394px;
height: 100%;
:deep(.el-descriptions__body) {
padding-top: 10px;
.el-descriptions__cell {
display: flex;
.el-descriptions__label {
width: 33.333333%;
}
.el-descriptions__content {
display: flex;
flex: 1;
justify-content: space-around;
}
}
}
}
}
.bigData-footer {
height: 200px;
width: 100%;
color: #fff;
}
}
}
</style>
<template>
<div class="app-container"></div>
</template>
<script lang="ts">
export default {
name: 'Index'
}
</script>
<style lang="scss">
</style>
......@@ -39,10 +39,8 @@
</template>
<script lang="ts" setup>
import { ref, computed } from "vue"
import { v4 } from "uuid"
import pagination from "@/components/pagination/index.vue"
import { kingdeeList } from "@/services/api/dashboard"
import { v4 } from "uuid";
import pagination from "@/components/pagination/index.vue";
const listQuery = ref({
docType: "INVENTORY",
......@@ -50,7 +48,7 @@ const listQuery = ref({
data: {} as any,
pageNo: 1,
pageSize: 10,
})
});
const selectList = [
{ label: "名称", value: "FMaterialName" },
......@@ -58,50 +56,48 @@ const selectList = [
{ label: "仓库", value: "FStockName" },
{ label: "仓位", value: "FStockLocId" },
{ label: "编码", value: "FMaterialId.Fnumber" },
]
];
const selectListValue = ref()
const selectListValue = ref();
const tableData = ref()
const total = ref(0)
const inputValue = ref()
const tableData = ref();
const total = ref(0);
const inputValue = ref();
const placeholder = computed(() => {
let str: any
let str: any;
selectList.map((item: any) => {
if (item.value == selectListValue.value) {
str = item.label
str = item.label;
}
})
return selectListValue.value ? str : "请选择下拉菜单"
})
});
return selectListValue.value ? str : "请选择下拉菜单";
});
const sizeChange = (val: number) => {
listQuery.value.pageSize = val
init()
}
listQuery.value.pageSize = val;
init();
};
const currentChange = (val: number) => {
listQuery.value.pageNo = val
init()
}
listQuery.value.pageNo = val;
init();
};
const handleFilter = () => {
if (inputValue.value)
listQuery.value.data[selectListValue.value] = inputValue.value
else listQuery.value.data = {}
init()
}
const headers: any = { Authorization: sessionStorage.getItem("token") }
listQuery.value.data[selectListValue.value] = inputValue.value;
else listQuery.value.data = {};
init();
};
const headers: any = { Authorization: sessionStorage.getItem("token") };
const exportExcelAll = () => {}
const exportExcelAll = () => {};
const exportExcelList = () => {}
const exportExcelList = () => {};
const init = async () => {
let newUuid = v4()
const res: any = await kingdeeList()
console.log(res)
}
init()
let newUuid = v4();
};
init();
</script>
......@@ -43,10 +43,8 @@
</template>
<script lang="ts" setup>
import { ref, computed } from "vue"
import { v4 } from "uuid"
import pagination from "@/components/pagination/index.vue"
import { kingdeeList } from "@/services/api/dashboard"
import { v4 } from "uuid";
import pagination from "@/components/pagination/index.vue";
const listQuery = ref({
docType: "INVENTORY",
......@@ -54,7 +52,7 @@ const listQuery = ref({
data: {} as any,
pageNo: 1,
pageSize: 10,
})
});
const selectList = [
{ label: "名称", value: "FMaterialName" },
......@@ -62,50 +60,48 @@ const selectList = [
{ label: "仓库", value: "FStockName" },
{ label: "仓位", value: "FStockLocId" },
{ label: "编码", value: "FMaterialId.Fnumber" },
]
];
const selectListValue = ref()
const selectListValue = ref();
const tableData = ref()
const total = ref(0)
const inputValue = ref()
const tableData = ref();
const total = ref(0);
const inputValue = ref();
const placeholder = computed(() => {
let str: any
let str: any;
selectList.map((item: any) => {
if (item.value == selectListValue.value) {
str = item.label
str = item.label;
}
})
return selectListValue.value ? str : "请选择下拉菜单"
})
});
return selectListValue.value ? str : "请选择下拉菜单";
});
const sizeChange = (val: number) => {
listQuery.value.pageSize = val
init()
}
listQuery.value.pageSize = val;
init();
};
const currentChange = (val: number) => {
listQuery.value.pageNo = val
init()
}
listQuery.value.pageNo = val;
init();
};
const handleFilter = () => {
if (inputValue.value)
listQuery.value.data[selectListValue.value] = inputValue.value
else listQuery.value.data = {}
init()
}
const headers: any = { Authorization: sessionStorage.getItem("token") }
listQuery.value.data[selectListValue.value] = inputValue.value;
else listQuery.value.data = {};
init();
};
const headers: any = { Authorization: sessionStorage.getItem("token") };
const exportExcelAll = () => {}
const exportExcelAll = () => {};
const exportExcelList = () => {}
const exportExcelList = () => {};
const init = async () => {
let newUuid = v4()
const res: any = await kingdeeList()
console.log(res)
}
init()
let newUuid = v4();
};
init();
</script>
......@@ -22,7 +22,13 @@
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/auto-imports.d.ts"
],
// ts 排除的文件
"exclude": ["node_modules"]
}
......@@ -3,6 +3,9 @@
declare global {
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createLogger: typeof import('vuex')['createLogger']
const createNamespacedHelpers: typeof import('vuex')['createNamespacedHelpers']
const createStore: typeof import('vuex')['createStore']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
......@@ -14,6 +17,10 @@ declare global {
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const mapActions: typeof import('vuex')['mapActions']
const mapGetters: typeof import('vuex')['mapGetters']
const mapMutations: typeof import('vuex')['mapMutations']
const mapState: typeof import('vuex')['mapState']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
......@@ -45,7 +52,10 @@ declare global {
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useStore: typeof import('vuex')['useStore']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
}
......
......@@ -5,24 +5,19 @@ import '@vue/runtime-core'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
DropdownCheck: typeof import('./../src/components/dropdownCheck/dropdownCheck.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
......@@ -30,23 +25,24 @@ declare module '@vue/runtime-core' {
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
ElUpload: typeof import('element-plus/es')['ElUpload']
Form: typeof import('./components/Form.vue')['default']
InputTable: typeof import('./../src/components/inputTable/index.vue')['default']
JCorn: typeof import('./../src/components/corn/JCorn.vue')['default']
JCronModal: typeof import('./../src/components/corn/JCronModal.vue')['default']
LitemallPage: typeof import('./../src/components/pagination/litemallPage.vue')['default']
MyForm: typeof import('./../src/components/form/MyForm.vue')['default']
Pagination: typeof import('./../src/components/pagination/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
SysDialog: typeof import('./../src/components/SysDialog.vue')['default']
}
}
......
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// vite 提供的操作env配置变量的方法loadEnv
import { loadEnv } from "vite"
import { loadEnv } from "vite";
// nodejs写法,获取项目目录
import path from "path"
import path from "path";
//按需要加载
import Inspect from "vite-plugin-inspect"
import { viteMockServe } from "vite-plugin-mock"
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
const pathSrc = path.resolve(__dirname, "src")
import Inspect from "vite-plugin-inspect";
import { viteMockServe } from "vite-plugin-mock";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
// 导入自动装配插件
import AutoImport from "unplugin-auto-import/vite";
//自动导入ui-组件
import Components from "unplugin-vue-components/vite";
// 按需引入element-plus
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
const pathSrc = path.resolve(__dirname, "src");
// https://vitejs.dev/config/
export default ({ command, mode }) => {
const env = loadEnv(mode, process.cwd())
const env = loadEnv(mode, process.cwd());
return defineConfig({
plugins: [
vue(),
......@@ -30,6 +38,29 @@ export default ({ command, mode }) => {
// default
mockPath: "mock",
}),
// 配置自动装载配置
AutoImport({
// 生成配置文件,如果是ts项目,通常我们会把声明文件放在根目录/types中,注意,这个文件夹需要先建好,否则可能导致等下无法往里生成auto-imports.d.ts文件
dts: "types/auto-imports.d.ts",
imports: ["vue", "vue-router", "vuex"],
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: "Icon",
}),
],
}),
Components({
// 引入组件的,包括自定义组件
// 存放的位置
dts: "types/components.d.ts",
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ["ep"],
}),
],
}),
Inspect(),
],
// 服务器配置
......@@ -88,7 +119,7 @@ export default ({ command, mode }) => {
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString()
.toString();
}
},
},
......@@ -100,5 +131,5 @@ export default ({ command, mode }) => {
},
},
},
})
}
});
};
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论