From 5c2569ad6774b2c0ce7da1e03e2b46b744c7f923 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Tue, 7 Jun 2022 10:18:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A7=92=E8=89=B2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tableCollection/index.vue  | 847 +++++++++---------
 .../components/TaskPlanList.vue               |   3 +-
 2 files changed, 437 insertions(+), 413 deletions(-)

diff --git a/jero-web/src/components/tableCollection/index.vue b/jero-web/src/components/tableCollection/index.vue
index e7387add2..d9a6d861b 100644
--- a/jero-web/src/components/tableCollection/index.vue
+++ b/jero-web/src/components/tableCollection/index.vue
@@ -14,14 +14,17 @@
         @change="tableOnChange"
         @onHeaderRow='onHeaderRow'
       >
-        <span slot="titleName" slot-scope="text">
-          <span style='padding-right: 20px'>{{ text.sortOrder }} </span><a-button @click='onClickSee(text)'>查看</a-button>
-         </span>
-         <span slot="operationbtn" slot-scope="record">
+        <div :slot="'titleName'+(index+1)" v-for="(item,index) in content">
+          <span style='padding-right: 20px'>{{ item.db_field_txt }} </span>
+          <a-button @click='onClickSee(item)'>查看</a-button>
+        </div>
+
+        <span slot="operationbtn" slot-scope="record">
            <span v-if='homo === 1'>
 <!--           认证工程师  -->
            <span v-if='record.state == "待发起收集" || record.state == "工程接口人退回" || record.state == "变更"'>
-             <span @click='ondataValueTobeinitiated(record)'>{{ record.dataValue == null? '--': record.dataValue}}</span>
+             <span
+               @click='ondataValueTobeinitiated(record)'>{{ record.dataValue == null? '--': record.dataValue}}</span>
            </span>
              <span v-else>
              <span @click='dataValueTobeinitiated'>{{ record.dataValue }}</span>
@@ -32,12 +35,12 @@
            </span>
          </span>
         <span slot="detailClick" slot-scope="text,record">
-          <collection-type :detailDate='text' />
+          <collection-type :detailDate='text'/>
         </span>
       </a-table>
     </div>
     <!--  修改工程接口人--->
-    <a-modal v-model="areaVisible" :title="$t('modifyprojectInterfacePerson')" width='500px'  :footer="null">
+    <a-modal v-model="areaVisible" :title="$t('modifyprojectInterfacePerson')" width='500px' :footer="null">
       <a-form-model
         class='tag-module'
         ref='ruleForm'
@@ -48,28 +51,30 @@
       >
         <a-row :gutter='24'>
           <a-col :span='24'>
-              <a-form-model-item ref='region' :label="$t('engineeringInterfacePerson')" prop='region'>
-                <a-select :placeholder="$t('PleaseSelect')+$t('engineeringInterfacePerson')" v-model="Dateline.querySdt">
-                  <a-select-option v-for="(item, key) in querySdtList" :key="key" :value="item.value">
+            <a-form-model-item ref='region' :label="$t('engineeringInterfacePerson')" prop='region'>
+              <a-select :placeholder="$t('PleaseSelect')+$t('engineeringInterfacePerson')" v-model="Dateline.querySdt">
+                <a-select-option v-for="(item, key) in querySdtList" :key="key" :value="item.value">
                     <span style="display: inline-block;width: 100%" :title=" item.label ">
                       {{ item.label }}
                     </span>
-                  </a-select-option>
-                </a-select>
-              </a-form-model-item>
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
           </a-col>
         </a-row>
       </a-form-model>
       <div class="imports-footer">
         <div class="imports-footer-wrap">
 
-          <a-button class="imports-btn imports-sub" type="primary" @click="handleSubmit" v-has="'split:sarFileSplitItems:importSplitResult'">{{$t('preservation')}}</a-button>
+          <a-button class="imports-btn imports-sub" type="primary" @click="handleSubmit"
+                    v-has="'split:sarFileSplitItems:importSplitResult'">{{$t('preservation')}}
+          </a-button>
           <a-button class="imports-btn" type="primary" @click="cancleImports">{{$t('cancel')}}</a-button>
         </div>
       </div>
     </a-modal>
     <!--  配置信息--->
-    <a-modal v-model="areaVisibleView" :title="$t('configurationInformation')" width='550px'  :footer="null">
+    <a-modal v-model="areaVisibleView" :title="$t('configurationInformation')" width='550px' :footer="null">
       <div class="content-text">
         <div class="text-field">
           <span class="text-field-left" :title="$t('configurationName')">{{$t('configurationName')}}:</span>
