huangzhidong
/
guoyao-jiankang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>派单统计面板</title>
  <link rel="stylesheet" href="/static/elementui2.15.5/index.css"/>
  <script src="/static/hplus/js/jquery.min.js?v=2.1.4"></script>
  <script src="/static/layer3.2.0/layer.js"></script>
  <script src="/static/elementui2.15.5/vue-2.6.14.js"></script>
  <script src="/static/elementui2.15.5/index.js"></script>
  <script src="/static/echarts.js"></script>
  <style>
    body { background:#f3f3f4; font-family:"Microsoft YaHei",sans-serif; margin:20px;}
    .container { display:flex; gap:15px;}
    .panel{
      padding: 20px;
      background:#fff;
      border-radius: 10px;
    }

    .card-group { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px; }
    .stat-card {
      flex:1 1 100px;
      padding:12px;
      border-radius: 8px;
      color:#333333FF;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 50px;
      cursor: pointer;
    }
    .white{
      color: #ffffff;
    }
    .stat-card h3 { margin:0;font-size:16px; }
    .stat-card p { margin:5px 0 0;font-size:20px; font-weight: bold}
    .el-table{
      width: 100%;
    }

    .el-table th, .el-table td { text-align:center;color: #333333FF }
    .status-dispatch { color:#7000FBFF; font-weight:600; } /* 紫色 */
    .status-pending { color:#fa8c16; font-weight:600; }    /* 橙色 */
    .status-inprogress { color:#7000FBFF; font-weight:600; } /* 蓝色 */
    .status-fail { color: #da0727; font-weight:600; } /* 蓝色 */

    .video-container {
      width: 100%;
      height: 280px;
      background: #fff;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    .video-container video {
      width: 100%;
      height: 100%;
      display: block;
    }
    .loading-ico{
      margin-top: 4px;
      position: absolute;
      margin-left: -25px;
      animation: rotate 3s linear infinite;
    }
    .page{
      margin-top:15px;
      margin-bottom:15px;
      text-align: center;
    }
    @keyframes rotate {
      from{transform: rotate(0deg)}
      to{transform: rotate(360deg)}
    }
  </style>

</head>
<body>
<div id="app" >
  <el-row :gutter="40" type="flex"  ref="mainContent" style="margin-right: 25px">
    <!-- 左侧 已派单面板 -->
      <el-col :span="12" class="panel">
        <div v-loading="loading3" class="card-group" >
          <div class="stat-card white" style='background-image: url("/static/ai/img/done.png")' @click="handleModeChange(0)">
            <h3>AI派单总数</h3><p>{{done.total}}</p>
          </div>
          <div class="stat-card" style='background-image: url("/static/ai/img/bj.png")' @click="handleModeChange(2)">
            <h3>保洁派单数</h3><p  style="color: #0983E2FF">{{done.bj}}</p>
          </div>
          <div class="stat-card" style='background-image: url("/static/ai/img/bx.png")' @click="handleModeChange(1)">
            <h3>维修派单数</h3><p  style="color: #00905DFF">{{done.bx}}</p>
          </div>
          <div class="stat-card" style='background-image: url("/static/ai/img/ys.png")' @click="handleModeChange(3)">
            <h3>运送工单数</h3><p  style="color: #E68417FF">{{done.ys}}</p>
          </div>
          <div class="stat-card" style='background-image: url("/static/ai/img/ab.png")' @click="handleModeChange(4)">
            <h3>安保待派单数</h3><p style="color: #8943DDFF">{{done.ab}}</p>
          </div>
        </div>

        <div v-loading="loading3" id="chart" style="height:200px;"></div>
        <div style="margin-top: 40px;display: flex">
          <img src="/ai/img/triangle-right.png" style="width: 10px;height: 10px">
          <h4 style="margin-top: -7px;margin-left: 10px">今日已派单看板</h4>
        </div>
        <el-table v-loading="loading"
                  ref="dispatchedTable"
                  :data="dispatchedList"
                  style="width:100%;">
          <el-table-column prop="sn" label="编号">
            <template slot-scope="scope">
              <a  href="javascript:;"
                  data-title="详情"
                  @click="layerOpen(scope.row.id)"
                  data-title="详情"
                  style="color:#0056DBFF;text-decoration: none">
                  {{ scope.row.sn }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span class="status-dispatch">已派单</span>
            </template>
          </el-table-column>
          <el-table-column prop="user" label="发起人"></el-table-column>
          <el-table-column prop="create_time" label="派单时间"></el-table-column>
          <el-table-column prop="toUser" label="指派员工"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a  href="javascript:;"
                  data-title="重新派单"
                  @click="send(scope.row.todo_id,scope.row.mode,0)"
                  style="color:#0056DBFF;text-decoration: none">
                重新派单
              </a>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
          <el-pagination
                  background
                  layout="prev, pager, next, sizes, total"
                  :total="total"
                  :page-size="pageSize"
                  :current-page.sync="currentPage"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange">
          </el-pagination>
        </div>
    </el-col>
    <!-- 右侧 待派单面板 -->
    <el-col :span="12" class="panel" style="margin-left: 10px">
      <div v-loading="loading3" class="card-group">
        <div class="stat-card white" style='background-image: url("/static/ai/img/undo.png")' @click="handleModeChange2(0)">
          <h3>待派单总数</h3><p>{{undo.total}}</p>
        </div>
        <div class="stat-card" style='background-image: url("/static/ai/img/bj.png")' @click="handleModeChange2(2)">
          <h3>保洁待派单数</h3><p style="color: #0983E2FF">{{undo.bj}}</p>
        </div>
        <div class="stat-card" style='background-image: url("/static/ai/img/bx.png")' @click="handleModeChange2(1)">
          <h3>维修待派单数</h3><p style="color: #00905DFF">{{undo.bx}}</p>
        </div>
        <div class="stat-card" style='background-image: url("/static/ai/img/ys.png")' @click="handleModeChange2(3)">
          <h3>运送待派单数</h3><p style="color: #E68417FF">{{undo.ys}}</p>
        </div>
        <div class="stat-card" style='background-image: url("/static/ai/img/ab.png")' @click="handleModeChange2(4)">
          <h3>安保待派单数</h3><p style="color: #8943DDFF">{{undo.ab}}</p>
        </div>
        <div class="stat-card" @click="handleModeChange2(-1)">
          <h3>异常单数</h3><p style="color: #8943DDFF">{{undo.fail}}</p>
        </div>
      </div>

      <div class="video-container">
        <video
            class="video"
            src="/ai/img/ai2.mp4"
            autoplay
            loop
            muted
            playsinline
            webkit-playsinline
            x5-playsinline
            disablePictureInPicture
        >
          您的浏览器不支持视频播放
        </video>
      </div>

      <el-table v-loading="loading2" ref="pendingTable" :data="pendingList" style="width:100%;">
        <el-table-column prop="sn" label="编号">
          <template slot-scope="scope">
            <a  href="javascript:;"
                @click="layerOpen(scope.row.id)"
                style="color:#0056DBFF;text-decoration: none">
              {{ scope.row.sn }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="user" label="发起人"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div v-if="fail == 0">
              <img v-if="scope.row.flag" src="/static/ai/img/wait.png" class="loading-ico">
              <span :class="scope.row.flag ? 'status-inprogress':'status-pending'">{{ scope.row.flag && ai == 1 ? 'Ai派单中...':'待派单' }}</span>
            </div>
            <div v-else>
              <span class="status-fail">派单未匹配</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="fail" prop="fail" label="操作">
          <template slot-scope="scope">
            <a  href="javascript:;"
                data-title="手动派单"
                @click="send(scope.row.id,scope.row.work_type_mode,1)"
                style="color:#0056DBFF;text-decoration: none">
              手动派单
            </a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
                background
                layout="prev, pager, next, sizes, total"
                :total="total2"
                :page-size="pageSize2"
                :current-page.sync="currentPage2"
                @size-change="handleSizeChange2"
                @current-change="handlePageChange2">
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</div>

<script>
  new Vue({
    el:'#app',
    data: function() {
      return {
        ai:{$ai},
        aiList:[0,0,0,0,0,0,0],
        userList:[0,0,0,0,0,0,0],
        done: {'total':0,'bx':0, 'bj': 0, 'ys' : 0, 'ab' : 0,},
        undo: {'total':0,'bx':0, 'bj': 0, 'ys' : 0, 'ab' : 0,},
        dateList:[],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        mode: 0,
        dispatchedList:[],
        currentPage2: 1,
        pageSize2: 10,
        total2: 0,
        mode2: 0,
        pendingList:[],
        loading:true,
        loading2:true,
        loading3:true,
        fail:0,
      }
    },
    mounted(){
      this.getData();
      setInterval(() => {
        this.getData();
      }, 1000 * 60);
    },
    methods: {
      getData(){
        this.fetchEchart();
        this.fetchTodo();
        this.fetchOrder();
      },
      layerOpen(id){
        layer.open({
          type: 2,
          title: "详情",
          shadeClose: true,
          shade: 0.3,
          maxmin: true,
          area: ['80%', '80%'],
          content: "{:url('orders/detail2',[],'')}/id/"+id,
          end: function () {
              // window.location.reload();
          }
        });
      },
      send(id,mode,type){
        const self = this;
        layer.open({
          type: 2,
          title: "派单",
          shadeClose: true,
          shade: 0.3,
          maxmin: true,
          area: ['80%', '80%'],
          content: "{:url('send',[],'')}/id/"+id+"/mode/"+mode+"/type/"+type,
          end: function () {
            if (type === 0){
              self.fetchTodo();
            }else{
              self.fetchOrder();
            }
          }
        });
      },
      fetchEchart() {
        const url = "{:url('show')}";
        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          success: (res) => {  // 使用箭头函数
            this.aiList = res.ai;
            console.log(this.aiList);
            this.userList = res.user;
            this.date = res.date;
            this.done = res.done;
            this.undo = res.undo;
            this.initEchart();
          },
          error: function(xhr, status, error) {
            console.error('请求失败：', error);
          }
        });
      },
      fetchTodo() {
        const url = "{:url('todoList')}";
        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          data:{
            page:this.currentPage,
            size:this.pageSize,
            mode:this.mode
          },
          success: (res) => {  // 使用箭头函数
            this.dispatchedList = res.data;
            this.total = res.total;
            this.loading = false;
          },
          error: function(xhr, status, error) {
            console.error('请求失败：', error);
          }
        });
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.loading = true;
        this.fetchTodo();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loading = true;
        this.fetchTodo();
      },
      handleModeChange(val) {
        layer.open({
          type: 2,
          title: "历史派单",
          shadeClose: true,
          shade: 0.3,
          maxmin: true,
          area: ['90%', '90%'],
          content: "{:url('history',[],'')}/mode/"+val,
          end: function () {
            // window.location.reload();
          }
        });
      },
      fetchOrder() {
        const url = "{:url('orderList')}";
        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          data:{
            page:this.currentPage2,
            size:this.pageSize2,
            mode:this.mode2,
          },
          success: (res) => {  // 使用箭头函数
            this.pendingList = res.data;
            this.total2 = res.total;
            this.loading2 = false;
            this.fail = res.fail;
          },
          error: function(xhr, status, error) {
            console.error('请求失败：', error);
          }
        });
      },
      handlePageChange2(page) {
        this.currentPage2 = page;
        this.loading2 = true;
        this.fetchOrder();
      },
      handleSizeChange2(val) {
        this.pageSize2 = val;
        this.loading2 = true;
        this.fetchOrder();
      },
      handleModeChange2(val) {
        this.mode2 = val;
        this.loading2 = true;
        this.fetchOrder();
      },
      initEchart() {
        // 左侧折线图
        var chart = echarts.init(document.getElementById('chart'));
        window.addEventListener('resize', () => {
          this.$nextTick(() => {
            // 给主内容容器强制触发重绘
            const main = this.$refs.mainContent; // 主面板容器
            main.style.width = main.offsetWidth + 'px';

            // 延迟刷新表格
            setTimeout(() => {
              this.$refs.dispatchedTable.doLayout();
              this.$refs.pendingTable.doLayout();
              chart.resize();
            }, 50);
          });
        });
        var option = {
          backgroundColor: '#F6FAFFFF',
          tooltip:{trigger:'axis'},
          legend:{data:['AI派单','人工派单']},
          xAxis:{type:'category', splitLine: {show: false}, data:this.date},
          yAxis:{type:'value',splitLine: {show: false},name:'派单趋势分析'} ,
          series:[
            { name:'AI派单', type:'line',symbolSize: 10, data:this.aiList, smooth:false , itemStyle:{color:'#7000FBFF'}, areaStyle:{color: {
                  type: 'linear',
                  x: 0, y: 0,
                  x2: 0, y2: 1,           // 从左到右
                  colorStops: [
                    { offset: 0, color: '#eee0ffFF' },
                    { offset: 1, color: '#7000fb03' }
                  ]
                }}},
            { name:'人工派单', type:'line',symbolSize: 10, data:this.userList, smooth:false, itemStyle:{color:'#0062FBFF'},areaStyle: {
                color: {
                  type: 'linear',
                  x: 0, y: 0,
                  x2: 0, y2: 1,           // 从左到右
                  colorStops: [
                    { offset: 0, color: '#a9cbffFF' },
                    { offset: 1, color: '#ffffff03' }
                  ]
                }
              }}
          ]
        };
        chart.setOption(option);
        this.loading3 = false;
      }
    },
  });
</script>

</body>
</html>