kevinMao
/
canteen_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://175.6.124.250:3100/kevinMao/canteen_system

This commit is contained in:
TimSpan 2025-05-13 16:26:45 +08:00
parent 416588ef60 159b1a6a4e
commit ef2f204b0d
2 changed files with 419 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

447
src/views/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="home" >
<div class="home">
<div style="width: 72%">
<div class="homeItem">
<blockquote class="homeItemIndex">
<blockquote class="homeItemIndex">
系统公告
<span class="homeSpan">2024-11-25</span>
</blockquote>
@ -10,11 +10,11 @@
<span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
</div>
<div class="home2Item">
<blockquote class="homeItem2Index">
<blockquote class="public">
<div class="header-wrapper">
<span>供应商</span>
<div class="fold-button" @click="toggleFold">
<span>{{ isFold ? '展开' : '收起' }}</span>
<span>{{ isFold ? "展开" : "收起" }}</span>
<Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
</div>
</div>
@ -26,24 +26,26 @@
<div class="fold-content_item">
<div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
<div class="fold-content_item_index_top">
<div class="content">{{item.titleName}}</div>
<span>{{item.video}}</span>
<div class="content">{{ item.titleName }}</div>
<span>{{ item.video }}</span>
</div>
<div class="intermediate" v-for="items in item.intermediate" :key="items.key">
<span style="width: 50px">{{items.name}}</span>
<span style="width: 50px">{{items.digital}}</span>
<span style="width: 50px">{{items.mechanism}}</span>
<span style="width: 50px">{{items.digitalKey}}</span>
<span style="width: 50px">{{ items.name }}</span>
<span style="width: 50px">{{ items.digital }}</span>
<span style="width: 50px">{{ items.mechanism }}</span>
<span style="width: 50px">{{ items.digitalKey }}</span>
</div>
<hr/>
<hr />
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div class="risk">{{item.risk}}</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">{{item.score}}分</div>
<div class="risk">{{ item.risk }}</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">
{{ item.score }}分
</div>
</div>
<div style="display: flex">
<div>{{item.ranking}}</div>
<div style="margin-left: 10px">{{item.num}}</div>
<div>{{ item.ranking }}</div>
<div style="margin-left: 10px">{{ item.num }}</div>
</div>
</div>
</div>
@ -52,106 +54,257 @@
</div>
</div>
</div>
<div class="home4Item">
<div class="home4ItemIndex">
<div class="home4ItemIndexItem">
<blockquote class="public">
<div class="header-wrapper">
<span>用户数据</span>
</div>
</blockquote>
<div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">总数</div>
<div style="font-size: 20px">15452</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666"> 日活跃量</div>
<div style="font-size: 20px">6666</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">用户</div>
<div style="font-size: 20px">524</div>
</div>
</div>
</div>
<div class="home4ItemIndexItem">
<blockquote class="public">
<div class="header-wrapper">
<span>每日消息</span>
</div>
</blockquote>
<div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">今日发送</div>
<div style="font-size: 20px">0</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666"> 接受率</div>
<div style="font-size: 20px">20%</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">查看率</div>
<div style="font-size: 20px;color: #FFB800 !important">30%</div>
</div>
</div>
</div>
</div>
<div class="home4Item2Index">
<blockquote class="public">
<div class="header-wrapper">
<span>客户点评</span>
</div>
</blockquote>
<div style="display: flex;justify-content: space-between">
<div class="home4Item2IndexITem">
<span style="margin-left: 20px;background-color: #F7F7F7; color: #666">好评率</span>
<div style="display: flex">
<div style="width: 33%;text-align: center;margin-top: 19px">
<span>口味</span>
<div style="color: #FFB800;font-size: 18px">54.64%</div>
</div>
<div style="width: 33%;text-align: center;margin-top: 19px">
<span>卫生</span>
<div style="color: #FFB800;font-size: 18px">54.64%</div>
</div>
<div style="width: 33%;text-align: center;margin-top: 19px">
<span>态度</span>
<div style="color: #FFB800;font-size: 18px">67.92%</div>
</div>
</div>
</div>
<div class="home4Item2IndexITem">
<span style="margin-left: 20px;background-color: #F7F7F7; color: #666">综合TOP3</span>
<div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"></div>
<div>技术部</div>
<div>68.91%</div>
</div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"></div>
<div>技术部</div>
<div>68.91%</div>
</div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"></div>
<div>技术部</div>
<div>68.91%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 25%">
<div class="home3Item">1231321</div>
<div class="home3Item">
<blockquote class="public" style="margin-left: 0">
<div class="header-wrapper">
<span>快捷入口</span>
</div>
</blockquote>
<div class="home3ItemIndex">
<div class="home3ItemIndexEachItem">
<div>基础信息管理</div>
<i style="font-size: 20px"> > </i>
</div>
<div class="home3ItemIndexEachItem">
<div>设备台账</div>
<i style="font-size: 20px"> > </i>
</div>
<div class="home3ItemIndexEachItem">
<div>设备状态</div>
<i style="font-size: 20px"> > </i>
</div>
<div class="home3ItemIndexEachItem">
<div>营养食安</div>
<i style="font-size: 20px"> > </i>
</div>
<div class="home3ItemIndexEachItem">
<div>数据分析 </div>
<i style="font-size: 20px"> > </i>
</div>
</div>
</div>
<div class="home5Item">
<blockquote class="public" style="margin-left: 0">
<div class="header-wrapper">
<span>系统事项</span>
</div>
</blockquote>
<div class="home5ItemIndex">
<div class="home5ItemIndexEachItem">
<div>未处理</div>
<i style="font-size: 20px;color:red"> 458 </i>
</div>
<div class="home5ItemIndexEachItem">
<div>已处理</div>
<i style="font-size: 20px"> 12 </i>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const isFold = ref(true)
const toggleFold = ()=>{
isFold.value = !isFold.value
}
import { ref } from "vue";
const isFold = ref(true);
const toggleFold = () => {
isFold.value = !isFold.value;
};
const foldContentItemIndex = ref([
{
titleName:'某某小学',
video:'屏幕',
intermediate:[
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
],
risk:'低风险',
score:'100',
ranking:'排名',
num:1
risk: "低风险",
score: "100",
ranking: "排名",
num: 1
},
{
titleName:'某某小学',
video:'屏幕',
intermediate:[
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
titleName: "某某中学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
],
risk:'低风险',
score:'95',
ranking:'排名',
num:2
risk: "低风险",
score: "95",
ranking: "排名",
num: 2
},
{
titleName:'某某小学',
video:'屏幕',
intermediate:[
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
titleName: "某某幼儿园",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
],
risk:'低风险',
score:'80',
ranking:'排名',
num:3
risk: "低风险",
score: "80",
ranking: "排名",
num: 3
},
{
titleName:'某某小学',
video:'屏幕',
intermediate:[
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
],
risk:'低风险',
score:'90',
ranking:'排名',
num:4
},{
titleName:'某某小学',
video:'屏幕',
intermediate:[
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
risk: "低风险",
score: "90",
ranking: "排名",
num: 4
},
{
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
],
risk:'低风险',
score:'100',
ranking:'排名',
num:1
risk: "低风险",
score: "100",
ranking: "排名",
num: 5
}
])
]);
</script>
<style scoped lang="scss">
.home{
.home {
display: flex;
justify-content: space-between;
//align-items: center;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
.homeItem {
width: 100%;
background: var(--bg-color);
margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px;
color:var(--text-color);
.homeItemIndex{
color: var(--text-color);
.homeItemIndex {
margin-bottom: 10px;
line-height: 1.6;
border-left: 5px solid #5FB878;
border-radius: 0 2px 2px 0;
padding-left: 10px;
.homeSpan{
.homeSpan {
display: inline-block;
padding: 0 6px;
font-size: 12px;
@ -162,13 +315,14 @@
}
}
}
.home2Item{
.home2Item {
width: 100%;
background: var(--bg-color);
margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px;
color:var(--text-color);
color: var(--text-color);
.header-wrapper {
display: flex;
@ -176,6 +330,7 @@
align-items: center;
cursor: pointer;
}
.fold-button {
display: flex;
align-items: center;
@ -194,12 +349,14 @@
.fold-content {
border-top: var(--border-top);
.fold-content_item{
.fold-content_item {
margin-top: 15px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.fold-content_item_index{
.fold-content_item_index {
padding: 10px;
min-height: 90px;
border-radius: 5px;
@ -207,29 +364,33 @@
border-width: 1px;
border-style: solid;
background: var(--bg-color);
color:var(--text-color);
color: var(--text-color);
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
width: 22%;
margin-right: 5px;
margin-bottom: 15px;
.fold-content_item_index_top{
.fold-content_item_index_top {
display: flex;
justify-content: space-between;
align-items: center;
color:var(--color);
.content{
color: var(--color);
.content {
font-weight: bold;
font-size: 16px !important;
}
}
.intermediate{
.intermediate {
padding: 5px 7px;
margin-top: 5px;
font-size: 12px;
display: flex;
justify-content: space-between;
}
hr{
hr {
line-height: 0;
margin: 10px 0;
padding: 0;
@ -238,37 +399,127 @@
clear: both;
background: 0 0
}
.risk{
.risk {
height: 18px;
line-height: 18px;
display: inline-block;
padding: 0 6px;
font-size: 12px;
text-align: center;
background-color: #FF5722;
background-color: rgb(0, 150, 136);
color: #fff;
border-radius: 2px;
}
}
}
}
.homeItem2Index{
margin-bottom: 10px;
border-left: 5px solid #5FB878;
border-radius: 0 2px 2px 0;
padding-left: 10px;
height: 18px;
line-height: 18px
}
.home4Item {
width: 102.5%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 100px;
.home4ItemIndex {
height: 180px;
display: flex;
justify-content: space-between;
width: 49%;
.home4ItemIndexItem {
width: 49%;
background: var(--bg-color);
color: var(--text-color);
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}
}
.home4Item2Index {
height: 180px;
width: 49%;
background: var(--bg-color);
color: var(--text-color);
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
.home4Item2IndexITem {
width: 49%;
height: 110px;
background: var(--bg-color);
color: var(--text-color);
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
padding: 10px 0;
}
}
}
.home3Item{
.home3Item {
margin-bottom: 15px;
border-radius: 2px;
background: var(--bg-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px;
color:var(--text-color);
height: 25%;
color: var(--text-color);
.home3ItemIndex {
display: flex;
flex-wrap: wrap;
width: 100%;
.home3ItemIndexEachItem {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background-color: #F7F7F7;
border-radius: 4px;
height: 50px;
width: 30%;
color: #666;
margin-right: 10px;
margin-bottom: 10px
}
}
}
.home5Item{
margin-bottom: 15px;
border-radius: 2px;
background: var(--bg-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
padding: 10px 15px;
height: 10%;
color: var(--text-color);
.home5ItemIndex {
display: flex;
justify-content: space-between;
width: 100%;
.home5ItemIndexEachItem {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background-color: #F7F7F7;
border-radius: 4px;
height: 50px;
width: 45%;
color: #666;
margin-right: 10px;
margin-bottom: 10px
}
}
}
}
.public {
margin-bottom: 10px;
border-left: 5px solid #5FB878;
border-radius: 0 2px 2px 0;
padding-left: 10px;
height: 18px;
line-height: 18px;
margin-left: 15px;
}
</style>

77
src/views/system/user/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="user" >
<div>
<div style="position: relative;margin-right: 5px">
<div class="user3Item" :style="{ display: !collapsed ? '' : 'none' }">
<n-tree
:data="nodes"
@ -8,7 +8,10 @@
block-line
/>
</div>
<div class="user3ItemIndex" :style="{left:!collapsed?'244px':0}" @click="()=>(collapsed = !collapsed)"></div>
<div class="user3ItemIndex" :style="{left:!collapsed?'235px':0}" @click="()=>(collapsed = !collapsed)">
<div :class="[!collapsed ? 'user3ItemIndexCollapsedTop' : 'user3ItemIndexCollapsedTopHidden']"></div>
<div :class="[!collapsed ? 'user3ItemIndexCollapsedButton' : 'user3ItemIndexCollapsedButtonHidden']"></div>
</div>
</div>
<div>
<div class="userItem">
@ -514,17 +517,77 @@
}
.user3ItemIndex{
position: absolute;
top: 48%;
left: 0;
text-align: center;
height: 34px;
height: 75px;
line-height: 34px;
width: 8px;
width: 50px;
z-index: 1;
visibility: visible;
overflow: hidden;
cursor: pointer;
background: red
top: calc(50% - 72px);
left: 200px;
transition: all .2s, background 0s;
.user3ItemIndexCollapsedTop{
position: absolute;
left: 5px;
transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
width: 4px;
height: 38px;
border-radius: 2px;
background-color: #bfbfbf
}
.user3ItemIndexCollapsedTopHidden{
position: absolute;
left: 5px;
transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
width: 4px;
height: 38px;
border-radius: 2px;
background-color: #bfbfbf
}
.user3ItemIndexCollapsedButton{
position: absolute;
left: 5px;
top: 34px;
transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
width: 4px;
height: 38px;
border-radius: 2px;
background-color: #bfbfbf;
}
.user3ItemIndexCollapsedButtonHidden{
position: absolute;
left: 5px;
top: 34px;
transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
width: 4px;
height: 38px;
border-radius: 2px;
background-color: #bfbfbf;
}
}
.user3ItemIndex:hover .user3ItemIndexCollapsedTop{
background: #d9d9d9;
transform: rotate(15deg);
width: 4px;
}
.user3ItemIndex:hover .user3ItemIndexCollapsedTopHidden{
background: #d9d9d9;
transform: rotate(-15deg);
width: 4px;
height: 38px;
}
.user3ItemIndex:hover .user3ItemIndexCollapsedButton{
background: #d9d9d9;
transform: rotate(-15deg);
width: 4px;
}
.user3ItemIndex:hover .user3ItemIndexCollapsedButtonHidden{
background: #d9d9d9;
transform: rotate(15deg);
width: 4px;
height: 38px;
}
}