添加催办按钮

修改看板
2022-06-15 17:10:44 +08:00
parent 71958a00c7
commit 031d623333
5 changed files with 596 additions and 367 deletions
@@ -54,8 +54,37 @@
           </a-range-picker>
      </span>
      <div class="box-top-content" style="position: relative">
-        <div id="main"></div>
-        <div class="axis-tip"></div>
+        <!--        <div id="main"></div>-->
+        <!--        <div class="axis-tip"></div>-->
+        <div class="box-top-content-left">
+          <div class="box-top-content-left-text" :title="item.projectName"
+               v-for="(item,index) in timeData" :key="index">
+            {{item.projectName}}
+          </div>
+        </div>
+        <div class="box-top-content-right">
+          <div class="box-top-content-right-top">
+            <div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{item}}</div>
+          </div>
+          <div class="box-top-content-right-bottom">
+            <div class="process-content" v-for="(item,index) in timeData" :key="index">
+              <div class="process-content-right-xian"></div>
+              <div class="process-content-content" :style="val.left"
+                   v-for="(val,indexOne) in item.data[0]" :key="indexOne">
+                <div class="process-content-right-top">{{val.name}}</div>
+                <img v-if="val.status == 1" src="../../../assets/wancheng.png" class="process-content-left" alt="">
+                <img v-else-if="val.status == 2" src="../../../assets/shijian.png" class="process-content-left" alt="">
+                <img v-else-if="val.status == 3" src="../../../assets/xian.png" class="process-content-left" alt="">
+                <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>
+              </div>
+            </div>
+            <div class="box-top-content-right-xian"></div>
+            <div class="box-top-content-right-text">
+              {{handlingTime}}
+            </div>
+          </div>
+
+        </div>
        <JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
      </div>
    </div>
@@ -116,6 +145,8 @@
    data() {
      return {
        queryParam: {},
+        timeList: [],
+        timeData: [],
        loading: false,
        loadingMain: false,
        dataSource: [],
@@ -191,12 +222,14 @@
          }
        ],
        startTime: undefined,
