From 9744095cc2b64e6f5cd3492abb52268afc4921bb Mon Sep 17 00:00:00 2001
From: Mr.Zhang <710666463@qq.com>
Date: 星期二, 22 八月 2023 09:10:50 +0800
Subject: [PATCH] 折线图
---
screen_standard/src/components/AppLayout.vue | 2
/dev/null | 86 ------
screen_standard/src/router/index.js | 11
screen_standard/package.json | 1
screen_standard/src/views/process.vue | 613 +++++++++++++++++++++++++++++++++++++++++++++++
screen_standard/package-lock.json | 45 +++
6 files changed, 667 insertions(+), 91 deletions(-)
diff --git a/screen_standard/package-lock.json b/screen_standard/package-lock.json
index fe52fc8..f355e29 100644
--- a/screen_standard/package-lock.json
+++ b/screen_standard/package-lock.json
@@ -8,6 +8,7 @@
"name": "screen_standard",
"version": "0.0.0",
"dependencies": {
+ "echarts": "^5.4.3",
"element-plus": "^2.3.9",
"pinia": "^2.1.4",
"vue": "^3.3.4",
@@ -1441,6 +1442,15 @@
}
}
},
+ "node_modules/echarts": {
+ "version": "5.4.3",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
+ "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+ "dependencies": {
+ "tslib": "2.3.0",
+ "zrender": "5.4.4"
+ }
+ },
"node_modules/electron-to-chromium": {
"version": "1.4.495",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.495.tgz",
@@ -2188,6 +2198,11 @@
"node": ">=8.0"
}
},
+ "node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"node_modules/ufo": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.2.0.tgz",
@@ -2419,6 +2434,14 @@
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"dev": true
+ },
+ "node_modules/zrender": {
+ "version": "5.4.4",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
+ "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+ "dependencies": {
+ "tslib": "2.3.0"
+ }
}
},
"dependencies": {
@@ -3379,6 +3402,15 @@
"ms": "2.1.2"
}
},
+ "echarts": {
+ "version": "5.4.3",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
+ "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+ "requires": {
+ "tslib": "2.3.0",
+ "zrender": "5.4.4"
+ }
+ },
"electron-to-chromium": {
"version": "1.4.495",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.495.tgz",
@@ -3907,6 +3939,11 @@
"is-number": "^7.0.0"
}
},
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"ufo": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.2.0.tgz",
@@ -4045,6 +4082,14 @@
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"dev": true
+ },
+ "zrender": {
+ "version": "5.4.4",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
+ "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+ "requires": {
+ "tslib": "2.3.0"
+ }
}
}
}
diff --git a/screen_standard/package.json b/screen_standard/package.json
index b70088a..9b593dd 100644
--- a/screen_standard/package.json
+++ b/screen_standard/package.json
@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "echarts": "^5.4.3",
"element-plus": "^2.3.9",
"pinia": "^2.1.4",
"vue": "^3.3.4",
diff --git a/screen_standard/src/components/AppLayout.vue b/screen_standard/src/components/AppLayout.vue
index 4fca14a..117357e 100644
--- a/screen_standard/src/components/AppLayout.vue
+++ b/screen_standard/src/components/AppLayout.vue
@@ -140,6 +140,7 @@
width: 100%;
height: 100%;
padding: 30px;
+ overflow-y: scroll;
box-sizing: border-box;
.header {
background-image: url('@/assets/img/bg_maintitle@2x.png');
@@ -214,6 +215,7 @@
}
.num-list {
margin-top: 24px;
+ margin-bottom: 27px;
display: flex;
justify-content: space-between;
height: 88px;
diff --git a/screen_standard/src/components/WelcomeItem.vue b/screen_standard/src/components/WelcomeItem.vue
deleted file mode 100644
index ac366d0..0000000
--- a/screen_standard/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
- <div class="item">
- <i>
- <slot name="icon"></slot>
- </i>
- <div class="details">
- <h3>
- <slot name="heading"></slot>
- </h3>
- <slot></slot>
- </div>
- </div>
-</template>
-
-<style scoped>
-.item {
- margin-top: 2rem;
- display: flex;
- position: relative;
-}
-
-.details {
- flex: 1;
- margin-left: 1rem;
-}
-
-i {
- display: flex;
- place-items: center;
- place-content: center;
- width: 32px;
- height: 32px;
- color: var(--color-text);
-}
-
-h3 {
- font-size: 1.2rem;
- font-weight: 500;
- margin-bottom: 0.4rem;
- color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
- .item {
- margin-top: 0;
- padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
- }
-
- i {
- top: calc(50% - 25px);
- left: -26px;
- position: absolute;
- border: 1px solid var(--color-border);
- background: var(--color-background);
- border-radius: 8px;
- width: 50px;
- height: 50px;
- }
-
- .item:before {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- bottom: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:after {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- top: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:first-of-type:before {
- display: none;
- }
-
- .item:last-of-type:after {
- display: none;
- }
-}
-</style>
diff --git a/screen_standard/src/router/index.js b/screen_standard/src/router/index.js
index 7377b96..8d7c178 100644
--- a/screen_standard/src/router/index.js
+++ b/screen_standard/src/router/index.js
@@ -1,6 +1,7 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import indexView from '../views/index.vue'
+import processView from '../views/process.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,11 +11,11 @@
name: 'home',
component: indexView
},
- // {
- // path: '/index',
- // name: 'index',
- // component: indexView
- // }
+ {
+ path: '/process',
+ name: 'process',
+ component: processView
+ }
]
})
diff --git a/screen_standard/src/views/process.vue b/screen_standard/src/views/process.vue
new file mode 100644
index 0000000..fb6fe3e
--- /dev/null
+++ b/screen_standard/src/views/process.vue
@@ -0,0 +1,613 @@
+<template>
+ <div class="proccess-content">
+ <div class="process-left">
+ <div class="proccess-plan">
+ <div class="header-title">宸ュ簭璁″垝杩涘害</div>
+ <div class="table-content">
+ <div class="table-head">
+ <div class="table-head_item">鐗╂枡鍚嶇О</div>
+ <div class="table-head_item">鐗╂枡缂栫爜</div>
+ <div class="table-head_item">璁″垝鏁伴噺</div>
+ <div class="table-head_item">鑹搧鏁�</div>
+ <div class="table-head_item">涓嶈壇鍝佹暟</div>
+ <div class="table-head_item">鏈畬宸ユ暟閲�</div>
+ <div class="table-head_item">涓嶈壇鐜�</div>
+ </div>
+ <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="tablel_container">
+ <div ref="planContainer" class="scroll_container">
+ <div v-for="(item, index) in listData" :key="item.id" class="scroll_item"
+ :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
+ <div class="scroll_item_row">{{ item.name }}</div>
+ <div class="scroll_item_row">1</div>
+ <div class="scroll_item_row">2</div>
+ <div class="scroll_item_row">3</div>
+ <div class="scroll_item_row">4</div>
+ <div class="scroll_item_row">4</div>
+ <div class="scroll_item_row">4</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="today-yield">
+ <div class="header-title">褰撴棩鍛樺伐浜ч噺TOP10</div>
+ <div class="yield-content">
+ <div class="yield-content-left">
+ <div class="content_left_item1_content">
+ <div class="content_left_item1_content_row" v-for="(item, index) in 5" :key="index">
+ <div class="content_left_item1_content_row_name">
+ <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
+ <span>璧电珛{{ index }}</span>
+ </div>
+ <div class="content_left_item1_content_row_line">
+ <el-progress :show-text="false" :percentage="50">
+ </el-progress>
+ </div>
+ <div class="content_left_item1_content_row_num">342</div>
+ </div>
+ </div>
+ </div>
+ <div class="yield-content-left">
+ <div class="content_left_item1_content">
+ <div class="content_left_item1_content_row" v-for="(item, index) in 5" :key="index">
+ <div class="content_left_item1_content_row_name">
+ <div class="num bg1">{{ index + 6 }}</div>
+ <span>璧电珛{{ index }}</span>
+ </div>
+ <div class="content_left_item1_content_row_line">
+ <el-progress :show-text="false" :percentage="50">
+ </el-progress>
+ </div>
+ <div class="content_left_item1_content_row_num">342</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="process-right">
+ <div class="report-log">
+ <div class="header-title">鎶ュ伐鏃ュ織</div>
+ <div class="table-content">
+ <div class="table-head">
+ <div class="table-head_item">鍛樺伐鍚嶇О</div>
+ <div class="table-head_item">鐗╂枡鍚嶇О</div>
+ <div class="table-head_item">鐗╂枡缂栫爜</div>
+ <div class="table-head_item">鎶ュ伐鏃堕棿</div>
+ <div class="table-head_item">鑹搧鏁�</div>
+ <div class="table-head_item">涓嶈壇鍝佹暟</div>
+ <div class="table-head_item">涓嶈壇鐜�</div>
+ </div>
+ <div @mouseenter="handleMouseEnterReport" @mouseleave="handleMouseLeaveReport" class="tablel_container">
+ <div ref="reportLogContainer" class="scroll_container">
+ <div v-for="(item, index) in listData" :key="item.id" class="scroll_item"
+ :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
+ <div class="scroll_item_row">{{ item.name }}</div>
+ <div class="scroll_item_row">1</div>
+ <div class="scroll_item_row">2</div>
+ <div class="scroll_item_row">3</div>
+ <div class="scroll_item_row">4</div>
+ <div class="scroll_item_row">4</div>
+ <div class="scroll_item_row">4</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="bad-diagram">
+ <div class="header-title">杩�7澶╀笉鑹搧鍒嗗竷</div>
+ <div class="bad-content">
+ <div id="day-distribution"></div>
+ <div id="type-distribution"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+let planTimer = ref(null)
+let reportTimer = ref(null)
+let planContainer = ref(null)
+let reportLogContainer = ref(null)
+let listData = reactive([
+ { name: 'dom绗竴涓�' },
+ { name: 'dom绗簩涓�' },
+ { name: 'dom绗笁涓�' },
+ { name: 'dom绗洓涓�' },
+ { name: 'dom绗簲涓�' },
+ { name: 'dom绗叚涓�' },
+ { name: 'dom绗竷涓�' },
+ { name: 'dom绗叓涓�' },
+ { name: 'dom绗節涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+ { name: 'dom绗崄涓�' },
+])
+let dayDistribution = reactive([
+ { date: '8/1', num: '20' },
+ { date: '8/2', num: '10' },
+ { date: '8/3', num: '20' },
+ { date: '8/4', num: '40' },
+ { date: '8/5', num: '30' },
+ { date: '8/6', num: '10' },
+ { date: '8/7', num: '20' },
+])
+// start()
+onBeforeUnmount(() => {
+ clearTimeout(planTimer.value)
+ clearTimeout(reportTimer.value)
+})
+onMounted(() => {
+ nextTick(() => {
+ // start()
+ // reportStart()
+ setDayChart()
+ })
+})
+
+
+onUnmounted(() => {
+ clearTimeout(planTimer.value)
+ clearTimeout(reportTimer.value)
+})
+
+function handleMouseEnter() {
+ clearTimeout(planTimer.value)
+}
+function handleMouseLeave() {
+ start()
+}
+
+function handleMouseEnterReport() {
+ clearTimeout(reportTimer.value)
+}
+function handleMouseLeaveReport() {
+ reportStart()
+}
+
+/**
+ * 宸ュ簭璁″垝
+ */
+// 寮�鍚畾鏃跺櫒
+function start() {
+ clearTimeout(planTimer.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ // let speed = ref(100)
+ planTimer.value = setInterval(ListScroll, 100)
+}
+function ListScroll() {
+ let scrollDom = planContainer.value
+ // 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
+ if (scrollDom.offsetHeight == 0) {
+ scrollDom = planContainer.value
+ } else {
+ // 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
+ if (scrollDom.children.length < 4) {
+ clearTimeout(planTimer.value)
+ return
+ }
+ // 缁勪欢杩涜婊氬姩
+ scrollDom.scrollTop += 2
+ // 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
+ if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
+ // 鑾峰彇缁勪欢绗竴涓妭鐐�
+ let first = scrollDom.children[0]
+ // 鍒犻櫎鑺傜偣
+ scrollDom.removeChild(first)
+ // 灏嗚鑺傜偣鎷兼帴鍒扮粍浠舵渶鍚�
+ scrollDom.append(first)
+ }
+ }
+}
+/**
+ * 鎶ュ伐鏃ュ織
+ */
+function reportStart() {
+ clearTimeout(reportTimer.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ // let speed = ref(100)
+ reportTimer.value = setInterval(reportScroll, 100)
+}
+function reportScroll() {
+ let scrollDom = reportLogContainer.value
+ // 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
+ if (scrollDom.offsetHeight == 0) {
+ scrollDom = reportLogContainer.value
+ } else {
+ // 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
+ if (scrollDom.children.length < 4) {
+ clearTimeout(reportTimer.value)
+ return
+ }
+ // 缁勪欢杩涜婊氬姩
+ scrollDom.scrollTop += 2
+ // 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
+ if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
+ // 鑾峰彇缁勪欢绗竴涓妭鐐�
+ let first = scrollDom.children[0]
+ // 鍒犻櫎鑺傜偣
+ scrollDom.removeChild(first)
+ // 灏嗚鑺傜偣鎷兼帴鍒扮粍浠舵渶鍚�
+ scrollDom.append(first)
+ }
+ }
+}
+/** */
+function setDayChart() {
+ let dayChartDom = document.getElementById('day-distribution');
+ let myChart = echarts.init(dayChartDom);
+ let dateList = []
+ let numList = []
+
+ dayDistribution.forEach(item => {
+ dateList.push(item.date)
+ numList.push(item.num)
+ })
+ let option;
+ option = {
+ title: {
+ text: ' 杩戜竷鏃ヤ笉鑹搧鎬绘暟锛�67',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ splitLine: {
+ lineStyle: {
+ width: 0.5,
+ color: ['#fff']
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ data: dateList
+ },
+
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ width: 0.5,
+ color: ['#fff']
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ series: [
+ {
+ data: numList,
+ type: 'line',
+ lineStyle: {
+ color: '#03D2B5',
+ width: 1
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(3, 210, 181, .9)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(3, 210, 181, 0)',
+ }
+ ])
+ }
+ }
+ ],
+
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ name: '1adssad',
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 4,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ // xAxis: {
+ // type: 'category',
+ // boundaryGap: false,
+ // axisLabel: {
+ // textStyle: {
+ // color: '#fff'
+ // }
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#fff'
+ // }
+ // }
+ // },
+ // yAxis: {
+ // type: 'value',
+ // boundaryGap: [0, '30%'],
+ // splitLine: {
+ // lineStyle: {
+ // width: 0.5,
+ // color: ['#fff']
+ // }
+ // },
+ // axisLabel: {
+ // textStyle: {
+ // color: '#fff'
+ // }
+ // }
+ // },
+ // visualMap: {
+ // type: 'piecewise',
+ // show: false,
+ // dimension: 0,
+ // seriesIndex: 0,
+
+ // },
+ // series: [
+ // {
+ // type: 'line',
+ // smooth: 0.6,
+ // symbol: 'none',
+ // lineStyle: {
+ // color: '#03D2B5',
+ // width: 1
+ // },
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // {
+ // offset: 0,
+ // color: 'rgba(3, 210, 181, .9)',
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(3, 210, 181, 0)',
+ // }
+ // ])
+ // },
+ // data: dateList
+ // }
+ // ]
+ }
+
+ option && myChart.setOption(option);
+}
+</script>
+
+<style lang="scss" scoped>
+.proccess-content {
+ display: flex;
+
+ .header-title {
+ background-image: url('@/assets/img/gongxu_title@2x.png');
+ height: 28px;
+ width: 100%;
+ background-size: 100% 28px;
+ background-repeat: no-repeat;
+ padding-left: 34px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #FFFFFF;
+ line-height: 26px;
+ text-shadow: 0px 0px 10px rgba(0, 24, 72, 0.75);
+ }
+
+ .process-left {
+ flex: 1;
+ margin-right: 20px;
+
+ .proccess-plan {
+ height: 460px;
+ background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
+ margin-bottom: 20px;
+ }
+
+ .today-yield {
+ height: 222px;
+ background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
+
+ .yield-content {
+ display: flex;
+
+ .yield-content-left {
+ flex: 1;
+
+ .content_left_item1_content {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+
+ .content_left_item1_content_row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 13px;
+
+ &:last-child {
+ margin: 0;
+ }
+
+ .content_left_item1_content_row_name {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+
+ span {
+ font-size: 13px;
+ font-family: SourceHanSansSC-Regular, SourceHanSansSC;
+ font-weight: 400;
+ color: #D2E0FF;
+ margin-left: 9px;
+ }
+
+ .num {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ font-size: 12px;
+ font-family: SourceHanSansSC-Medium, SourceHanSansSC;
+ font-weight: 500;
+ color: #FFFFFF;
+ }
+
+ .bg1 {
+ background: url('@/assets/img/rank_blue@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .bg2 {
+ background: url('@/assets/img/rank_yellow@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ .content_left_item1_content_row_line {
+ flex: 1;
+ margin: 0 15px;
+
+ &::v-deep(.el-progress-bar__outer) {
+ border-radius: 0%;
+ background: rgba(255, 255, 255, 0.13);
+ }
+
+ &::v-deep(.el-progress-bar__inner) {
+ border-radius: 0%;
+ background: linear-gradient(270deg, #00B0FF 0%, #345BA3 100%);
+ }
+ }
+
+ .content_left_item1_content_row_num {
+ font-size: 13px;
+ font-family: SourceHanSansSC-Regular, SourceHanSansSC;
+ font-weight: 400;
+ color: #D2E0FF;
+ }
+ }
+ }
+ }
+ }
+
+ }
+ }
+
+ .process-right {
+ flex: 1;
+
+ .report-log {
+ height: 460px;
+ background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
+ margin-bottom: 20px;
+ }
+
+ .bad-diagram {
+ height: 222px;
+ background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
+ .bad-content {
+ display: flex;
+ margin-top: 20px;
+ #day-distribution {
+ // padding: 20px;
+ box-sizing: border-box;
+ flex: 0.5;
+ height: 190px;
+ }
+ #type-distribution {
+ flex: 0.4;
+ }
+ }
+ }
+ }
+}
+
+
+.table-content {
+ width: 100%;
+ height: 397px;
+ // height: 361px;
+ // height: ;
+ padding: 20px;
+ box-sizing: border-box;
+
+ .table-head {
+ width: 100%;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ background: rgba(52, 88, 159, 0.5);
+
+ .table-head_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ font-weight: 500;
+ color: #01D9FE;
+
+ }
+ }
+
+ .tablel_container {
+ width: 100%;
+ // height: calc(100% - 36px);
+ height: 361px;
+
+ .scroll_container {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ color: white;
+
+ .scroll_item_bg1 {
+ background: rgba(52, 88, 159, 0.2);
+ }
+
+ .scroll_item_bg2 {
+ background: rgba(52, 88, 159, 0.5);
+ }
+
+ .scroll_item {
+ width: 100%;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .scroll_item_row {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3