修改项目状态看板-时间轴-点击时间轴区域无法全屏查看

2022-05-26 15:52:35 +08:00
parent ba47b0e880
commit a2f72851de
3 changed files with 571 additions and 9 deletions
@@ -1,13 +1,372 @@
 <template>
-
+  <div class="doc-detail">
+    <div class="Virtual-detail-header" style="position: fixed;top: 0">
+      <div class="Virtual-detail-title">
+        <span>
+             {{this.$t('regulatoryCertificationTaskPlan')}}
+        </span>
+      </div>
+    </div>
+    <div style="padding: 87px 0 0 0;background: #ffffff;height:100%">
+      <div class="detail-content" style="height: 100%">
+            <span style="float: right" class="box-top-text-right">
+           <a-range-picker
+             :placeholder="[this.$t('startMonth'), this.$t('endMonth')]"
+             format="YYYY-MM"
+             v-model="getTime"
+             :mode="mode2"
+             :open="open"
+             @openChange="openChange"
+             @panelChange="panelChange"
+             @change="hodeChange"
+           >
+             <div slot="renderExtraFooter" style="width: 100%;display: block">
+               <div style="text-align: right;width: 100%">
+                   <a @click="okChange">{{$t('determine')}}</a>
+               </div>
+             </div>
+           </a-range-picker>
+      </span>
+        <div class="box-top-content">
+          <div id="main"></div>
+          <div class="axis-tip"></div>
+          <JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+  import moment from 'moment'
+  import * as echarts from 'echarts'
+
  export default {
-    name: 'TaskPlanList'
+    name: 'TaskPlanList',
+    data() {
+      return {
+        url: {
+          timeline: '/project/ProjectStatusBoardController/timeline',
+          timelineList: '/project/ProjectStatusBoardController/timelineList'
+        },
+        startTime: undefined,
+        endTime: undefined,
+        mode2: ['month', 'month'],
+        loading: false,
+        loadingMain: false,
+        dataSource: [],
+        open: false,
+        getTime: []
+      }
+    },
+    mounted() {
+      this.getTimeline()
+    },
+    methods: {
+      getTimeline() {
+        let query = {
+          startTime: this.startTime,
+          endTime: this.endTime
+        }
+        this.loadingMain = true
+        getAction(this.url.timeline, query).then((res) => {
+          if (res.success) {
+            this.getTimelineList(res.result)
+          }
+        })
+      },
+      openChange(val) {
+        this.open = val
+      },
+      okChange() {
+        this.open = false
+        this.getTimeline()
+      },
+      hodeChange() {
+        this.getTime = []
+        this.startTime = undefined
+        this.endTime = undefined
+        this.getTimeline()
+      },
+      panelChange(value, mode) {
+        this.getTime = value
+        this.startTime = moment(value[0]).format('YYYY-MM')
+        this.endTime = moment(value[1]).format('YYYY-MM')
+      },
+      getTimelineList(time) {
+        let query = {
+          startTime: this.startTime,
+          endTime: this.endTime
+        }
+        getAction(this.url.timelineList, query).then((res) => {
+          if (res.success) {
+            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)
+            }
+            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, 14, j])
+            }
+          }
+        }
+        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)
+              )
+            }
+          },
+          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',
+              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) {
+          console.log(e)
+          let axisTip = document.querySelector('.axis-tip')
+          console.log(axisTip)
+          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'
+        })
+      }
+    }
  }
 </script>

-<style scoped>
+<style lang="less" scoped>
+  @import '~@assets/less/common.less';

