diff --git a/src/views/emis/emisTmsCostProfit/TmsCostProfitDetail.vue b/src/views/emis/emisTmsCostProfit/TmsCostProfitDetail.vue
new file mode 100644
index 00000000..4f13a04e
--- /dev/null
+++ b/src/views/emis/emisTmsCostProfit/TmsCostProfitDetail.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+
+    <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
+      <el-col :span="24">
+        <el-descriptions :title="$t('成本利润信息')" size="small"  :column="4">
+            <el-descriptions-item label="运单号">{{ form.billCode }}</el-descriptions-item>
+            <el-descriptions-item label="运单费用">{{ form.billFee }}</el-descriptions-item>
+            <el-descriptions-item label="运输成本">{{ form.costFee }}</el-descriptions-item>
+            <el-descriptions-item label="运单利润">{{ form.billProfit }}</el-descriptions-item>
+        </el-descriptions>
+        <div size="small" >成本列表</div>
+        <el-table
+
+          size="small"
+          v-loading="loading"
+           border stripe
+           :data="emisTmsCostFeeSplitList"
+           :showSearch.sync="showSearch"
+           :queryParams="queryParams"
+           :total="total"
+           >
+          <el-table-column :label="$t('成本时间')" align="center" prop="costFeeDetail.tradeDate" min-width="100" />
+          <el-table-column :label="$t('费用类型')" align="center" prop="feeType" min-width="100" >
+            <template slot-scope="scope">
+              <span style="font-weight:600;color:black"><dict-tag :options="dict.type.emis_cost_fee_type" :value="scope.row.feeType"/></span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('费用')" align="center" prop="costFee" min-width="70" />
+          <el-table-column :label="$t('供应商')" align="center" prop="costFeeDetail.supplierName" min-width="150" :show-overflow-tooltip="true"/>
+          <el-table-column :label="$t('始发地')" align="center" prop="costFeeDetail.sendPlace" min-width="100" />
+          <el-table-column :label="$t('目的地')" align="center" prop="costFeeDetail.destPlace" min-width="100" />
+          <el-table-column :label="$t('运输号')" align="center" prop="costFeeDetail.transSignNo" min-width="100" />
+          <el-table-column :label="$t('批次号')" align="center" prop="batchNo" min-width="100" :show-overflow-tooltip="true"/>
+          <el-table-column :label="$t('成本序号')" align="center" prop="costNo" min-width="150" :show-overflow-tooltip="true"/>
+
+          <!-- <el-table-column :label="$t('分摊类型')" align="center" prop="splitType" min-width="100" /> -->
+          <!-- <el-table-column :label="$t('总体积')" align="center" prop="totalVolume" min-width="100" /> -->
+          <!-- <el-table-column :label="$t('实际重量')" align="center" prop="billWeight" min-width="100" /> -->
+        </el-table>
+      </el-col>
+      <el-col :span="24" style="border-top: 1px solid #f3f3f3;margin-top:20px">
+        <WaybillDetailReadOnly :key="resetRefreshId+'_2'"  :billCode="showBillCode"></WaybillDetailReadOnly>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+
+import WaybillDetailReadOnly from '@/views/emis/emisWaybill/waybillDetailReadOnly.vue';
+import {  getEmisTmsCostProfit } from "@/api/emis/emisTmsCostProfit";
+
+export default {
+  name: "TraceWaybillDetailView",
+   props:{
+    id:{
+        type:Number
+    },
+    resetRefreshId: {
+      type: String
+    },
+  },
+  components: {
+    WaybillDetailReadOnly,
+  },
+  dicts: ['emis_cost_fee_type'],
+  data() {
+    return {
+      active:1,
+      // 遮罩层
+      loading: true,
+      showBillCode:null,
+      form: {},
+
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 成本费用分摊明细表格数据
+      emisTmsCostFeeSplitList: [],
+
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        costNo: null,
+        billCode: null,
+        feeType: null,
+        splitType: null,
+        costFee: null,
+        totalVolume: null,
+        billWeight: null,
+        calcRemark: null,
+        remark: null,
+        delFlag: null,
+      },
+
+    };
+  },
+  created() {
+      this.initData();
+  },
+  watch: {
+      "billCode": {
+      handler (newValue, oldValue) {
+
+      },
+      deep: true
+    }
+  },
+  methods: {
+
+    initData(){
+      if(this.id !=null) {
+          this.loading = true;
+          getEmisTmsCostProfit(this.id).then(response => {
+            this.form = response.data;
+            this.showBillCode=this.form.billCode;
+            this.emisTmsCostFeeSplitList=this.form.costFeeSplitList;
+            this.loading = false;
+          });
+       }
+
+    },
+
+
+
+  }
+};
+</script>
+
+
+<style  lang="scss">
+
+.margin-top{
+  margin-top: 20px;
+}
+
+.el-descriptions-item__label.is-bordered-label {
+    min-width: 80px;
+}
+
+.printMeClass {
+  font-family: SimHei;
+  label {
+    font-weight: normal;
+  }
+}
+
+// :deep .el-step__head.is-success {
+//   color: rgb(52, 158, 250);
+//   border-color: rgb(52, 158, 250);
+// }
+// :deep .el-step__title.is-success {
+//     font-weight: bold;
+//     color: rgb(52, 158, 250);
+// }
+// :deep .el-step__description.is-success {
+//     color: rgb(52, 158, 250);
+// }
+
+</style>