大屏页面初始化

screen-vue/src/views/desktop/components/ChartNote.vue

@@ -41,7 +41,7 @@ let myChart = null
 let resizeObserver = null
 let resizeHandler = null
 let seriesStatus = {
-  '待完成': true,
+  '待开始': true,
   '进行中': true,
   '已完成': true
 }
@@ -79,7 +79,7 @@ function calculateTotal() {
   
   return xAxisData.map((_, index) => {
     let total = 0
-    if (seriesStatus['待完成']) total += index01Data[index]
+    if (seriesStatus['待开始']) total += index01Data[index]
     if (seriesStatus['进行中']) total += index02Data[index]
     if (seriesStatus['已完成']) total += index03Data[index]
     return total
@@ -116,7 +116,7 @@ function renderChart() {
       itemWidth: 14,
       itemHeight: 14,
       itemGap: 20,
-      data: ['待完成', '进行中', '已完成'],
+      data: ['待开始', '进行中', '已完成'],
       selected: seriesStatus,
       selectable: true
     },
@@ -136,13 +136,11 @@ function renderChart() {
         html += `<table style="width: 100%; border-collapse: collapse; font-size: 12px;">`
         
         html += `<tr style="background: #f5f7fa;">
-          <th style="padding: 6px; border: 1px solid #e6e6e6; text-align: center;">状态/数值</th>
           ${validParams.map(param => `<th style="padding: 6px; border: 1px solid #e6e6e6; text-align: center;">${param.seriesName}</th>`).join('')}
           <th style="padding: 6px; border: 1px solid #e6e6e6; text-align: center;">总数</th>
         </tr>`
         
         html += `<tr>
-          <td style="padding: 6px; border: 1px solid #e6e6e6; text-align: center; color: #606266;">数量</td>
           ${validParams.map(param => `<td style="padding: 6px; border: 1px solid #e6e6e6; text-align: center; color: #303133;">${param.value}</td>`).join('')}
           <td style="padding: 6px; border: 1px solid #e6e6e6; text-align: center; color: #303133; font-weight: bold;">${total}</td>
         </tr>`
@@ -196,7 +194,7 @@ function renderChart() {
     },
     series: [
       {
-        name: '待完成',
+        name: '待开始',
         type: 'bar',
         stack: 'total',
         data: index01Data,

screen-vue/src/views/screen/Work/components/ChartV01.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">1</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV02.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">2</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV03.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">3</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV04.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">4</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/deptk2.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV05.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">5</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV06.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">6</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV07.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">7</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>

screen-vue/src/views/screen/Work/components/ChartV08.vue

@@ -1,8 +1,47 @@
 <template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">8</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
 </script>
 
-<style>
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
 </style>