From 1ef38f7b420900816f27bdea509017cab11a96d2 Mon Sep 17 00:00:00 2001 From: qushaowei <qushaowei@163.com> Date: 星期日, 29 十月 2023 23:34:48 +0800 Subject: [PATCH] 主页面 --- src/views/dashboard/IndexBdc.vue | 957 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 592 insertions(+), 365 deletions(-) diff --git a/src/views/dashboard/IndexBdc.vue b/src/views/dashboard/IndexBdc.vue index fa8edea..87a6d25 100644 --- a/src/views/dashboard/IndexBdc.vue +++ b/src/views/dashboard/IndexBdc.vue @@ -1,9 +1,21 @@ <template> <div class="page-header-index-wide"> <a-row :gutter="24"> - <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> - <chart-card :loading="loading" title="鍙楃悊閲�" :total="cardCount.sll | NumberFormat"> - <a-tooltip title="鎸囨爣璇存槑" slot="action"> + <a-col + :sm="24" + :md="12" + :xl="6" + :style="{ marginBottom: '24px' }" + > + <chart-card + :loading="loading" + title="鍙楃悊閲�" + :total="cardCount.sll | NumberFormat" + > + <a-tooltip + title="鎸囨爣璇存槑" + slot="action" + > <a-icon type="info-circle-o" /> </a-tooltip> <div> @@ -12,45 +24,98 @@ <template slot="footer">浠婃棩鍙楃悊閲忥細<span>{{ todaySll }}</span></template> </chart-card> </a-col> - <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> - <chart-card :loading="loading" title="鍔炵粨閲�" :total="cardCount.bjl | NumberFormat"> - <a-tooltip title="鎸囨爣璇存槑" slot="action"> + <a-col + :sm="24" + :md="12" + :xl="6" + :style="{ marginBottom: '24px' }" + > + <chart-card + :loading="loading" + title="鍔炵粨閲�" + :total="cardCount.bjl | NumberFormat" + > + <a-tooltip + title="鎸囨爣璇存槑" + slot="action" + > <a-icon type="info-circle-o" /> </a-tooltip> <div> - <mini-area :data-source="chartData.bjl"/> + <mini-area :data-source="chartData.bjl" /> </div> <template slot="footer">浠婃棩鍔炵粨閲忥細<span>{{ todayBjl }}</span></template> </chart-card> </a-col> - <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> - <chart-card :loading="loading" title="鐢ㄦ埛鍙楃悊閲�" :total="cardCount.isll | NumberFormat"> - <a-tooltip title="鎸囨爣璇存槑" slot="action"> + <a-col + :sm="24" + :md="12" + :xl="6" + :style="{ marginBottom: '24px' }" + > + <chart-card + :loading="loading" + title="鐢ㄦ埛鍙楃悊閲�" + :total="cardCount.isll | NumberFormat" + > + <a-tooltip + title="鎸囨爣璇存槑" + slot="action" + > <a-icon type="info-circle-o" /> </a-tooltip> <div> - <mini-bar :datasource="chartData.isll" :height="50"/> + <mini-bar + :datasource="chartData.isll" + :height="50" + /> </div> <template slot="footer">鐢ㄦ埛浠婃棩鍙楃悊閲忥細<span>{{ todayISll }}</span></template> </chart-card> </a-col> - <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> - <chart-card :loading="loading" title="鐢ㄦ埛鍔炵粨閲�" :total="cardCount.ibjl | NumberFormat"> - <a-tooltip title="鎸囨爣璇存槑" slot="action"> + <a-col + :sm="24" + :md="12" + :xl="6" + :style="{ marginBottom: '24px' }" + > + <chart-card + :loading="loading" + title="鐢ㄦ埛鍔炵粨閲�" + :total="cardCount.ibjl | NumberFormat" + > + <a-tooltip + title="鎸囨爣璇存槑" + slot="action" + > <a-icon type="info-circle-o" /> </a-tooltip> <div> - <mini-bar :datasource="chartData.ibjl" :height="50"/> + <mini-bar + :datasource="chartData.ibjl" + :height="50" + /> </div> <template slot="footer">鐢ㄦ埛浠婃棩鍔炵粨閲忥細<span>{{ todayIBjl }}</span></template> </chart-card> </a-col> </a-row> - <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}"> + <a-card + :loading="loading" + :bordered="false" + :body-style="{padding: '0'}" + > <div class="salesCard"> - <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"> - <div class="extra-wrapper" slot="tabBarExtraContent"> + <a-tabs + default-active-key="1" + size="large" + :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" + > + <div + class="extra-wrapper" + slot="tabBarExtraContent" + > <div class="extra-item"> <a>浠婃棩</a> <a>鏈懆</a> @@ -60,18 +125,50 @@ <a-range-picker :style="{width: '256px'}" /> </div> - <a-tab-pane loading="true" tab="鍙楃悊鐩戠" key="1"> + <a-tab-pane + loading="true" + tab="鍙楃悊鐩戠" + key="1" + > <a-row> - <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> + <a-col + :xl="16" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > <index-bar title="鍙楃悊閲忕粺璁�" /> </a-col> - <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> + <a-col + :xl="8" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > - <a-card title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}"> + <a-card + title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" + style="margin-bottom: 24px" + :bordered="false" + :body-style="{padding: 0}" + > <div class="item-group"> <a-row> - <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index "> - <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button> + <a-col + :class="'more-btn'" + :span="12" + v-for="(item,index) in registerTypeList" + :key=" 'registerType'+index " + > + <a-button + @click="goPage(index)" + style="margin-bottom:10px" + size="small" + type="primary" + ghost + >{{ item.text }}</a-button> </a-col> </a-row> </div> @@ -81,18 +178,53 @@ </a-row> </a-tab-pane> - <a-tab-pane tab="浜や簰鐩戠" key="2"> + <a-tab-pane + tab="浜や簰鐩戠" + key="2" + > <a-row> - <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> - <bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="骞冲彴涓庨儴闂ㄤ氦浜掗噺缁熻"></bar-multid> + <a-col + :xl="16" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > + <bar-multid + :sourceData="jhjgData" + :fields="jhjgFields" + title="骞冲彴涓庨儴闂ㄤ氦浜掗噺缁熻" + ></bar-multid> </a-col> - <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> + <a-col + :xl="8" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > - <a-card title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}"> + <a-card + title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" + style="margin-bottom: 24px" + :bordered="false" + :body-style="{padding: 0}" + > <div class="item-group"> <a-row> - <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index "> - <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button> + <a-col + :class="'more-btn'" + :span="12" + v-for="(item,index) in registerTypeList" + :key=" 'registerType'+index " + > + <a-button + @click="goPage(index)" + style="margin-bottom:10px" + size="small" + type="primary" + ghost + >{{ item.text }}</a-button> </a-col> </a-row> </div> @@ -102,25 +234,63 @@ </a-row> </a-tab-pane> - <a-tab-pane tab="瀛樺偍鐩戠" key="4"> + <a-tab-pane + tab="瀛樺偍鐩戠" + key="4" + > <a-row> - <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> + <a-col + :xl="16" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > <a-row> <template v-if="diskInfo && diskInfo.length>0"> - <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index "> - <dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo> + <a-col + :span="12" + v-for="(item,index) in diskInfo" + :key=" 'diskInfo'+index " + > + <dash-chart-demo + :title="item.name" + :datasource="item.restPPT" + ></dash-chart-demo> </a-col> </template> </a-row> </a-col> - <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> + <a-col + :xl="8" + :lg="12" + :md="12" + :sm="24" + :xs="24" + > - <a-card title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}"> + <a-card + title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" + style="margin-bottom: 24px" + :bordered="false" + :body-style="{padding: 0}" + > <div class="item-group"> <a-row> - <a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index "> - <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button> + <a-col + :class="'more-btn'" + :span="10" + v-for="(item,index) in registerTypeList" + :key=" 'registerType'+index " + > + <a-button + @click="goPage(index)" + style="margin-bottom:10px" + size="small" + type="primary" + ghost + >{{ item.text }}</a-button> </a-col> </a-row> </div> @@ -136,36 +306,83 @@ </a-card> <a-row :gutter="12"> - <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }"> + <a-card + :loading="loading" + :class="{ 'anty-list-cust':true }" + :bordered="false" + :style="{ marginTop: '24px' }" + > - <a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"> - <div class="extra-wrapper" slot="tabBarExtraContent"> - <a-radio-group v-model="indexRegisterType" @change="changeRegisterType"> + <a-tabs + v-model="indexBottomTab" + size="large" + :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" + > + <div + class="extra-wrapper" + slot="tabBarExtraContent" + > + <a-radio-group + v-model="indexRegisterType" + @change="changeRegisterType" + > <a-radio-button value="杞Щ鐧昏">杞Щ鐧昏</a-radio-button> <a-radio-button value="鎶垫娂鐧昏">鎶垫娂鐧昏</a-radio-button> <a-radio-button value="">鎵�鏈�</a-radio-button> </a-radio-group> </div> - <a-tab-pane loading="true" tab="涓氬姟娴佺▼闄愭椂鐩戠" key="1"> + <a-tab-pane + loading="true" + tab="涓氬姟娴佺▼闄愭椂鐩戠" + key="1" + > - <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1"> - <template slot="flowRate" slot-scope="text, record, index"> - <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" /> + <a-table + :dataSource="dataSource1" + size="default" + rowKey="id" + :columns="columns" + :pagination="ipagination1" + @change="tableChange1" + > + <template + slot="flowRate" + slot-scope="text, record, index" + > + <a-progress + :strokeColor="getPercentColor(record.flowRate)" + :format="getPercentFormat" + :percent="getFlowRateNumber(record.flowRate)" + style="width:80px" + /> </template> </a-table> </a-tab-pane> - <a-tab-pane loading="true" tab="涓氬姟鑺傜偣闄愭椂鐩戠" key="2"> - <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2"> - <template slot="flowRate" slot-scope="text, record, index"> + <a-tab-pane + loading="true" + tab="涓氬姟鑺傜偣闄愭椂鐩戠" + key="2" + > + <a-table + :dataSource="dataSource2" + size="default" + rowKey="id" + :columns="columns2" + :pagination="ipagination2" + @change="tableChange2" + > + <template + slot="flowRate" + slot-scope="text, record, index" + > <span style="color: red;">{{ record.flowRate }}灏忔椂</span> </template> </a-table> </a-tab-pane> </a-tabs> - </a-card> </a-row> @@ -175,345 +392,355 @@ <script> - import ACol from "ant-design-vue/es/grid/Col" - import ATooltip from "ant-design-vue/es/tooltip/Tooltip" - import ChartCard from '@/components/ChartCard' - import MiniBar from '@/components/chart/MiniBar' - import MiniArea from '@/components/chart/MiniArea' - import IndexBar from '@/components/chart/IndexBar' - import BarMultid from '@/components/chart/BarMultid' - import DashChartDemo from '@/components/chart/DashChartDemo' +import ACol from "ant-design-vue/es/grid/Col" +import ATooltip from "ant-design-vue/es/tooltip/Tooltip" +import ChartCard from '@/components/ChartCard' +import MiniBar from '@/components/chart/MiniBar' +import MiniArea from '@/components/chart/MiniArea' +import IndexBar from '@/components/chart/IndexBar' +import BarMultid from '@/components/chart/BarMultid' +import DashChartDemo from '@/components/chart/DashChartDemo' - const jhjgData = [ - { type: '鎴跨', '1鏈�': 900, '2鏈�': 1120, '3鏈�': 1380, '4鏈�': 1480, '5鏈�': 1450, '6鏈�': 1100, '7鏈�':1300, '8鏈�':900,'9鏈�':1000 ,'10鏈�':1200 ,'11鏈�':600 ,'12鏈�':900 }, - { type: '绋庡姟', '1鏈�':1200, '2鏈�': 1500, '3鏈�': 1980, '4鏈�': 2000, '5鏈�': 1000, '6鏈�': 600, '7鏈�':900, '8鏈�':1100,'9鏈�':1300 ,'10鏈�':2000 ,'11鏈�':900 ,'12鏈�':1100 }, - { type: '涓嶅姩浜�', '1鏈�':2000, '2鏈�': 1430, '3鏈�': 1300, '4鏈�': 1400, '5鏈�': 900, '6鏈�': 500, '7鏈�':600, '8鏈�':1000,'9鏈�':600 ,'10鏈�':1000 ,'11鏈�':1500 ,'12鏈�':1200 } - ] +const jhjgData = [ + { type: '鎴跨', '1鏈�': 900, '2鏈�': 1120, '3鏈�': 1380, '4鏈�': 1480, '5鏈�': 1450, '6鏈�': 1100, '7鏈�': 1300, '8鏈�': 900, '9鏈�': 1000, '10鏈�': 1200, '11鏈�': 600, '12鏈�': 900 }, + { type: '绋庡姟', '1鏈�': 1200, '2鏈�': 1500, '3鏈�': 1980, '4鏈�': 2000, '5鏈�': 1000, '6鏈�': 600, '7鏈�': 900, '8鏈�': 1100, '9鏈�': 1300, '10鏈�': 2000, '11鏈�': 900, '12鏈�': 1100 }, + { type: '涓嶅姩浜�', '1鏈�': 2000, '2鏈�': 1430, '3鏈�': 1300, '4鏈�': 1400, '5鏈�': 900, '6鏈�': 500, '7鏈�': 600, '8鏈�': 1000, '9鏈�': 600, '10鏈�': 1000, '11鏈�': 1500, '12鏈�': 1200 } +] - const jhjgFields=[ - '1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�', - '7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�' - ] +const jhjgFields = [ + '1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', + '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�' +] - const xljgData = [ - {type:'涓�鏈�',"鎴跨":1.12,"绋庡姟":1.55,"涓嶅姩浜�":1.2}, - {type:'浜屾湀',"鎴跨":1.65,"绋庡姟":1.32,"涓嶅姩浜�":1.42}, - {type:'涓夋湀',"鎴跨":1.85,"绋庡姟":1.1,"涓嶅姩浜�":1.5}, +const xljgData = [ + { type: '涓�鏈�', "鎴跨": 1.12, "绋庡姟": 1.55, "涓嶅姩浜�": 1.2 }, + { type: '浜屾湀', "鎴跨": 1.65, "绋庡姟": 1.32, "涓嶅姩浜�": 1.42 }, + { type: '涓夋湀', "鎴跨": 1.85, "绋庡姟": 1.1, "涓嶅姩浜�": 1.5 }, - {type:'鍥涙湀',"鎴跨":1.33,"绋庡姟":1.63,"涓嶅姩浜�":1.4}, - {type:'浜旀湀',"鎴跨":1.63,"绋庡姟":1.8,"涓嶅姩浜�":1.7}, - {type:'鍏湀',"鎴跨":1.85,"绋庡姟":1.98,"涓嶅姩浜�":1.8}, + { type: '鍥涙湀', "鎴跨": 1.33, "绋庡姟": 1.63, "涓嶅姩浜�": 1.4 }, + { type: '浜旀湀', "鎴跨": 1.63, "绋庡姟": 1.8, "涓嶅姩浜�": 1.7 }, + { type: '鍏湀', "鎴跨": 1.85, "绋庡姟": 1.98, "涓嶅姩浜�": 1.8 }, - {type:'涓冩湀',"鎴跨":1.98,"绋庡姟":1.5,"涓嶅姩浜�":1.76}, - {type:'鍏湀',"鎴跨":1.48,"绋庡姟":1.2,"涓嶅姩浜�":1.3}, - {type:'涔濇湀',"鎴跨":1.41,"绋庡姟":1.9,"涓嶅姩浜�":1.6}, + { type: '涓冩湀', "鎴跨": 1.98, "绋庡姟": 1.5, "涓嶅姩浜�": 1.76 }, + { type: '鍏湀', "鎴跨": 1.48, "绋庡姟": 1.2, "涓嶅姩浜�": 1.3 }, + { type: '涔濇湀', "鎴跨": 1.41, "绋庡姟": 1.9, "涓嶅姩浜�": 1.6 }, - {type:'鍗佹湀',"鎴跨":1.1,"绋庡姟":1.1,"涓嶅姩浜�":1.4}, - {type:'鍗佷竴鏈�',"鎴跨":1.85,"绋庡姟":1.6,"涓嶅姩浜�":1.5}, - {type:'鍗佷簩鏈�',"鎴跨":1.5,"绋庡姟":1.4,"涓嶅姩浜�":1.3} - ] - const xljgFields=["鎴跨","绋庡姟","涓嶅姩浜�"] + { type: '鍗佹湀', "鎴跨": 1.1, "绋庡姟": 1.1, "涓嶅姩浜�": 1.4 }, + { type: '鍗佷竴鏈�', "鎴跨": 1.85, "绋庡姟": 1.6, "涓嶅姩浜�": 1.5 }, + { type: '鍗佷簩鏈�', "鎴跨": 1.5, "绋庡姟": 1.4, "涓嶅姩浜�": 1.3 } +] +const xljgFields = ["鎴跨", "绋庡姟", "涓嶅姩浜�"] - const dataCol1 = [{ - title: '涓氬姟鍙�', - align:"center", - dataIndex: 'reBizCode' - },{ - title: '涓氬姟绫诲瀷', - align:"center", - dataIndex: 'type' - },{ - title: '鍙楃悊浜�', - align:"center", - dataIndex: 'acceptBy' - },{ - title: '鍙楃悊鏃堕棿', - align:"center", - dataIndex: 'acceptDate' - },{ - title: '褰撳墠鑺傜偣', - align:"center", - dataIndex: 'curNode' - },{ - title: '鍔炵悊鏃堕暱', - align:"center", - dataIndex: 'flowRate', - scopedSlots: { customRender: 'flowRate' } - }]; - const dataSource1=[ - {reBizCode:"1",type:"杞Щ鐧昏",acceptBy:'寮犱笁',acceptDate:"2019-01-22",curNode:"浠诲姟鍒嗘淳",flowRate:60}, - {reBizCode:"2",type:"鎶垫娂鐧昏",acceptBy:'鏉庡洓',acceptDate:"2019-01-23",curNode:"棰嗗瀹℃牳",flowRate:30}, - {reBizCode:"3",type:"杞Щ鐧昏",acceptBy:'鐜嬫',acceptDate:"2019-01-25",curNode:"浠诲姟澶勭悊",flowRate:20}, - {reBizCode:"4",type:"杞Щ鐧昏",acceptBy:'璧垫ゼ',acceptDate:"2019-11-22",curNode:"閮ㄩ棬瀹℃牳",flowRate:80}, - {reBizCode:"5",type:"杞Щ鐧昏",acceptBy:'閽卞氨',acceptDate:"2019-12-12",curNode:"浠诲姟鍒嗘淳",flowRate:90}, - {reBizCode:"6",type:"杞Щ鐧昏",acceptBy:'瀛欏惂',acceptDate:"2019-03-06",curNode:"浠诲姟澶勭悊",flowRate:10}, - {reBizCode:"7",type:"鎶垫娂鐧昏",acceptBy:'鍛ㄥぇ',acceptDate:"2019-04-13",curNode:"浠诲姟鍒嗘淳",flowRate:100}, - {reBizCode:"8",type:"鎶垫娂鐧昏",acceptBy:'鍚翠簩',acceptDate:"2019-05-09",curNode:"浠诲姟涓婃姤",flowRate:50}, - {reBizCode:"9",type:"鎶垫娂鐧昏",acceptBy:'閮戠埥',acceptDate:"2019-07-12",curNode:"浠诲姟澶勭悊",flowRate:63}, - {reBizCode:"20",type:"鎶垫娂鐧昏",acceptBy:'鏋楁湁',acceptDate:"2019-12-12",curNode:"浠诲姟鎵撳洖",flowRate:59}, - {reBizCode:"11",type:"杞Щ鐧昏",acceptBy:'鐮佷簯',acceptDate:"2019-09-10",curNode:"浠诲姟绛炬敹",flowRate:87}, - ] +const dataCol1 = [{ + title: '涓氬姟鍙�', + align: "center", + dataIndex: 'reBizCode' +}, { + title: '涓氬姟绫诲瀷', + align: "center", + dataIndex: 'type' +}, { + title: '鍙楃悊浜�', + align: "center", + dataIndex: 'acceptBy' +}, { + title: '鍙楃悊鏃堕棿', + align: "center", + dataIndex: 'acceptDate' +}, { + title: '褰撳墠鑺傜偣', + align: "center", + dataIndex: 'curNode' +}, { + title: '鍔炵悊鏃堕暱', + align: "center", + dataIndex: 'flowRate', + scopedSlots: { customRender: 'flowRate' } +}]; +const dataSource1 = [ + { reBizCode: "1", type: "杞Щ鐧昏", acceptBy: '寮犱笁', acceptDate: "2019-01-22", curNode: "浠诲姟鍒嗘淳", flowRate: 60 }, + { reBizCode: "2", type: "鎶垫娂鐧昏", acceptBy: '鏉庡洓', acceptDate: "2019-01-23", curNode: "棰嗗瀹℃牳", flowRate: 30 }, + { reBizCode: "3", type: "杞Щ鐧昏", acceptBy: '鐜嬫', acceptDate: "2019-01-25", curNode: "浠诲姟澶勭悊", flowRate: 20 }, + { reBizCode: "4", type: "杞Щ鐧昏", acceptBy: '璧垫ゼ', acceptDate: "2019-11-22", curNode: "閮ㄩ棬瀹℃牳", flowRate: 80 }, + { reBizCode: "5", type: "杞Щ鐧昏", acceptBy: '閽卞氨', acceptDate: "2019-12-12", curNode: "浠诲姟鍒嗘淳", flowRate: 90 }, + { reBizCode: "6", type: "杞Щ鐧昏", acceptBy: '瀛欏惂', acceptDate: "2019-03-06", curNode: "浠诲姟澶勭悊", flowRate: 10 }, + { reBizCode: "7", type: "鎶垫娂鐧昏", acceptBy: '鍛ㄥぇ', acceptDate: "2019-04-13", curNode: "浠诲姟鍒嗘淳", flowRate: 100 }, + { reBizCode: "8", type: "鎶垫娂鐧昏", acceptBy: '鍚翠簩', acceptDate: "2019-05-09", curNode: "浠诲姟涓婃姤", flowRate: 50 }, + { reBizCode: "9", type: "鎶垫娂鐧昏", acceptBy: '閮戠埥', acceptDate: "2019-07-12", curNode: "浠诲姟澶勭悊", flowRate: 63 }, + { reBizCode: "20", type: "鎶垫娂鐧昏", acceptBy: '鏋楁湁', acceptDate: "2019-12-12", curNode: "浠诲姟鎵撳洖", flowRate: 59 }, + { reBizCode: "11", type: "杞Щ鐧昏", acceptBy: '鐮佷簯', acceptDate: "2019-09-10", curNode: "浠诲姟绛炬敹", flowRate: 87 }, +] - const dataCol2 = [{ - title: '涓氬姟鍙�', - align:"center", - dataIndex: 'reBizCode' - },{ - title: '鍙楃悊浜�', - align:"center", - dataIndex: 'acceptBy' - },{ - title: '鍙戣捣鏃堕棿', - align:"center", - dataIndex: 'acceptDate' - },{ - title: '褰撳墠鑺傜偣', - align:"center", - dataIndex: 'curNode' - },{ - title: '瓒呮椂鏃堕棿', - align:"center", - dataIndex: 'flowRate', - scopedSlots: { customRender: 'flowRate' } - }]; - const dataSource2=[ - {reBizCode:"A001",type:"杞Щ鐧昏",acceptBy:'寮犲洓',acceptDate:"2019-01-22",curNode:"浠诲姟鍒嗘淳",flowRate:12}, - {reBizCode:"A002",type:"鎶垫娂鐧昏",acceptBy:'鏉庡惂',acceptDate:"2019-01-23",curNode:"浠诲姟绛炬敹",flowRate:3}, - {reBizCode:"A003",type:"杞Щ鐧昏",acceptBy:'鐜嬩笁',acceptDate:"2019-01-25",curNode:"浠诲姟澶勭悊",flowRate:24}, - {reBizCode:"A004",type:"杞Щ鐧昏",acceptBy:'璧典簩',acceptDate:"2019-11-22",curNode:"閮ㄩ棬瀹℃牳",flowRate:10}, - {reBizCode:"A005",type:"杞Щ鐧昏",acceptBy:'閽卞ぇ',acceptDate:"2019-12-12",curNode:"浠诲姟绛炬敹",flowRate:8}, - {reBizCode:"A006",type:"杞Щ鐧昏",acceptBy:'瀛欏氨',acceptDate:"2019-03-06",curNode:"浠诲姟澶勭悊",flowRate:10}, - {reBizCode:"A007",type:"鎶垫娂鐧昏",acceptBy:'鍛ㄦ檿',acceptDate:"2019-04-13",curNode:"閮ㄩ棬瀹℃牳",flowRate:24}, - {reBizCode:"A008",type:"鎶垫娂鐧昏",acceptBy:'鍚存湁',acceptDate:"2019-05-09",curNode:"閮ㄩ棬瀹℃牳",flowRate:30}, - {reBizCode:"A009",type:"鎶垫娂鐧昏",acceptBy:'閮戞',acceptDate:"2019-07-12",curNode:"浠诲姟鍒嗘淳",flowRate:1}, - {reBizCode:"A0010",type:"鎶垫娂鐧昏",acceptBy:'鏋楃埥',acceptDate:"2019-12-12",curNode:"閮ㄩ棬瀹℃牳",flowRate:16}, - {reBizCode:"A0011",type:"杞Щ鐧昏",acceptBy:'鐮佹ゼ',acceptDate:"2019-09-10",curNode:"閮ㄩ棬瀹℃牳",flowRate:7}, - ] +const dataCol2 = [{ + title: '涓氬姟鍙�', + align: "center", + dataIndex: 'reBizCode' +}, { + title: '鍙楃悊浜�', + align: "center", + dataIndex: 'acceptBy' +}, { + title: '鍙戣捣鏃堕棿', + align: "center", + dataIndex: 'acceptDate' +}, { + title: '褰撳墠鑺傜偣', + align: "center", + dataIndex: 'curNode' +}, { + title: '瓒呮椂鏃堕棿', + align: "center", + dataIndex: 'flowRate', + scopedSlots: { customRender: 'flowRate' } +}]; +const dataSource2 = [ + { reBizCode: "A001", type: "杞Щ鐧昏", acceptBy: '寮犲洓', acceptDate: "2019-01-22", curNode: "浠诲姟鍒嗘淳", flowRate: 12 }, + { reBizCode: "A002", type: "鎶垫娂鐧昏", acceptBy: '鏉庡惂', acceptDate: "2019-01-23", curNode: "浠诲姟绛炬敹", flowRate: 3 }, + { reBizCode: "A003", type: "杞Щ鐧昏", acceptBy: '鐜嬩笁', acceptDate: "2019-01-25", curNode: "浠诲姟澶勭悊", flowRate: 24 }, + { reBizCode: "A004", type: "杞Щ鐧昏", acceptBy: '璧典簩', acceptDate: "2019-11-22", curNode: "閮ㄩ棬瀹℃牳", flowRate: 10 }, + { reBizCode: "A005", type: "杞Щ鐧昏", acceptBy: '閽卞ぇ', acceptDate: "2019-12-12", curNode: "浠诲姟绛炬敹", flowRate: 8 }, + { reBizCode: "A006", type: "杞Щ鐧昏", acceptBy: '瀛欏氨', acceptDate: "2019-03-06", curNode: "浠诲姟澶勭悊", flowRate: 10 }, + { reBizCode: "A007", type: "鎶垫娂鐧昏", acceptBy: '鍛ㄦ檿', acceptDate: "2019-04-13", curNode: "閮ㄩ棬瀹℃牳", flowRate: 24 }, + { reBizCode: "A008", type: "鎶垫娂鐧昏", acceptBy: '鍚存湁', acceptDate: "2019-05-09", curNode: "閮ㄩ棬瀹℃牳", flowRate: 30 }, + { reBizCode: "A009", type: "鎶垫娂鐧昏", acceptBy: '閮戞', acceptDate: "2019-07-12", curNode: "浠诲姟鍒嗘淳", flowRate: 1 }, + { reBizCode: "A0010", type: "鎶垫娂鐧昏", acceptBy: '鏋楃埥', acceptDate: "2019-12-12", curNode: "閮ㄩ棬瀹℃牳", flowRate: 16 }, + { reBizCode: "A0011", type: "杞Щ鐧昏", acceptBy: '鐮佹ゼ', acceptDate: "2019-09-10", curNode: "閮ㄩ棬瀹℃牳", flowRate: 7 }, +] - export default { - name: "IndexBdc", - components: { - ATooltip, - ACol, - ChartCard, - MiniArea, - MiniBar, - DashChartDemo, - BarMultid, - IndexBar - }, - data() { - return { - loading: true, - cardCount:{ - sll:100, - bjl:87, - isll:15, - ibjl:9 +export default { + name: "IndexBdc", + components: { + ATooltip, + ACol, + ChartCard, + MiniArea, + MiniBar, + DashChartDemo, + BarMultid, + IndexBar + }, + data() { + return { + loading: true, + cardCount: { + sll: 100, + bjl: 87, + isll: 15, + ibjl: 9 + }, + + todaySll: 60, + todayBjl: 54, + todayISll: 13, + todayIBjl: 7, + + chartData: { + sll: [], + bjl: [], + isll: [], + ibjl: [] + }, + jhjgFields, + jhjgData, + + xljgData, + xljgFields, + + diskInfo: [ + { name: "C鐩�", restPPT: 7 }, + { name: "D鐩�", restPPT: 5 } + ], + + registerTypeList: [{ + text: "涓氬姟鍙楃悊" + }, { + text: "涓氬姟绠$悊" + }, { + text: "鏂囦欢绠$悊" + }, { + text: "淇℃伅鏌ヨ" + }], + + dataSource1: [], + dataSource2: [], + columns: dataCol1, + columns2: dataCol2, + ipagination1: { + current: 1, + pageSize: 5, + pageSizeOptions: ['10', '20', '30'], + showTotal: (total, range) => { + return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�" }, + showQuickJumper: true, + showSizeChanger: true, + total: 0, - todaySll:60, - todayBjl:54, - todayISll:13, - todayIBjl:7, - - chartData:{ - sll:[], - bjl:[], - isll:[], - ibjl:[] + }, + ipagination2: { + current: 1, + pageSize: 5, + pageSizeOptions: ['10', '20', '30'], + showTotal: (total, range) => { + return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�" }, - jhjgFields, - jhjgData, + showQuickJumper: true, + showSizeChanger: true, + total: 0, + }, + indexRegisterType: "杞Щ鐧昏", + indexBottomTab: "1" - xljgData, - xljgFields, - - diskInfo:[ - {name:"C鐩�",restPPT:7}, - {name:"D鐩�",restPPT:5} - ], - - registerTypeList:[{ - text:"涓氬姟鍙楃悊" - },{ - text:"涓氬姟绠$悊" - },{ - text:"鏂囦欢绠$悊" - },{ - text:"淇℃伅鏌ヨ" - }], - - dataSource1:[], - dataSource2:[], - columns:dataCol1, - columns2:dataCol2, - ipagination1:{ - current: 1, - pageSize: 5, - pageSizeOptions: ['10', '20', '30'], - showTotal: (total, range) => { - return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�" - }, - showQuickJumper: true, - showSizeChanger: true, - total: 0, - - }, - ipagination2:{ - current: 1, - pageSize: 5, - pageSizeOptions: ['10', '20', '30'], - showTotal: (total, range) => { - return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�" - }, - showQuickJumper: true, - showSizeChanger: true, - total: 0, - }, - indexRegisterType:"杞Щ鐧昏", - indexBottomTab:"1" - - } - }, - methods:{ - goPage(){ - this.$message.success("鏍规嵁涓氬姟鑷澶勭悊璺宠浆椤甸潰!") - }, - changeRegisterType(e){ - this.indexRegisterType = e.target.value - if(this.indexBottomTab=="1"){ - this.loadDataSource1() - }else{ - this.loadDataSource2() - } - }, - tableChange1(pagination){ - this.ipagination1.current = pagination.current - this.ipagination1.pageSize = pagination.pageSize - this.queryTimeoutInfo() - }, - tableChange2(pagination){ - this.ipagination2.current = pagination.current - this.ipagination2.pageSize = pagination.pageSize - this.queryNodeTimeoutInfo() - }, - getFlowRateNumber(value){ - return Number(value) - }, - getPercentFormat(value){ - if(value==100){ - return "瓒呮椂" - }else{ - return value+"%" - } - }, - getPercentColor(value){ - let p = Number(value) - if(p>=90 && p<100){ - return 'rgb(244, 240, 89)' - }else if(p>=100){ - return 'red' - }else{ - return 'rgb(16, 142, 233)' - } - }, - - loadDataSource1(){ - this.dataSource1 = dataSource1.filter(item=>{ - if(!this.indexRegisterType){ - return true - } - return item.type==this.indexRegisterType - }) - }, - loadDataSource2(){ - this.dataSource2 = dataSource2.filter(item=>{ - if(!this.indexRegisterType){ - return true - } - return item.type==this.indexRegisterType - }) - } - }, - created() { - this.loadDataSource1() - this.loadDataSource2() - setTimeout(() => { - this.loading = !this.loading - }, 1000) } + }, + methods: { + goPage() { + this.$message.success("鏍规嵁涓氬姟鑷澶勭悊璺宠浆椤甸潰!") + }, + changeRegisterType(e) { + this.indexRegisterType = e.target.value + if (this.indexBottomTab == "1") { + this.loadDataSource1() + } else { + this.loadDataSource2() + } + }, + tableChange1(pagination) { + this.ipagination1.current = pagination.current + this.ipagination1.pageSize = pagination.pageSize + this.queryTimeoutInfo() + }, + tableChange2(pagination) { + this.ipagination2.current = pagination.current + this.ipagination2.pageSize = pagination.pageSize + this.queryNodeTimeoutInfo() + }, + getFlowRateNumber(value) { + return Number(value) + }, + getPercentFormat(value) { + if (value == 100) { + return "瓒呮椂" + } else { + return value + "%" + } + }, + getPercentColor(value) { + let p = Number(value) + if (p >= 90 && p < 100) { + return 'rgb(244, 240, 89)' + } else if (p >= 100) { + return 'red' + } else { + return 'rgb(16, 142, 233)' + } + }, + + loadDataSource1() { + this.dataSource1 = dataSource1.filter(item => { + if (!this.indexRegisterType) { + return true + } + return item.type == this.indexRegisterType + }) + }, + loadDataSource2() { + this.dataSource2 = dataSource2.filter(item => { + if (!this.indexRegisterType) { + return true + } + return item.type == this.indexRegisterType + }) + } + }, + created() { + this.loadDataSource1() + this.loadDataSource2() + setTimeout(() => { + this.loading = !this.loading + }, 1000) } +} </script> <style lang="less" scoped> - .extra-wrapper { - line-height: 55px; - padding-right: 24px; +.extra-wrapper { + line-height: 55px; + padding-right: 24px; - .extra-item { - display: inline-block; - margin-right: 24px; - - a { - margin-left: 24px; - } - } - } - - .item-group { - padding: 20px 0 8px 24px; - font-size: 0; - a { - color: rgba(0, 0, 0, 0.65); - display: inline-block; - font-size: 14px; - margin-bottom: 13px; - width: 25%; - } - } - - .item-group { - .more-btn { - margin-bottom: 13px; - text-align: center; - } - } - - .list-content-item { - color: rgba(0, 0, 0, .45); + .extra-item { display: inline-block; - vertical-align: middle; + margin-right: 24px; + + a { + margin-left: 24px; + } + } +} + +.item-group { + padding: 20px 0 8px 24px; + font-size: 0; + a { + color: rgba(0, 0, 0, 0.65); + display: inline-block; font-size: 14px; - margin-left: 40px; + margin-bottom: 13px; + width: 25%; } +} - @media only screen and (min-width: 1600px) { - .list-content-item{ - margin-left:60px; - } +.item-group { + .more-btn { + margin-bottom: 13px; + text-align: center; } +} - @media only screen and (max-width: 1300px) { - .list-content-item{ - margin-left:20px; - } - .width-hidden4{ - display:none - } - } - .list-content-item{ - span{line-height: 20px;} - } - .list-content-item{ - p{margin-top: 4px;margin-bottom:0;line-height:22px;} - } - .anty-list-cust { - .ant-list-item-meta{flex: 0.3 !important;} - } - .anty-list-cust { - .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;} - } +.list-content-item { + color: rgba(0, 0, 0, 0.45); + display: inline-block; + vertical-align: middle; + font-size: 14px; + margin-left: 40px; +} +@media only screen and (min-width: 1600px) { + .list-content-item { + margin-left: 60px; + } +} +@media only screen and (max-width: 1300px) { + .list-content-item { + margin-left: 20px; + } + .width-hidden4 { + display: none; + } +} +.list-content-item { + span { + line-height: 20px; + } +} +.list-content-item { + p { + margin-top: 4px; + margin-bottom: 0; + line-height: 22px; + } +} +.anty-list-cust { + .ant-list-item-meta { + flex: 0.3 !important; + } +} +.anty-list-cust { + .ant-list-item-content { + flex: 1 !important; + justify-content: flex-start !important; + margin-left: 20px; + } +} </style> \ No newline at end of file -- Gitblit v1.9.3