tianhe_java
/
tianhe-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

天合项目图标登录页首页

master
songguoqiang 9 months ago
parent
1454463d23
commit
01a12ca0e7
9 changed files with 49 additions and 488 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env
  2. 6
      index.html
  3. BIN
      src/assets/imgs/lg_tianhe.png
  4. BIN
      src/assets/imgs/logo_tianhe.png
  5. BIN
      src/assets/imgs/shouye.png
  6. 4
      src/layout/components/Logo/src/Logo.vue
  7. 6
      src/layout/components/ToolHeader.vue
  8. 459
      src/views/home/index.vue
  9. 60
      src/views/login/login.vue

2
.env
View File

@ -1,5 +1,5 @@
# 标题
VITE_APP_TITLE=闻荫管理系统
VITE_APP_TITLE=天合富奥汽车安全系统
# 项目本地运行端口号
VITE_PORT=80

6
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" href="/favicon.ico" /> -->
<link rel="icon" href="/src/assets/imgs/logo1.png" />
<link rel="icon" href="/src/assets/imgs/lg_tianhe.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
@ -14,7 +14,7 @@
name="description"
content="闻荫管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
/>
<title>%VITE_APP_TITLE%</title>
<title style="font-size:12px">%VITE_APP_TITLE%</title>
</head>
<body>
<div id="app">
@ -137,7 +137,7 @@
<div class="app-loading">
<div class="app-loading-wrap">
<div class="app-loading-title">
<img src="/src/assets/imgs/logo.png" class="app-loading-logo" alt="Logo" />
<img src="/src/assets/imgs/lg_tianhe.png" class="app-loading-logo" alt="Logo" />
<div class="app-loading-title">%VITE_APP_TITLE%</div>
</div>
<div class="app-loading-item">

BIN
src/assets/imgs/lg_tianhe.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
src/assets/imgs/logo_tianhe.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 KiB

BIN
src/assets/imgs/shouye.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 694 KiB

4
src/layout/components/Logo/src/Logo.vue
View File

