ll

liukangdong

2024-10-24 6139494798e7f91d7864fff4ed09ce9a08395ece

ll

 admin/src/components/business/OperaPlatformReasonWindow.vue

@@ -1,33 +1,23 @@
<template>
  <GlobalWindow
    :title="title"
    width="50%"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
  <GlobalWindow :title="title" width="50%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="入园原因：" prop="reason">
        <el-input v-model="form.reason" placeholder="请输入入园原因" v-trim/>
        <el-input v-model="form.reason" placeholder="请输入入园原因" v-trim />
      </el-form-item>
      <el-form-item label="作业月台组：" prop="groupId">
        <el-select v-model="form.groupId"    >
          <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
        <el-select v-model="form.groupId">
          <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作业数量限制（万只/天）：" prop="limitNum" >
        <el-input type="number" v-model="form.limitNum" placeholder="请输入作业数量限制（万只/天）" v-trim/>
      <el-form-item label="作业数量限制（万支/天）：" prop="limitNum">
        <el-input type="number" v-model="form.limitNum" placeholder="请输入作业数量限制（万支/天）" v-trim />
      </el-form-item>
      <el-form-item label="排序码(升序)：" prop="sortnum">
        <el-input type="number"  v-model="form.sortnum" placeholder="请输入排序码(升序)" v-trim/>
        <el-input type="number" v-model="form.sortnum" placeholder="请输入排序码(升序)" v-trim />
      </el-form-item>
      <el-form-item label="说明：" prop="remark">
        <el-input type="textarea"  v-model="form.remark" placeholder="请输入说明" v-trim/>
        <el-input type="textarea" v-model="form.remark" placeholder="请输入说明" v-trim />
      </el-form-item>
    </el-form>
  </GlobalWindow>
