fix-钥匙柜管理

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.24.0",
     "core-js": "^3.19.2",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.13",
     "file-saver": "^2.0.5",
     "flv.js": "^1.6.2",

src/App.vue

@@ -26,3 +26,9 @@ export default {
   }
 }
 </script>
+<style>
+#app{
+  /* background-color: #080d14; */
+  background: #070b13;
+}
+</style>

src/mixin/drawMixin.js

@@ -12,7 +12,7 @@ const baseHeight = 1080
 
 // * 需保持的比例（默认1.77778）
 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
-
+console.log('----------',baseProportion);
 export default {
   data() {
     return {

src/views/clw/KeyCase/index.vue

@@ -1,270 +1,142 @@
 <template>
-  <page-header-wrapper>
-    <a-card :bordered="false">
-      <!-- 条件搜索 -->
-      <div class="table-page-search-wrapper">
-        <a-form layout="inline">
-          <a-row :gutter="48">
-            <a-col :md="8" :sm="24">
-              <a-form-item label="车牌号" prop="plateNumber">
-                <a-input v-model="queryParam.plateNumber" placeholder="请输入车牌号" allow-clear/>
-              </a-form-item>
-            </a-col>
-            <template v-if="advanced">
-              <a-col :md="8" :sm="24">
-                <a-form-item label="箱子号码" prop="code">
-                  <a-input v-model="queryParam.code" placeholder="请输入箱子号码" allow-clear/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="8" :sm="24">
-                <a-form-item label="箱子名称" prop="codeName">
-                  <a-input v-model="queryParam.codeName" placeholder="请输入箱子名称" allow-clear/>
-                </a-form-item>
-              </a-col>
-            </template>
-            <a-col :md="!advanced && 8 || 24" :sm="24">
-              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
-                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
-                <a @click="toggleAdvanced" style="margin-left: 8px">
-                  {{ advanced ? '收起' : '展开' }}
-                  <a-icon :type="advanced ? 'up' : 'down'"/>
-                </a>
-              </span>
-            </a-col>
-          </a-row>
-        </a-form>
+  <PageFullContent>
+    <div class="key">
+      <div>
+        <div class="key-main">
+          <div class="header"></div>
+         <div style="display: flex;">
+          <div>
+            <div style="display: flex">
+              <div class="main">
+                <div class="left-key">
+                  <div class="edit-box">
+                    <div style="margin-bottom: 100px">
+                      <div
+                        style="
+                          display: flex;
+                          height: 30px;
+                          align-items: center;
+                          justify-content: space-around;
+                          margin-bottom: 10px;
+                        "
+                      >
+                        <span
+                          style="
+                            color: #4d4d4d;
+                            font-size: 28px;
+                            font-family: PingFang SC;
+                            font-weight: bold;
+                            margin-left: -18px;
+                          "
+                          >公务车钥匙柜</span
+                        >
+                        <img
+                          style="width: 10px; height: 10px; display: inline-block; cursor: pointer"
+                          src="../../../assets/vehicle/xg.png"
+                          alt=""
+                        />
+                        <span style="margin-right: 30px">字数限制7个字</span>
+                      </div>
+                      <div class="text-edit">
+                        <span class="text-en">请扫描二维码</span>
+                        <img src="../../../assets/vehicle/xg.png" alt="" />
+                        <span>字数限制7个字</span>
+                      </div>
+                      <div class="text-edit" style="margin: 10px 0">
+                        <span class="text-en">查看用车流程</span>
+                        <img src="../../../assets/vehicle/xg.png" alt="" />
+                        <span>字数限制7个字</span>
+                      </div>
+                      <div class="text-edit">
+                        <span class="text-en">文字描述</span>
+                        <img src="../../../assets/vehicle/xg.png" alt="" />
+                        <span>字数限制7个字</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div></div>
+                </div>
+                <div class="right-key"></div>
+              </div>
+            </div>
+            <TableInfo />
+          </div>
+          <div><KeyBox /></div>
+         </div>
+        </div>
       </div>
-      <!-- 操作 -->
-      <div class="table-operations">
-        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['clw:KeyCase:add']">
-          <a-icon type="plus" />新增
-        </a-button>
-        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['clw:KeyCase:edit']">
-          <a-icon type="edit" />修改
-        </a-button>
-        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['clw:KeyCase:remove']">
-          <a-icon type="delete" />删除
-        </a-button>
-        <a-button type="primary" @click="handleExport" v-hasPermi="['clw:KeyCase:export']">
-          <a-icon type="download" />导出
-        </a-button>
-        <table-setting
-          :style="{float: 'right'}"
-          :table-size.sync="tableSize"
-          v-model="columns"
-          :refresh-loading="loading"
-          @refresh="getList" />
-      </div>
-      <!-- 增加修改 -->
-      <create-form
-        ref="createForm"
-        @ok="getList"
-      />
-      <!-- 数据展示 -->
-      <a-table
-        :loading="loading"
-        :size="tableSize"
-        rowKey="id"
-        :columns="columns"
-        :data-source="list"
-        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-        :pagination="false"
-        :bordered="tableBordered"
-      >
-        <span slot="operation" slot-scope="text, record">
-          <a-divider type="vertical" v-hasPermi="['clw:KeyCase:edit']" />
-          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['clw:KeyCase:edit']">
-            <a-icon type="edit" />修改
-          </a>
-          <a-divider type="vertical" v-hasPermi="['clw:KeyCase:remove']" />
-          <a @click="handleDelete(record)" v-hasPermi="['clw:KeyCase:remove']">
-            <a-icon type="delete" />删除
-          </a>
-        </span>
-      </a-table>
-      <!-- 分页 -->
-      <a-pagination
-        class="ant-table-pagination"
-        show-size-changer
-        show-quick-jumper
-        :current="queryParam.pageNum"
-        :total="total"
-        :page-size="queryParam.pageSize"
-        :showTotal="total => `共 ${total} 条`"
-        @showSizeChange="onShowSizeChange"
-        @change="changeSize"
-      />
-    </a-card>
-  </page-header-wrapper>
+    </div>
+  </PageFullContent>
 </template>
 
 <script>
-import { listKeyCase, delKeyCase } from '@/api/clw/KeyCase'
-import CreateForm from './modules/CreateForm'
-import { tableMixin } from '@/store/table-mixin'
-
+import TableInfo from './modules/TableInfo'
+import { PageFullContent } from '@/components'
+import KeyBox from './modules/KeyBox'
 export default {
-  name: 'KeyCase',
-  components: {
-    CreateForm
-  },
-  mixins: [tableMixin],
-  data () {
-    return {
-      list: [],
-      selectedRowKeys: [],
-      selectedRows: [],
-      // 高级搜索 展开/关闭
-      advanced: false,
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      ids: [],
-      loading: false,
-      total: 0,
-      // 查询参数
-      queryParam: {
-        plateNumber: null,
-        status: null,
-        code: null,
-        codeName: null,
-        pageNum: 1,
-        pageSize: 10
-      },
-      columns: [
-        {
-          title: '主键',
-          dataIndex: 'id',
-          ellipsis: true,
-          align: 'center'
-        },
-        {
-          title: '车牌号',
-          dataIndex: 'plateNumber',
-          ellipsis: true,
-          align: 'center'
-        },
-        {
-          title: '钥匙柜状态',
-          dataIndex: 'status',
-          ellipsis: true,
-          align: 'center'
-        },
-        {
-          title: '箱子号码',
-          dataIndex: 'code',
-          ellipsis: true,
-          align: 'center'
-        },
-        {
-          title: '箱子名称',
-          dataIndex: 'codeName',
-          ellipsis: true,
-          align: 'center'
-        },
-        {
-          title: '操作',
-          dataIndex: 'operation',
-          width: '18%',
-          scopedSlots: { customRender: 'operation' },
-          align: 'center'
-        }
-      ]
-    }
-  },
-  filters: {
-  },
-  created () {
-    this.getList()
-  },
-  computed: {
-  },
-  watch: {
-  },
-  methods: {
-    /** 查询钥匙柜管理列表 */
-    getList () {
-      this.loading = true
-      listKeyCase(this.queryParam).then(response => {
-        this.list = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
+  components: { TableInfo, PageFullContent, KeyBox },
+}
+</script>
 
-    /** 搜索按钮操作 */
-    handleQuery () {
-      this.queryParam.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery () {
-      this.queryParam = {
-        plateNumber: undefined,
-        status: undefined,
-        code: undefined,
-        codeName: undefined,
-        pageNum: 1,
-        pageSize: 10
+<style lang="less" scoped>
+.key {
+  background: #f7f7f7;
+  margin: 10px 10px;
+  height: 830px;
+  .key-main {
+    display: flex;
+    flex-direction: column;
+    .header {
+      width: 100%;
+      height: 161px;
+      background: url('../../../assets/vehicle/zkey61.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .main {
+      display: flex;
+      // height: 772px;
+      .left-key {
+        width: 442px;
+        .edit-box {
+          width: 100%;
+          height: 270px;
+          background: url('../../../assets/vehicle/left-bg1.png') no-repeat;
+          display: flex;
+          flex-direction: column;
+          padding-left: 55px;
+          padding-top: 33px;
+          .text-edit {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            height: 30px;
+            width: 300px;
+            img {
+              width: 10px;
+              height: 10px;
+              display: inline-block;
+              cursor: pointer;
+              margin-right: 20px;
+            }
+            span {
+              display: inline-block;
+              width: 140px;
+              text-align: left;
+            }
+            .text-en {
+              font-size: 20px;
+              color: #4d4d4d;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+      .right-key {
+        flex: 1;
+        height: 100%;
+        background: seagreen;
       }
-      this.handleQuery()
-    },
-    onShowSizeChange (current, pageSize) {
-      this.queryParam.pageSize = pageSize
-      this.getList()
-    },
-    changeSize (current, pageSize) {
-      this.queryParam.pageNum = current
-      this.queryParam.pageSize = pageSize
-      this.getList()
-    },
-    onSelectChange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-      this.ids = this.selectedRows.map(item => item.id)
-      this.single = selectedRowKeys.length !== 1
-      this.multiple = !selectedRowKeys.length
-    },
-    toggleAdvanced () {
-      this.advanced = !this.advanced
-    },
-    /** 删除按钮操作 */
-    handleDelete (row) {
-      var that = this
-      const ids = row.id || this.ids
-      this.$confirm({
-        title: '确认删除所选中数据?',
-        content: '当前选中编号为' + ids + '的数据',
-        onOk () {
-          return delKeyCase(ids)
-            .then(() => {
-              that.onSelectChange([], [])
-              that.getList()
-              that.$message.success(
-                '删除成功',
-                3
-              )
-          })
-        },
-        onCancel () {}
-      })
-    },
-    /** 导出按钮操作 */
-    handleExport () {
-      var that = this
-      this.$confirm({
-        title: '是否确认导出?',
-        content: '此操作将导出当前条件下所有数据而非选中数据',
-        onOk () {
-          that.download('clw/KeyCase/export', {
-            ...that.queryParam
-          }, `KeyCase_${new Date().getTime()}.xlsx`)
-        },
-        onCancel () {}
-      })
     }
   }
 }
-</script>
+</style>

src/views/clw/KeyCase/modules/KeyBox.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="cabinet">
+    <div class="box">
+      <div v-for="(item, index) in 30" :key="index" class="cabinet-box">
+        <div>
+          <div style="font-size: 36px">
+            {{ index + 1 }}
+          </div>
+          <div style="font-size: 16px; color: #777">渝A40232</div>
+        </div>
+      </div>
+    </div>
+    <div class="rigth-cabinet">
+      <img src="../../../../assets/vehicle/yjgl.png" alt="" />
+      <div class="edit-box">
+        <div>
+          <span class="tab"></span>
+          <span>钥匙在柜</span>
+        </div>
+        <div>
+          <span class="tab" style="background: #ff9d17;"></span>
+          <span>钥匙使用中</span>
+        </div>
+        <div>
+          <span class="tab" style="background: #e66767;"></span>
+          <span>维修中</span>
+        </div>
+        <div>
+          <span class="tab" style="background: #adadad;"></span>
+          <span>钥匙柜未绑定钥匙</span>
+        </div>
+      </div>
+      <div class="imgs">
+       <img src="../../../../assets/vehicle/yjkm.png" alt="">
+       <img src="../../../../assets/vehicle/zdpz.png" alt="">
+    </div>
+    </div>
+   
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.cabinet {
+  flex: 1;
+  // width: 90%;
+  height: 654px;
+  background: #f0f8fe;
+  box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  opacity: 1;
+  padding: 10px 10px;
+  display: flex;
+  .box {
+    min-width: 750px;
+    max-width: 950px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .cabinet-box {
+    width: 15%;
+    height: 90px;
+    background: url('../../../../assets/vehicle/cs2.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 2px 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  .rigth-cabinet {
+    width: 170px;
+    .edit-box {
+      font-family: PingFang SC;
+      font-size: 12px;
+      color: #4d4d4d;
+      margin-top: 30px;
+      margin-left: 10px;
+      .tab {
+      display: inline-block;
+      width: 27px;
+      height: 12px;
+      background: #1cd855;
+      border-radius: 0px;
+      opacity: 1;
+      margin-right: 10px;
+    }
+    }
+    
+  }
+  .imgs{
+   margin-top: 180px;
+    img{
+        display: inline-block;
+        width: 113px;
+        height: 113px;
+    }
+  }
+}
+</style>

src/views/clw/KeyCase/modules/TableInfo.vue

@@ -0,0 +1,124 @@
+<template>
+  <div style="width: 413px; margin-top: -15px; margin-left: 20px; height: 400px; background: #fff; border-radius: 10px;">
+    <div class="key-pop">
+      <div class="title-key">
+        <div class="title-line">
+          <span class="line"></span>
+          <span class="info">在用车辆信息</span>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div class="row header">
+            <span class="type">车牌号</span>
+            <span class="count">用车人</span>
+            <span class="time"> 申请时间</span>
+            <span class="unit">归还时间</span>
+            <span class="unit">操作</span>
+          </div>
+          <ul style="padding-left: 0;">
+            <li class="row">
+              <span class="type">渝A456744</span>
+              <span class="count">张三</span>
+              <span class="time">2023.1.1 12:00</span>
+              <span class="unit" > 2023.1.1 19:00 </span>
+              <span style="color: #076cf5;">提醒归还</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.key-pop {
+  .title-key {
+    width: 100%;
+    // height: 350px;
+    background: #fff;
+    border-radius: 10px;
+    padding: 20px 8px 5px 8px;
+    .title-line {
+      margin-left: 20px;
+      // width: 140px;
+      display: flex;
+      align-items: center;
+      .line {
+        display: inline-block;
+        width: 9px;
+        height: 24px;
+        background: #aacefc;
+        border-radius: 3px;
+        opacity: 1;
+        margin-right: 18px;
+      }
+      .info {
+        font-size: 20px;
+        font-family: PingFang SC;
+        color: #4d4d4d;
+        opacity: 1;
+        font-weight: 500;
+      }
+    }
+  }
+  .header {
+    color: #4d4d4d ;
+    height: 31px;
+    background: #f7f7f7;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 10px;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
+  }
+  li.row > span {
+    //   text-align: center;
+    font-size: 12px;
+    display: inline-block;
+  }
+  li.row.active {
+    background-color: rgba(0, 213, 255, 0.2);
+  }
+
+  li.row {
+    box-sizing: border-box;
+    padding-left: 0 !important;
+  }
+
+  .row,
+  li {
+    display: block;
+    height: 36px;
+    // border-bottom: 1px dashed #1f2535;
+    line-height: 36px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 14px;
+    //   background-color: rgba(0, 0, 0, 0.2);
+    color: #4d4d4d;
+    margin-top: 5px;
+    .type,
+    .unit {
+      // display: flex;
+      // justify-content: center;
+      // // align-items: center;
+      // flex: 0.15;
+      img {
+        display: inline-block;
+        width: 11px;
+        height: 16px;
+        //   margin-left: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/vehicle/components/CarType.vue

@@ -0,0 +1,291 @@
+<template>
+  <div>
+    <div>
+      <div class="fuel"></div>
+      <div class="list">
+        <!-- <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0">
+            <span>年份</span>
+            <span style="margin: 0 15px">月份</span>
+            <span>每周</span>
+          </div> -->
+        <!-- 表格 -->
+        <div>
+          <!-- <fuelEchart/> -->
+          <div ref="chart" class="item" style="height: 357px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: '',
+      dataList: [],
+      data1: [10, 15, 10, 13, 15, 11],
+      data2: [19, 35, 40, 33, 15, 51],
+      data3: [21, 55, 10, 13, 35, 11],
+      data4: [21, 55, 10, 13, 35, 11],
+      data5: [21, 55, 10, 13, 35, 11],
+    }
+  },
+  // props: {
+  //   list: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  // },
+  // watch: {
+  //   list: {
+  //     handler(val) {
+  //       this.$nextTick(() => {
+  //         const chartDom = this.$refs.chart;
+  //         // 初始化图表实例
+  //         this.chart = echarts.init(chartDom);
+  //         this.initChart(val);
+  //       });
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
+
+  methods: {
+    initChart() {
+      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', ]
+      const option = {
+        // title: {
+        //   // subtext: "报警占比",
+        //   x: 'center',
+        //   y: '37%',
+        //   textStyle: {
+        //     fontSize: 18,
+        //     fontWeight: 'normal',
+        //     color: ['#333'],
+        //   },
+        //   subtextStyle: {
+        //     color: '#f1bb4c',
+        //     fontSize: 16,
+        //   },
+        // },
+
+        grid: {
+          left: '1%',
+          top: '14%',
+          right: '5%',
+        //   bottom: '15%',
+        },
+        legend: {
+          orient: 'horizontal',
+          show: true,
+          itemWidth: 18, // 设置图例宽度
+          itemHeight: 18, // 设置图例高度
+          itemGap: 25, // 设置图例间距
+          left: 50,
+          bottom: 0,
+          //   orient: 'vertical',
+          // top: "middle",
+          right: '0%',
+          textStyle: {
+            color: '#f2f2f2',
+            fontSize: 14,
+          },
+        //   icon: 'circle',
+        },
+        series: [
+          // 主要展示层的
+          {
+            radius: ['19%', '42%'],
+            center: ['50%', '35%'],
+            type: 'pie',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colorList[params.dataIndex]
+                },
+              },
+            },
+            labelLine: {
+              normal: {
+                show: true,
+                length: 35,
+               
+                // length2: 20,
+                lineStyle: {
+                  color: '#fff',
+                  textBorderColor:'none',
+                  
+                },
+                align: 'left',
+              },
+            //   color: '#000',
+            //   emphasis: {
+            //     show: true,
+            //   },
+            },
+            label: {
+              normal: {
+                formatter: function (params) {
+                  var str = ''
+                  switch (params.name) {
+                    case '灭火消防车':
+                      str = '灭火消防车' + params.value + '%'
+                      break
+                    case '教援消防车':
+                      str = '教援消防车' + params.value + '%'
+                      break
+                    case '举高消防车':
+                      str = '举高消防车' + params.value + '%'
+                      break
+                    case '专勤消防车':
+                      str = '专勤消防车' + params.value + '%'
+                      break
+                  }
+                  return str
+                },
+                padding: [0, -20],
+                height: 35,
+                rich: {
+                  //   a: {
+                  //     width: 28,
+                  //     height: 48,
+                  //     lineHeight: 50,
+
+                  //     align: 'center',
+                  //   },
+                  //   b: {
+                  //     width: 59,
+                  //     height: 45,
+                  //     lineHeight: 50,
+                  //     align: 'center',
+                  //   },
+                  //   c: {
+                  //     width: 34,
+                  //     height: 33,
+                  //     lineHeight: 50,
+
+                  //     align: 'left',
+                  //   },
+                  //   d: {
+                  //     width: 34,
+                  //     height: 44,
+                  //     lineHeight: 50,
+                  //     align: 'left',
+                  //   },
+                  //   e: {
+                  //     width: 38,
+                  //     height: 30,
+                  //     lineHeight: 50,
+                  //     align: 'left',
+                  //   },
+                  nameStyle: {
+                    fontSize: 16,
+                    color: '#00A3FF',
+                    align: 'left',
+                  },
+                  rate: {
+                    fontSize: 20,
+                    color: '#1ab4b8',
+                    align: 'left',
+                  },
+                },
+              },
+            },
+            data: [
+              {
+                value: 17,
+                name: '灭火消防车',
+              },
+              { value: 23, name: '教援消防车' },
+              { value: 27, name: '举高消防车' },
+              { value: 33, name: '专勤消防车' },
+            ],
+          },
+          // 边框的设置
+        //   {
+        //     radius: ['24%', '29%'],
+        //     center: ['50%', '50%'],
+        //     type: 'pie',
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //       },
+        //       emphasis: {
+        //         show: false,
+        //       },
+        //     },
+        //     labelLine: {
+        //       normal: {
+        //         show: false,
+        //       },
+        //       emphasis: {
+        //         show: false,
+        //       },
+        //     },
+        //     animation: false,
+        //     tooltip: {
+        //       show: false,
+        //     },
+        //     itemStyle: {
+        //       normal: {
+        //         color: '#00A3FF',
+        //         fontSize: 14,
+        //       },
+        //     },
+        //     data: [
+        //       {
+        //         value: 1,
+        //       },
+        //     ],
+        //   },
+        ],
+      }
+
+      this.chart.setOption(option)
+      //自适应图表
+      window.onresize = this.chart.resize
+    },
+  },
+  mounted() {
+    const chartDom = this.$refs.chart
+    console.log('------', chartDom)
+    //   // 初始化图表实例
+    this.chart = echarts.init(chartDom)
+    this.initChart()
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.fuel {
+  width: 443px;
+  height: 50px;
+  background: url('../../../assets/vehicle/cllx.png') no-repeat;
+  margin-top: 15px;
+}
+.list {
+  width: 443px;
+  height: 387px;
+  border: 1px solid #00aaff;
+  margin-top: 10px;
+  .header {
+    color: #61dbff !important;
+    height: 38px !important;
+    background-color: rgba(66, 92, 108, 0.3) !important;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 !important;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
+  }
+}
+</style>

src/views/vehicle/components/FuelRanking.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <div>
+      <div class="fuel"></div>
+      <div class="list">
+        <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0;">
+          <span>年份</span>
+          <span style="margin: 0 15px">月份</span>
+          <span>每周</span>
+        </div>
+        <!-- 表格 -->
+        <div>
+          <div class="row header">
+            <span class="type">排名</span>
+            <span class="count">所属单位</span>
+            <span class="time" > 总油耗（升）</span>
+            <span class="unit">名次</span>
+          </div>
+          <ul style="padding-left: 0;">
+            <li class="row">
+              <span class="type">1</span>
+              <span class="count">测试</span>
+              <span class="time">表格</span>
+              <span class="unit">
+                <img src="../../../assets/vehicle/Vector (6).png" />
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.fuel {
+  width: 443px;
+  height: 50px;
+  background: url('../../../assets/vehicle/yh.png') no-repeat;
+}
+.list {
+  width: 443px;
+  height: 434px;
+  border: 1px solid #00AAFF;
+  margin-top: 10px;
+  .header {
+  color: #61dbff !important;
+  height: 38px !important;
+  background-color: rgba(66, 92, 108, 0.3) !important;
+  margin-top: 2px;
+  letter-spacing: 1px;
+  line-height: 38px;
+  display: flex;
+  justify-content: space-around;
+  padding: 0 !important;
+  .is_notice {
+    line-height: 19px;
+    font-size: 10px;
+  }
+}
+
+li.row > span {
+//   text-align: center;
+  font-size: 14px;
+  display: inline-block;
+}
+li.row.active {
+  background-color: rgba(0, 213, 255, 0.2);
+}
+
+li.row {
+  box-sizing: border-box;
+}
+
+.row,
+li{
+  display: block;
+  height: 46px;
+  border-bottom: 1px dashed #1f2535;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 14px;
+//   background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 5px;
+  .type,
+  .unit {
+    // display: flex;
+    // justify-content: center;
+    // // align-items: center;
+    // flex: 0.15;
+    img {
+      display: inline-block;
+      width: 11px;
+      height: 16px;
+    //   margin-left: 5px;
+    }
+  }
+//   .type {
+//     flex: 0.15;
+//   }
+//   .count {
+//     text-align: center;
+//     display: inline-block;
+//     overflow: hidden;
+//     text-overflow: ellipsis !important; // 超出隐藏
+//     white-space: nowrap;
+//      flex: 0.35;
+//   }
+//   .time {
+//     color: #61dbff;
+//     flex: 0.35;
+//   }
+}
+}
+</style>

src/views/vehicle/components/FuelRegistration.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+      <div>
+        <div class="fuel"></div>
+        <div class="list">
+          <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0;">
+            <span>年份</span>
+            <span style="margin: 0 15px">月份</span>
+            <span>每周</span>
+          </div>
+          <!-- 表格 -->
+        <div>
+            <fuelEchart/>
+        </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+import fuelEchart from './fuelEchart';
+export default{
+    components:{fuelEchart}
+}
+</script>
+  
+  <style lang="less" scoped>
+  .fuel {
+    width: 443px;
+    height: 50px;
+    background: url('../../../assets/vehicle/tj.png') no-repeat;
+    margin-top: 15px;
+  }
+  .list {
+    width: 443px;
+    height: 387px;
+    border: 1px solid #00AAFF;
+    margin-top: 10px;
+    .header {
+    color: #61dbff !important;
+    height: 38px !important;
+    background-color: rgba(66, 92, 108, 0.3) !important;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 !important;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
+  }
+  
+}
+  </style>
+  

src/views/vehicle/components/VehicleCarAllocation.vue

@@ -0,0 +1,137 @@
+<template>
+  <div ref="chart" class="item" style="height: 330px; width: 224px" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: '',
+      dataList: [],
+    }
+  },
+  // props: {
+  //   list: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  // },
+  // watch: {
+  //   list: {
+  //     handler(val) {
+  //       this.$nextTick(() => {
+  //         const chartDom = this.$refs.chart;
+  //         // 初始化图表实例
+  //         this.chart = echarts.init(chartDom);
+  //         this.initChart(val);
+  //       });
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
+
+  methods: {
+    initChart() {
+      const option = {
+        color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
+        // textStyle: {
+        //   color: '#fff',
+        //   fontSize: 16,
+        // },
+
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+          },
+        },
+        grid: {
+            left: '-34%',
+            right: '4%',
+            bottom: '0%',
+            top:'5%',
+            containLabel: true,
+          },
+        xAxis: {
+          type: 'value',
+          // 设置x轴显示几段
+          // min: 0,
+          // max: 100,
+          interval: 0,
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: 'transparent',
+            },
+          },
+        },
+        yAxis: {
+          type: 'category',
+          axisLabel: {
+            verticalAlign: 'top',
+            align: 'left',
+            padding: [-25, 0, 40, 6],
+            textStyle: {
+              fontSize: 14,
+              color: '#1089E7',
+              // fontFamily: 'Source Han Sans CN',
+            },
+          },
+          data: ['鸳鸯消防站', '翠云消防站', '龙头寺消防站', '礼嘉消防站', '奥园消防站', '大竹林消防站'],
+          axisTick: { show: false },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#e0e0e0',
+            },
+          },
+          inside: true,
+          //   textStyle: {
+          //     color: '#000',
+          //   },
+        },
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: '#739FA8', // 定义柱形的背景色
+              borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
+            },
+            barGap: '-100%', //设置柱形重合的重要步骤
+            data: [100, 100, 100, 100, 100, 100],
+            animation: false, // 关闭动画效果
+            barWidth: '18px', // 设置柱形宽度
+          },
+          {
+            type: 'bar',
+            data: [65, 75, 33, 34, 45, 66, 77],
+            barWidth: '15px',
+            barGap: '-90%', //设置柱形重合的重要步骤
+            itemStyle: {
+              borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
+              color: function (params) {
+                var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016']
+                return colorList[params.dataIndex]
+              },
+            },
+          },
+        ],
+      }
+      this.chart.setOption(option)
+      //自适应图表
+      window.onresize = this.chart.resize
+    },
+  },
+  mounted() {
+    const chartDom = this.$refs.chart
+    //   // 初始化图表实例
+    this.chart = echarts.init(chartDom)
+    this.initChart()
+  },
+}
+</script>
+
+<style scoped lang="less"></style>

src/views/vehicle/components/VehicleDistribution.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <div>
+      <div class="fuel"></div>
+      <div class="list">
+        <!-- <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0">
+          <span>年份</span>
+          <span style="margin: 0 15px">月份</span>
+          <span>每周</span>
+        </div> -->
+        <!-- 表格 -->
+        <div>
+          <!-- <fuelEchart/> -->
+          <div ref="chart" class="item" style="height: 430px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: '',
+      dataList: [],
+      data1: [10, 15, 10, 13, 15, 11],
+      data2: [19, 35, 40, 33, 15, 51],
+      data3: [21, 55, 10, 13, 35, 11],
+      data4: [21, 55, 10, 13, 35, 11],
+      data5: [21, 55, 10, 13, 35, 11],
+    }
+  },
+  // props: {
+  //   list: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  // },
+  // watch: {
+  //   list: {
+  //     handler(val) {
+  //       this.$nextTick(() => {
+  //         const chartDom = this.$refs.chart;
+  //         // 初始化图表实例
+  //         this.chart = echarts.init(chartDom);
+  //         this.initChart(val);
+  //       });
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
+
+  methods: {
+    initChart() {
+      var spNum = 5,
+        _max = 100
+      var legendData = ['灭火消防车', '举高消防车', '后援消防车', '专勤消防车', '机场消防车']
+      var y_data = ['两江支队', '鸳鸯支队', '大竹林站', '礼嘉站', '翠云站', '龙头寺站']
+      var _datamax = [100, 100, 100, 100, 100, 100]
+      var fomatter_fn = function (v) {
+        return ((v.value / _max) * 100).toFixed(0)
+      }
+      var _label = {
+        normal: {
+          show: true,
+          position: 'inside',
+          formatter: fomatter_fn,
+          textStyle: {
+            color: '#fff',
+            fontSize: 16,
+          },
+        },
+      }
+      const option = {
+        //   backgroundColor: "#091034",
+        legend: {
+          data: legendData,
+          textStyle: {
+            color: '#ccc',
+          },
+        },
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 15,
+          bottom: 30,
+          top: 110,
+        },
+        // grid: {
+        //   //   top: '15%',
+        //   right: '15%',
+        //   bottom: '10%',
+        // },
+        legend: {
+          //图例说明，解释(图例设置)
+          //   icon: 'none', //  控制图形样式
+          itemWidth: 18, // 设置图例宽度
+          itemHeight: 18, // 设置图例高度
+          itemGap: 25, // 设置图例间距
+          x: 10,
+          y: 30,
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        tooltip: {
+          show: true,
+          backgroundColor: '#fff',
+          borderColor: '#ddd',
+          borderWidth: 1,
+          textStyle: {
+            color: '#3c3c3c',
+            fontSize: 16,
+          },
+          formatter: function (p) {
+            var _arr = p.seriesName.split('/'),
+              idx = p.seriesIndex //1，2，3
+            return (
+              '名称：' +
+              p.seriesName +
+              '<br>' +
+              '完成：' +
+              p.value +
+              '<br>' +
+              '占比：' +
+              ((p.value / _max) * 100).toFixed(0) +
+              '%'
+            )
+          },
+          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)',
+        },
+        xAxis: {
+          splitNumber: spNum,
+          interval: _max / spNum,
+          max: _max,
+          axisLabel: {
+            show: false,
+            formatter: function (v) {
+              var _v = ((v / _max) * 100).toFixed(0)
+              return _v == 0 ? _v : _v + '%'
+            },
+          },
+        //   axisLine: {
+        //     show: true,
+        //     lineStyle: {
+        //       color: '#0177d4',
+        //     },
+        //   },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            data: y_data,
+            axisLabel: {
+              fontSize: 14,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+              color: '#0177d4',
+            },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            show: false,
+            data: y_data,
+            axisLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            type: 'bar',
+            name: '灭火消防车',
+            stack: '2',
+            label: _label,
+            legendHoverLink: false,
+            barWidth: 25,
+            itemStyle: {
+              normal: {
+                color: '#33FAE2',
+              },
+            //   emphasis: {
+            //     color: '#33FAE2',
+            //   },
+            },
+            data: this.data1,
+          },
+          {
+            type: 'bar',
+            name: '举高消防车',
+            stack: '2',
+            legendHoverLink: false,
+            barWidth: 25,
+            label: _label,
+            itemStyle: {
+              normal: {
+                color: '#33FA8F',
+              },
+            //   emphasis: {
+            //     color: '#33FA8F',
+            //   },
+            },
+            data: this.data2,
+          },
+          {
+            type: 'bar',
+            stack: '2',
+            name: '后援消防车',
+            legendHoverLink: false,
+            barWidth: 25,
+            label: _label,
+            itemStyle: {
+              normal: {
+                color: '#FAE633',
+              },
+            //   emphasis: {
+            //     color: '#FAE633',
+            //   },
+            },
+            data: this.data3,
+          },
+          {
+            type: 'bar',
+            stack: '2',
+            name: '专勤消防车',
+            legendHoverLink: false,
+            barWidth: 25,
+            label: _label,
+            itemStyle: {
+              normal: {
+                color: '#FA9333',
+              },
+            //   emphasis: {
+            //     color: '#FA9333',
+            //   },
+            },
+            data: this.data4,
+          },
+          {
+            type: 'bar',
+            stack: '2',
+            name: '机场消防车',
+            legendHoverLink: false,
+            barWidth: 25,
+            label: _label,
+            itemStyle: {
+              normal: {
+                color: '#00A3FF',
+              },
+            //   emphasis: {
+            //     color: '#00A3FF',
+            //   },
+            },
+            data: this.data5,
+          },
+        ],
+      }
+
+      this.chart.setOption(option)
+      //自适应图表
+      window.onresize = this.chart.resize
+    },
+  },
+  mounted() {
+    const chartDom = this.$refs.chart
+    console.log('------', chartDom)
+    //   // 初始化图表实例
+    this.chart = echarts.init(chartDom)
+    this.initChart()
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.fuel {
+  width: 443px;
+  height: 50px;
+  background: url('../../../assets/vehicle/clfb.png') no-repeat;
+  //   margin-top: 15px;
+}
+.list {
+  width: 443px;
+  height: 437px;
+  border: 1px solid #00aaff;
+  margin-top: 10px;
+  .header {
+    color: #61dbff !important;
+    height: 38px !important;
+    background-color: rgba(66, 92, 108, 0.3) !important;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 !important;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
+  }
+}
+</style>

src/views/vehicle/components/cardDistribution.vue

@@ -0,0 +1,138 @@
+<template>
+    <div ref="chart" class="item" style="height: 330px; width: 224px" />
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts'
+  export default {
+    data() {
+      return {
+        chart: null,
+        timer: '',
+        dataList: [],
+      }
+    },
+    // props: {
+    //   list: {
+    //     type: Array,
+    //     default: [],
+    //   },
+    // },
+    // watch: {
+    //   list: {
+    //     handler(val) {
+    //       this.$nextTick(() => {
+    //         const chartDom = this.$refs.chart;
+    //         // 初始化图表实例
+    //         this.chart = echarts.init(chartDom);
+    //         this.initChart(val);
+    //       });
+    //     },
+    //     immediate: true,
+    //     deep: true,
+    //   },
+    // },
+  
+    methods: {
+      initChart() {
+        const option = {
+          color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
+          // textStyle: {
+          //   color: '#fff',
+          //   fontSize: 16,
+          // },
+  
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line',
+            },
+          },
+          grid: {
+            left: '-34%',
+            right: '4%',
+            bottom: '0%',
+            top:'5%',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'value',
+            // 设置x轴显示几段
+            // min: 0,
+            // max: 100,
+            interval: 0,
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: 'transparent',
+              },
+            },
+          },
+          yAxis: {
+            type: 'category',
+            axisLabel: {
+              verticalAlign: 'top',
+              align: 'left',
+              padding: [-25, 0, 40, 6],
+              textStyle: {
+                fontSize: 14,
+                color: '#1089E7',
+                // fontFamily: 'Source Han Sans CN',
+              },
+            },
+            data: ['鸳鸯消防站', '翠云消防站', '龙头寺消防站', '礼嘉消防站', '奥园消防站', '大竹林消防站'],
+            axisTick: { show: false },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#e0e0e0',
+              },
+            },
+            inside: true,
+            //   textStyle: {
+            //     color: '#000',
+            //   },
+          },
+          series: [
+            {
+              type: 'bar',
+              itemStyle: {
+                color: '#739FA8', // 定义柱形的背景色
+                borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
+              },
+              barGap: '-100%', //设置柱形重合的重要步骤
+              data: [100, 100, 100, 100, 100, 100],
+              animation: false, // 关闭动画效果
+              barWidth: '18px', // 设置柱形宽度
+            },
+            {
+              type: 'bar',
+              data: [65, 75, 33, 34, 45, 66, 77],
+              barWidth: '15px',
+              barGap: '-90%', //设置柱形重合的重要步骤
+              itemStyle: {
+                borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
+                color: function (params) {
+                  var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016']
+                  return colorList[params.dataIndex]
+                },
+              },
+            },
+          ],
+        }
+        this.chart.setOption(option)
+        //自适应图表
+        window.onresize = this.chart.resize
+      },
+    },
+    mounted() {
+      const chartDom = this.$refs.chart
+      //   // 初始化图表实例
+      this.chart = echarts.init(chartDom)
+      this.initChart()
+    },
+  }
+  </script>
+  
+  <style scoped lang="less"></style>
+  

src/views/vehicle/components/fuelEchart.vue

@@ -0,0 +1,139 @@
+<template>
+  <div ref="chart" class="item" style="height: 330px" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: '',
+      dataList: [],
+    }
+  },
+  // props: {
+  //   list: {
+  //     type: Array,
+  //     default: [],
+  //   },
+  // },
+  // watch: {
+  //   list: {
+  //     handler(val) {
+  //       this.$nextTick(() => {
+  //         const chartDom = this.$refs.chart;
+  //         // 初始化图表实例
+  //         this.chart = echarts.init(chartDom);
+  //         this.initChart(val);
+  //       });
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
+
+  methods: {
+    initChart() {
+      const option = {
+        tooltip: {
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        
+        grid: {
+          //   top: '15%',
+          left: '15%',
+          bottom: '10%',
+        },
+        xAxis: {
+          data: ['两江支队', '鸳鸯支队', '大竹林站', '礼嘉站', '翠云站', '龙头寺站'],
+          axisLine: {
+            lineStyle: {
+              color: '#0177d4',
+            },
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          name: '（升）',
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 16,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0177d4',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+
+          axisLabel: {
+            color: '#fff',
+            fontSize: 16,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#0177d4',
+            },
+          },
+          //   interval: 500,
+          //   max: 5000,
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#00b0ff',
+                    },
+                    {
+                      offset: 0.8,
+                      color: '#7052f4',
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [25, 325, 164, 254, 757, 211],
+          },
+        ],
+      }
+
+      this.chart.setOption(option)
+      //自适应图表
+      window.onresize = this.chart.resize
+    },
+  },
+  mounted() {
+    const chartDom = this.$refs.chart
+    //   // 初始化图表实例
+    this.chart = echarts.init(chartDom)
+    this.initChart()
+  },
+}
+</script>
+
+<style scoped lang="less"></style>

src/views/vehicle/components/unit3D.vue

@@ -0,0 +1,446 @@
+<template>
+  <div ref="pie3d" style="height: 900px; " />
+</template>
+<script>
+import * as echarts from 'echarts'
+import "echarts-gl";
+export default {
+  data() {
+    return {
+      optionData: [
+        {
+          code: '3',
+          name: '病区四',
+          cws: 80,
+          zcs: 20,
+          zcl: '25%',
+          value: 80,
+          startRatio: 0,
+          endRatio: 0.34782608695652173,
+        },
+        {
+          code: '0',
+          name: '病区一',
+          cws: 60,
+          zcs: 30,
+          zcl: '50%',
+          value: 60,
+          startRatio: 0.34782608695652173,
+          endRatio: 0.6086956521739131,
+        },
+        {
+          code: '2',
+          name: '病区三',
+          cws: 50,
+          zcs: 20,
+          zcl: '40%',
+          value: 50,
+          startRatio: 0.6086956521739131,
+          endRatio: 0.8260869565217391,
+        },
+        {
+          code: '1',
+          name: '病区二',
+          cws: 40,
+          zcs: 30,
+          zcl: '75%',
+          value: 40,
+          startRatio: 0.8260869565217391,
+          endRatio: 1,
+        },
+      ],
+      myChart:null,
+      option:null
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+    const chartDom = this.$refs.pie3d
+    this.myChart = echarts.init(chartDom)
+    this.initChart()
+    });
+    
+  },
+  methods: {
+    //初始化构建
+    initChart() {
+      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+      this.option = this.getPie3D(this.optionData, 0.85)
+      //将配置项设置进去
+      this.myChart.setOption(this.option)
+      //鼠标移动上去特效效果
+      this.bindListen(this.myChart)
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        let k = that.option.series[params.seriesIndex].pieStatus.k
+        let startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(
+            that.option.series[selectedIndex].pieData.startRatio,
+            that.option.series[selectedIndex].pieData.endRatio,
+            false,
+            false,
+            k,
+            that.option.series[selectedIndex].pieData.value
+          )
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          that.option.series[params.seriesIndex].pieData.value
+        )
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            )
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[params.seriesIndex].pieData.value + 5
+            )
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[hoveredIndex].pieData.value
+          )
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    },
+    getPie3D(pieData, internalDiameterRatio) {
+      let that = this
+      let series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      let k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return b.value - a.value
+      })
+      // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        let seriesItem = {
+          //系统名称
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          //是否为参数曲面（是）
+          parametric: true,
+          //曲面图网格线（否）上面一根一根的
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        }
+        //曲面的颜色、不透明度等样式。
+        if (typeof pieData[i].itemStyle != 'undefined') {
+          let itemStyle = {}
+          typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null
+          typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        )
+        startValue = endValue
+        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb,
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb,
+        })
+      }
+      //(第二个参数可以设置你这个环形的高低程度)
+      let boxHeight = this.getHeight3D(series, 2) //通过传参设定3d饼/环的高度
+      // let boxHeight=2
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        //图例组件
+        // legend: {
+        //   data: legendData,
+        //   //图例列表的布局朝向。
+        //   orient: 'horizontal',
+        //   left: '34%',
+        //   //图例文字每项之间的间隔
+        //   itemGap: 10,
+        //   textStyle: {
+        //     color: '#A1E2FF',
+        //     fontSize: '0.5rem',
+        //   },
+        //   show: true,
+        //   icon: 'circle',
+        //   //格式化图例文本（我是数值什么显示什么）
+        //   // formatter: function (name) {
+        //   //   var target;
+        //   //   for (var i = 0, l = pieData.length; i < l; i++) {
+        //   //     if (pieData[i].name == name) {
+        //   //       target = pieData[i].value;
+        //   //     }
+        //   //   }
+        //   //   return `${name}: ${target}`;
+        //   // }
+        //   // 这个可以显示百分比那种（可以根据你想要的来配置）
+        //   //   formatter: function(param) {
+        //   //       let item = legendBfb.filter(item => item.name == param)[0];
+        //   //       let bfs = that.fomatFloat(item.value * 100, 2) + "%";
+        //   //       console.log(item.name)
+        //   //       return `${item.name} :${bfs}`;
+        //   //   }
+        // },
+        //移动上去提示的文本内容
+        tooltip: {
+          formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2)
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}`
+              )
+            }
+          },
+        },
+        //这个可以变形
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        //此处是修改样式的重点
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          //这是饼图的位置
+          top: '29%',
+          left:'4%',
+
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 8, //角度(这个很重要 调节角度的)
+            distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+            rotateSensitivity: 1, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: true, //自动旋转
+          },
+        },
+        series: series,
+      }
+      return option
+    },
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value
+      })
+      return (height * 2) 
+    },
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2
+      let startRadian = startRatio * Math.PI * 2
+      let endRadian = endRatio * Math.PI * 2
+      let midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        },
+      }
+    },
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+  },
+}
+</script>

src/views/vehicle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="index" ref="appRef">
     <div class="bg-img">
       <div v-if="dateYear">
         <!-- header -->
@@ -17,10 +17,44 @@
                 </span>
               </div>
             </div>
-         
           </div>
         </div>
-        <div></div>
+        <div class="main">
+          <div class="right-box">
+            <FuelRanking />
+            <div>
+              <FuelRegistration />
+            </div>
+          </div>
+          <div class="main-box">
+            <div class="left-car">
+              <div style="display: flex; justify-content: space-around; margin-top: 8px">
+                <span style="color: #70fffd; font-size: 20px">油卡分配</span>
+                <img class="imgs" src="../../assets/vehicle/Vector (7).png" alt="" />
+              </div>
+              <cardDistribution />
+            </div>
+            <div class="main-tab">
+              <img class="tab-left" src="../../assets/vehicle/left.png" alt="" @click="changeTab('油卡分配')" />
+              <span class="tab-text">{{ text }}</span>
+              <img class="tab-right" src="../../assets/vehicle/right.png" alt="" @click="changeTab('消防车辆分配')"  />
+            </div>
+            <unit3D :fierList="fierList" />
+            <div class="right-car">
+              <div style="display: flex; justify-content: space-around; margin-top: 8px">
+                <span style="color: #70fffd; font-size: 20px">消防车辆分配</span>
+                <img class="imgs" src="../../assets/vehicle/Vector (8).png" alt="" />
+              </div>
+              <VehicleCarAllocation />
+            </div>
+          </div>
+          <div class="left-box">
+            <VehicleDistribution />
+            <div>
+              <CarType />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -29,8 +63,24 @@
 <script>
 import drawMixin from '../../mixin/drawMixin.js'
 import { formatTime } from '../../mixin/index'
+import FuelRanking from './components/FuelRanking'
+import FuelRegistration from './components/FuelRegistration'
+import VehicleDistribution from './components/VehicleDistribution'
+import CarType from './components/CarType'
+import unit3D from './components/unit3D'
+import cardDistribution from './components/cardDistribution'
+import VehicleCarAllocation from './components/VehicleCarAllocation'
 export default {
   mixins: [drawMixin],
+  components: {
+    FuelRanking,
+    FuelRegistration,
+    VehicleDistribution,
+    CarType,
+    unit3D,
+    cardDistribution,
+    VehicleCarAllocation,
+  },
   data() {
     return {
       dateYear: null,
@@ -38,6 +88,39 @@ export default {
       dateDay: null,
       weekday: ['周日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
       loading: true,
+      fierList: [
+        {
+          glxs: '其他管理形式',
+          sl: 91,
+          qy: '全市',
+        },
+        {
+          glxs: '居民自主管理',
+          sl: 885,
+          qy: '全市',
+        },
+        {
+          glxs: '无管理主体',
+          sl: 160,
+          qy: '全市',
+        },
+        {
+          glxs: '有管理单位（物业）',
+          sl: 38569,
+          qy: '全市',
+        },
+        {
+          glxs: '有管理单位（非物业）',
+          sl: 1848,
+          qy: '全市',
+        },
+        {
+          glxs: '街道社区代管',
+          sl: 3145,
+          qy: '全市',
+        },
+      ],
+      text:'油卡分配'
     }
   },
   mounted() {
@@ -55,22 +138,36 @@ export default {
         this.dateWeek = this.weekday[new Date().getDay()]
       }, 1000)
     },
+    changeTab(val){
+        this.text=val
+    },
     cancelLoading() {
       setTimeout(() => {}, 500)
     },
-    toManage(){
-     this.$router.push({ path: '/cardiot' })
-    }
+    toManage() {
+      this.$router.push({ path: '/cardiot' })
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
+#index {
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+}
 .bg-img {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background: url('../../assets/vehicle/9ba2875d9c2997253ac20aa84fee565.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: cover;
+  background-position: center center;
   .header {
     width: 100%;
     height: 92px;
@@ -79,6 +176,7 @@ export default {
     background-size: 100% 100%;
     display: flex;
     justify-content: space-between;
+    // margin-bottom: 15px;
     .title {
       font-size: 32px;
       font-family: YouSheBiaoTiHei;
@@ -87,7 +185,7 @@ export default {
       margin-left: 100px;
     }
     .tq-info {
-    //   width: 500px;
+      //   width: 500px;
       display: flex;
       align-items: center;
       margin-right: 22px;
@@ -98,7 +196,7 @@ export default {
         background-size: 100% 100%;
       }
       .react-right {
-        font-size: 24px;
+        font-size: 20px;
         color: #fff;
         height: 44px;
         // background: #a5d2ec;
@@ -111,19 +209,85 @@ export default {
       .day {
         display: inline-block;
         color: #fff;
-        font-size: 44px;
+        font-size: 36px;
         font-size: PingFang SC;
         // padding-top: 5px;
       }
     }
-    .pc-img{
-        width: 140px;
-        height: 42px;
-        background: url('../../assets/vehicle/pc.png') no-repeat;
-        margin-top: 25px;
-        margin-left: 450px;
-        cursor: pointer;
-     
+    .pc-img {
+      width: 140px;
+      height: 42px;
+      background: url('../../assets/vehicle/pc.png') no-repeat;
+      margin-top: 25px;
+      margin-left: 717px;
+      cursor: pointer;
+    }
+  }
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 15px 0 15px;
+    .right-box {
+      width: 443px;
+      height: 980px;
+      // background: red;
+    }
+    .main-box {
+      flex: 1;
+      position: relative;
+      .left-car {
+        // height: 350px;
+        position: absolute;
+        top: 23%;
+        left: 30px;
+        z-index: 1000;
+        border: 1px solid #00a3ff;
+      }
+      .right-car {
+        position: absolute;
+        top: 23%;
+        right: 30px;
+        z-index: 1000;
+        border: 1px solid #00a3ff;
+      }
+      .imgs {
+        display: inline-block;
+        width: 20px;
+        height: 18px;
+        margin-top: 10px;
+      }
+      .main-tab {
+        width: 280px;
+        position: absolute;
+        top: 22%;
+        left: 37%;
+        z-index: 99999;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .tab-left {
+          display: inline-block;
+          width: 34px;
+          height: 34px;
+          cursor: pointer;
+        }
+        .tab-right {
+          display: inline-block;
+          width: 34px;
+          height: 34px;
+          cursor: pointer;
+        }
+        .tab-text {
+          font-size: 26px;
+          color: #70fffd;
+        }
+      }
+    }
+    .left-box {
+      display: inline-block;
+      width: 443px;
+      height: 980px;
     }
   }
 }