Merge remote-tracking branch 'origin/master'

itdmWeb/src/components/module-iTDM/uGantt/index.vue

@@ -125,8 +125,8 @@
       taskLists: {
         handler(newValue, oldValue){
           console.log(newValue, oldValue)
+          this.changeTableTree()
           if(newValue.length > 0){
-            this.changeTableTree()
             this.getStartEndTime()
             this.$nextTick(() => {
               this.uGanttDrag()

itdmWeb/src/views/activiti/ActivitiDaibanList.vue

@@ -5,8 +5,8 @@
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-model-item prop="key" label="流程KEY">
-                <a-input v-model="queryParam.key" allowClear placeholder="请输入流程KEY"></a-input>
+              <a-form-model-item prop="key" label="流程实例编号">
+                <a-input v-model="queryParam.key" allowClear placeholder="请输入流程实例编号"></a-input>
               </a-form-model-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="gdDetail-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
         <el-form-item label="委托单位" prop="weituoClient">
           <el-select v-model="queryParams.weituoClient" clearable placeholder="请选择委托单位" @change="getWeituoClientOptions">
@@ -29,7 +29,7 @@
     <uGantt :configColumns="configColumns" :taskLists="taskLists" ref="uGantt" @dbclick="rowDblclick" @addRow="addRow">
       <!-- 其他需要自定义的弹窗数据 -->
       <!-- 双击事件弹窗 -->
-      <el-dialog :title="title" :visible.sync="dialogVisible" width="35%">
+      <el-dialog :title="title" :visible.sync="dialogVisible" width="45%">
         <el-form ref="currentDbEdit" :model="currentDbEdit" :rules="rules" label-width="80px">
           <el-form-item label="开始时间" prop="start_date">
             <el-date-picker v-model="currentDbEdit.start_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="dataChange"></el-date-picker>
@@ -42,15 +42,48 @@
             <el-input v-model="currentDbEdit.reportNo" placeholder="请输入报告编号"></el-input>
           </el-form-item>
           <el-form-item label="试验设备" prop="shebeiId">
-            <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
-              <el-option
-                v-for="item in deviceOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
+            <div class="eq-rili-view" style="display: flex;">
+              <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
+                <el-option
+                  v-for="item in deviceOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="search-btn" @click="handleEqCalendar">{{openRl == 1 ? '收起': '展开'}}</div>
+            </div>
           </el-form-item>
+          <el-calendar v-if="openRl == 1">
+            <template slot="dateCell" slot-scope="{date, data}">
+              <!-- <div> -->
+                <!-- 如果是当前选择月 -->
+                <template v-if="data.type === 'current-month'">
+                  <!-- 这里加了周六周天的判断 -->
+                  <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.substring(8,10)}}</div>
+                  <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
+                  <!-- 方法二：在方法中判断设置返回 -->
+                  <template v-if="dealMyDate(data.day)">
+                    <div v-for="(item, index) in dealMyDate(data.day)" :key="index" class="eqCalendar-item">
+                      <!-- <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                        {{ item.deviceName }}
+                      </el-tag> -->
+                      <div>
+                        {{ item.deviceName }}
+                      </div>
+                    </div>
+                  </template>
+                  <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
+                    {{ dealMyDate(data.day)[0].deviceName }}
+                  </el-tag> -->
+                </template>
+                <!-- 不是 -->
+                <template v-else>
+                  <div style="text-align: right;">{{ data.day.split('-').slice(1).join('-') }}</div>
+                </template>
+              <!-- </div> -->
+            </template>
+          </el-calendar>
           <el-form-item label="传感器" prop="chuanganqiArray">
             <el-select v-model="currentDbEdit.chuanganqiArray" multiple placeholder="请选择传感器" style="width: 100%;">
               <el-option
@@ -75,9 +108,9 @@
             <el-select v-model="currentDbEdit.worker" placeholder="请选择操作员" style="width: 100%;">
               <el-option
                 v-for="item in worker"
-                :key="item.value"
+                :key="item.label"
                 :label="item.label"
-                :value="item.value">
+                :value="item.label">
               </el-option>
             </el-select>
           </el-form-item>
@@ -101,6 +134,40 @@
         </div> -->
         <!-- 其他需要自定义的弹窗数据 -->
         <!-- <slot/> -->
+        <!-- 日历弹窗 -->
+        <el-dialog title="设备日历" :visible.sync="showCalendarDialog" width="60%" append-to-body>
+          <el-calendar>
+            <template slot="dateCell" slot-scope="{date, data}">
+              <!-- <div> -->
+                <!-- 如果是当前选择月 -->
+                <template v-if="data.type === 'current-month'">
+                  <!-- 这里加了周六周天的判断 -->
+                  <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.substring(8,10)}}</div>
+                  <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
+                  <!-- 方法二：在方法中判断设置返回 -->
+                  <template v-if="dealMyDate(data.day)">
+                    <template v-for="(item, index) in dealMyDate(data.day)">
+                      <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                        {{ item.deviceName }}
+                      </el-tag>
+                    </template>
+                  </template>
+                  <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
+                    {{ dealMyDate(data.day)[0].deviceName }}
+                  </el-tag> -->
+                </template>
+                <!-- 不是 -->
+                <template v-else>
+                  <div style="text-align: right;">{{ data.day.split('-').slice(1).join('-') }}</div>
+                </template>
+              <!-- </div> -->
+            </template>
+          </el-calendar>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="showCalendarDialog = false">取 消</el-button>
+            <el-button type="primary" @click="showCalendarDialog = false">确 定</el-button>
+          </span>
+        </el-dialog>
         <span slot="footer" class="dialog-footer">
           <el-popover
             style="margin-right: 10px;"
@@ -126,7 +193,7 @@
 
 <script>
 import uGantt from '@/components/module-iTDM/uGantt/index.vue'
-import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getXmjlList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
+import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getXmjlList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl, getDeviceCalendar} from '@/api/api'
 export default {
   name: '',
   components: { uGantt },
@@ -149,7 +216,7 @@ export default {
       ],
       // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
       // 注意：id和pid也是固定死的参数名，如果需要可以改组件
-      // id、content: 也是固定死的，如果需要可以改组件
+      // id、task_text: 也是固定死的，如果需要可以改组件
       taskLists: [],
       // taskLists: [{
       //     id: 0,
@@ -158,7 +225,7 @@ export default {
       //     start_date: '2023-07-03',
       //     end_date: '2023-07-04',
       //     statusC: '0',
-      //     content: '111'
+      //     task_text: '111'
       //   }, {
       //     id: 1,
       //     testItems: '测试',
@@ -275,6 +342,10 @@ export default {
       // 表单校验
       rules: {
       },
+      // 日历弹窗
+      openRl: 1,
+      showCalendarDialog: false,
+      scheduleData: [],
     }
   },
   created () {
@@ -283,10 +354,34 @@ export default {
     this.getCgqlist()
     this.initDictConfig()
     this.getManagerList()
+    // 获取设备日历
+    this.getDeviceCalendar()
   },
   mounted () {
   },
   methods: {
+    // 获取设备日历
+    getDeviceCalendar(){
+      getDeviceCalendar().then((res) =>{
+        this.scheduleData = res
+      })
+    },
+    handleEqCalendar(){
+      this.openRl = -this.openRl
+      // this.showCalendarDialog = true
+    },
+    dealMyDate(v) {
+      let res = ''
+      for (let index = 0; index < this.scheduleData.length; index++) {
+        const element = this.scheduleData[index];
+        if(element.workDate === v){
+          res = this.scheduleData[index].deviceList
+          break
+        }
+      }
+      console.log(res)
+      return res
+    },
     // 获取委托单位下拉列表
     getClientList(){
       getWeituoClientList().then((res) =>{
@@ -330,36 +425,16 @@ export default {
         that.taskLists = []
         if (res.result.length > 0 ) {
           that.taskLists = res.result.map(res => {
-            return {
-              id: res.id,
-              pid: res.parent,
-
-              weituoId: res.weituoId,
-              testItemsId: res.testItemsId,
-              yangpinId:res.yangpinId,
-              shebeiId:res.shebeiId,
-              pm: res.pm,
-              reportNo: res.reportNo,
-              chuanganqiArray:res.chuanganqiArray,
-              testPlanId:res.testPlanId,
-              status:res.status,
-              pm: res.pm,
-
-              weituoNo: res.weituoNo,
-              neirong: res.neirong,
-              start_date: res.jihuaStartDate,
-              end_date: res.jihuaEndDate,
-              shiiyanTypeArray: res.shiiyanTypeArray,
-              shijiStartDate: res.shijiStartDate,
-              worker: res.worker,
-              yangpinCount:res.yangpinCount,
-
-              lastTime: res.lastTime,
-              sampleName: res.sampleName,
-              testItems: res.testItems,
-              deviceName: res.deviceName,
-              statusC: res.statusC
+            var obj = res
+            obj.pid = res.parent
+            obj.start_date = res.jihuaStartDate
+            obj.end_date = res.jihuaEndDate
+            if (obj.pid == null){
+              obj.task_text= res.deviceName+','+res.pm
+            } else {
+              obj.task_text= res.deviceName+','+res.worker
             }
+            return obj
           })
           console.log(that.taskLists)
         }
@@ -428,8 +503,11 @@ export default {
     // 双击事件
     rowDblclick(current){
       console.log(current)
+      this.openRl = 1
       this.currentDbEdit = current
       this.title = this.currentDbEdit.sampleName + '-' + this.currentDbEdit.testItems + '-' + this.currentDbEdit.pm
+      // 根据开始时间结束时间计算持续时间
+      this.currentDbEdit.lastTime = (new Date(this.currentDbEdit.end_date).getTime() - new Date(this.currentDbEdit.start_date).getTime()) / (1000 * 60 * 60 * 24)+1
       // this.currentIndex = this.taskLists.findIndex(res=>res.id === current.id)
       // this.currentDbEdit = this.taskLists[this.currentIndex]
       this.dialogVisible = true
@@ -519,13 +597,65 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-table th.el-table__cell>.cell{
-  padding-left: 0;
-  padding-right: 0;
-}
-::v-deep .el-table .cell{
-  padding-left: 0;
-  padding-right: 0;
+<style lang="scss">
+.gdDetail-container{
+  ::v-deep .el-table th.el-table__cell>.cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  ::v-deep .el-table .cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .eq-rili-view{
+    .el-select{
+      .el-input__inner{
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
+    }
+    .search-btn{
+      width: 60px;
+      background-color: #1890ff;
+      // padding: 0 22px;
+      color: #fff;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      text-align: center;
+    }
+  }
+  // 日历
+  .el-calendar{
+    .el-calendar-table .el-calendar-day{
+      padding: 0;
+      min-height: 65px;
+      height: 100%;
+      .weeked{
+        text-align: center;
+      }
+      .notweeked{
+        text-align: center;
+      }
+    }
+    .eqCalendar-item{
+      // width: ;
+      background-color: #EBF4FE;
+      position: relative;
+      padding: 2px 6px;
+      font-size: 12px;
+      margin-bottom: 4px;
+      overflow: auto;
+    }
+    .eqCalendar-item::after{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #4F9AF6;
+    }
+  }
 }
 </style>

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="gdPlan-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
         <el-form-item label="委托单位" prop="weituoClient">
           <el-select v-model="queryParams.weituoClient" clearable placeholder="请选择委托单位" @change="getWeituoClientOptions">
@@ -52,15 +52,48 @@
             </el-select>
           </el-form-item>
           <el-form-item label="试验设备" prop="shebeiId">
-            <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
-              <el-option
-                v-for="item in deviceOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
+            <div class="eq-rili-view" style="display: flex;">
+              <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
+                <el-option
+                  v-for="item in deviceOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="search-btn" @click="handleEqCalendar">{{openRl == 1 ? '收起': '展开'}}</div>
+            </div>
           </el-form-item>
+          <el-calendar v-if="openRl == 1">
+            <template slot="dateCell" slot-scope="{date, data}">
+              <!-- <div> -->
+                <!-- 如果是当前选择月 -->
+                <template v-if="data.type === 'current-month'">
+                  <!-- 这里加了周六周天的判断 -->
+                  <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.substring(8,10)}}</div>
+                  <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
+                  <!-- 方法二：在方法中判断设置返回 -->
+                  <template v-if="dealMyDate(data.day)">
+                    <div v-for="(item, index) in dealMyDate(data.day)" :key="index" class="eqCalendar-item">
+                      <!-- <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                        {{ item.deviceName }}
+                      </el-tag> -->
+                      <div>
+                        {{ item.deviceName }}
+                      </div>
+                    </div>
+                  </template>
+                  <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
+                    {{ dealMyDate(data.day)[0].deviceName }}
+                  </el-tag> -->
+                </template>
+                <!-- 不是 -->
+                <template v-else>
+                  <div style="text-align: right;">{{ data.day.split('-').slice(1).join('-') }}</div>
+                </template>
+              <!-- </div> -->
+            </template>
+          </el-calendar>
           <el-form-item label="传感器" prop="chuanganqiArray">
             <el-select v-model="currentDbEdit.chuanganqiArray" multiple placeholder="请选择传感器" style="width: 100%;">
               <el-option
@@ -96,7 +129,7 @@
 
 <script>
 import uGantt from '@/components/module-iTDM/uGantt/index.vue'
-import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getJhList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
+import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getJhList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl, getDeviceCalendar} from '@/api/api'
 export default {
   name: '',
   components: { uGantt },
@@ -122,7 +155,7 @@ export default {
       ],
       // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
       // 注意：id和pid也是固定死的参数名，如果需要可以改组件
-      // id、content: 也是固定死的，如果需要可以改组件
+      // id、task_text: 也是固定死的，如果需要可以改组件
       taskLists: [],
       // taskLists: [{
       //     id: 0,
@@ -131,7 +164,7 @@ export default {
       //     start_date: '2023-07-03',
       //     end_date: '2023-07-04',
       //     statusC: '0',
-      //     content: '111'
+      //     task_text: '111'
       //   }, {
       //     id: 1,
       //     testItems: '测试',
@@ -249,6 +282,10 @@ export default {
       // 表单校验
       rules: {
       },
+      // 日历弹窗
+      openRl: 1,
+      showCalendarDialog: false,
+      scheduleData: [],
     }
   },
   created () {
@@ -258,10 +295,35 @@ export default {
     this.getCgqlist()
     this.initDictConfig()
     this.getManagerList()
+    // 获取设备日历
+    this.getDeviceCalendar()
   },
   mounted () {
   },
   methods: {
+    // 获取设备日历
+    getDeviceCalendar(){
+      getDeviceCalendar().then((res) =>{
+        console.log(res)
+        this.scheduleData = res
+      })
+    },
+    handleEqCalendar(){
+      this.openRl = -this.openRl
+      // this.showCalendarDialog = true
+    },
+    dealMyDate(v) {
+      let res = ''
+      for (let index = 0; index < this.scheduleData.length; index++) {
+        const element = this.scheduleData[index];
+        if(element.workDate === v){
+          res = this.scheduleData[index].deviceList
+          break
+        }
+      }
+      console.log(res)
+      return res
+    },
     // 获取委托单位下拉列表
     getClientList(){
       getWeituoClientList().then((res) =>{
@@ -301,6 +363,10 @@ export default {
       console.log(that.queryParams)
       var queryParam = that.queryParams
       console.log(22,queryParam)
+      if (queryParam.weituoClient == '' && queryParam.weituoNo == '') {
+        queryParam.weituoClient = undefined
+        queryParam.weituoNo = undefined
+      }
       getJhList(queryParam).then((res) => {
         console.log(17,res)
         that.taskLists = []
@@ -330,7 +396,9 @@ export default {
               testItems: res.testItems,
               deviceName: res.deviceName,
               statusC: res.statusC,
-              izShiji: res.izShiji
+              izShiji: res.izShiji,
+
+              task_text: res.deviceName+','+res.pm
             }
           })
         }
@@ -392,8 +460,11 @@ export default {
     // 双击事件
     rowDblclick(current){
       console.log(current)
+      this.openRl = 1
       this.currentDbEdit = current
       this.title = this.currentDbEdit.sampleName + '-' + this.currentDbEdit.testItems + '-' + this.currentDbEdit.pm
+      // 根据开始时间结束时间计算持续时间
+      this.currentDbEdit.lastTime = (new Date(this.currentDbEdit.end_date).getTime() - new Date(this.currentDbEdit.start_date).getTime()) / (1000 * 60 * 60 * 24)+1
       // this.currentIndex = this.taskLists.findIndex(res=>res.id === current.id)
       // this.currentDbEdit = this.taskLists[this.currentIndex]
       this.dialogVisible = true
@@ -472,13 +543,65 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-table th.el-table__cell>.cell{
-  padding-left: 0;
-  padding-right: 0;
-}
-::v-deep .el-table .cell{
-  padding-left: 0;
-  padding-right: 0;
+<style lang="scss">
+.gdPlan-container{
+  ::v-deep .el-table th.el-table__cell>.cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  ::v-deep .el-table .cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .eq-rili-view{
+    .el-select{
+      .el-input__inner{
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-right: 0 !important;
+      }
+    }
+    .search-btn{
+      width: 60px;
+      background-color: #1890ff;
+      // padding: 0 22px;
+      color: #fff;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      text-align: center;
+    }
+  }
+  // 日历
+  .el-calendar{
+    .el-calendar-table .el-calendar-day{
+      padding: 0;
+      min-height: 65px;
+      height: 100%;
+      .weeked{
+        text-align: center;
+      }
+      .notweeked{
+        text-align: center;
+      }
+    }
+    .eqCalendar-item{
+      // width: ;
+      background-color: #EBF4FE;
+      position: relative;
+      padding: 2px 6px;
+      font-size: 12px;
+      margin-bottom: 4px;
+      overflow: auto;
+    }
+    .eqCalendar-item::after{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #4F9AF6;
+    }
+  }
 }
 </style>

itdmWeb/src/views/user/firstIndex.vue

@@ -1,60 +1,99 @@
 <template>
-    <div class="center">
-        <div class="header"></div>
-        <div class="box a1" @click="iTDM"></div>
-        <!-- <div class="box">2</div>
-        <div class="box">3</div>
-        <div class="box">4</div>
-        <div class="box">5</div>
-        <div class="box">6</div> -->
+    <div class="chooseSystem-container" ref="systemContainer">
+      <div class="header">
+        <!-- <img src="../../assets/tg.png" alt="" style="width: auto;height: 100%;"> -->
+      </div>
+      <img src="../../assets/content.png" alt="" ref="systemContent">
+      <div class="common-system system-iTDM" ref="systemiTDM" @click="chooseSystem('/dashboard/analysis')"></div>
     </div>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            
-        }
+  
+  <script>
+  export default {
+    name: '',
+    data () {
+      return {
+        timer: null
+      }
+    },
+    created () {
+    },
+    mounted () {
+      // 设置定时器--因为初始执行方法时img没有加载完，所以获取不到高度；定时一段时间等img加载之后再执行
+      this.timer = setTimeout(() => {
+        this.setSystemStyle()
+      }, 100)
+      // this.$nextTick(() => {
+      // })
+      window.addEventListener('resize', this.setSystemStyle)
+    },
+    beforeDestroy() {
+      // 清除定时器
+      if(this.timer){
+        clearInterval(this.timer);
+        this.timer = null;
+      }
     },
     methods: {
-        iTDM(){
-            console.log(11111)
-            this.$router.push({path: '/dashboard/analysis'})
-        }
+      setSystemStyle(){
+        // console.log(this.$refs)
+        // 获取图片宽高和top以及left
+        var systemWidth = this.$refs.systemContent.offsetWidth
+        var systemHeight = this.$refs.systemContent.offsetHeight
+        var systemTop = this.$refs.systemContent.offsetTop
+        var systemLeft = this.$refs.systemContent.offsetLeft
+        // console.log(systemWidth, systemHeight, systemTop, systemLeft)
+        // 设置iTDM动态宽高和top以及left
+        this.$refs.systemiTDM.style.width = (systemWidth * 0.234) + 'px'
+        this.$refs.systemiTDM.style.height = (systemHeight * 0.107) + 'px'
+        this.$refs.systemiTDM.style.top = (systemTop - systemHeight/2 + systemHeight*0.18) + 'px'
+        this.$refs.systemiTDM.style.left = (systemLeft - systemWidth/2 + systemWidth*0.03) + 'px'
+      },
+      chooseSystem(url){
+        this.$router.push({path: url})
+        // this.$router.push({path: item.url})
+      },
     }
-}
-</script>
-
-<style lang="less" scoped>
-.center{
-    height: 100%;
+  }
+  </script>
+  
+  <style lang="scss">
+  .chooseSystem-container{
     width: 100%;
-    /* display: flex; */
-    background: url('../../assets/firstBg.png') no-repeat center center;
-    background-size: cover;
-    overflow:hidden
-}
-.header{
-    height: 68px;
-    width: 252px;
-    // border: 1px solid rgb(0, 0, 0);
-    background: url('../../assets/tg.png') no-repeat center center;
+    height: 100%;
+    background: url('../../assets/bg.png') no-repeat center center;
     background-size: cover;
-    margin-top: 1%;
-    margin-left: 82%;
-    /* position: absolute;
-    left: 70%;
-    top: 10%; */
-}
-.box{ 
-    height: 55px;
-    width: 245px;
-    // border: 1px solid rgb(0, 0, 0);
-}
-.a1{
-    margin-left: 16.7%;
-    margin-top: 4.9%;
-    cursor: pointer;
-}
-</style>
+    position: relative;
+    .header{
+      width: 100%;
+      height: 68px;
+      position: absolute;
+      right: 0;
+      top: 20px;
+      // padding-right: 20px;
+      // background: url('../../assets/title.png') no-repeat right center;
+      background-size: contain;
+      background: url('../../assets/tg.png') no-repeat right center;
+    }
+    img{
+      width: 80%;
+      height: auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .common-system{
+      cursor: pointer;
+      position: absolute;
+    }
+    .system-iTDM{
+      width: 0;
+      height: 0;
+      // background: red;
+      top: 0;
+      left: 0;
+    }
+  }
+  </style>
+