<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    width="100%" 
 | 
    :visible.sync="visible" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="confirm" 
 | 
  > 
 | 
    <div  style="display: block;margin-bottom: 30px;"> 
 | 
      <div style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 20px;">主线路信息</div> 
 | 
      <div style="display: flex;"> 
 | 
          <div style="flex: 1">送货日期:{{model.dateInfo ||''}}</div> 
 | 
          <div style="flex: 1">主线路:{{model.categoryName ||''}}</div> 
 | 
          <div style="flex: 1">客户数:{{model.orderNum ||'-'}}</div> 
 | 
          <div style="flex: 1">送货量(条):{{model.totalNum ||'-'}}</div> 
 | 
      </div> 
 | 
      <div style="display: flex;margin-top: 20px" class="orange"> 
 | 
        <div style="flex: 1" >线路原始总路程: 
 | 
          <span  v-if="(model.originDistance ||0) > 0 ||  (model.status||0) != 0" class="red" style="font-weight: bold"> {{((model.originDistance ||0)/1000).toFixed(2)}}</span> 
 | 
          <span  v-if="(model.originDistance ||0) == 0 && (model.status||0) == 0"  class="blue" style="font-weight: bold;cursor: pointer" @click="initDistance"> 点击获取 </span> 公里; 
 | 
          <span v-if="model.status ==2">优化后总路程:<span class="green" style="font-weight: bold"> {{((model.distance ||0)/1000).toFixed(2)}} </span> 公里</span> 
 | 
        </div> 
 | 
      </div> 
 | 
    </div> 
 | 
    <div style="display: block;margin-bottom: 50px;" v-if="model && model.optStatus ===1"> 
 | 
      <div  style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 10px;">优化线路明细</div> 
 | 
      <div> 
 | 
        <el-table  :data="dataListNew" stripe> 
 | 
          <el-table-column prop="dateInfo" label="送货日期" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="lineName" label="送货线路" min-width="130px">  </el-table-column> 
 | 
          <el-table-column prop="orderNum" label="客户数(户)" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="totalNum" label="送货量(条)" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column> 
 | 
          <el-table-column prop="memberName" label="送货司机" min-width="100px"></el-table-column> 
 | 
          <el-table-column prop="distance" label="当前路程(公里)" min-width="100px"> 
 | 
            <template slot-scope="{row}"> 
 | 
              <span  v-if="row.distance "> {{((row.distance ||0)/1000).toFixed(2)}}</span> 
 | 
              <span  v-else> - </span> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
          <el-table-column 
 | 
              label="操作" 
 | 
              min-width="160" 
 | 
              align="center" 
 | 
              fixed="right" 
 | 
          > 
 | 
            <template slot-scope="{row}"> 
 | 
              <el-button type="text" @click="$refs.operaJkSketchCustomerWindow.open('线路客户明细——', row)" icon="el-icon-view"  >查看客户</el-button> 
 | 
              <el-button type="text" @click="$refs.operaJkSketchLineMapWindow.open('线路客户交通路线——', row)" icon="el-icon-view"  >交通路线</el-button> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
        </el-table> 
 | 
      </div> 
 | 
    </div> 
 | 
    <div style="display: block"> 
 | 
      <div  style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 10px;">原始线路明细</div> 
 | 
      <div> 
 | 
        <el-table  :data="dataList" stripe> 
 | 
          <el-table-column prop="dateInfo" label="送货日期" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="lineName" label="送货线路" min-width="130px">  </el-table-column> 
 | 
          <el-table-column prop="orderNum" label="客户数(户)" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="totalNum" label="送货量(条)" min-width="130px"></el-table-column> 
 | 
          <el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column> 
 | 
          <el-table-column prop="memberName" label="送货司机" min-width="100px"></el-table-column> 
 | 
          <el-table-column prop="distance" label="当前路程(公里)" min-width="100px"> 
 | 
            <template slot-scope="{row}"> 
 | 
              <span  v-if="row.distance "> {{((row.distance ||0)/1000).toFixed(2)}}</span> 
 | 
              <span  v-else> - </span> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
          <el-table-column 
 | 
              label="操作" 
 | 
              min-width="160" 
 | 
              align="center" 
 | 
              fixed="right" 
 | 
          > 
 | 
            <template slot-scope="{row}"> 
 | 
              <el-button type="text" @click="$refs.operaJkSketchCustomerWindow.open('线路客户明细——', row)" icon="el-icon-view"  >查看客户</el-button> 
 | 
              <el-button type="text" @click="$refs.operaJkSketchLineMapWindow.open('线路客户交通路线——', row)" icon="el-icon-view"  >交通路线</el-button> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
        </el-table> 
 | 
      </div> 
 | 
    </div> 
 | 
    <template   v-slot:footer> 
 | 
      <el-button @click="visible=false">返回</el-button> 
 | 
    </template> 
 | 
    <OperaJkSketchCustomerWindow ref="operaJkSketchCustomerWindow"  /> 
 | 
    <OperaJkSketchLineMapWindow ref="operaJkSketchLineMapWindow"  /> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import OperaJkSketchCustomerWindow from '@/components/business/OperaJkSketchCustomerWindow' 
 | 
import OperaJkSketchLineMapWindow from '@/components/business/OperaJkSketchLineMapWindow' 
 | 
import { initOriginDistance } from '@/api/business/jkSketch' 
 | 
export default { 
 | 
  name: 'OperaJkSketchLineWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow, OperaJkSketchCustomerWindow ,OperaJkSketchLineMapWindow}, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      model: { 
 | 
      }, 
 | 
      dataList: [], 
 | 
      dataListNew: [] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/jkSketchLine', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    open (title, target) { 
 | 
      this.title = title 
 | 
      this.visible = true 
 | 
      this.model = target 
 | 
      this.loadList() 
 | 
      if(this.model.optStatus === 1){ 
 | 
        this.loadListNew() 
 | 
      } 
 | 
    }, 
 | 
    loadList () { 
 | 
      this.api.allList({ 
 | 
        sketchId: this.model.id, 
 | 
        type: 0 
 | 
      }).then(res => { 
 | 
        this.dataList = res 
 | 
      }) 
 | 
    }, 
 | 
    loadListNew () { 
 | 
      this.api.allList({ 
 | 
        sketchId: this.model.id, 
 | 
        type: 1 
 | 
      }).then(res => { 
 | 
        this.dataListNew = res 
 | 
      }) 
 | 
    }, 
 | 
    initDistance () { 
 | 
      var that = this 
 | 
      initOriginDistance({ 
 | 
        id: this.model.id 
 | 
      }).then(res => { 
 | 
        if(res){ 
 | 
          that.model.originDistance = res.originDistance 
 | 
          that.model.distance = res.distance 
 | 
          that.loadList() 
 | 
        } 
 | 
      }) 
 | 
    }, 
 | 
    viewCustomer (row) { 
 | 
  
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |