| <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> |