+  .doc-detail {
+    background: #fff;
+    height: 100%;
+
+    .Virtual-detail-header {
+      width: 100%;
+      height: 68px;
+      line-height: 68px;
+      padding: 0 32px 0 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 2px #eff1f3 solid;
+      background: #fff;
+
+      .Virtual-detail-title {
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 20px;
+        font-weight: 400;
+        color: #040B29;
+        line-height: 68px;
+      }
+    }
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 70px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-top-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000F16;
+    display: inline-block;
+  }
+
+  .box-top-content {
+    width: 100%;
+    height: calc(100vh - 160px);
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .box-button {
+    height: 38px;
+  }
+
+  #main {
+    width: 100%;
+    height: 100%;
+  }
+
+  .axis-tip {
+    display: none;
+    position: absolute;
+    padding: 5px 5px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #575757;
+    background: #ffffff;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+
+  .box-top-text-right {
+    display: inline-block;
+    float: right;
+    height: 38px;
+    width: 300px;
+    margin-top: -4px;
+    margin-right: 20px;
+  }
 </style>
@@ -3,23 +3,213 @@
    <div class="Virtual-detail-header" style="position: fixed;top: 0">
      <div class="Virtual-detail-title">
        <span>
-             {{this.title}}
+             {{this.$t('projectStatusAndProgress')}}
        </span>
      </div>
    </div>
-    <div style="padding: 67px 0 0 0;background: #ffffff;height:100%">
+    <div style="padding: 77px 0 0 0;background: #ffffff;height:100%">
      <div class="detail-content" style="height: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          :loading="loading"
+          :pagination="false"
+          :scroll="{x: true,y:'calc(100vh - 180px)'}"
+          :data-source="dataSource"
+          :columns="columns"
+        >
+          <span slot="projectStatusTitle">
+               <span>{{this.$t('projectStatus')}}</span><br/>
+               <span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+')'}}</span>
+          </span>
+          <span slot="CertificationProgressTitle">
+               <span>{{this.$t('CertificationProgress')}}</span><br/>
+               <span>{{'('+$t('notInvolved')+'/'+$t('toBeStarted')+'/'+$t('inProgress')+'/'+$t('experimentFailed')+'/'+$t('experimentPassed')+')'}}</span>
+          </span>
+          <span slot="listConfirmationStatusTitle">
+               <span>{{this.$t('listConfirmationStatus')}}</span><br/>
+               <span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
+          </span>
+          <span slot="taskAffirmStatusTitle">
+              <span>{{this.$t('taskAffirmStatus')}}</span><br/>
+              <span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
+          </span>
+          <span slot="designComplianceReviewTitle">
+               <span>{{this.$t('designComplianceReview')}}</span><br/>
+              <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
+          </span>
+          <span slot="preHomeConfirmationTitle">
+             <span>{{this.$t('preHomeConfirmation')}}</span><br/>
+             <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
+          </span>
+          <span slot="verificationComplianceReviewTitle">
+             <span>{{this.$t('verificationComplianceReview')}}</span><br/>
+             <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
+          </span>
+        </a-table>
      </div>
    </div>
  </div>
 </template>

 <script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+
  export default {
-    name: 'projectStatusAndProgress'
+    name: 'projectStatusAndProgress',
+    data() {
+      return {
+        url: {
+          list: '/project/ProjectStatusBoardController/scheduleInfoList'
+        },
+        loading: false,
+        dataSource: [],
+        columns: [
+          {
+            title: this.$t('entryName'),
+            align: 'center',
+            dataIndex: 'projectName',
+            width: 180
+          },
+          {
+            title: this.$t('targetMarket'),
+            align: 'center',
+            dataIndex: 'targetMarket',
+            width: 180
+          },
+          {
+            align: 'center',
+            dataIndex: 'projectStatus',
+            scopedSlots: { title: 'projectStatusTitle' },
+            width: 240
+          },
+          {
+            align: 'center',
+            dataIndex: 'certificationProgress',
+            width: 340,
+            scopedSlots: { title: 'CertificationProgressTitle' }
+          },
+          {
+            align: 'center',
+            dataIndex: 'inventory',
+            width: 340,
+            scopedSlots: { title: 'listConfirmationStatusTitle' }
+          },
+          {
+            align: 'center',
+            dataIndex: 'task',
+            width: 340,
+            scopedSlots: { title: 'taskAffirmStatusTitle' }
+          },
+          {
+            align: 'center',
+            dataIndex: 'design',
+            width: 440,
+            scopedSlots: { title: 'designComplianceReviewTitle' }
+          },
+          {
+            dataIndex: 'pre',
+            align: 'center',
+            width: 440,
+            scopedSlots: { title: 'preHomeConfirmationTitle' }
+          },
+          {
+            dataIndex: 'verify',
+            align: 'center',
+            width: 440,
+            scopedSlots: { title: 'verificationComplianceReviewTitle' }
+          }
+        ]
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      getList() {
+        this.loading = true
+        getAction(this.url.list, this.queryParam).then((res) => {
+          if (res.success) {
+            this.loading = false
+            this.dataSource = res.result || []
+          } else {
+            this.loading = false
+            this.dataSource = []
+          }
+        })
+      }
+    }
  }
 </script>

-<style scoped>
+<style lang="less" scoped>
+  @import '~@assets/less/common.less';

+  .doc-detail {
+    background: #fff;
+    height: 100%;
+
+    .Virtual-detail-header {
+      width: 100%;
+      height: 68px;
+      line-height: 68px;
+      padding: 0 32px 0 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 2px #eff1f3 solid;
+      background: #fff;
+
+      .Virtual-detail-title {
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 20px;
+        font-weight: 400;
+        color: #040B29;
+        line-height: 68px;
+      }
+
+      .doc-detail-right {
+        width: 800px;
+        line-height: 68px;
+        display: flex;
+      }
+    }
+
+    .Virtual-detail-left {
+      width: 240px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      font-size: 16px;
+      line-height: 3;
+      float: left;
+
+      .Virtual-detail-left-text {
+        padding: 2px 12px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .Virtual-detail-right {
+      border-left: 2px #eff1f3 solid;
+      width: calc(100% - 240px);
+      height: 100%;
+      float: left;
+      overflow: auto;
+    }
+  }
+
+  .Virtual-detail-left-text-color {
+    background: #eff1f3;
+    border-radius: 4px;
+  }
+
+  .Virtual-detail-text-right {
+
+  }
 </style>
@@ -70,6 +70,9 @@
          :data-source="dataSource"
          :columns="columns"
        >
+          <span slot="projectName" slot-scope="text,result">
+              <a @click="projectNameClick">{{text}}</a>
+          </span>
          <span slot="projectStatusTitle">
               <span>{{this.$t('projectStatus')}}</span><br/>
               <span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+')'}}</span>
@@ -374,9 +377,7 @@
          myChart.resize()
        }
        myChart.on('mouseover', 'yAxis.category', function(e) {
-          console.log(e)
          let axisTip = document.querySelector('.axis-tip')
-          console.log(axisTip)
          axisTip.innerText = e.value
          axisTip.style.left = 100 + 'px'
          axisTip.style.top = (e.event.event.y) - 180 + 'px'
@@ -387,6 +388,12 @@
          axisTip.innerText = ''
          axisTip.style.display = 'none'
        })
+        myChart.on('click', (params) => {
+          let newUrl = this.$router.resolve({
+            path: '/TaskPlanList'
+          })
+          window.open(newUrl.href, '_blank')
+        })
      },
      searchQuery() {
        this.getList()
@@ -406,6 +413,12 @@
            this.dataSource = []
          }
        })
+      },
+      projectNameClick() {
+        let newUrl = this.$router.resolve({
+          path: '/projectStatusAndProgress'
+        })
+        window.open(newUrl.href, '_blank')
      }
    }
  }