维保动态右侧页面

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

@@ -375,6 +375,8 @@
                     {{ item.label }}
                   </div>
                   <n-select
+                    :bordered="false"
+                    size="large"
                     :value="1"
                     :options="item.options"
                   />
@@ -1236,7 +1238,11 @@ const rightContent = ref({
         display: flex;
         font-size: 20px;
         gap: 20px;
-
+        :deep(.n-select){
+        .n-base-selection{
+          height: 40px;
+        }
+      }
         .item {
           display: flex;
           flex: 1;

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>