|
@@ -1,7 +1,59 @@
|
|
|
<!-- 数据看板-首页 -->
|
|
|
<template>
|
|
|
- <view class="dataBoard">
|
|
|
-
|
|
|
+ <view class="labPage">
|
|
|
+ <view class="chart">
|
|
|
+ <view class="chart-t">
|
|
|
+ <view class="chart-t-li" @click="dateClick(index)" :class="dateIndex==index?'color-A':'color-B'"
|
|
|
+ v-for="(item,index) in dateList">
|
|
|
+ <view class="chart-t-li-t">{{item.num}}</view>
|
|
|
+ <view class="chart-t-li-b">{{item.letterNUm}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chart-b">
|
|
|
+ <!-- <qiun-data-charts type="tarea" :chartData="chartData" background="none" /> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistics">
|
|
|
+ <view class="statistics-t">
|
|
|
+ <view class="statistics-t-l">实验室总数:</view>
|
|
|
+ <view class="statistics-t-r">9999 间</view>
|
|
|
+ </view>
|
|
|
+ <view class="statistics-b">
|
|
|
+ <view class="statistics-b-li">
|
|
|
+ <view class="statistics-b-li-t color-A">6885 间</view>
|
|
|
+ <view class="statistics-b-li-b">使用</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="statistics-b-li">
|
|
|
+ <view class="statistics-b-li-t color-B">3100 间</view>
|
|
|
+ <view class="statistics-b-li-b">空闲</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="statistics-b-li">
|
|
|
+ <view class="statistics-b-li-t color-C">14 间</view>
|
|
|
+ <view class="statistics-b-li-b">异常</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table">
|
|
|
+ <view class="table-border">
|
|
|
+ <view class="table-th">
|
|
|
+ <view>学院单位</view>
|
|
|
+ <view>实验人数</view>
|
|
|
+ <view>值日人数</view>
|
|
|
+ <view>检查次数</view>
|
|
|
+ <view>超期设备</view>
|
|
|
+ </view>
|
|
|
+ <view class="table-tb" v-for="(item,index) in dataList" :key="index">
|
|
|
+ <view>{{item.data1}}</view>
|
|
|
+ <view>{{item.data2}}</view>
|
|
|
+ <view>{{item.data2}}</view>
|
|
|
+ <view>{{item.data2}}</view>
|
|
|
+ <view>{{item.data2}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -13,13 +65,66 @@
|
|
|
|
|
|
} from '@/pages_basics/api/index.js'
|
|
|
export default {
|
|
|
- name: "dataBoard",
|
|
|
+ name: "labPage",
|
|
|
components: {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ dateList: [{
|
|
|
+ num: '1',
|
|
|
+ letterNUm: 'Mon',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '2',
|
|
|
+ letterNUm: 'Tue',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '3',
|
|
|
+ letterNUm: 'Wed',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '4',
|
|
|
+ letterNUm: 'Thur',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '5',
|
|
|
+ letterNUm: 'Fri',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '6',
|
|
|
+ letterNUm: 'Sat',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '7',
|
|
|
+ letterNUm: 'Sun',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dateIndex: 0,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ data1:'学院学院简称',
|
|
|
+ data2:'666',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data1:'学院学院简称',
|
|
|
+ data2:'666',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data1:'学院学院简称',
|
|
|
+ data2:'666',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data1:'学院学院简称',
|
|
|
+ data2:'666',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ total: 0,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -30,16 +135,225 @@
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
-
|
|
|
+ dateClick(index) {
|
|
|
+ this.dateIndex = index;
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
- .dataBoard {
|
|
|
+ .labPage {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background: #363744;
|
|
|
+ padding: 20rpx 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 640rpx;
|
|
|
+ background: #3E414F;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ padding: 34rpx 30rpx 26rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .chart-t {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .chart-t-li {
|
|
|
+ width: 76rpx;
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .chart-t-li-t {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-t-li-b {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ line-height: 39rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-A {
|
|
|
+ .chart-t-li-t {
|
|
|
+ color: #0183FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-t-li-b {
|
|
|
+ color: #0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-B {
|
|
|
+ .chart-t-li-t {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-t-li-b {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-b {
|
|
|
+ width: 632rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ margin-top: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 241rpx;
|
|
|
+ background: #3E414F;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .statistics-t {
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #52545F;
|
|
|
+ padding: 0 42rpx 0 38rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .statistics-t-l {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics-t-r {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics-b {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .statistics-b-li {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .statistics-b-li-t {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 36rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics-b-li-b {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 39rpx;
|
|
|
+ margin-top: 9rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: #D8D8D8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-A {
|
|
|
+ color: #FF8C00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-B {
|
|
|
+ color: #26C736;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-C {
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ width: 720rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .table-border {
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-th {
|
|
|
+ width: 860rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: rgba(162, 162, 162, 0.2);
|
|
|
+ border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ >view {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ >view:nth-of-type(1) {
|
|
|
+ width: 168rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-tb {
|
|
|
+ width: 860rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background: #3E414F;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ >view {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ >view:nth-of-type(1) {
|
|
|
+ width: 168rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
-
|