-        endTime: undefined
+        endTime: undefined,
+        handlingTime: ''
      }
    },
    mounted() {
      this.getList()
      this.getTimeline()
+      this.handlingTime = moment(new Date()).format('YYYY-MM-DD')
    },
    methods: {
      getTimeline() {
@@ -238,164 +271,100 @@
        }
        getAction(this.url.timelineList, query).then((res) => {
          if (res.success) {
-            this.getEcharts(time, res.result.reverse())
+            this.getEcharts(time, res.result)
          }
        })
      },
      getEcharts(timeList, timeData) {
-        var chartDom = document.getElementById('main')
-        var myChart = echarts.init(chartDom)
-        var option
-        let list = []
-        let listTime = []
-        for (let i = 0; i < timeList.length; i++) {
-          for (let j = 0; j < 31; j++) {
-            let num
-            if ((j + 1) < 10) {
-              num = '0' + (j + 1)
-            } else {
-              num = (j + 1)
+        this.timeList = []
+        if (timeList.length <= 12) {
+          this.timeList = timeList
+        } else if (timeList.length <= 24) {
+          timeList.forEach((res, index) => {
+            if (index == 0) {
+              this.timeList.push(res)
+            } else if (index == timeList.length - 1) {
+              this.timeList.push(res)
+            } else if (index % 2 == 0) {
+              if (this.timeList.length < 11) {
+                this.timeList.push(res)
+              }
+            }
+          })
+        } else if (timeList.length <= 36) {
+          timeList.forEach((res, index) => {
+            if (index == 0) {
+              this.timeList.push(res)
+            } else if (index == timeList.length - 1) {
+              this.timeList.push(res)
+            } else if (index % 3 == 0) {
+              if (this.timeList.length < 11) {
+                this.timeList.push(res)
+              }
+            }
+          })
+        } else if (timeList.length <= 48) {
+          timeList.forEach((res, index) => {
+            if (index == 0) {
+              this.timeList.push(res)
+            } else if (index == timeList.length - 1) {
+              this.timeList.push(res)
+            } else if (index % 4 == 0) {
+              if (this.timeList.length < 11) {
+                this.timeList.push(res)
+              }
+            }
+          })
+        } else if (timeList.length <= 60) {
+          timeList.forEach((res, index) => {
+            if (index == 0) {
+              this.timeList.push(res)
+            } else if (index == timeList.length - 1) {
+              this.timeList.push(res)
+            } else if (index % 5 == 0) {
+              if (this.timeList.length < 11) {
+                this.timeList.push(res)
+              }
            }
-            listTime.push(timeList[i])
-            list.push(timeList[i] + '-' + num)
-          }
-        }
-        const hours = listTime
-        const days = []
-        let content = []
-        if (timeData && timeData.length > 0) {
-          timeData.forEach(res => {
-            days.push(res.projectName)
-            content.push(res.data[0])
          })
        }
-        let timeDataList = []
-        let data = []
-        for (let j = 0; j < content.length; j++) {
-          for (let k = 0; k < content[j].length; k++) {
-            content[j][k].index = j
-            timeDataList.push(content[j][k])
-          }
-        }
-        for (let i = 0; i < list.length; i++) {
-          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, 12, j])
+        let dataList = document.getElementsByClassName('box-top-content-right-top-text')
+        let contentRightText = document.getElementsByClassName('box-top-content-right-text')
+        let contentRightXian = document.getElementsByClassName('box-top-content-right-xian')
+
+        setTimeout(() => {
+          let length = timeList.length / dataList.length
+          let clientWidth = dataList[0].clientWidth
+          clientWidth = clientWidth / length
+          for (let i = 0; i < timeData.length; i++) {
+            for (let j = 0; j < timeData[i].data[0].length; j++) {
+              for (let k = 0; k < dataList.length; k++) {
+                let num = (Math.ceil(clientWidth / 31)) * parseInt(timeData[i].data[0][j].time.slice(8, 10))
+                timeList.forEach((res, index) => {
+                  if (timeData[i].data[0][j].time.slice(0, 7) == res.slice(0, 7)) {
+                    timeData[i].data[0][j].left = 'left:' + ((clientWidth * index + num) + 4) + 'px'
+                  }
+                })
+              }
            }
          }
-        }
-        let num = timeList.length * 3
-        if (num < 31) {
-          num = 31
-        }
-        option = {
-          legend: {
-            data: ['Punch Card'],
-            left: 'right'
-          },
-          tooltip: {
-            position: 'left',
-            formatter: function(params) {
-              return (
-                timeDataList[params.value[3]].name + '<br/>' +
-                timeDataList[params.value[3]].time.slice(0, 11)
-              )
+          contentRightText[0].style = 'display:none'
+          contentRightXian[0].style = 'display:none'
+          let clientWidthOne = dataList[0].clientWidth
+          clientWidthOne = clientWidthOne / length
+          let num = Math.ceil(clientWidthOne / 31) * parseInt(this.handlingTime.slice(8, 10))
+          timeList.forEach((res, index) => {
+            if (res.slice(0, 7) == this.handlingTime.slice(0, 7)) {
+              contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) - 24) + 'px;' + 'display:block'
+              contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num) + 10) + 'px;' + 'display:block'
            }
-          },
-          grid: {
-            top: 10,
-            left: 40,
-            right: 40,
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            data: hours,
-            boundaryGap: false,
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            position: 'top',
-            axisLabel: {
-              showMinLabel: true,
-              interval: num,
-              textStyle: {
-                fontFamily: 'Blue Sky Noto',
-                color: '#000F16',
-                fontSize: '16'
-              }
-            },
-            axisLine: {
-              show: false
-            }
-          },
-          yAxis: {
-            type: 'category',
-            data: days,
-            splitLine: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            scale: true,
-            triggerEvent: true,
-            axisLabel: {
-              textStyle: {
-                fontFamily: 'Blue Sky Noto',
-                color: '#000F16',
-                fontSize: '16'
-              },
-              margin: 50,
-              formatter: function(params) {
-                var val = ''
-                if (params.length > 8) {
-                  val = params.substr(0, 8) + '...'
-                  return val
-                } else {
-                  return params
-                }
-              }
-            }
-          },
-          series: [
-            {
-              type: 'scatter',
-              color:['#21c9cc'],
-              symbolSize: function(val) {
-                return val[2] * 2
-              },
-              data: data,
-              animationDelay: function(idx) {
-                return idx * 5
-              }
-            }
-          ]
-        }
-        this.loadingMain = false
-        option && myChart.setOption(option, true)
-        window.onresize = () => {
-          myChart.resize()
-        }
-        myChart.on('mouseover', 'yAxis.category', function(e) {
-          let axisTip = document.querySelector('.axis-tip')
-          axisTip.innerText = e.value
-          axisTip.style.left = 100 + 'px'
-          axisTip.style.top = (e.event.event.y) - 180 + 'px'
-          axisTip.style.display = 'block'
-        })
-        myChart.on('mouseout', 'yAxis.category', function(e) {
-          let axisTip = document.querySelector('.axis-tip')
-          axisTip.innerText = ''
-          axisTip.style.display = 'none'
-        })
+          })
+
+          this.timeData = timeData
+          this.timeData = [...this.timeData]
+          this.loadingMain = false
+        }, 500)
+
      },
      TaskPlanListClick() {
        let newUrl = this.$router.resolve({
@@ -439,7 +408,7 @@
    width: 300px;
  }
 </style>
-<style scoped>
+<style scoped lang="less">
  @import '~@assets/less/common.less';

  .box-title-text {
@@ -480,7 +449,7 @@

  .box-top-content {
    width: 100%;
-    height: 400px;
+    height: 500px;
    margin-bottom: 20px;
    padding: 20px 0;
    box-sizing: border-box;
@@ -521,4 +490,132 @@
    color: #21c9cc;
    cursor: pointer;
  }
+
+  .box-top-content-left {
+    width: 160px;
+    float: left;
+    padding-top: 100px;
+    margin-right: 20px;
+  }
+
+  .box-top-content-left-text {
+    color: #191E29;
+    font-weight: bold;
+    font-size: 14px;
+    height: 104px;
+    letter-spacing: 0px;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .box-top-content-right {
+    width: calc(100% - 180px);
+    float: left;
+  }
+
+  .box-top-content-right-top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .box-top-content-right-top-text {
+    border-left: 1px #EAEAEC solid;
+    border-top: 1px #EAEAEC solid;
+    border-bottom: 1px #EAEAEC solid;
+    flex: 1;
+    height: 36px;
+    padding-left: 10px;
+    color: #54565A;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 36px;
+    letter-spacing: 0px;
+    text-align: center;
+  }
+
+  .box-top-content-right-top-text:last-child {
+    border-right: 1px #EAEAEC solid;
+  }
+
+  .box-top-content-right-bottom {
+    position: relative;
+    padding-top: 60px;
+  }
+
+  .process-content {
+    position: relative;
+    height: 104px;
+
+    .process-content-content {
+      background: #fff;
+      z-index: 98;
+      /*padding: 0 6px;*/
+      position: absolute;
+      left: 40px;
+      text-align: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-top: 5px;
+
+      .process-content-left {
+        width: 24px;
+        height: 24px;
+        /*margin-top: 5px;*/
+      }
+
+      .process-content-right-top {
+        font-size: 14px;
+        color: #040B29;
+        max-width: 155px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        position: absolute;
+        top: -8px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .process-content-right-button {
+        width: 70px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #6F7385;
+        position: absolute;
+        left: 50%;
+        top: 34px;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .process-content-right-xian {
+      height: 2px;
+      width: 100%;
+      background: #E6E6E9;
+      position: absolute;
+      top: 16px;
+    }
+  }
+
+  .box-top-content-right-xian {
+    width: 2px;
+    height: 100%;
+    border: 1px #21c9cc dashed;
+    position: absolute;
+    top: -36px;
+    z-index: 999;
+  }
+
+  .box-top-content-right-text {
+    position: absolute;
+    top: -60px;
+    color: #21c9cc;
+    font-weight: bold;
+    font-size: 14px;
+    width: 100px;
+  }
 </style>