From c1e5dfb4c72a0ab2478d3b7295ab7deecd3f8c8c Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 16 四月 2024 16:47:36 +0800
Subject: [PATCH] 修改样式
---
/dev/null | 15 -
src/components/view/a5-capacity-scope.vue | 21 +
src/components/view/b1-report-preparation.vue | 150 ++++++++--
src/components/view/b4-daily-business-statistics.vue | 28 +-
src/components/view/a6-device-overview.vue | 4
src/components/view/b4-inspection-item-statistics.vue | 22
src/view/index.vue | 4
src/assets/api/controller.js | 1
src/components/view/index-index.vue | 562 ---------------------------------------
9 files changed, 176 insertions(+), 631 deletions(-)
diff --git a/src/assets/api/controller.js b/src/assets/api/controller.js
index 4e431c5..1d106c0 100644
--- a/src/assets/api/controller.js
+++ b/src/assets/api/controller.js
@@ -85,6 +85,7 @@
upEnum: "/enum/upEnum", //淇敼鏋氫妇
delEnum: "/enum/delEnum", //鍒犻櫎鏋氫妇
selectEnumByCategory: "/enum/selectEnumByCategory", //閫氳繃鍒嗙被鏌ヨ鏋氫妇
+ getDic: "/enum/getDic", //鑾峰彇鏁版嵁瀛楀吀鐨勫垎绫�
}
const capacityScope = {
diff --git a/src/components/view/a5-capacity-scope.vue b/src/components/view/a5-capacity-scope.vue
index b538c92..bb6e503 100644
--- a/src/components/view/a5-capacity-scope.vue
+++ b/src/components/view/a5-capacity-scope.vue
@@ -165,6 +165,7 @@
sonLaboratory: {select:[]},
unit: {select:[]},
sample: {select:[]},
+ dic: {select:[]},
},
selectField: {
inspectionItemType: {
@@ -186,7 +187,8 @@
deviceGroup:{select:[]},
sample: {select:[]},
sonLaboratory: {select:[]},
- unit: {select:[]}
+ unit: {select:[]},
+ dic:{select:[]},
},
requiredAdd: ['sonLaboratory','inspectionItem', 'manHour', 'inspectionItemType','inspectionItemSubclass','inspectionValueType','laboratory','unit','method','price','manDay','deviceGroup','sample'],
requiredUp: ['sonLaboratory','inspectionItem', 'manHour', 'inspectionItemType','inspectionItemSubclass','inspectionValueType','laboratory','unit','method','price','manDay','deviceGroup','sample']
@@ -240,6 +242,7 @@
this.selectTestObjectByName()
this.getStandardTemplate()
this.selectEnumByCategoryForSLaboratory()
+ this.selectDocUnit()
this.selectEnumByCategoryForUnit()
this.getPower('0')
},
@@ -333,6 +336,22 @@
this.itemParameterData.tagField.unit.select = res.data
})
},
+ selectDocUnit() {
+ this.$axios.post(this.$api.enums.getDic).then(res => {
+ this.itemParameterData.selectField.dic.select = res.data.map(m=>{
+ return {
+ label: m,
+ value:m
+ }
+ })
+ this.itemParameterData.tagField.dic.select = res.data.map(m=>{
+ return {
+ label: m,
+ value:m
+ }
+ })
+ })
+ },
obtainItemParameterList() {
this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
let data = []
diff --git a/src/components/view/a6-device-overview.vue b/src/components/view/a6-device-overview.vue
index 9b0b5b4..5448024 100644
--- a/src/components/view/a6-device-overview.vue
+++ b/src/components/view/a6-device-overview.vue
@@ -39,13 +39,13 @@
.card {
list-style-type: none;
display: grid;
- grid-template-columns: repeat(auto-fit, 375px);
+ grid-template-columns: repeat(auto-fit, 415px);
/* justify-content: center; */
grid-gap: 16px;
min-height: 300px;
}
.card li{
- width: 375px;
+ width: 415px;
height: 165px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #EEEEEE;
diff --git a/src/components/view/b1-report-preparation.vue b/src/components/view/b1-report-preparation.vue
index eca96af..b3a289a 100644
--- a/src/components/view/b1-report-preparation.vue
+++ b/src/components/view/b1-report-preparation.vue
@@ -99,25 +99,55 @@
<el-button type="primary" @click="confirmClaim">纭� 瀹�</el-button>
</span>
</el-dialog>
- <el-dialog title="鎶ュ憡瀹℃牳" :visible.sync="issuedVisible" width="22cm" :modal-append-to-body="false" :fullscreen="fullscreen">
- <div class="full-screen">
+ <el-dialog title="鎶ュ憡瀹℃牳" :visible.sync="issuedVisible" width="400px" :modal-append-to-body="false" :fullscreen="fullscreen">
+ <!-- <div class="full-screen">
<i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen=true;" v-if="!fullscreen"></i>
<img src="../../../static/img/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen=false;" >
- </div>
- <div class="btns">
+ </div> -->
+ <!-- <div class="btns">
<el-button type="primary" size="small">閫氳繃</el-button>
<el-button size="small">涓嶉�氳繃</el-button>
- </div>
+ </div> -->
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="issuedReasonVisible=true">涓嶉�氳繃</el-button>
+ <el-button type="primary" @click="subIssued" :loading="loadingIssued">閫� 杩�</el-button>
+ </span>
</el-dialog>
- <el-dialog title="鎶ュ憡鎵瑰噯" :visible.sync="approveVisible" width="22cm" :modal-append-to-body="false" :fullscreen="fullscreen">
- <div class="full-screen">
+ <el-dialog title="涓嶉�氳繃鍘熷洜" :visible.sync="issuedReasonVisible" width="400px" :modal-append-to-body="false">
+ <div class="search_thing">
+ <div class="search_label">涓嶉�氳繃鍘熷洜锛�</div>
+ <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable
+ v-model="reason"></el-input></div>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="issuedReasonVisible=false">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleIssuedReason" :loading="loadingIssuedReason">纭畾</el-button>
+ </span>
+ </el-dialog>
+ <el-dialog title="鎶ュ憡鎵瑰噯" :visible.sync="approveVisible" width="400px" :modal-append-to-body="false" :fullscreen="fullscreen">
+ <!-- <div class="full-screen">
<i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen=true;" v-if="!fullscreen"></i>
<img src="../../../static/img/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen=false;" >
- </div>
- <div class="btns">
+ </div> -->
+ <!-- <div class="btns">
<el-button type="primary" size="small">鎵瑰噯</el-button>
<el-button size="small">涓嶆壒鍑�</el-button>
+ </div> -->
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="approveReasonVisible=true">涓嶆壒鍑�</el-button>
+ <el-button type="primary" @click="subApprove" :loading="loadingApprove">鎵� 鍑�</el-button>
+ </span>
+ </el-dialog>
+ <el-dialog title="涓嶆壒鍑嗗師鍥�" :visible.sync="approveReasonVisible" width="400px" :modal-append-to-body="false">
+ <div class="search_thing">
+ <div class="search_label">涓嶆壒鍑嗗師鍥狅細</div>
+ <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable
+ v-model="reason"></el-input></div>
</div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="approveReasonVisible=false">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleApproveReason" :loading="loadingApproveReason">纭畾</el-button>
+ </span>
</el-dialog>
</div>
</template>
@@ -146,15 +176,17 @@
isIndex: true,
showSelect: false,
select: false,
- do: [{
- id: 'handleWeave',
- font: '鍦ㄧ嚎缂栧埗',
- type: 'text',
- method: 'handleWeave',
- disabFun: (row, index) => {
- return row.isExamine != null
- }
- }, {
+ do: [
+ // {
+ // id: 'handleWeave',
+ // font: '鍦ㄧ嚎缂栧埗',
+ // type: 'text',
+ // method: 'handleWeave',
+ // disabFun: (row, index) => {
+ // return row.isExamine != null
+ // }
+ // },
+ {
id: 'download',
font: '涓嬭浇',
type: 'text',
@@ -179,6 +211,14 @@
disabFun: (row, index) => {
return row.isExamine != null
}
+ },{
+ id: 'handleSubmit',
+ font: '鎻愪氦',
+ type: 'text',
+ method: 'handleSubmit',
+ disabFun: (row, index) => {
+ return row.isExamine != null
+ }
}, {
id: 'handleIssued',
font: '瀹℃牳',
@@ -197,9 +237,9 @@
}
}],
linkEvent: {
- code: {
- method: 'selectAllByOne'
- }
+ // code: {
+ // method: 'selectAllByOne'
+ // }
},
tagField: {
isRatify: {
@@ -234,9 +274,17 @@
statusList: [],
claimVisible: false,
issuedVisible: false,
+ issuedReasonVisible:false,
approveVisible: false,
+ approveReasonVisible:false,
fullscreen:false,
- value:``
+ loadingApproveReason:false,
+ loadingApprove:false,
+ loadingIssuedReason:false,
+ loadingIssued:false,
+ value:``,
+ reason:'',
+ currentInfo:null,
}
},
mounted() {
@@ -303,8 +351,9 @@
let edit = false
let up = false
let res = false
- let issued = false
- let approve = false
+ let sub = true
+ let issued = true
+ let approve = true
for (var i = 0; i < power.length; i++) {
if (power[i].menuMethod == 'upReportFile') {
edit = true
@@ -322,18 +371,18 @@
if (!issued) {
this.componentData.do.splice(4, 1)
}
- if (!res) {
+ if (!sub) {
this.componentData.do.splice(3, 1)
}
- if (!up) {
+ if (!res) {
this.componentData.do.splice(2, 1)
}
- if (!edit) {
- this.componentData.do.splice(0, 1)
+ if (!up) {
+ this.componentData.do.splice(1, 1)
}
- },
- handleClose() {
- this.upLoad = false;
+ // if (!edit) {
+ // this.componentData.do.splice(0, 1)
+ // }
},
confirmClaim() {
// console.log(this.$refs.Word.getValue())
@@ -359,11 +408,50 @@
})
},
handleIssued(row){
+ this.currentInfo = row;
this.issuedVisible = true;
},
+ subIssued(){
+ this.loadingIssued = true;
+ },
handleApprove(row){
+ this.currentInfo = row;
this.approveVisible = true;
},
+ subApprove(){
+ this.loadingApprove = true;
+ },
+ handleSubmit(row){
+ this.$confirm('鏄惁鎻愪氦褰撳墠鎶ュ憡?', "鎻愪氦", {
+ confirmButtonText: "鎻愪氦",
+ cancelButtonText: "鍙栨秷",
+ type: "success"
+ }).then(() => {
+ this.$axios.post(this.delUrl, {
+ id: row.id
+ }).then(res => {
+ if (res.code === 201) {
+ return
+ }
+ this.$message.success('鎻愪氦鎴愬姛')
+ this.selectList()
+ }).catch(e => {
+ this.$message.error('鎻愪氦澶辫触')
+ })
+ }).catch(() => {})
+ },
+ handleIssuedReason(){
+ if(!this.reason){
+ return this.$message.error('璇疯緭鍏ュ師鍥�')
+ }
+ this.loadingIssuedReason = true;
+ },
+ handleApproveReason(){
+ if(!this.reason){
+ return this.$message.error('璇疯緭鍏ュ師鍥�')
+ }
+ this.loadingApproveReason = true
+ }
}
}
</script>
diff --git a/src/components/view/b4-daily-business-statistics.vue b/src/components/view/b4-daily-business-statistics.vue
index b6ca2d7..ae4f72c 100644
--- a/src/components/view/b4-daily-business-statistics.vue
+++ b/src/components/view/b4-daily-business-statistics.vue
@@ -2,8 +2,8 @@
<div class="daily-main">
<div class="daily-content" style="height:100%">
<p style="font-size: 16px;padding:19.5px 0px">姣忔棩涓氬姟缁熻</p>
- <el-row :gutter="35">
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-row :gutter="20">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩浠诲姟鎺ユ敹</h4>
@@ -11,13 +11,13 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-0.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩浠诲姟瀹屾垚</h4>
@@ -25,13 +25,13 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-1.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩浠诲姟鍓╀綑</h4>
@@ -39,13 +39,13 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-2.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩妫�娴嬭垂鐢�</h4>
@@ -53,13 +53,13 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-3.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩妫�娴嬪伐鏃�</h4>
@@ -67,13 +67,13 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-down.svg" alt="">
<span :class="{active:true}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-4.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="daily-card daily-head">
<div class="daily-head-left">
<h4>浠婃棩妫�娴嬩汉鍛�</h4>
@@ -81,14 +81,14 @@
<div class="daily-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-5.svg" alt="" srcset="">
</div>
</el-col>
</el-row>
- <el-row :gutter="35">
+ <el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
<div class="daily-card chart-box">
<h4>杩�10鏃ヤ换鍔℃帴鏀堕噺</h4>
diff --git a/src/components/view/b4-inspection-item-statistics.vue b/src/components/view/b4-inspection-item-statistics.vue
index e204faa..6eb1a49 100644
--- a/src/components/view/b4-inspection-item-statistics.vue
+++ b/src/components/view/b4-inspection-item-statistics.vue
@@ -2,8 +2,8 @@
<div class="inspection-main">
<div class="inspection-content" style="height:100%">
<p style="font-size: 16px;padding:19.5px 0px">妫�娴嬮」鐩粺璁�</p>
- <el-row :gutter="35">
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-row :gutter="20">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head">
<div class="inspection-head-left">
<h4>浠婃棩椤圭洰鎺ユ敹</h4>
@@ -11,13 +11,13 @@
<div class="inspection-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-0.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head">
<div class="inspection-head-left">
<h4>浠婃棩椤圭洰瀹屾垚</h4>
@@ -25,13 +25,13 @@
<div class="inspection-head-left-info">
<img src="../../../static/img/daliy-up.svg" alt="">
<span :class="{active:false}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-1.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head">
<div class="inspection-head-left">
<h4>浠婃棩椤圭洰鍓╀綑</h4>
@@ -39,32 +39,32 @@
<div class="inspection-head-left-info">
<img src="../../../static/img/daliy-down.svg" alt="">
<span :class="{active:true}" class="num"> 8.5% </span>
- <span>杈冩槰澶�</span>
+ <span style="font-size: 12px;">杈冩槰澶�</span>
</div>
</div>
<img src="../../../static/img/daliy-2.svg" alt="" srcset="">
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
<h4 style="margin-bottom: 5px;">浠婃棩椤圭洰鍚堟牸鐜�</h4>
<echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module>
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
<h4 style="margin-bottom: 5px;">浠婃棩椤圭洰瀹屾垚鐜�</h4>
<echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module>
</div>
</el-col>
- <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
+ <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
<div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
<h4 style="margin-bottom: 5px;">浠婃棩椤圭洰寤舵湡鐜�</h4>
<echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module>
</div>
</el-col>
</el-row>
- <el-row :gutter="35">
+ <el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
<div class="inspection-card chart-box">
<h4>杩�10鏃ラ」鐩帴鏀堕噺</h4>
diff --git a/src/components/view/home.vue b/src/components/view/home.vue
deleted file mode 100644
index 2f83209..0000000
--- a/src/components/view/home.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
- <div class="home-page">
-
- </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index b7b059a..26c81c0 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -20,11 +20,11 @@
.no1 {
display: flex;
+ justify-content: space-between;
}
.no1 .left {
width: 65%;
- margin-right: 10px;
}
.left-1 {
@@ -56,89 +56,11 @@
font-size: 17px;
}
- .left-2 {
- width: 100%;
- display: flex;
- }
-
- .card-1 {
- width: calc(25% - 40px);
- height: 100px;
- display: flex;
- align-items: center;
- margin-right: 10px;
- }
-
- .card-1 .label .p1 {
- color: #333;
- font-size: 0.85vw;
- font-style: normal;
- font-weight: 400;
- margin-bottom: 10px;
- }
-
- .card-1 .label .p2 {
- color: #3A7BFA;
- font-size: 1.4vw;
- font-style: normal;
- font-weight: 400;
- }
-
- .card-1 .label {
- width: calc(100% - 4vw);
- }
-
- .card-1 .icon {
- background-color: #F3F6FA;
- border-radius: 50%;
- width: 4vw;
- height: 4vw;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .card-1 .icon i {
- font-size: 1.6vw;
- color: #3A7BFA;
- }
-
.right {
- width: 35%;
+ width: 32%;
height: calc(7.2vw + 10px + 120px);
display: flex;
flex-wrap: wrap;
- }
-
- .card-2 {
- width: 33.3%;
- height: calc(50% - 20px);
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- cursor: pointer;
- margin-bottom: 10px;
- }
-
- .card-2 .icon {
- width: 3.5vw;
- height: 3.5vw;
- background-color: #F3F6FA;
- border-radius: 24px;
- }
-
- .card-2 .icon i {
- font-size: 1.7vw;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- }
-
- .card-2 .text {
- width: 100%;
- text-align: center;
}
::-webkit-scrollbar {
@@ -150,36 +72,14 @@
border-radius: 3px;
}
- .cart-3,
- .cart-4,
- .cart-5,
- .cart-6 {
- width: calc(50%);
- height: 300px;
- background-color: #fff;
- }
-
- .cart-3 div,
- .cart-4 div,
- .cart-5 div,
- .cart-6 div {
- width: 100%;
- height: calc(100% - 30px);
- }
-
- .card p {
- width: 100%;
- line-height: 30px;
- }
-
- .cart-3,
- .cart-5 {
- margin-right: 10px;
- }
</style>
<template>
<div class="index">
+ <el-row :gutter="10">
+ <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+ <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+ </el-row>
<div class="no no1">
<div class="left">
<div class="left-1 card">
@@ -190,142 +90,28 @@
</div>
</div>
</div>
- <div class="left-2">
- <div class="card card-1">
- <div class="label">
- <p class="p1">鏄ㄦ棩瀹㈡埛娑堣垂</p>
- <p class="p2">{{data.data1.data1}}</p>
- </div>
- <div class="icon">
- <i class="font icon-a-Group1139"></i>
- </div>
- </div>
- <div class="card card-1">
- <div class="label">
- <p class="p1">鏄ㄦ棩瀹為檯娑堣垂</p>
- <p class="p2">{{data.data1.data2}}</p>
- </div>
- <div class="icon">
- <i class="font icon-a-Group1139"></i>
- </div>
- </div>
- <div class="card card-1">
- <div class="label">
- <p class="p1">鏄ㄦ棩鎴愭湰</p>
- <p class="p2">{{data.data1.data3}}</p>
- </div>
- <div class="icon">
- <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
- </div>
- </div>
- <div class="card card-1" style="margin-right: 0;">
- <div class="label">
- <p class="p1">鏄ㄦ棩瀹為檯鎴愭湰</p>
- <p class="p2">{{data.data1.data4}}</p>
- </div>
- <div class="icon">
- <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
- </div>
- </div>
- </div>
</div>
<div class="right card">
- <p>甯哥敤鍔熻兘</p>
- <div class="card-2" @click="openComponent('璐㈠姟涓婃姤')">
- <div class="icon">
- <i class="font icon-a-Group1236" style="color: #3A7BFA;"></i>
- </div>
- <div class="text">璐㈠姟涓婃姤</div>
- </div>
- <div class="card-2" @click="openComponent('杩涚矇涓婃姤')">
- <div class="icon">
- <i class="font icon-a-Group1122" style="color: #34BD66;"></i>
- </div>
- <div class="text">杩涚矇涓婃姤</div>
- </div>
- <div class="card-2" @click="openComponent('浜哄憳绠＄悊')">
- <div class="icon">
- <i class="font icon-a-Group1124" style="color: #FF9900;"></i>
- </div>
- <div class="text">浜哄憳绠＄悊</div>
- </div>
- <div class="card-2" @click="openComponent('瑙掕壊绠＄悊')">
- <div class="icon">
- <i class="font icon-a-Group1126" style="color: #3A7BFA;"></i>
- </div>
- <div class="text">瑙掕壊绠＄悊</div>
- </div>
- <div class="card-2" @click="openComponent('瀹㈡埛绠＄悊')">
- <div class="icon">
- <i class="font icon-a-Group1124" style="color: #34BD66;"></i>
- </div>
- <div class="text">瀹㈡埛绠＄悊</div>
- </div>
- <div class="card-2" @click="openComponent('椤圭洰绠＄悊')">
- <div class="icon">
- <i class="font icon-a-Group1232" style="color: #FF9900;"></i>
- </div>
- <div class="text">椤圭洰绠＄悊</div>
- </div>
- </div>
- </div>
- <div class="no no-2">
- <div class="card cart-3">
- <p>涓�鍛ㄥ鎴锋秷璐�</p>
- <div id="card-1"></div>
- </div>
- <div class="card cart-4">
- <p>涓�鍛ㄥ鎴峰疄闄呮秷璐�</p>
- <div id="card-2"></div>
- </div>
- </div>
- <div class="no no-2">
- <div class="card cart-5">
- <p>椤圭洰瀹㈡埛鎴愭湰</p>
- <div id="card-3"></div>
- </div>
- <div class="card cart-6">
- <p>椤圭洰瀹為檯鎴愭湰</p>
- <div id="card-4"></div>
</div>
</div>
</div>
</template>
<script>
- import * as echarts from 'echarts';
export default {
data() {
return {
user: {},
now: null,
- data: {
- data1: {},
- data2: [],
- data3: [],
- data4: [],
- data5: []
- },
- myChart1: null,
- myChart2: null,
- myChart3: null,
- myChart4: null
}
},
mounted() {
this.user = JSON.parse(localStorage.getItem('user'))
this.nowTime()
- this.myChart1 = echarts.init($('#card-1')[0]);
- this.myChart2 = echarts.init($('#card-2')[0]);
- this.myChart3 = echarts.init($('#card-3')[0]);
- this.myChart4 = echarts.init($('#card-4')[0]);
this.getDataList()
setInterval(() => {
this.nowTime()
}, 1000)
- /* setInterval(() => {
- this.getDataList()
- }, 60 * 1000) */
},
methods: {
nowTime() {
@@ -354,345 +140,11 @@
}
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
},
- openComponent(str) {
- var str1 = {}
- var str2 = -1
- switch (str) {
- case '璐㈠姟涓婃姤':
- str1 = {
- k: 6,
- v: "璐㈠姟涓婃姤",
- i: "font icon-a-Group1236",
- u: "finance-submit"
- }
- break
- case '杩涚矇涓婃姤':
- str1 = {
- k: 5,
- v: "杩涚矇涓婃姤",
- i: "font icon-a-Group1122",
- u: "fans-submit"
- }
- break
- case '浜哄憳绠＄悊':
- str1 = {
- k: 8,
- v: "浜哄憳绠＄悊",
- i: "font icon-a-Group1124",
- u: "person-manage"
- }
- break
- case '瑙掕壊绠＄悊':
- str1 = {
- k: 7,
- v: "瑙掕壊绠＄悊",
- i: "font icon-a-Group1126",
- u: "role-manage"
- }
- break
- case '瀹㈡埛绠＄悊':
- str1 = {
- k: 4,
- v: "瀹㈡埛绠＄悊",
- i: "font icon-24gl-clipboardList",
- u: "custom-enum"
- }
- str2 = 4
- break
- case '椤圭洰绠＄悊':
- str1 = {
- k: 11,
- v: "椤圭洰绠＄悊",
- i: "font icon-24gl-clipboardList",
- u: "product-enum"
- }
- str2 = 4
- break
- }
- this.$parent.addTab(str1, str2)
- },
- initEcharts1() {
- var myChart = this.myChart1
- var option;
- let dataX = []
- let data = [];
- this.data.data2.forEach(a => {
- dataX.push(a.date)
- data.push(a.account_consumptions)
- })
- let yMax = 1000;
- let dataShadow = [];
- for (let i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
- }
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: "20px",
- left: "50px",
- bottom: "30px",
- right: "20px"
- },
- title: {},
- xAxis: {
- type: 'category',
- data: dataX,
- axisLabel: {
- color: '#333'
- },
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#333'
- },
- splitLine: {
- lineStyle: {
- type: [10, 10],
- dashOffset: 20
- },
- show: true
- }
- },
- series: [{
- type: 'bar',
- barWidth: '20%',
- roam: false,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#ffd062'
- },
- {
- offset: 0.5,
- color: '#ffa844'
- },
- {
- offset: 1,
- color: '#f59433'
- }
- ]),
- barBorderRadius: [8, 8, 0, 0]
- },
- data: data
- }]
- };
- option && myChart.setOption(option);
- },
- initEcharts2() {
- var myChart = this.myChart2
- var option;
- let dataX = []
- let data = [];
- this.data.data3.forEach(a => {
- dataX.push(a.date)
- data.push(a.consumption)
- })
- let yMax = 1000;
- let dataShadow = [];
- for (let i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
- }
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: "20px",
- left: "50px",
- bottom: "30px",
- right: "20px"
- },
- title: {},
- xAxis: {
- type: 'category',
- data: dataX,
- axisLabel: {
- color: '#333'
- },
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#333'
- },
- splitLine: {
- lineStyle: {
- type: [10, 10],
- dashOffset: 20
- },
- show: true
- }
- },
- series: [{
- type: 'bar',
- barWidth: '20%',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#74b3fe'
- },
- {
- offset: 0.5,
- color: '#4982f3'
- },
- {
- offset: 1,
- color: '#1c56df'
- }
- ]),
- barBorderRadius: [8, 8, 0, 0]
- },
- data: data
- }]
- };
- option && myChart.setOption(option);
- },
- initEcharts3() {
- var myChart = this.myChart3
- var dataX = []
- var dataY = []
- this.data.data4.forEach(a => {
- dataX.push(a.product)
- dataY.push(a.customerCosts)
- })
- var option;
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: "20px",
- left: "50px",
- bottom: "30px",
- right: "20px"
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: dataX,
- axisLabel: {
- interval: 0,
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- lineStyle: {
- type: [10, 10],
- dashOffset: 20
- },
- show: true
- }
- },
- series: [{
- data: dataY,
- type: 'line',
- areaStyle: {},
- smooth: true,
- symbolSize: 7,
- lineStyle: {
- color: '#3c7aff'
- },
- itemStyle: {
- color: '#3c7aff'
- },
- areaStyle: {
- color: '#E5EEFF'
- }
- }]
- };
- option && myChart.setOption(option);
- },
- initEcharts4() {
- var myChart = this.myChart4
- var dataX = []
- var dataY = []
- this.data.data5.forEach(a => {
- dataX.push(a.product)
- dataY.push(a.actualCost)
- })
- var option;
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: "20px",
- left: "50px",
- bottom: "30px",
- right: "20px"
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: dataX,
- axisLabel: {
- interval: 0
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- lineStyle: {
- type: [10, 10],
- dashOffset: 20
- },
- show: true
- }
- },
- series: [{
- data: dataY,
- type: 'line',
- areaStyle: {},
- smooth: true,
- symbolSize: 7,
- lineStyle: {
- color: '#f59433'
- },
- itemStyle: {
- color: '#f59433'
- },
- areaStyle: {
- color: '#FFF6DE'
- }
- }]
- };
- option && myChart.setOption(option);
- },
getDataList() {
this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
this.data = res.data
- this.initEcharts1()
- this.initEcharts2()
- this.initEcharts3()
- this.initEcharts4()
})
}
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/view/index.vue b/src/view/index.vue
index df0ea64..5bf3b0c 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -436,7 +436,7 @@
k: 0,
v: "涓汉棣栭〉",
i: "font icon-a-Group1124",
- u: "nullFace"
+ u: "index-index"
}]
}
this.tabActive = JSON.parse(localStorage.getItem('tabActive'))
@@ -499,7 +499,7 @@
k: 0,
v: "涓汉棣栭〉",
i: "font icon-a-Group1124",
- u: "nullFace"
+ u: "index-index"
}]
this.saveClick()
},
--
Gitblit v1.9.3