线路运营右侧页面

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/views/home/components/CehicleOperation.vue

@@ -341,13 +341,127 @@
           </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
+                    :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 +471,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 +499,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 +587,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 +1093,7 @@ const leftContent = ref({
 
     .frequency {
       margin-top: 15px;
+
       .title {
         background: rgba(24, 145, 255, 0.498);
         height: 40px;
@@ -740,4 +1214,155 @@ 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;
+
+        .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>