@@ -106,272 +111,281 @@
 </template>
 
 <script>
-import eventBUs from '../../common/event'
-import { getAction, postAction } from '@/api/manage'
-import CollectionType from '@/components/CollectionType'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
-import axios from 'axios'
-import Vue from 'vue'
-import VueDraggableResizable from 'vue-draggable-resizable'
-export default {
-  name: 'index',
-  props: {
-    //接口
-    url: {
-      type: Object,
-      default: {}
-    },
-    // 详细列表得一条数据
-    paramsManifest: {
-      type: Object,
-      default: {},
-      require: true
-    },
-    formInline: {
-      type: Object,
-      default: true
-    }
-  },
-  components: {
-    CollectionType,
-    VueDraggableResizable
-  },
-  data() {
-    this.components = {
-      header: {
-        cell: (h, props, children) => {
-          const { key, ...restProps } = props
+  import eventBUs from '../../common/event'
+  import { getAction, postAction } from '@/api/manage'
+  import CollectionType from '@/components/CollectionType'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  import axios from 'axios'
+  import Vue from 'vue'
+  import VueDraggableResizable from 'vue-draggable-resizable'
 
-          // 此处的this.columns 是定义的table的表头属性变量
-
-          const col = this.columns.find((col) => {
-            const k = col.dataIndex || col.key
-            return k === key
-          })
-
-          if (!col || !col.width) {
-            return h('th', { ...restProps }, [...children])
-          }
-
-          const dragProps = {
-            key: col.dataIndex || col.key,
-            class: 'table-draggable-handle',
-            attrs: {
-              w: 10,
-              x: col.width,
-              z: 1,
-              axis: 'x',
-              draggable: true,
-              resizable: false,
-            },
-            on: {
-              dragging: (x, y) => {
-                col.width = Math.max(x, 1)
-              },
-            },
-          }
-          const drag = h('vue-draggable-resizable', { ...dragProps })
-          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
-        },
+  export default {
+    name: 'index',
+    props: {
+      //接口
+      url: {
+        type: Object,
+        default: {}
       },
-    }
-    return {
-      token:Vue.ls.get(ACCESS_TOKEN),
-      jsonBody: [],
-      checkboxList: [],
-      tableAll: false,
-      indeterminate: false,
-      columns: [],
-      selectedRowKeys: [],
-      selectedRowrowValue: [],
-      dataSource: [],
-      pageNo: 1,
-      pageSize: 10,
-      total: 0,
-      searchParmes: {},
-      loading: false,
-      orderBy: '1',
-      orderByField: '',
-      LoginUserType: '', // 登陆人角色状态
-      homo: 0, // 认证工程师
-      sdt: 0, // 工程接口人
-      dre: 0, // 填写人
-      areaVisible: false,
-      form: {},
-      rules: {
-        // templatetitle: [
-        //   { required: true, message: this.$t('enterTitle'), trigger: 'blur' }
-        // ]
+      // 详细列表得一条数据
+      paramsManifest: {
+        type: Object,
+        default: {},
+        require: true
       },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 14 }
-      },
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 7 }
-      },
-      querySdtList: [], // 工程接口人
-      Dateline: {},
-      getquerySdtId: '', // 当前工程接口人的id
-      areaVisibleView: false, // 查看配置得弹框
-      configDetail: {}, // 查看配置得详细信息
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    // 查看配置详细信息
-    onClickSee(val) {
-      let _this = this
-      this.areaVisibleView = true
-      axios({
-        url: `/jero-boot/params/config/getById?id=${val.sortColumn.dataIndex}`,
-        method: 'get',
-        transformRequest: [function (data) {
-          let ret = ''
-          for (let it in data) {
-            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-          }
-          return ret
-        }],
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-          'X-Access-Token':_this.token
-        }
-      })
-        .then( (res) =>{
-          console.log(res)
-          if (res.data.success) {
-            this.configDetail = res.data.result
-          }else{
-            _this.$message.warning(res.data.result)
-          }
-        })
-        .catch( (error) =>{
-          console.log(error);
-        });
-    },
-    // 获取工程接口人
-    getquerySdtList(record) {
-      // 当前工程接口人的id
-      this.getquerySdtId = record.id
-      getAction(this.url.getquerySdtList, {projectId: this.$route.query.id, dutyTerritory: record.dutyTerritory}).then((res) => {
-        if (res.success) {
-          this.querySdtList = res.result
-        }
-      })
-    },
-    // 工程接口人 保存
-    handleSubmit(record) {
-      let _this = this
-      let param = {sdt: this.Dateline.querySdt, ids: this.getquerySdtId}
-      axios({
-        url: '/jero-boot/params/collectManifest/updateSdt',
-        method: 'post',
-        data: param,
-        transformRequest: [function (data) {
-          let ret = ''
-          for (let it in data) {
-            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-          }
-          return ret
-        }],
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-          'X-Access-Token':_this.token
-        }
-      })
-        .then( (res) =>{
-          console.log(res)
-          if (res.data.success) {
-            _this.$message.success(res.data.result)
-            _this.areaVisible = false
-            this.getLoginUserType()
-          }else{
-            _this.$message.warning(res.data.result)
-          }
-        })
-        .catch( (error) =>{
-          console.log(error);
-        });
-    },
-    // 工程接口人 取消
-    cancleImports() {
-      this.areaVisible = false
-    },
-    // 点击工程接口人的详情人员 有权限
-    ondataValueTobeinitiated(record) {
-      this.areaVisible = true
-      this.getquerySdtList(record)
-    },
-    dataValueTobeinitiated() {
-      this.$message.warning(this.$t('certifiedEngineer')+this.$t('and')+this.$t('Statusis')+this.$t('CollectionInitiated')+this.$t('ReturnedPerson')+this.$t('alteration')+this.$t('toHavePermission'))
-    },
-    // 点击工程接口人的详情人员 无权限
-    ondataValueNot() {
-      this.$message.warning(this.$t('operatethisbutton'))
-    },
-    onHeaderRow(column, index) {
-      console.log(column, index)
-    },
-    getLoginUserType() {
-      let params = {
-        paramsManifestId: this.paramsManifest.id,
-        projectId: this.$route.query.id
+      formInline: {
+        type: Object,
+        default: true
       }
-      getAction(this.url.getLoginUserType, params).then((res) => {
-        if (res.success) {
-          this.LoginUserType = res.result
-          this.getTableList()
-          this.$emit('LoginUserType', this.LoginUserType)
-          res.result.split(',').forEach((item,index) => {
-            if(item === 'homo') {
-              this.homo = 1
-            } else if(item === 'sdt') {
-              this.sdt = 1
-            } else if(item === 'dre') {
-              this.dre = 1
+    },
+    components: {
+      CollectionType,
+      VueDraggableResizable
+    },
+    data() {
+      this.components = {
+        header: {
+          cell: (h, props, children) => {
+            const { key, ...restProps } = props
+
+            // 此处的this.columns 是定义的table的表头属性变量
+
+            const col = this.columns.find((col) => {
+              const k = col.dataIndex || col.key
+              return k === key
+            })
+
+            if (!col || !col.width) {
+              return h('th', { ...restProps }, [...children])
+            }
+
+            const dragProps = {
+              key: col.dataIndex || col.key,
+              class: 'table-draggable-handle',
+              attrs: {
+                w: 10,
+                x: col.width,
+                z: 1,
+                axis: 'x',
+                draggable: true,
+                resizable: false
+              },
+              on: {
+                dragging: (x, y) => {
+                  col.width = Math.max(x, 1)
+                }
+              }
+            }
+            const drag = h('vue-draggable-resizable', { ...dragProps })
+            return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
+          }
+        }
+      }
+      return {
+        token: Vue.ls.get(ACCESS_TOKEN),
+        jsonBody: [],
+        checkboxList: [],
+        tableAll: false,
+        indeterminate: false,
+        columns: [],
+        content: [],
+        selectedRowKeys: [],
+        selectedRowrowValue: [],
+        dataSource: [],
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        searchParmes: {},
+        loading: false,
+        orderBy: '1',
+        orderByField: '',
+        LoginUserType: '', // 登陆人角色状态
+        homo: 0, // 认证工程师
+        sdt: 0, // 工程接口人
+        dre: 0, // 填写人
+        areaVisible: false,
+        form: {},
+        rules: {
+          // templatetitle: [
+          //   { required: true, message: this.$t('enterTitle'), trigger: 'blur' }
+          // ]
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 14 }
+        },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        querySdtList: [], // 工程接口人
+        Dateline: {},
+        getquerySdtId: '', // 当前工程接口人的id
+        areaVisibleView: false, // 查看配置得弹框
+        configDetail: {} // 查看配置得详细信息
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      // 查看配置详细信息
+      onClickSee(val) {
+        let _this = this
+        this.areaVisibleView = true
+        axios({
+          url: `/jero-boot/params/config/getById?id=${val.sortColumn.dataIndex}`,
+          method: 'get',
+          transformRequest: [function(data) {
+            let ret = ''
+            for (let it in data) {
+              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+            }
+            return ret
+          }],
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'X-Access-Token': _this.token
+          }
+        })
+          .then((res) => {
+            console.log(res)
+            if (res.data.success) {
+              this.configDetail = res.data.result
+            } else {
+              _this.$message.warning(res.data.result)
             }
           })
+          .catch((error) => {
+            console.log(error)
+          })
+      },
+      // 获取工程接口人
+      getquerySdtList(record) {
+        // 当前工程接口人的id
+        this.getquerySdtId = record.id
+        getAction(this.url.getquerySdtList, {
+          projectId: this.$route.query.id,
+          dutyTerritory: record.dutyTerritory
+        }).then((res) => {
+          if (res.success) {
+            this.querySdtList = res.result
+          }
+        })
+      },
+      // 工程接口人 保存
+      handleSubmit(record) {
+        let _this = this
+        let param = { sdt: this.Dateline.querySdt, ids: this.getquerySdtId }
+        axios({
+          url: '/jero-boot/params/collectManifest/updateSdt',
+          method: 'post',
+          data: param,
+          transformRequest: [function(data) {
+            let ret = ''
+            for (let it in data) {
+              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+            }
+            return ret
+          }],
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'X-Access-Token': _this.token
+          }
+        })
+          .then((res) => {
+            console.log(res)
+            if (res.data.success) {
+              _this.$message.success(res.data.result)
+              _this.areaVisible = false
+              this.getLoginUserType()
+            } else {
+              _this.$message.warning(res.data.result)
+            }
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      },
+      // 工程接口人 取消
+      cancleImports() {
+        this.areaVisible = false
+      },
+      // 点击工程接口人的详情人员 有权限
+      ondataValueTobeinitiated(record) {
+        this.areaVisible = true
+        this.getquerySdtList(record)
+      },
+      dataValueTobeinitiated() {
+        this.$message.warning(this.$t('certifiedEngineer') + this.$t('and') + this.$t('Statusis') + this.$t('CollectionInitiated') + this.$t('ReturnedPerson') + this.$t('alteration') + this.$t('toHavePermission'))
+      },
+      // 点击工程接口人的详情人员 无权限
+      ondataValueNot() {
+        this.$message.warning(this.$t('operatethisbutton'))
+      },
+      onHeaderRow(column, index) {
+        console.log(column, index)
+      },
+      getLoginUserType() {
+        let params = {
+          paramsManifestId: this.paramsManifest.id,
+          projectId: this.$route.query.id
         }
-      })
-    },
-    getData() {
-      let paramsManifestid
-      let url
-      if(this.$route.query.it === undefined) {
-        // 页面跳转
-        paramsManifestid = this.paramsManifest.id
-        url = this.url.tableHeader
-      } else {
-        // 历史版本
-        paramsManifestid = this.$route.query.it
-        url = 'params/collectManifestHistory/getHeader'
-      }
-      let params = {
-        paramsManifestId: paramsManifestid,
-        flag: '7'
-      }
-      getAction(url, params).then((res) => {
-        if (res.success) {
-          var jsonHead = res.result
-          this.columns = []
-          jsonHead.forEach((res, index) => {
-            // 配置列
-            if(res.type) {
-              this.columns.push({
-                dataIndex: res.db_field_name,
-                align: 'center',
-                ellipsis: true,
-                sorter: res.sort,
-                sortOrder: res.db_field_txt
-              })
+        getAction(this.url.getLoginUserType, params).then((res) => {
+          if (res.success) {
+            this.LoginUserType = res.result
+            this.getTableList()
+            this.$emit('LoginUserType', this.LoginUserType)
+            res.result.split(',').forEach((item, index) => {
+              if (item === 'homo') {
+                this.homo = 1
+              } else if (item === 'sdt') {
+                this.sdt = 1
+              } else if (item === 'dre') {
+                this.dre = 1
+              }
+            })
+          }
+        })
+      },
+      getData() {
+        let paramsManifestid
+        let url
+        if (this.$route.query.it === undefined) {
+          // 页面跳转
+          paramsManifestid = this.paramsManifest.id
+          url = this.url.tableHeader
+        } else {
+          // 历史版本
+          paramsManifestid = this.$route.query.it
+          url = 'params/collectManifestHistory/getHeader'
+        }
+        let params = {
+          paramsManifestId: paramsManifestid,
+          flag: '7'
+        }
+        getAction(url, params).then((res) => {
+          if (res.success) {
+            var jsonHead = res.result
+            this.columns = []
+            let num = 0
+            this.content = []
+            jsonHead.forEach((res, index) => {
+              // 配置列
+              if (res.type) {
+                this.columns.push({
+                  dataIndex: res.db_field_name,
+                  align: 'center',
+                  ellipsis: true,
+                  sorter: res.sort,
+                  sortOrder: res.db_field_txt
+                })
+                num++
+                this.content.push(res)
                 this.columns[index].scopedSlots = {
                   customRender: 'detailClick',
-                  title: 'titleName'
+                  title: 'titleName' + num
                 }
-              //  非配置列
+                //  非配置列
               } else {
                 this.columns.push({
                   title: res.db_field_txt,
@@ -380,168 +394,177 @@ export default {
                   ellipsis: true,
                   sorter: res.sort
                 })
-              if(res.click) {
-                // 工程接口人列表修改
-                this.columns[index].scopedSlots = {
-                  customRender: 'operationbtn'
+                if (res.click) {
+                  // 工程接口人列表修改
+                  this.columns[index].scopedSlots = {
+                    customRender: 'operationbtn'
+                  }
                 }
               }
-            }
-          })
+            })
+            this.columns = [...this.columns]
+            console.log(this.columns)
+          }
+        })
+      },
+      tableOnChange(pagination, filters, sorter) {
+        console.log(pagination, filters, sorter, 'iiiiiiiiiiiiiiiii')
+      },
+      getTableListReset() {
+        let params = {
+          paramsManifestId: this.paramsManifest.id,
+          userTypes: this.LoginUserType
         }
-      })
-    },
-    tableOnChange(pagination, filters, sorter) {
-      console.log(pagination,filters,sorter,'iiiiiiiiiiiiiiiii')
-    },
-    getTableListReset() {
-      let params = {
-        paramsManifestId: this.paramsManifest.id,
-        userTypes: this.LoginUserType,
-      }
-      this.loading = true
-      this.$emit('listReset', '')
-      getAction(this.url.tableList, params).then((res) => {
-        if (res.success) {
-          this.dataSource = res.result
-          this.total = res.result.total
-          this.loading = false
+        this.loading = true
+        this.$emit('listReset', '')
+        getAction(this.url.tableList, params).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      getTableList() {
+        let paramsManifestid
+        let url
+        if (this.$route.query.it === undefined) {
+          // 页面跳转
+          paramsManifestid = this.paramsManifest.id
+          url = this.url.tableList
         } else {
-          this.loading = false
+          console.log('历史版本呢')
+          // 历史版本
+          paramsManifestid = this.$route.query.it
+          url = 'params/collectManifestHistory/list'
         }
-      })
-    },
-    getTableList() {
-      let paramsManifestid
-      let url
-      if(this.$route.query.it === undefined) {
-        // 页面跳转
-        paramsManifestid = this.paramsManifest.id
-        url = this.url.tableList
-      } else {
-        console.log('历史版本呢')
-        // 历史版本
-        paramsManifestid = this.$route.query.it
-        url = 'params/collectManifestHistory/list'
-      }
-      let params = {
-        userTypes: this.LoginUserType,
-        paramsManifestId: paramsManifestid,
-        ...this.formInline
-      }
-      this.loading = true
-      getAction(url, params).then((res) => {
-        if (res.success) {
-          this.dataSource = res.result
-          this.total = res.result.total
-          this.loading = false
-        } else {
-          this.loading = false
+        let params = {
+          userTypes: this.LoginUserType,
+          paramsManifestId: paramsManifestid,
+          ...this.formInline
         }
-      })
+        this.loading = true
+        getAction(url, params).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      onChange(page, pageSize) {
+        // this.pageNo = page
+        // this.getTableList()
+      },
+      onSelectChange(value, rowValue) {
+        this.selectedRowKeys = value
+        this.selectedRowrowValue = rowValue
+        this.$emit('value', value)
+        this.$emit('rowValue', rowValue)
+      },
+      OperationClick(ol, item) {
+        // this.$emit(ol.ClickEvent, item)
+      },
+      detailClick(item, index) {
+        // this.$emit('detailClick', item)
+      }
     },
-    onChange(page, pageSize) {
-      // this.pageNo = page
-      // this.getTableList()
-    },
-    onSelectChange(value,rowValue) {
-      this.selectedRowKeys = value
-      this.selectedRowrowValue = rowValue
-      this.$emit('value',value)
-      this.$emit('rowValue', rowValue)
-    },
-    OperationClick(ol, item) {
-      // this.$emit(ol.ClickEvent, item)
-    },
-    detailClick(item, index) {
-      // this.$emit('detailClick', item)
-    }
-  },
-  watch: {
-    paramsManifest(newVal, oldVal) {
-      this.getData()
-      this.getLoginUserType()
+    watch: {
+      paramsManifest(newVal, oldVal) {
+        this.getData()
+        this.getLoginUserType()
+      }
     }
   }
-}
 </script>
 <style lang='less'>
-.imports-footer{
-  .imports-footer-wrap{
-    margin:20px 0;
-    text-align: center;
-    .imports-sub{
-      margin-right: 20px;
+  .imports-footer {
+    .imports-footer-wrap {
+      margin: 20px 0;
+      text-align: center;
+
+      .imports-sub {
+        margin-right: 20px;
+      }
     }
   }
-}
-.table .ant-table-column-title {
-  font-weight: bold;
-}
 
-.ant-table td {
-  white-space: nowrap;
-}
-.content-text {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  .text-field {
-    width: 50%;
-    margin-bottom: 8px;
+  .table .ant-table-column-title {
+    font-weight: bold;
+  }
+
+  .ant-table td {
+    white-space: nowrap;
+  }
+
+  .content-text {
+    width: 100%;
     display: flex;
-    .text-field-left {
-      width: 70px;
-      display: inline-block;
-      font-size: 16px;
-      color: #040B29;
-      font-weight: 400;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
+    flex-wrap: wrap;
 
-    .text-field-right {
-      display: inline-block;
-      font-size: 16px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: #040B29;
-      font-weight: 400;
+    .text-field {
+      width: 50%;
+      margin-bottom: 8px;
+      display: flex;
+
+      .text-field-left {
+        width: 70px;
+        display: inline-block;
+        font-size: 16px;
+        color: #040B29;
+        font-weight: 400;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .text-field-right {
+        display: inline-block;
+        font-size: 16px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        color: #040B29;
+        font-weight: 400;
+      }
     }
   }
-}
 </style>
 <style scoped>
-.box {
-  width: 100%;
-  height: calc(100% - 100px);
-  overflow: auto;
-}
+  .box {
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow: auto;
+  }
 
-.text {
-  margin-right: 10px;
-}
+  .text {
+    margin-right: 10px;
+  }
 
-.page {
-  text-align: right;
-  margin-top: 20px;
-}
-.table-draggable-handle {
-  /* width: 10px !important; */
-  height: 100% !important;
-  left: auto !important;
-  right: -5px;
-  cursor: col-resize;
-  touch-action: none;
-  border: none;
-  position: absolute;
-  transform: none !important;
-  bottom: 0;
-}
-.resize-table-th {
-  position: relative;
-}
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .table-draggable-handle {
+    /* width: 10px !important; */
+    height: 100% !important;
+    left: auto !important;
+    right: -5px;
+    cursor: col-resize;
+    touch-action: none;
+    border: none;
+    position: absolute;
+    transform: none !important;
+    bottom: 0;
+  }
+
+  .resize-table-th {
+    position: relative;
+  }
 
 </style>
diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue b/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
index a97c3a2f4..3503f05f6 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
@@ -144,7 +144,7 @@
           for (let j = 0; j < timeDataList.length; j++) {
             let time = JSON.stringify(timeDataList[j].time).slice(1, 11)
             if (time == list[i]) {
-              data.push([i, timeDataList[j].index, 14, j])
+              data.push([i, timeDataList[j].index, 12, j])
             }
           }
         }
@@ -231,6 +231,7 @@
           series: [
             {
               type: 'scatter',
+              color:['#21c9cc'],
               symbolSize: function(val) {
                 return val[2] * 2
               },