| | |
| | | <!-- 巡检任务详情 --> |
| | | <template> |
| | | <common-title |
| | | title="巡检任务情况" |
| | | :style="{ marginLeft: pxToRem(14) }" |
| | | @details="detailsFun" |
| | | > |
| | | </common-title> |
| | | <div class="inspection-rask-details"> |
| | | <div class="inspection-num"> |
| | | <div class="total"> |
| | |
| | | |
| | | <script setup> |
| | | import * as echarts from 'echarts'; |
| | | import { pxToRem } from '@/utils/rem'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import CommonDateTime from '@/components/CommonDateTime.vue'; |
| | | |
| | | const list = ref([ |
| | |
| | | { name: '已执行', value: 10, color: '#8EFFAC' }, |
| | | { name: '执行失败', value: 10, color: '#FF8E8E' }, |
| | | ]); |
| | | |
| | | const detailsFun = () => { |
| | | console.log('details'); |
| | | }; |
| | | |
| | | const chartRef = ref(null); |
| | | |
| | |
| | | width: 390px; |
| | | height: 414px; |
| | | background: linear-gradient( |
| | | 270deg, |
| | | rgba(31, 62, 122, 0) 0%, |
| | | rgba(31, 62, 122, 0.35) 21%, |
| | | #1f3e7a 100% |
| | | 270deg, |
| | | rgba(31, 62, 122, 0) 0%, |
| | | rgba(31, 62, 122, 0.35) 21%, |
| | | #1f3e7a 100% |
| | | ); |
| | | border-radius: 0px 0px 0px 0px; |
| | | opacity: 0.85; |
| | | |
| | | .inspection-num { |
| | | background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%; |
| | | width: 360px; |
| | | height: 118px; |
| | | position: relative; |
| | | |
| | | .total { |
| | | position: absolute; |
| | | left: 34px; |
| | | top: 34px; |
| | | top: 44px; |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | |
| | | line-height: 19px; |
| | | .value { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | margin-left: 8px; |
| | | font-size: 26px; |
| | | } |
| | | } |
| | | |
| | | .status { |
| | | position: absolute; |
| | | top: 8px; |
| | |
| | | justify-content: flex-start; |
| | | line-height: 22px; |
| | | padding: 0 10px 10px 0; |
| | | |
| | | .name { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .value { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .chart-container { |
| | | width: 100%; |
| | | height: 200px; |