Merge branch 'master' of bls-dan/busRoute into master

src/assets/native-plugin.ts

@@ -6,7 +6,8 @@ import {
   NTable,
   NDataTable,
   NPagination,
-  NButton
+  NButton,
+  NSelect
 } from 'naive-ui'
 
 const naive = create({
@@ -17,7 +18,8 @@ const naive = create({
     NTable,
     NDataTable,
     NPagination,
-    NButton
+    NButton,
+    NSelect
   ]
 })
 

src/pages/App.vue

@@ -22,7 +22,7 @@ const store = useStore()
 const show = computed(() => store.loading)
 const themeOverrides = Theme
 </script>
-<style>
+<style lang="scss">
 * {
   margin: 0;
   padding: 0;
@@ -30,4 +30,17 @@ const themeOverrides = Theme
   user-select: none;
   font-style: normal;
 }
+
+.n-select {
+  .n-base-selection {
+    border: 1px solid #5689F0;
+    .n-base-selection-label {
+      height: 100%;
+      background: rgba(86, 137, 240, 0.298);
+      .n-base-selection-input__content{
+        color: #fff;
+      }
+    }
+  }
+}
 </style>

src/pages/views/home/components/CehicleOperation.vue

@@ -341,13 +341,129 @@
           </div>
         </Box>
       </div>
-      <div>2222</div>
     </template>
     <template #center>
       <div>2222</div>
     </template>
     <template #right>
-      <div>2222</div>
+      <div class="right">
+        <div class="right-top">
+          <Box
+            v-for="(item, index) in rightContent?.top"
+            :key="index"
+            :width="438"
+            :height="570"
+            :name="item.name"
+          >
+            <Echart :option="item.option" />
+          </Box>
+        </div>
+        <div class="right-bottom">
+          <Box
+            :width="663"
+            :height="570"
+            :name="'车辆监控'"
+          >
+            <div class="carmonitor">
+              <div class="control">
+                <div
+                  v-for="item in controlList"
+                  :key="item.label"
+                  class="item"
+                >
+                  <div class="label">
+                    {{ item.label }}
+                  </div>
+                  <n-select
+                    :bordered="false"
+                    size="large"
+                    :value="1"
+                    :options="item.options"
+                  />
+                </div>
+              </div>
+              <n-table
+                striped
+                size="large"
+                :bordered="false"
+                single-column
+                :bottom-bordered="false"
+                class="table"
+              >
+                <thead>
+                  <tr>
+                    <th> 状态 </th>
+                    <th> 车牌号 </th>
+                    <th> 驾驶员 </th>
+                    <th> 拥挤度 </th>
+                    <th> 情景 </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="item in 10"
+                    :key="item"
+                    :class="{ no: item === 1 }"
+                  >
+                    <td>
+                      <div class="index" /> 运营中
+                    </td>
+                    <td> 川T 12345 </td>
+                    <td> 小A </td>
+                    <td> 舒适 </td>
+                    <td>{{ item === 1 ? '维保' : '行驶中' }} </td>
+                  </tr>
+                </tbody>
+              </n-table>
+            </div>
+          </Box>
+          <Box
+            :width="663"
+            :height="570"
+            :name="'车辆状态'"
+          >
+            <div class="carstatus">
+              <div class="up">
+                <div class="title">
+                  上行
+                </div>
+                <div class="content">
+                  <div
+                    v-for="item in carstatusList"
+                    :key="item.label"
+                  >
+                    <div class="label">
+                      {{ item.label }}
+                    </div>
+                    <div class="value">
+                      {{ item.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="down">
+                <div class="title">
+                  下行
+                </div>
+                <div class="content">
+                  <div
+                    v-for="item in carstatusList"
+                    :key="item.label"
+                  >
+                    <div class="label">
+                      {{ item.label }}
+                    </div>
+                    <div class="value">
+                      {{ item.value }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="line" />
+            </div>
+          </Box>
+        </div>
+      </div>
     </template>
   </Layout>
 </template>
@@ -357,6 +473,7 @@ import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
 import { ref } from 'vue'
+import { graphic } from 'echarts'
 /* 线路类型：干线公交 车辆总数： 运 营 中：9 辆 非 运 营：1 辆 */
 const lineInfo = ref([
   { label: '线路类型：', value: '干线公交' },
@@ -384,6 +501,48 @@ const odds = ref([
 
 const status = [ 'success', 'warning', 'error' ]
 
+const controlList = [
+  {
+    label: '状态：',
+    options: [
+      { label: '全部', value: 1 },
+      { label: '运营中', value: 2 },
+      { label: '非运营', value: 3 }
+    ]
+  },
+  {
+    label: '电量：',
+    options: [
+      { label: '0%-30%', value: 1 },
+      { label: '31%-60%', value: 2 },
+      { label: '61%-100%', value: 3 }
+    ]
+  },
+  {
+    label: '情景：',
+    options: [
+      { label: '全部', value: 1 },
+      { label: '维保', value: 2 },
+      { label: '充电', value: 3 },
+      { label: '停驶', value: 4 },
+      { label: '行驶中', value: 5 }
+    ]
+  }
+
+]
+
+const carstatusList = [
+  { label: '平均速度', value: '15.16' },
+  { label: '最大车速', value: '17.82' },
+  { label: '最小车速', value: '10.93' },
+  { label: '平均间距', value: '14.03' },
+  { label: '最大间距', value: '15' },
+  { label: '最小间距', value: '12' },
+  { label: '高峰平均时间', value: '69分钟' },
+  { label: '平峰平均时间', value: '72分钟' },
+  { label: '单程平均时间', value: '71分钟' }
+]
+
 const leftContent = ref({
   leftOp: {
     grid: {
@@ -430,6 +589,322 @@ const leftContent = ref({
     ]
   }
 })
+
+const rightContent = ref({
+  top: [
+    {
+      name: '乘客类型',
+      option: {
+        title: {
+          text: '总', // 图标内容文本
+          subtext: '196000',
+          left: 'center', // 图标内容水平居中
+          top: 'center', // 图标内容垂直居中
+          // 文本样式
+          textStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '16px', // 图标内容文字大小
+            fontWeight: 'normal'
+          },
+          subtextStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '20px', // 图标内容文字大小
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          containLabel: true
+        },
+        // 图表图例
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 40, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 0, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 20
+          }
+        },
+
+        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        series: [
+          {
+            type: 'pie', // 图表类型为饼图
+            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+            label: {
+              show: true,
+              formatter: '{d}%',
+              color: 'white'
+            },
+            data: [
+              { key: 2, name: '老年卡', value: 180 },
+              { key: 2, name: '电子钱包', value: 50 },
+              { key: 2, name: '现金', value: 30 },
+              { key: 2, name: '学生卡', value: 20 },
+              { key: 2, name: '成人次卡', value: 10 },
+              { key: 2, name: '其他', value: 10 },
+              { key: 2, name: '免费人次', value: 10 }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      name: '客流情况',
+      option: {
+        grid: {
+          containLabel: true,
+          right: 30,
+          left: 50
+        },
+        legend: {
+          show: true,
+          left: 'center',
+          top: '10',
+          icon: 'stack',
+          itemWidth: 15,
+          itemHeight: 10,
+          textStyle: {
+            color: '#646464',
+            fontSize: 18
+          }
+        },
+        xAxis: [ {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 18
+            // formatter: (value: number) => format( 1'时')
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
+        } ],
+        yAxis: [ {
+          name: '客流量/人次',
+          nameLocation: 'center',
+          nameGap: 50,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 18
+          },
+          padding: 5,
+          // max: 1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#A1A7B3'
+              // type: 'dashed'
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            margin: 10,
+            textStyle: {
+              color: '#fff'
+
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        }
+        ],
+        series: [ {
+          name: '客流量',
+          type: 'line',
+          smooth: true,
+          symbolSize: 0,
+          itemStyle: {
+            normal: {
+              // color: '#FFD35D',
+              lineStyle: {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#FFD35D66'
+                  },
+                  {
+                    offset: 0.5,
+                    color: '#7ec2f366'
+                  },
+                  {
+                    offset: 1,
+                    color: '#1890ff'
+                  }
+                ], false),
+                width: 1
+              }
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#FFD35D66'
+                },
+                {
+                  offset: 0.5,
+                  color: '#7ec2f366'
+                },
+                {
+                  offset: 1,
+                  color: '#1890ff'
+                }
+              ], false)
+            }
+          },
+          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
+        } ],
+        dataZoom: {}
+      }
+    },
+    {
+      name: '里程情况',
+      option: {
+        grid: {
+          containLabel: true,
+          right: 30,
+          left: 50
+        },
+        legend: {
+          show: true,
+          left: 'center',
+          top: '10',
+          icon: 'stack',
+          itemWidth: 15,
+          itemHeight: 10,
+          textStyle: {
+            color: '#646464',
+            fontSize: 18
+          }
+        },
+        xAxis: [ {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 18
+            // formatter: (value: number) => format( 1'时')
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
+        } ],
+        yAxis: [ {
+          name: '里程/km',
+          nameLocation: 'center',
+          nameGap: 50,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 18
+          },
+          padding: 5,
+          // max: 1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#A1A7B3'
+              // type: 'dashed'
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            margin: 10,
+            textStyle: {
+              color: '#fff'
+
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        }
+        ],
+        series: [ {
+          name: '里程',
+          type: 'line',
+          smooth: true,
+          symbolSize: 0,
+          itemStyle: {
+            normal: {
+              // color: '#4293FD',
+              lineStyle: {
+                // color: '#FFD35D',
+                width: 1,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#6A5BF066'
+                  },
+                  {
+                    offset: 0.5,
+                    color: '#7ec2f366'
+                  },
+                  {
+                    offset: 1,
+                    color: '#1890ff'
+                  }
+                ], false)
+              }
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#6A5BF066'
+                },
+                {
+                  offset: 0.5,
+                  color: '#7ec2f366'
+                },
+                {
+                  offset: 1,
+                  color: '#1890ff'
+                }
+              ], false)
+            }
+          },
+          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
+        } ],
+        dataZoom: {}
+      }
+    }
+  ],
+  bottom: {
+
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -620,6 +1095,7 @@ const leftContent = ref({
 
     .frequency {
       margin-top: 15px;
+
       .title {
         background: rgba(24, 145, 255, 0.498);
         height: 40px;
@@ -740,4 +1216,159 @@ const leftContent = ref({
     font-family: Impact Normal;
   }
 }
+
+.right {
+  &-top {
+    color: #fff;
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+  }
+
+  &-bottom {
+    color: #fff;
+    gap: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .carmonitor {
+      padding: 10px;
+
+      .control {
+        display: flex;
+        font-size: 20px;
+        gap: 20px;
+        :deep(.n-select){
+        .n-base-selection{
+          height: 40px;
+        }
+      }
+        .item {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          gap: 20px;
+
+          .label {
+            min-width: 60px;
+
+          }
+        }
+      }
+
+      .table {
+        margin-top: 20px;
+        text-align: center;
+
+        th {
+          border: 0;
+          background: rgba(33, 133, 232, 0.6);
+          text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
+          font-weight: bold;
+        }
+
+        tr {
+          td {
+            color: #fff;
+          }
+
+          .index {
+            width: 14px;
+            height: 14px;
+            line-height: 14px;
+            background: #8DFF53;
+            border-radius: 50%;
+            display: inline-block;
+            color: #333333;
+          }
+
+          &.no {
+            td {
+              background: linear-gradient(180deg, #00A8F0 0%, #02B3B3 100%);
+
+            }
+
+            .index {
+              background: #D7D7D7;
+            }
+          }
+        }
+
+      }
+    }
+
+    .carstatus {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      .line{
+        position: absolute;
+        width: 1px;
+        height: 397px;
+        background-color: rgba(128, 255, 255, 0.298);
+        left: 50%;
+        top: 120px;
+      }
+      >div {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        >div{
+          width: 100%;
+        }
+        .title {
+          width: 136px;
+          height: 59px;
+          line-height: 59px;
+          border-radius: 5px;
+          text-align: center;
+          font-size: 24px;
+          text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
+          margin: 30px 0 ;
+        }
+      }
+
+      .up .title {
+        background: rgba(27, 175, 255, 0.298);
+        border: 1px solid #81D3F8;
+        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(24, 145, 255, 0.9961);
+      }
+
+      .down .title {
+        background: rgba(231, 61, 65, 0.298);
+        border: 1px solid #F9A15A;
+        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(231, 61, 65, 0.9882);
+      }
+      .content{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        >div{
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 20px;
+          >div{
+            flex: 1;
+          }
+          .label{
+            font-size: 18px;
+            color: #81D3F8;
+            text-align: right;
+            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
+          }
+          .value{
+            font-size: 24px;
+            text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
+          }
+        }
+      }
+    }
+  }
+
+}
 </style>

src/pages/views/home/components/MaintenanceDynamics.vue

@@ -8,7 +8,7 @@
         >
           <Box
             :width="662"
-            :height="400"
+            :height="408"
             :name="item.name"
             style="position: relative;"
           >
@@ -81,37 +81,80 @@
         >
           <Box
             :width="438"
-            :height="400"
+            :height="408"
             :name="item.name"
           >
             1111
-            <!-- <Echart v-else :option="item.option" /> -->
+            <Echart :option="item.option" />
           </Box>
         </template>
       </div>
 
       <Box
         :width="1340"
-        :height="400"
+        :height="408"
         name="线路运行速度"
+        class="right-center"
       >
-        22222
+        <div class="lineSpeed">
+          <div class="img">
+            <img
+              src="../../../../assets/img/1-2.png"
+              alt="car"
+            >
+          </div>
+          <div class="control">
+            <n-select
+              size="large"
+              :bordered="false"
+              :options="[{label:'车型',value:1}]"
+              placeholder="车型选择"
+            />
+            <div class="btn">
+              一键体检
+            </div>
+          </div>
+        </div>
       </Box>
 
       <div class="right-bottom">
-        <template
-          v-for="(item, index) in rightContent.bottom"
-          :key="index"
+        <Box
+          :width="662"
+          :height="408"
+          :name="rightContent.bottom.name"
         >
-          <Box
-            :width="662"
-            :height="340"
-            :name="item.name"
-          >
-            1111
-            <!-- <Echart v-else :option="item.option" /> -->
-          </Box>
-        </template>
+          <div class="checkup">
+            <div class="total">
+              <div class="num">
+                40
+              </div>
+              <div style="font-size: 24px;">
+                总量
+              </div>
+            </div>
+            <div class="list">
+              <div
+                v-for="item in 4"
+                :key="item"
+                class="item"
+              >
+                <div class="num">
+                  10
+                </div>
+                <div class="label">
+                  三电故障
+                </div>
+              </div>
+            </div>
+          </div>
+        </Box>
+        <Box
+          :width="662"
+          :height="408"
+          :name="rightContent.bottom.name"
+        >
+          <Echart :option="rightContent.bottom.option" />
+        </Box>
       </div>
     </template>
   </Layout>
@@ -155,7 +198,7 @@ const leftContent = ref({
           name: '日期',
           nameLocation: 'center',
           nameTextStyle: {
-            fontSize: 18,
+            fontSize: 16,
             color: 'white',
             padding: [ 20, 0 ]
           },
@@ -383,14 +426,187 @@ const leftContent = ref({
 
 const rightContent = ref({
   top: [
-    { name: '客流线路分布', option: '' },
-    { name: '消费类型', option: '' },
-    { name: '乘距分布', option: '' }
+    {
+      name: '客流线路分布',
+      option: {
+        // 图表图例
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 50, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 18
+          }
+        },
+        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        series: {
+          bottom: 50,
+          type: 'pie', // 图表类型为饼图
+          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: '{b}： {c}个',
+            color: 'white'
+          },
+          data: [
+            { name: '维保场', value: 10 },
+            { name: '运维驿站', value: 2 }
+          ]
+        }
+      }
+    },
+    {
+      name: '消费类型',
+      option: {
+        // 图表图例
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 50, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 18
+          }
+        },
+        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        series: {
+          bottom: 50,
+          type: 'pie', // 图表类型为饼图
+          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: '{b}： {c}辆',
+            color: 'white'
+          },
+          data: [
+            { name: '一保', value: 100 },
+            { name: '二保', value: 50 },
+            { name: '三保', value: 16 }
+          ]
+        }
+      }
+    },
+    {
+      name: '乘距分布',
+      option: {
+        // 图表图例
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'horizontal', // 图例排列方向
+          icon: 'circle', // 图例样式为圆形
+          itemWidth: 10, // 图例图形的宽度
+          itemHeight: 16, // 图例图形的高度
+          itemGap: 10, // 图例项之间的间隔
+          left: 'center', // 图例距离容器右侧的距离
+          bottom: 50, // 图例垂直居中
+          textStyle: {
+            color: 'white', // 图例文字颜色
+            fontSize: 18
+          }
+        },
+        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        series: {
+          bottom: 50,
+          type: 'pie', // 图表类型为饼图
+          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: '{b}： {c}万元',
+            color: 'white'
+          },
+          data: [
+            { name: '保养', value: 60 },
+            { name: '维修', value: 100 }
+          ]
+        }
+      }
+    }
   ],
-  bottom: [
-    { name: '体检问题情况', option: '' },
-    { name: '维保执行情况', option: '' }
-  ]
+  bottom: {
+    name: '维保执行情况',
+    option: {
+      title: {
+        text: '总报修', // 图标内容文本
+        subtext: '60',
+        left: 'center', // 图标内容水平居中
+        top: 'center', // 图标内容垂直居中
+        // 文本样式
+        textStyle: {
+          color: '#fff', // 图标内容文字颜色
+          fontSize: '18px', // 图标内容文字大小
+          fontWeight: 'normal'
+        },
+        subtextStyle: {
+          color: '#fff', // 图标内容文字颜色
+          fontSize: '18px', // 图标内容文字大小
+          fontWeight: 'normal'
+        }
+      },
+      grid: {
+        containLabel: true,
+        top: 0,
+        bottom: 0
+      },
+      // 图表图例
+      legend: {
+        show: true,
+        type: 'scroll',
+        orient: 'horizontal', // 图例排列方向
+        icon: 'circle', // 图例样式为圆形
+        itemWidth: 10, // 图例图形的宽度
+        itemHeight: 16, // 图例图形的高度
+        itemGap: 10, // 图例项之间的间隔
+        left: 'center', // 图例距离容器右侧的距离
+        bottom: 0, // 图例垂直居中
+        textStyle: {
+          color: 'white', // 图例文字颜色
+          fontSize: 18
+        }
+      },
+      series: [
+        {
+          type: 'pie', // 图表类型为饼图
+          radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+          label: {
+            show: true,
+            formatter: '{b}: {d}俩',
+            color: 'white',
+            fontSize: 18
+          },
+          data: [
+            { name: '执行', value: 30 },
+            { name: '竣工', value: 20 },
+            { name: '在修', value: 10 }
+          ]
+        }
+      ]
+    }
+  }
 })
 
 function changeFn(id: number, item: any) {
@@ -407,7 +623,7 @@ function changeFn(id: number, item: any) {
   &-count {
     display: flex;
     font-family: 'Impact Normal', 'Impact', sans-serif;
-    font-weight: 400;
+    font-weight: 408;
     font-style: normal;
     text-align: center;
     align-items: center;
@@ -475,4 +691,98 @@ function changeFn(id: number, item: any) {
   display: flex;
   justify-content: space-between;
 }
+
+.right-center{
+  .lineSpeed{
+    display: flex;
+    align-items: center;
+    height: 100%;
+    >div{
+      width: 50%;
+    }
+    .img{
+      text-align: center;
+      img{
+      height: 262px;
+      }
+    }
+    .control{
+      width: 300px;
+      margin: auto;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      :deep(.n-select){
+        .n-base-selection{
+          border: 1px solid #5689F0;
+          height: 50px;
+          .n-base-selection-label{
+            height: 100%;
+            background: rgba(86, 137, 240, 0.298);
+          }
+        }
+      }
+      .btn{
+      width: 173px;
+      height: 71px;
+      line-height: 71px;
+      border-radius: 5px;
+      background: rgba(24, 145, 255, 0.298);
+      border: 1px solid #1891FF;
+      color: #FFFFFF;
+      font-size: 24px;
+      text-align: center;
+      margin-top: 53px;
+      }
+    }
+
+  }
+}
+.right-bottom{
+  .checkup{
+    display: flex;
+    height: 100%;
+    .total{
+      width: 30%;
+      color: #FFFFFF;
+      text-align: center;
+      height: fit-content;
+      margin: auto;
+      >div{
+        width: 100%;
+      }
+      .num{
+        font-size: 60px;
+        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
+      }
+    }
+    .list{
+      flex: 1;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-right: 40px;
+      .item{
+        width: 50%;
+        height: 115px;
+        background: url('../../../../assets/img/1-3.png') no-repeat;
+        background-size: contain;
+        text-align: center;
+        background-position-y: 13px;
+        .num{
+          font-size: 50px;
+          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
+          color: #00FFFF;
+          font-family: Impact Normal;
+        }
+        .label{
+          font-size: 24px;
+          color: #FFFFFF;
+          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
+        }
+      }
+    }
+
+  }
+}
 </style>