@@ -41,7 +31,7 @@
  name: 'OperaPlatformReasonWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
  data() {
    return {
      // è¡¨å•æ•°æ®
      groupList: [],
@@ -60,7 +50,7 @@
      }
    }
  },
  created () {
  created() {
    this.config({
      api: '/platform/platformReason',
      'field.id': 'id'
@@ -72,7 +62,7 @@
     * @title çª—口标题
     * @target ç¼–辑的对象
     */
    open (title, target) {
    open(title, target) {
      this.title = title
      this.loadGroupList()
      this.visible = true
@@ -91,7 +81,7 @@
        }
      })
    },
    loadGroupList () {
    loadGroupList() {
      allList({})
        .then(res => {
          this.groupList = res || []
@@ -102,7 +92,7 @@
}
</script>
<style scoped>
.labelTip{
.labelTip {
  font-size: 12px;
  color: #666666;
}

 admin/src/components/business/OperaPlatformWindow.vue

@@ -32,8 +32,8 @@
      <el-form-item label="同时作业数量：" prop="workingNum">
        <el-input type="number" v-model="form.workingNum" placeholder="请输入同时作业数量" v-trim />
      </el-form-item>
      <el-form-item label="月台作业效率(万只/小时)：" prop="workRate">
        <el-input type="number" v-model="form.workRate" placeholder="请输入月台作业效率(万只/小时)" v-trim />
      <el-form-item label="月台作业效率(万支/小时)：" prop="workRate">
        <el-input type="number" v-model="form.workRate" placeholder="请输入月台作业效率(万支/小时)" v-trim />
      </el-form-item>
      <el-form-item label="作业超时报警时间(分钟)：" prop="workTimeoutAlarmTime">
        <el-input type="number" v-model="form.workTimeoutAlarmTime" placeholder="请输入作业超时报警时间(分钟)" v-trim />

 admin/src/views/platform/platform.vue

@@ -14,8 +14,8 @@
          </el-select>
        </el-form-item>
        <!-- <section> -->
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
        <!-- </section> -->
      </el-form>
    </SearchFormCollapse>
@@ -39,7 +39,7 @@
        <el-table-column prop="workTimeoutAlarmTime" label="作业超时报警时间(分钟）" min-width="180px">
          <template scope="{row}"> {{ row.workTimeoutAlarmTime ? (row.workTimeoutAlarmTime) : '-' }}</template>
        </el-table-column>
        <el-table-column prop="workRate" label="月台作业效率(万只/小时)" min-width="180px"></el-table-column>
        <el-table-column prop="workRate" label="月台作业效率(万支/小时)" min-width="180px"></el-table-column>
        <!-- <el-table-column prop="platformStatus" label="月台状态" min-width="100px">
          <template scope="{row}">
            <span v-if="row.platformStatus == 0">无车</span>

 admin/src/views/platform/platformReason.vue

@@ -4,15 +4,12 @@
    <SearchFormCollapse slot="search-form" :need-more="false">
      <el-form ref="searchForm" :model="searchForm" label-width="100px" inline>
        <el-form-item label="" prop="reason">
          <el-input v-model="searchForm.reason" clearable placeholder="请输入入园原因" @keypress.enter.native="search"></el-input>
          <el-input v-model="searchForm.reason" clearable placeholder="请输入入园原因"
            @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" >
          <el-select v-model="searchForm.groupId"     placeholder="请选择月台分组" @change="search" clearable>
            <el-option
                v-for="item in groupList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        <el-form-item label="">
          <el-select v-model="searchForm.groupId" placeholder="请选择月台分组" @change="search" clearable>
            <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
@@ -24,59 +21,45 @@
    </SearchFormCollapse>
    <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
    <template v-slot:table-wrap>
      <ul class="toolbar" v-permissions="['business:platformreason:create','business:platformreason:delete']">
        <li><el-button type="primary" @click="$refs.OperaPlatformReasonWindow.open('新建月台入园原因')" icon="el-icon-plus" v-permissions="['business:platformreason:create']">新建</el-button></li>
        <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:platformreason:delete']">删除</el-button></li>
      <ul class="toolbar" v-permissions="['business:platformreason:create', 'business:platformreason:delete']">
        <li><el-button type="primary" @click="$refs.OperaPlatformReasonWindow.open('新建月台入园原因')" icon="el-icon-plus"
            v-permissions="['business:platformreason:create']">新建</el-button></li>
        <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete"
            v-permissions="['business:platformreason:delete']">删除</el-button></li>
      </ul>
      <el-table
        v-loading="isWorking.search"
        :data="tableData.list"
        stripe
        @selection-change="handleSelectionChange"
      >
      <el-table v-loading="isWorking.search" :data="tableData.list" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="reason" label="入园原因" fixed min-width="100px"></el-table-column>
        <el-table-column prop="groupName" label="对应作业月台组" fixed min-width="150px"></el-table-column>
        <el-table-column prop="limitNum" label="作业量(万只/天)" min-width="120px"></el-table-column>
        <el-table-column prop="limitNum" label="作业量(万支/天)" min-width="120px"></el-table-column>
        <el-table-column prop="sortnum" label="排序码" fixed min-width="80px"></el-table-column>
        <el-table-column prop="remark" label="说明" fixed min-width="100px"></el-table-column>
        <el-table-column label="禁/启用" min-width="120px" >
        <el-table-column label="禁/启用" min-width="120px">
          <template slot-scope="{row}">
            <el-switch
                @change="changeStatus($event, row)"
                v-model="row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="0"
                :inactive-value="1">
            <el-switch @change="changeStatus($event, row)" v-model="row.status" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="editDate" label="最近操作时间" min-width="140px"></el-table-column>
        <el-table-column
          v-if="containPermissions(['business:platformreason:update', 'business:platformreason:delete'])"
          label="操作"
          align="center"
          min-width="150"
          fixed="right"
        >
        <el-table-column v-if="containPermissions(['business:platformreason:update', 'business:platformreason:delete'])"
          label="操作" align="center" min-width="150" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="$refs.OperaPlatformApproveTemplWindow.open('月台入园原因审批流', row)" icon="el-icon-edit" v-permissions="['business:platformreason:update']">审批流</el-button>
            <el-button type="text" @click="$refs.OperaPlatformReasonWindow.open('编辑月台入园原因', row)" icon="el-icon-edit" v-permissions="['business:platformreason:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:platformreason:delete']">删除</el-button>
            <el-button type="text" @click="$refs.OperaPlatformApproveTemplWindow.open('月台入园原因审批流', row)"
              icon="el-icon-edit" v-permissions="['business:platformreason:update']">审批流</el-button>
            <el-button type="text" @click="$refs.OperaPlatformReasonWindow.open('编辑月台入园原因', row)" icon="el-icon-edit"
              v-permissions="['business:platformreason:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
              v-permissions="['business:platformreason:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :pagination="tableData.pagination"
      >
      <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
      </pagination>
    </template>
    <!-- æ–°å»º/修改 -->
    <OperaPlatformReasonWindow ref="OperaPlatformReasonWindow" @success="handlePageChange"/>
    <OperaPlatformApproveTemplWindow ref="OperaPlatformApproveTemplWindow" @success="handlePageChange"/>
    <OperaPlatformReasonWindow ref="OperaPlatformReasonWindow" @success="handlePageChange" />
    <OperaPlatformApproveTemplWindow ref="OperaPlatformApproveTemplWindow" @success="handlePageChange" />
  </TableLayout>
</template>

@@ -92,7 +75,7 @@
  name: 'Platform',
  extends: BaseTable,
  components: { SearchFormCollapse, TableLayout, Pagination, OperaPlatformReasonWindow, OperaPlatformApproveTemplWindow },
  data () {
  data() {
    return {
      groupList: [],
      // æœç´¢
@@ -104,7 +87,7 @@
      }
    }
  },
  created () {
  created() {
    this.config({
      module: '月台入园原因信息表',
      api: '/platform/platformReason',
@@ -115,13 +98,13 @@
    this.loadGroupList()
  },
  methods: {
    loadGroupList () {
    loadGroupList() {
      allList({})
        .then(res => {
          this.groupList = res || []
        })
    },
    changeStatus (e, row) {
    changeStatus(e, row) {
      this.api.updateStatusById({
        id: row.id,
        status: e

 pda/pages/index/center.vue

@@ -184,7 +184,7 @@
                <view class="transform_list">

                    <view class="line" @click="transformPlatClick(item)" v-for="item in TransferList"

                        :key="item.id">

                        <view class="name">{{ item.name }}</view>

                        <view class="name">{{ item.name  || item.platformName}}</view>

                        <view class="status" :class="{ green: item.workStatus == 1 }">({{ item.workStatus == 0 ? "空闲" : "作业中" }})

                        </view>

                        <image v-if="transformPlatId == item.id" src="@/static/ic_select@2x.png" class="checked" />

@@ -259,12 +259,15 @@
        },

        methods: {
            getTransferList() {
                getPlatformWorkData({
                    platformId: this.activePlatform.id
                getPlatformGroupList({
                    queryData: 1,
                    queryType: 1
                }).then(res => {
                    console.log('res.data', res.data);
                    if(res.data && res.data.platformJobList){
                        this.TransferList = res.data.platformJobList
                    const platformGroupList = res.data || []
                    if (platformGroupList.length > 0) {
                        const { activePlatformGroup } = this
                        const temp = platformGroupList.find(i => i.id === activePlatformGroup.id)
                        this.TransferList = temp.platformList || []
                    }
                })
            },

@@ -286,19 +289,16 @@
                    }

                })

            },

            getPlatformTask() {
                uni.showLoading({title:"加载中..."})

            getPlatformTask() {

                getPlatformWorkData({

                    platformId: this.activePlatform.id

                }).then(res => {
                    uni.hideLoading()

                }).then(res => {

                    this.platformTaskInfo = res.data

                    this.circulInitTaskList()

                    setInterval(() => {

                        this.circulInitTaskList()

                    }, 1000)

                }, () => {
                    uni.hideLoading()
                })

            },

            circulInitTaskList() {


 pda/utils/service.js

@@ -5,15 +5,10 @@
            let token = uni.getStorageSync('token') || null
            // åœ¨ç™»å½•çš„时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")

            // uni.showLoading({
            //     title:"加载中..."
            // })
            if(!options.hideLoading){
                uni.showLoading({
                    title: '加载中',
                    mask: true
                })
            }
            uni.showLoading({
                title: '加载中',
                mask: true
            })
            uni.request({
                url: baseUrl + options.url,
                data: options.data || {},

 screen/src/components/FirePercent.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
<template>
  <div class="main">
    <div class="plan_wrap">
      <div class="plan" :style="{
        width: `${rate}%`,
        backgroundColor: color
      }"></div>
      <div class="icon" :style="{ backgroundColor: color }"></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  rate: Number,
  color: String
})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding: 4px;
  height: 13px;

  .plan_wrap {
    height: 6px;
    width: 100%;
    background-color: #3a474e;
    display: flex;
    align-items: center;
  }

  .plan {
    height: 6px;
  }
  .icon{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 3px solid #fff;
  }
}
</style>

 screen/src/router/index.js

@@ -6,7 +6,7 @@
  routes: [
    {
      path: '/',
      component: () => import('../views/TaskEfficiency.vue')
      component: () => import('../views/LogisticsCenter.vue')
    },
    {
      path: '/PlatformCall', // æœˆå°å«å·å¤§å±

 screen/src/views/FireFighting.vue

@@ -54,7 +54,14 @@
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="echart1" id="echart1"></div>
              <div class="item" v-for="(ind, i) in 4">
                <div class="head">
                  <div class="name">真实报警数</div>
                  <div class="name">{{ i }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="40" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
@@ -286,7 +293,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
@@ -303,99 +310,165 @@
}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // ç»˜åˆ¶å›¾è¡¨
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // ç”Ÿæˆæ•°æ®å’Œæ—¥æœŸ
  function getLastSevenDays() {
    const days = []
    const today = new Date()
    for (let i = 10; i >= 0; i--) {
      days.push(`${i + 1}月`) // æ ¼å¼åŒ–日期为 "X月X日"
    }
    return days
  }

  // ç¤ºä¾‹æ•°æ®
  const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // å‡†æ—¶
  const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // è¿Ÿåˆ°
  const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // è¯·å‡
  const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // åŠ ç­
  const option = {
    legend: {
      x: "center",
      textStyle: {
        color: "#FFFFFF", // å›¾ä¾‹æ–‡å­—设为白色
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // æ›´æ–°å›¾ä¾‹åç§°
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
      right: '0%',
      top: '18%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      trigger: "axis",
      axisPointer: {
        type: 'line'
        type: "shadow"
      },
      textStyle: {
        color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0,0,0,0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)",
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
      data: getLastSevenDays(), // ä½¿ç”¨è¿‘七天日期
      axisLabel: {
        color: "#FFFFFF", // X è½´æ–‡å­—设为白色
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
      show: true,
      axisLabel: {
        color: "#FFFFFF", // Y è½´æ–‡å­—设为白色
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
          color: ["#0f1d27"],
          width: 1
        },
      },
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        name: "告警数",
        type: "bar",
        stack: "attendance",
        data: data1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
          color: '#FEAF01',
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
        barWidth: 6,
      },
      {
        name: "进行中", // è¿Ÿåˆ°æ•°æ®
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // è¿Ÿåˆ°çš„颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "已处理", // è¯·å‡æ•°æ®
        type: "bar",
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // è¯·å‡çš„颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // å•ç‹¬çš„加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // é«˜äº®çš„紫色
        },
        emphasis: {
          focus: "series",
        },
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [

      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
@@ -762,8 +835,7 @@
}

onMounted(() => {
  // initEnergy()
  // initEchart1()
  initEchart2()
  initWatergage()
  initLiquidlevel()
})
@@ -848,13 +920,21 @@
      margin-bottom: 20px;

      .police_wrap {
        padding: 15px 20px 0;
        height: 225px;

        border: 1px solid;

        .echart1 {
          width: 100%;
          height: 100%;
        .item {
          margin-bottom: 5px;

          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }
        }
      }
    }
@@ -921,12 +1001,14 @@
                  #dd4c26 50%,
                  #e43724 100%);
            }

            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #e9bf43 50%,
                  #eb8131 100%);
            }

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
@@ -1056,6 +1138,7 @@
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;

 screen/src/views/TaskEfficiency.vue

@@ -177,6 +177,21 @@
                <div class="num">1</div>
              </div>
            </div>
            <div class="echart_wrap">
              <div class="echart3" id="echart3"></div>
            </div>
            <div class="list">
              <div class="line" v-for=" i in 7">
                <div class="time_wrap">
                  <div class="time">12.40</div>
                  <div class="sp"></div>
                  <div class="dian"></div>
                </div>
                <div class="id_card">皖A12313</div>
                <div class="status">开始作业</div>
                <div class="desc">排队等待叫号</div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
@@ -272,12 +287,291 @@
    myChart.resize()
  })
}
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
    grid: {
      top: '32%',
      left: '0%',
      right: '7%',
      bottom: '0%',
      containLabel: true,
    },
    legend: {
      itemGap: 24,
      data: ['分时作业量', '累计作业量'],
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      top: '6%',
      textStyle: {
        color: '#fff',
        borderColor: '#fff'
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: [{
      nameGap: 5,
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: {
        color: '#9eaaba',
      },
      axisTick: {
        show: false,
      },
      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023',],
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#9eaaba',
        },
        offset: 0,
        name: '万支',
        type: 'value',
        axisLabel: {
          show: true,
          color: "#9eaaba",
        },
        axisLine: {
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
      // {
      //   nameTextStyle: {
      //     color: '#9eaaba',
      //   },
      //   offset: 0,
      //   name: '万支',
      //   type: 'value',
      //   axisLabel: {
      //     show: true,
      //     color: "#9eaaba",
      //   },
      //   axisLine: {
      //     show: true,
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       width: 1,
      //       color: "rgba(49,105,129,0.4)",
      //       type: 'dashed'
      //     }
      //   },
      // }
    ],
    series: [
      {
        name: '分时作业量',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 0,
        lineStyle: {
          color: '#2355f5',
          borderColor: '#2355f5'
        },
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: "#2355f5",
          lineStyle: {
            width: 0,
            type: 'solid'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2355f5'
            },
            {
              offset: 1,
              color: 'rgba(14, 31, 65,0.1)'
            }
          ], false),
          shadowColor: 'rgba(124,248,255, 0)',
          shadowBlur: 20
        },
        data: [393, 438, 485, 631, 389, 224, 287]
      },
      {
        name: '累计作业量',
        type: 'bar',
        barWidth: 6,
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#63d6fa'
            },
            {
              offset: 1,
              color: '#32718d'
            }
          ], false),
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          barBorderRadius: [30, 30, 0, 0],
        },
        data: [393, 438, 485, 631, 689, 524, 687]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  var colors = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#7fe3fc'
    },
    {
      offset: 1,
      color: '#9ce9fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#64d7fa'
    }, {
      offset: 1,
      color: '#7de3fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4679f6'
    }, {
      offset: 1,
      color: '#4674f6'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }])]
  const option = {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "red"
        },
        lineStyle: {
          color: "#9eb2cb"
        }
      }
    },

    legend: {
      show: false,
      top: "top",
      left: "2%",
      textStyle: {
        color: "#000"
      },
      itemHeight: 2,
      data: ['预约数', '已进场', '已作业', '已离场']
    },
    series: [
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '20%',
        maxSize: '80%',
        gap: 4,
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
          }
        },
        labelLine: {
          length: 80,
          lineStyle: {
            width: 1,
            type: 'dashed'
          }
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '预约数', },
          { value: 50, name: '已进场' },
          { value: 20, name: '已作业' },
          { value: 30, name: '已离场' },

        ]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}



onMounted(() => {
  // initEnergy()
  initEchart1()
  initEchart2()
  initEchart3()
})


@@ -561,6 +855,70 @@
          }
        }
      }

      .echart_wrap {
        width: 100%;

        .echart3 {
          width: 100%;
          height: 160px;
        }
      }

      .list {
        margin: 0 20px 0;
        width: 100%;
        height: 222px;
        .line {
          display: flex;
          align-items: center;
          font-size: 12px;
          height: 33px;
          color: #D2E0FF;
          width: 100%;
          .time_wrap {
            display: flex;
            align-items: center;
            width: 52px;
            color: #FFFFFF;
            .time {
              width: 40px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              background: #00A68E;
              border-radius: 2px;
            }

            .sp {
              width: 10px;
              height: 1px;
              background: #00A68E;
            }

            .dian {
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #00A68E;
            }
          }

          .id_card {
            flex: 6;
            margin-left: 12px;
          }

          .status {
            flex: 5;
          }

          .desc {
            flex: 9;
          }
        }
      }

    }

    .right_box_two {
@@ -647,6 +1005,7 @@
                  margin-bottom: 4px;
                  display: flex;
                  align-items: center;

                  .xf {
                    width: 14px;
                    height: 14px;