@ -68,12 +68,12 @@ watch(
>
<img
class="h-[calc(var(--logo-height)-24px)] w-[calc(var(--logo-height)-10px)]"
src="@/assets/imgs/logo.png"
src="@/assets/imgs/lg_tianhe.png"
/>
<div
v-if="show"
:class="[
'ml-10px text-16px font-700',
'ml-10px text-14px font-700',
{
'text-[var(--logo-title-text-color)]': layout === 'classic',
'text-[var(--top-header-text-color)]':

6
src/layout/components/ToolHeader.vue
View File

@ -71,9 +71,11 @@ export default defineComponent({
color="var(--top-header-text-color)"
></LocaleDropdown>
) : undefined}
{message.value ? (
{/* {message.value ? (
<Message class="custom-hover" color="var(--top-header-text-color)"></Message>
) : undefined}
) : undefined} */}
<UserInfo></UserInfo>
</div>
</div>

459
src/views/home/index.vue
View File

@ -1,304 +1,7 @@
<!-- 供应商首页 -->
<template>
<div class="one-row">
<div class="data">
<div class="data-item">
<div class="small-title">注塑</div>
<div class="small-data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>{{ data?.zsTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2">
<div class="small-data-item-txt">
<div>{{ data?.zsZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zsWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zsTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">装配</div>
<div class="small-data">
<div class="small-data-item small-data-item5">
<div class="small-data-item-txt">
<div>{{ data?.zpTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6">
<div class="small-data-item-txt">
<div>{{ data?.zpZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item7 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zpWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item8 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zpTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">涂装</div>
<div class="small-data">
<div class="small-data-item small-data-item3">
<div class="small-data-item-txt">
<div>{{ data?.tzTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4">
<div class="small-data-item-txt">
<div>{{ data?.tzZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item5 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.tzWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.tzTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
</div>
<div class="data mt-14px">
<div class="data-item">
<div class="small-title">注塑年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">{{ yearTarget.zsTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsTJActual) > parseFloat(yearTarget.zsTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.zsHFGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsHFActual) > parseFloat(yearTarget.zsHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsHFActual || '0' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.zsJGGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsJGActual) > parseFloat(yearTarget.zsJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsJGActual || '0' }}</li
>
</ul>
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">装配年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">{{ yearTarget.zpTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpTJActual) > parseFloat(yearTarget.zpTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.zpHFGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpHFActual) > parseFloat(yearTarget.zpHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpHFActual || '0' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.zpJGGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpJGActual) > parseFloat(yearTarget.zpJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpJGActual || '0' }}</li
>
</ul>
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">涂装年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">{{ yearTarget.tzTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzTJActual) > parseFloat(yearTarget.tzTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.tzHFGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzHFActual) > parseFloat(yearTarget.tzHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzHFActual || '0' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.tzJGGoal || '0' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzJGActual) > parseFloat(yearTarget.tzJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzJGActual || '0' }}</li
>
</ul>
</div>
</div>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑设备停机率</div>
<Echart :options="lineOptionsData1" :height="280" />
</div>
<div class="data1 ml-14px">
<div class="title">装配设备停机率</div>
<Echart :options="lineOptionsData2" :height="280" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装设备停机率</div>
<Echart :options="lineOptionsData3" :height="280" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑平均故障恢复时间（MTTR/min）</div>
<Echart :options="lineOptionsData4" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配平均故障恢复时间（MTTR/min）</div>
<Echart :options="lineOptionsData5" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装平均故障恢复时间（MTTR/min）</div>
<Echart :options="lineOptionsData6" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑平均故障间隔时间MTBF（H）</div>
<Echart :options="lineOptionsData7" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配平均故障间隔时间MTBF（H）</div>
<Echart :options="lineOptionsData8" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装平均故障间隔时间MTBF（H）</div>
<Echart :options="lineOptionsData9" :height="280" :key="lineIndex" />
</div>
</div>
<div>
<img class="shouye" src="../../assets/imgs/shouye.png"/>
</div>
</template>
<script lang="ts" setup>
@ -580,163 +283,7 @@ onMounted(async () => {
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.data-item {
width: calc(100% / 3);
padding: 10px 0px;
background: white;
.small-title {
padding-bottom: 10px;
position: relative;
padding-left: 25px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 15px;
top: 3px;
border-radius: 8px;
}
}
.small-data {
display: flex;
align-content: center;
justify-content: space-between;
padding: 0px 14px;
flex-wrap: wrap;
.small-data-item {
width: calc(50% - 46px);
height: 70px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 20px;
span {
font-size: 12px;
padding-left: 6px;
}
}
&:nth-child(2) {
font-size: 12px;
}
}
}
.img {
width: 30px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #cad0fc, #97a2fa);
}
.small-data-item7 {
background: linear-gradient(to left, #fcc7c7, #ff8888);
}
.small-data-item8 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
width: calc(100% / 3);
}
}
.table-box {
border: 1px solid #dedede;
.shouye {
width: 100%;
}
.table {
list-style: none;
padding: 0px;
width: 100%;
}
.header {
display: flex;
background: #f5f5f5;
margin: 0px;
li {
width: 25%;
text-align: center;
padding: 10px;
}
.one {
width: 50%;
}
}
.ul-body {
display: flex;
margin: 0px;
li {
width: 25%;
text-align: center;
padding: 10px;
}
.one {
width: 50%;
}
.green {
color: #18bb43;
font-size: 18px;
font-weight: bold;
}
.orange {
color: #ffb062;
font-size: 18px;
font-weight: bold;
}
.red {
color: #ff0000;
font-size: 18px;
font-weight: bold;
}
}
</style>

60
src/views/login/login.vue
View File

@ -3,30 +3,11 @@
:class="prefixCls"
class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
>
<div class="relative mx-auto h-full flex">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
>
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-24px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div class="box">
<img src="../../assets/imgs/logo_tianhe.png" alt="" class="logo"/>
<div class="absolute w-[33%] mx-auto h-full flex right-[7%]">
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
<!-- 右上角的主题、语言选择 -->
<div
@ -60,6 +41,11 @@
</Transition>
</div>
</div>
<div class="footer">
<div>Copyright ©2012-2023闻荫科技吉ICP备100114504646号-6 ICP证书:吉B2-2018005497977吉林工商吉公网安备3101150204979086755号</div>
<div>出版物经营许可证(吉)批字第Y8813号广播电视节目制作经营许可正(吉)字第03283号网络文化经营许可证吉网文{2012)1460-055号</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
@ -101,4 +87,30 @@ $prefix-cls: #{$namespace}-login;
}
}
}
.box{
background: url(../../assets/imgs/lg_login.png) no-repeat top left;
background-size: 100% 100%;
width: 100%;
height:100%;
}
// .logo{
// position: absolute;
// left: 4vw;
// top: 5vh;
// width: 30%;
// }
.logo{
position: absolute;
height:100%;
width: 100%;
}
.footer{
position: absolute;
bottom:4vh;
text-align: center;
padding: 0px 30px;
width: calc(100% - 60px);
color: #989898;
font-size: 14px;
}
</style>

Write Preview
Loading…
Cancel
Save