diff --git a/src/assets/style/_base.scss b/src/assets/style/_base.scss index a49fe3c06a67a916de8b8c84f2f1407190742ec0..cfbef46b261d75c9a2ce7bfbb1f555ae5d8d913d 100644 --- a/src/assets/style/_base.scss +++ b/src/assets/style/_base.scss @@ -530,3 +530,93 @@ textarea:-ms-input-placeholder { page-break-before: avoid; } } + +//é—´è· +$size-map: ( + -2: -2px, + 4: 4px, + 5: 5px, + 8: 8px, + 10: 10px, + 12: 12px, + 15: 15px, + 16: 16px, + 20: 20px, + 24: 24px, + 25: 25px, + 30: 30px, + 32: 32px, + 40: 40px, + 50: 50px, + 80: 80px, + 140: 140px +); + +@each $name in map-keys($size-map) { + $value: map-get($size-map, $name); + + .mt-#{$name} { + margin-top: $value; + } + + .mr-#{$name} { + margin-right: $value; + } + + .mb-#{$name} { + margin-bottom: $value; + } + + .ml-#{$name} { + margin-left: $value; + } + + .margin-#{$name} { + margin: $value; + } + + .pt-#{$name} { + padding-top: $value !important; + } + + .pr-#{$name} { + padding-right: $value; + } + + .pb-#{$name} { + padding-bottom: $value; + } + + .pl-#{$name} { + padding-left: $value; + } + + .pd-#{$name} { + padding: $value; + } +} + +//å—å· +$font-map: ( + 10: 10px, + 11: 11px, + 14: 14px, + 15: 15px, + 18: 18px, + 20: 20px, + 24: 24px, + 25: 25px, + 30: 30px, + 36: 36px, + 40: 40px, + 50: 50px, + 80: 80px, + 140: 140px +); +@each $size in map-keys($font-map) { + $value: map-get($font-map, $size); + + .font-#{$size} { + font-size: $value; + } +} diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue index 0c89b4441a83743b3e2fd7fec11a5595b5980721..1c2c9357dc8d5c525f5c72bfd40eff8ae89c3773 100644 --- a/src/layouts/components/NavBar/index.vue +++ b/src/layouts/components/NavBar/index.vue @@ -14,27 +14,21 @@ :class="['font', index == fontIndex ? 'active' : '']" @click="changeFont(index)" > - <div class="label"> - {{ item.label }} - </div> + <div class="label">{{ item.label }}</div> </div> </div> - <div - v-show="curSelectedIndex != -1" - class="community" - @click="openModalFlag" - > - <img src="~@/assets/img/DataCenter/shift.png" alt="" /> + <div v-show="curSelectedIndex != -1" class="community" @click="openModalFlag"> + <img src="~@/assets/img/DataCenter/shift.png" alt /> {{ screeningList[curSelectedIndex].title }} </div> <div class="user"> - <img src="~@/assets/img/DataCenter/user.png" alt="" /> + <img src="~@/assets/img/DataCenter/user.png" alt /> <avatar></avatar> </div> <el-badge :value="messageCount" :class-name="'badge'"> <div class="user"> - <img src="~@/assets/img/DataCenter/message.png" alt="" /> + <img src="~@/assets/img/DataCenter/message.png" alt /> æ¶ˆæ¯ </div> </el-badge> @@ -143,6 +137,7 @@ export default { display: flex; justify-content: space-between; color: #fff; + border-radius: 0px 0px 4px 4px; .left-panel { display: flex; align-items: center; diff --git a/src/layouts/index.vue b/src/layouts/index.vue index b62d94d1783d645e87e8688043f3f5457067e937..ed11802e72065943c1350bc1444b5da4a6cc8892 100644 --- a/src/layouts/index.vue +++ b/src/layouts/index.vue @@ -10,10 +10,7 @@ > <div :class="header === 'fixed' ? 'fixed-header' : ''"> <top-bar></top-bar> - <div - v-if="tagsBar === 'true' || tagsBar === true" - :class="{ 'tag-view-show': tagsBar }" - > + <div v-if="tagsBar === 'true' || tagsBar === true" :class="{ 'tag-view-show': tagsBar }"> <div class="vab-main"> <tags-bar></tags-bar> </div> @@ -32,10 +29,7 @@ }" > <div :class="header === 'fixed' ? 'fixed-header' : ''"> - <nav-bar - :cur-selected-index="curSelectedIndex" - @openModalFlag="openModalFlag" - ></nav-bar> + <nav-bar :cur-selected-index="curSelectedIndex" @openModalFlag="openModalFlag"></nav-bar> </div> <side-bar></side-bar> <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''"> @@ -55,37 +49,31 @@ <div class="modalContent"> <div class="title">è¯·é€‰æ‹©æ‚¨çš„ç›æŸ¥å¡«æŠ¥åœºæ™¯</div> <ul class="list"> - <li - v-for="(item, index) in screeningList" - :key="index" - @click="selectedIndex = index" - > + <li v-for="(item, index) in screeningList" :key="index" @click="selectedIndex = index"> <div class="screeningItem"> <div class="circle"> <img v-if="selectedIndex !== index" src="~@/assets/img/DataCenter/circle.png" - alt="" - srcset="" + alt + srcset /> <img v-if="selectedIndex == index" src="~@/assets/img/DataCenter/selected.png" - alt="" - srcset="" + alt + srcset /> </div> <div class="itemTitle">{{ item.title }}</div> </div> <div class="ItemIamge"> - <img :src="item.src" alt="" /> + <img :src="item.src" alt /> </div> </li> </ul> <div class="submit"> - <el-button type="primary" class="btn" @click="setSelectedIndex" - >ä¿å˜</el-button - > + <el-button type="primary" class="btn" @click="setSelectedIndex">ä¿å˜</el-button> </div> </div> </el-dialog> @@ -215,7 +203,7 @@ export default { } &.fixed.no-tags-bar { - padding-top: 56px; + // padding-top: 56px; } ::v-deep { @@ -277,7 +265,7 @@ export default { } &.fixed.no-tags-bar { - padding-top: 56px; + // padding-top: 56px; } .vab-main { @@ -323,6 +311,8 @@ export default { .side-bar-container { top: 90px; height: calc(100vh - 90px); + border-radius: 0px 4px 4px 0px; + box-shadow: none; } } ::v-deep .homeDialog .el-dialog__header { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 6d0e58d830533589222f67256ed826d2ecef918d..7bf05254c6b34879a07764edea0bbe785076c905 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -8,9 +8,9 @@ $base-color-default: #4e68ff; $base-z-index: 999; -$base-menu-background: #08203d; -$base-menu-children-background: #08203d; -$base-menu-background-active: #164884; +$base-menu-background: #252C49; +$base-menu-children-background: #252C49; +$base-menu-background-active: #546184; $base-menu-color: hsla(0, 0%, 100%, 0.95); $base-menu-color-active: hsla(0, 0%, 100%, 0.95); $base-title-color: #fff; @@ -30,7 +30,7 @@ $base-color-orange: #ff6700; $base-color-red: #ff4d4f; $base-color-gray: rgba(0, 0, 0, 0.65); $base-main-width: 1279px; -$base-border-radius: 2px; +$base-border-radius: 4px; $base-border-color: #dcdfe6; $base-form-width: 600px; $base-input-height: 32px; diff --git a/src/views/qualitycontrol-report/index.vue b/src/views/qualitycontrol-report/index.vue index 5042afa92b3865f70a541048b799939f5b0bab19..330551b19a6191841749fab4fce1b7ae3b1492e6 100644 --- a/src/views/qualitycontrol-report/index.vue +++ b/src/views/qualitycontrol-report/index.vue @@ -1,14 +1,206 @@ <template> - <div>质控报表</div> + <div class="main-box"> + <div class="total-box"> + <div class="box-title"> + <div class="blue-area mr-12"></div> + <span class="bold-font">总体情况</span> + </div> + <el-row :gutter="20" class="data-box"> + <el-col :span="6" v-for="(item,index) in totalList" :key="index"> + <div class="grid-content mb-12">{{item.label}}</div> + <h1>{{totalData[item.prop]}}</h1> + </el-col> + </el-row> + </div> + <div class="person-area"> + <div class="box-title"> + <div class="blue-area mr-12"></div> + <span class="bold-font">个人绩效情况</span> + </div> + <div class="type-box"> + <span class="mr-10">选择统计周期:</span> + <el-radio-group v-model="periodType"> + <el-radio-button label="month">月度</el-radio-button> + <el-radio-button label="season">å£åº¦</el-radio-button> + <el-radio-button label="year">年度</el-radio-button> + </el-radio-group> + </div> + <div class="type-box"> + <span class="mr-10">选择统计年份:</span> + <el-select v-model="yearBtn" placeholder="请选择"> + <el-option v-for="item in yearList" :value="item" :key="item" :label="item"></el-option> + </el-select> + </div> + <el-table :data="tableData" border show-summary class="mt-20"> + <el-table-column + v-for="(item,index) in tableColumn" + :key="index" + :prop="item.prop" + :label="item.label" + :width="item.width" + ></el-table-column> + </el-table> + </div> + </div> </template> <script> export default { data() { - return {} + return { + totalList:[ + { + label:"ç´¯è®¡å®¡æ ¸ç—…ä¾‹æ•°", + prop:"account" + }, + { + label:"ç´¯è®¡å®¡æ ¸åˆæ ¼ç—…例数", + prop:"account" + }, + { + label:"ç´¯è®¡å®¡æ ¸é©³å›žä¿®æ”¹ç—…ä¾‹æ•°", + prop:"account" + }, + { + label:"ç´¯è®¡å®¡æ ¸ä¸åˆæ ¼ç—…例数", + prop:"account" + }, + ], + totalData:{ + account:1600 + }, + periodType:"month", + yearList: [2021], + yearBtn:2022, + tableData:[{ + id: '12987122', + name: '王å°è™Ž', + season: '234', + amount2: '3.2', + amount3: 10 + }, { + id: '12987123', + name: '王å°è™Ž', + season: '165', + amount2: '4.43', + amount3: 12 + }, { + id: '12987124', + name: '王å°è™Ž', + season: '324', + amount2: '1.9', + amount3: 9 + }, { + id: '12987125', + name: '王å°è™Ž', + season: '621', + amount2: '2.2', + amount3: 17 + }, { + id: '12987126', + name: '王å°è™Ž', + season: '539', + amount2: '4.1', + amount3: 15 + }] + } + }, + methods: { + getNow() { + const nowDate = new Date() + this.yearBtn = nowDate.getFullYear(); + if(!this.yearList.find((item) => item == this.yearBtn)){ + this.yearList.push(this.yearBtn) + this.yearList.sort((a, b) => { + return a - b + }) + } + + }, }, - methods: {}, mounted() {}, + created() { + this.getNow(); + }, watch: {}, + computed:{ + tableColumn(){ + const listM=[ + { + label:"月份", + prop:"month" + }, + { + label:"å®¡æ ¸ç—…ä¾‹æ•°ï¼ˆä¾‹ï¼‰", + prop:"count" + }, + ] + const listS=[ + { + label:"å£åº¦", + prop:"season" + }, + { + label:"å®¡æ ¸ç—…ä¾‹æ•°ï¼ˆä¾‹ï¼‰", + prop:"count" + }, + ] + if(this.periodType == 'month'){ + return listM + } + if(this.periodType == 'season'){ + return listS + } + } + } } </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +::v-deep { + .data-box { + margin: 24px 0px; + border-bottom: 1px solid #f3f3f3; + } + .el-col { + text-align: center; + margin: 12px 0px 28px; + border-right: 1px solid #f3f3f3; + .grid-content { + font-size: 16px; + font-family: AlibabaPuHuiTiR; + color: #333333; + } + h1 { + color: #4e68ff; + font-weight: bold; + font-size: 32px; + } + } + .el-col:last-child { + border-right: none; + } +} +.main-box { + margin: 24px; +} +.box-title { + display: flex; + flex-direction: row; +} +.blue-area { + width: 4px; + height: 24px; + background: #4e68ff; +} +.bold-font { + font-size: 18px; + font-family: AlibabaPuHuiTiM; + color: #333333; + font-weight: bold; +} +.type-box { + display: flex; + flex-direction: row; + margin: 32px 0px 0px; + line-height: 32px; +} +</style> diff --git a/vue.config.js b/vue.config.js index 9f507840c721cc3a16a75002eefcccae2b70e80e..2cd195f19c321123319abe2014ce4e201fd73967 100644 --- a/vue.config.js +++ b/vue.config.js @@ -88,8 +88,8 @@ module.exports = { }, proxy: { "/api": { - target: "http://192.168.31.140:11021/", - // target: "https://ds.cixincloud.com/geca-api/", + // target: "http://192.168.31.140:11021/", + target: "https://ds.cixincloud.com/geca-api/", changeOrigin: true, pathRewrite: { "^/api": "",