xiaoy
/
sqhj-workbench-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

界面

Browse Source
master
xy 1 year ago
parent 4aa5a6abea
commit 9082960812
4 changed files with 183 additions and 3 deletions
Show Stats Download Patch File Download Diff File

5
src/router/index.js
Unescape View File

@ -75,6 +75,11 @@ export const constantRoutes = [{
path: "/install",
component: () => import("@/views/install"),
hidden: true
},
{
path: "/test",
component: () => import("@/views/dashboard/text.vue"),
hidden: true
}
]

172
src/views/dashboard/text.vue
Unescape View File

@ -0,0 +1,172 @@
<template>
<div class="create-flow-container">
<div class="create-flow-card" v-for="i in 5">
<div class="create-flow-card__header">
<div class="create-flow-card__header--icon">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M885.4 665.6H624.3c-16.7 0-31.8 10.3-37.5 26-10.7 29.7-39.1 51-72.5 51s-61.8-21.3-72.5-51c-5.6-15.7-20.8-26-37.5-26h-267c-22.1 0-40 17.9-40 40v211.3c0 22.1 17.9 40 40 40h748.1c22.1 0 40-17.9 40-40V705.6c0-22.1-17.9-40-40-40zM139.3 623.6V166.8c0-22.1 17.9-40 40-40h88v496.8h-128z" fill="#ffffff"></path><path d="M844.2 65.5H350.3c-22.1 0-40 17.9-40 40v518.6h110.3c19.3 0 51.9 25.5 61.8 52.9 4.8 13.5 17.7 22.5 32 22.5s27.2-9 32-22.5c11.7-32.6 43-54.5 77.9-54.5h251.1c3 0 5.9 0.2 8.8 0.5V105.5c0-22.1-17.9-40-40-40zM663.6 444.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z m0-110.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.6 21.6 21.5z m0-110.7c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z" fill="#ffffff"></path></svg>
</div>
<div class="create-flow-card__header--text">
日常办公
</div>
</div>
<div class="create-flow-card__body">
<div class="create-flow-card__body-item" v-for="i in Math.floor(Math.random()*10+5)">
<div class="create-flow-card__body-item-left">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#535353"></path><path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#535353"></path></svg>
</div>
<div class="create-flow-card__body-item-right">
<div class="create-flow-card__body-item-right--title">市内公务外出用餐补助</div>
<div style="display:flex;" class="create-flow-card__body-item-right--value">
<div class="done">
<span style="color: #0279fd;">3</span>
<span>已申请</span>
</div>
<div class="todo">
<span style="color: #ffa42d;">1</span>
<span>代办</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {},
computed: {},
}
</script>
<style scoped>
.create-flow-container {
column-count: 3;
column-gap: 18px;
padding: 18px;
}
.create-flow-container .create-flow-card {
border-radius: 10px;
filter: drop-shadow(0.5px 0.866px 14.5px rgba(59,66,82,0.11));
background-color: #ffffff;
break-inside: avoid;
grid-row-start: auto;
}
.create-flow-card + .create-flow-card {
margin-top: 18px;
}
.create-flow-card__header {
display: flex;
align-items: center;
padding: 16px 0 16px 24px;
}
.create-flow-card:nth-child(1) .create-flow-card__header--icon {
filter: drop-shadow(0 0 5px rgba(254,102,94,0.35));
background-image: linear-gradient(90deg, #ffa175 0%, #fd635d 99%, #fd635d 100%);
}
.create-flow-card:nth-child(2) .create-flow-card__header--icon {
filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
background-color: #0279fd;
}
.create-flow-card:nth-child(3) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(11,196,208,0.35));
background-image: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 99%, #3ba7ef 100%);
}
.create-flow-card:nth-child(4) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(255,159,60,0.35));
background-image: linear-gradient(90deg, #ffb737 0%, #ff9f3b 100%);
}
.create-flow-card:nth-child(5) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(195,89,251,0.35));
background-image: linear-gradient(90deg, #d38ff3 0%, #c359fb 99%, #c359fb 100%);
}
.create-flow-card__header--icon {
width: 50px;
height: 50px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.create-flow-card__header--text {
flex: 1;
font-size: 18px;
letter-spacing: 1px;
color: #3b4252;
white-space: nowrap;
margin-left: 15px;
padding-bottom: 8px;
position: relative;
}
.create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ffa175 0%, #fd635d 34%, #fd635d 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card__body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 12px;
padding: 0 20px 24px 20px;
}
.create-flow-card__body-item {
border-radius: 10px;
background-color: #f5f7fa;
border: 1px solid rgba(227,234,240,0.5);
padding: 10px 16px 9px 10px;
display: flex;
align-items: center;
}
.create-flow-card__body-item-left {
background: #fff;
border-radius: 100%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
}
.create-flow-card__body-item-right {
flex: 1;
}
.create-flow-card__body-item-right--title {
color: #000000;
}
.create-flow-card__body-item-right--value {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
}
.create-flow-card__body-item-right--value .done,.create-flow-card__body-item-right--value .todo {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.create-flow-card__body-item-right--value .done {
//border-right: 1px solid #ededee;
}
.create-flow-card__body-item-right--value .done > span:nth-child(1),.create-flow-card__body-item-right--value .todo > span:nth-child(1) {
font-size: 14px;
font-weight: 600;
}
.create-flow-card__body-item-right--value .done > span:nth-child(2),.create-flow-card__body-item-right--value .todo > span:nth-child(2) {
font-size: 12px;
color: #999999;
}
</style>

3
src/views/system/workerComponents/department.vue
Unescape View File

@ -163,7 +163,6 @@ export default {
show: true,
color: "#fff",
formatter: (params) => {
console.log(params)
let m2 = params?.money_total_2 || 0;
let m1 = params?.money_total_1 || 0;
let m3 = params?.use_money_total || 0;
@ -215,7 +214,7 @@ export default {
},
init() {
this.chart = echarts.init(document.getElementById("department-chart"));
//this.setOptions();
this.setOptions();
let cardDom = document.getElementById('department-card');
let cardTitleH = 58;
const elementResize = ElementResize({

6
src/views/system/workerComponents/type.vue
Unescape View File

@ -47,7 +47,7 @@ export default {
money_total_2: "0.00",
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
type: 7,
use_money_total: "50000.00",
use_money_total: "1150000.00",
type_text: "项目经费",
money_total: "0.00",
end_money: 0,
@ -223,6 +223,7 @@ export default {
}
return h("el-progress", {
props: {
"stroke-width": 13,
percentage: Number(per),
},
});
@ -298,4 +299,7 @@ export default {
::v-deep .el-progress {
white-space: nowrap;
}
::v-deep .el-progress__text {
color: rgb(77, 139, 220);
}
</style>

Write Preview
Loading…
Cancel
Save