| | |
|---|
| | | </div> |
|---|
| | | <!-- 中间中心环 --> |
|---|
| | | <div class="center-ring"> |
|---|
| | | <!-- <div class="center-ring-box"> |
|---|
| | | <div class="center-metric m1"> |
|---|
| | | <div class="center-metric-label">项目产量</div> |
|---|
| | | <div class="center-metric-value">{{ projectProduction }}</div> |
|---|
| | | <div class="center-metric-unit">件</div> |
|---|
| | | <div class="center-ring-box"> |
|---|
| | | <div class="ring-box-topright"> |
|---|
| | | <div class="topright-label">固废处理量</div> |
|---|
| | | </div> |
|---|
| | | <div class="center-metric m2"> |
|---|
| | | <div class="center-metric-label">固体处理量</div> |
|---|
| | | <div class="center-metric-value">{{ solidWaste处理量 }}</div> |
|---|
| | | <div class="center-metric-unit">吨</div> |
|---|
| | | <div class="ring-box-left"> |
|---|
| | | <div class="left-label">粉煤灰</div> |
|---|
| | | <div class="left-value">月处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div> |
|---|
| | | <div class="left-label" |
|---|
| | | style="margin-top: 2vh;">石膏</div> |
|---|
| | | <div class="left-value">月处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div> |
|---|
| | | </div> |
|---|
| | | <div class="center-metric m3"> |
|---|
| | | <div class="center-metric-label">砌块产量</div> |
|---|
| | | <div class="center-metric-value">{{ blockProduction }}</div> |
|---|
| | | <div class="center-metric-unit">件</div> |
|---|
| | | <div class="ring-box-topleft"> |
|---|
| | | <div class="topleft-label">项目产量</div> |
|---|
| | | </div> |
|---|
| | | <div class="center-metric m4"> |
|---|
| | | <div class="center-metric-label">板材产量</div> |
|---|
| | | <div class="center-metric-value">{{ boardProduction }}</div> |
|---|
| | | <div class="center-metric-unit">件</div> |
|---|
| | | <div class="ring-box-right"> |
|---|
| | | <div class="right-label">砌块产量</div> |
|---|
| | | <div class="right-value">月产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年产量 <span style="font-weight: bold;font-size: 1.3vh;">7812 |
|---|
| | | </span> 吨</div> |
|---|
| | | <div class="right-label" |
|---|
| | | style="margin-top: 2vh;">板材产量</div> |
|---|
| | | <div class="right-value">月产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 左下：生产成本单耗统计（板材） --> |
|---|
| | | <div class="bi-panel bi-panel-bottom-left"> |
|---|
| | |
|---|
| | | :class="{ active: customerTimeDimension === 'month' }" |
|---|
| | | @click="handleCustomerTimeDimensionChange('month')">月</span> |
|---|
| | | </div> |
|---|
| | | <div ref="customerTrendChart" |
|---|
| | | class="echart-fill"></div> |
|---|
| | | <!-- <div class="bi-panel-body"> |
|---|
| | | <div class="chart-unit-row chart-unit-single"> |
|---|
| | | <span>单位：家</span> |
|---|
| | |
|---|
| | | |
|---|
| | | // 新增客户趋势图表配置 |
|---|
| | | const customerTrendChartOption = computed(() => { |
|---|
| | | const customerTypes = ["全部", "石灰", "水泥", "铝粉膏", "脱模剂"]; |
|---|
| | | const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447"]; |
|---|
| | | const customerTypes = ["全部", "粉煤灰", "石膏", "石灰"]; |
|---|
| | | const colors = ["#00A4ED", "#4A8BFF", "#8A6BFF", "#C8C447"]; |
|---|
| | | const year = 2024; |
|---|
| | | const periodType = customerTimeDimension.value; |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* .scroll-table tbody tr:nth-child(odd) { |
|---|
| | | background-color: rgba(64, 158, 255, 0.05); |
|---|
| | | } |
|---|
| | | background-color: rgba(64, 158, 255, 0.05); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .scroll-table tbody tr:nth-child(even) { |
|---|
| | | background-color: rgba(64, 158, 255, 0.1); |
|---|
| | | } */ |
|---|
| | | .scroll-table tbody tr:nth-child(even) { |
|---|
| | | background-color: rgba(64, 158, 255, 0.1); |
|---|
| | | } */ |
|---|
| | | .oddTableTr { |
|---|
| | | background-color: rgba(64, 158, 255, 0.05); |
|---|
| | | } |
|---|
| | |
|---|
| | | grid-row: 1 / span 2; |
|---|
| | | position: absolute; |
|---|
| | | background: url("@/assets/BI/imageSS@2x.png") no-repeat bottom center; |
|---|
| | | background-size: 100% 30%; |
|---|
| | | background-size: 80% 30%; |
|---|
| | | left: 25%; |
|---|
| | | top: 25%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | width: 60vh; |
|---|
| | | transform: translate(-50%, -45%); |
|---|
| | | width: 50%; |
|---|
| | | height: 40.5vh; |
|---|
| | | z-index: 3; |
|---|
| | | pointer-events: none; |
|---|
| | |
|---|
| | | .center-ring-box { |
|---|
| | | position: absolute; |
|---|
| | | /* inset: 0; */ |
|---|
| | | height: 100%; |
|---|
| | | height: 88%; |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 3%; |
|---|
| | | /* background-color: #fff; */ |
|---|
| | | background: url("@/assets/BI/imageSStop.png") no-repeat center center; |
|---|
| | | background-size: 80% 90%; |
|---|
| | | background: url("@/assets/BI/SCbg.png") no-repeat center center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .ring-box-topright { |
|---|
| | | position: absolute; |
|---|
| | | top: 6vh; |
|---|
| | | right: 0; |
|---|
| | | width: 25%; |
|---|
| | | height: 15%; |
|---|
| | | background: url("@/assets/BI/SCbgright.png") no-repeat center center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | .ring-box-topleft { |
|---|
| | | position: absolute; |
|---|
| | | top: 6vh; |
|---|
| | | left: 0; |
|---|
| | | width: 25%; |
|---|
| | | height: 15%; |
|---|
| | | background: url("@/assets/BI/SCbgleft.png") no-repeat center center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | .topright-label { |
|---|
| | | font-size: 1.8vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: rgba(234, 246, 255, 0.9); |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | right: 1vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .topleft-label { |
|---|
| | | font-size: 1.8vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: rgba(234, 246, 255, 0.9); |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | left: 1vh; |
|---|
| | | } |
|---|
| | | .ring-box-left { |
|---|
| | | /* background-color: #ebebeb; */ |
|---|
| | | width: 30%; |
|---|
| | | position: absolute; |
|---|
| | | left: 1vh; |
|---|
| | | top: 56%; |
|---|
| | | transform: translateY(-50%); |
|---|
| | | } |
|---|
| | | .left-label { |
|---|
| | | font-size: 1.4vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #0effef; |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | } |
|---|
| | | .left-value { |
|---|
| | | font-size: 1.2vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: rgba(234, 246, 255, 0.9); |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | margin-top: 0.4vh; |
|---|
| | | } |
|---|
| | | .ring-box-right { |
|---|
| | | /* background-color: #ebebeb; */ |
|---|
| | | width: 30%; |
|---|
| | | float: right; |
|---|
| | | position: absolute; |
|---|
| | | right: -1vh; |
|---|
| | | top: 56%; |
|---|
| | | transform: translateY(-50%); |
|---|
| | | } |
|---|
| | | .right-label { |
|---|
| | | font-size: 1.4vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #ffa60e; |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-value { |
|---|
| | | font-size: 1.2vh; |
|---|
| | | font-weight: 500; |
|---|
| | | color: rgba(234, 246, 255, 0.9); |
|---|
| | | margin-top: 0; |
|---|
| | | position: relative; |
|---|
| | | bottom: 3vh; |
|---|
| | | margin-top: 0.4vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center-ring-bg { |
|---|
