qa-prevention-gwj-vue/src/views/keyprojects/outsourced/components/info.vue

<template>
  <div>
    <div class="app-container">
      <el-page-header content="查看详情" @back="goBack"/>
      <div class="level-title mt-20">
        <h1>工程信息：</h1>
      </div>
      <table class="table-ui mt-20">
        <tr>
          <td class="tbg">重点工程名称</td>
          <td colspan="3">{{ pd.OUTSOURCED_NAME }}</td>
        </tr>
        <tr v-if="pd.IS_CORP_TYPE == '0'">
          <td class="tbg">股份主管部门</td>
          <td>{{ pd.MANAGER_DEPARTMENT_NAME }}</td>
          <td class="tbg">股份监管部门</td>
          <td>{{ pd.DEPARTMENT_NAME }}</td>
        </tr>
        <tr v-if="pd.IS_CORP_TYPE == '0'">
          <td class="tbg">辖区单位</td>
          <td colspan="3">{{ pd.JURISDICTION_UNIT_NAME }}</td>
        </tr>
        <tr v-if="pd.IS_CORP_TYPE == '1'">
          <td class="tbg">企业监督部门</td>
          <td>{{ pd.DEPARTMENT_NAME }}</td>
          <td class="tbg">企业主管部门</td>
          <td>{{ pd.Q_COMPETENT_DEPT_NAME }}</td>
        </tr>
        <tr v-if="pd.IS_CORP_TYPE == '1'">
          <td class="tbg">企业辖区部门</td>
          <td colspan="3">{{ pd.INVOLVING_CORPS_DEPART_NAME }}</td>
        </tr>
        <tr>
          <!--<td class="tbg">辖区单位</td>
          <td>{{ pd.INVOLVING_CORPS_NAME }}</td >-->
          <td class="tbg">集团单位</td>
          <td colspan="3">{{ pd.GROUP_UNIT_NAME }}</td >
        </tr>
        <tr>
          <td class="tbg">计划工期</td>
          <td colspan="3">{{ pd.STARTTIME }} 至 {{ pd.ENDTIME }}</td>
          <!--<td>{{ pd.STARTTIME }}</td>
          <td class="tbg">计划工期结束时间</td>
          <td>{{ pd.ENDTIME}}</td>-->
        </tr>
        <tr>
          <!--<td class="tbg">合同起止时间</td>
          <td>{{ pd.CONTRACT_STIME }} 至 {{ pd.CONTRACT_ETIME }}</td>-->
          <td class="tbg">施工相关方</td>
          <td colspan="3">{{ pd.UNITS_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">合同号</td>
          <td>{{ pd.CONTRACT_NUM }}</td>
          <td class="tbg">监理单位名称</td>
          <td>{{ pd.MANAGE_CORPS_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">相关方单位工程负责人</td>
          <td>{{ pd.UNITS_PIC_NAME }}</td>
          <td class="tbg">相关方单位负责人手机</td>
          <td>{{ pd.UNITS_PHONE }}</td>
        </tr>
        <!--<tr v-if="pd.UNITS_APTITUDE">
          <td class="tbg">相关方单位资质</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.UNITS_APTITUDE }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.UNITS_APTITUDE)">下载</el-button></td>
        </tr>
        <tr v-if="pd.MANAGE_APTITUDE">
          <td class="tbg">监理单位资质</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.MANAGE_APTITUDE }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.MANAGE_APTITUDE)">下载</el-button></td>
        </tr>
        <tr v-if="pd.MEASURES">
          <td class="tbg">安全技术措施</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.MEASURES }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.MEASURES)">下载</el-button></td>
        </tr>-->
        <tr>
          <td class="tbg">监理单位工程负责人</td>
          <td>{{ pd.MANAGE_PIC }}</td>
          <td class="tbg">监理单位负责人手机</td>
          <td >{{ pd.MANAGE_PHONE }}</td>
        </tr>
        <tr>
          <td class="tbg">是否发送短信</td>
          <td >
            <span v-if="pd.IS_SMS === '0'">是</span>
            <span v-if="pd.IS_SMS === '1'">否</span>
          </td>
          <td class="tbg">状态</td>
          <td>
            <!--            <span v-if="pd.STATE == 0">未申请</span>-->
            <!--            <span v-if="pd.STATE == 1">申请中</span>-->
            <!--            <span v-if="pd.STATE == 2">已完成</span>-->
            <span v-if="pd.STATE == 0">未开工</span>
            <span v-if="pd.STATE == 1">进行中</span>
            <span v-if="pd.STATE == 2">已结束</span>
            <span v-if="pd.STATE == -1">开工申请中</span>
            <span v-if="pd.STATE == -2">结束申请中</span>
          </td>
        </tr>
        <!--<tr>
          <td class="tbg">备注</td>
          <td colspan="3">{{ pd.REMARKS }}</td>
          &lt;!&ndash;          <td class="tbg">股份监管部门</td>&ndash;&gt;
          &lt;!&ndash;          <td>{{ pd.DEPARTMENT_NAME }}</td>&ndash;&gt;
        </tr>
        <tr v-if="pd.DESIGE">
          <td class="tbg">相关方组织设计</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.DESIGE }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.DESIGE)">下载</el-button></td>
        </tr>
        <tr v-if="pd.ATTACHMENTS">
          <td class="tbg">附件</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.ATTACHMENTS }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.ATTACHMENTS)">下载</el-button></td>
        </tr>
        <div class="level-line" />
        <div class="level-title">
          <h1>安全培训：</h1>
        </div>
        <tr>
          <td class="tbg">培训管理单位</td>
          <td>{{ pd.TRAINING_NAME }}</td>
          <td class="tbg">培训时间</td>
          <td>{{ pd.TRAINING_STIME }} 至 {{ pd.TRAINING_ETIME }} </td>
        </tr>
        <tr>
          <td class="tbg">培训管理负责人</td>
          <td colspan="3">{{ pd.TRAINING_PIC }}</td>
        </tr>
        <tr v-if="pd.RECORDS">
          <td class="tbg">安全培训记录</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.RECORDS }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.RECORDS)">下载</el-button></td>
        </tr>
        <tr v-if="pd.SHEET">
          <td class="tbg">培训签名表</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.SHEET }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.SHEET)">下载</el-button></td>
        </tr>-->
        <tr>
          <td class="tbg">重点工程定位</td>
          <td v-if="pd.WORK_LATITUDE && pd.WORK_LONGITUDE" colspan="2">经度：{{ pd.WORK_LONGITUDE }},纬度：{{ pd.WORK_LATITUDE }}</td>
          <td v-else colspan="2">未定位</td>
          <td><el-button type="success" @click="handleMap(pd)">查看定位</el-button></td>
        </tr>
        <tr v-for="(item,index) in file9" :key="index">
          <td class="tbg">安全管理协议{{ index +1 }}</td>
          <td colspan="2">{{ item.FILE_NAME }}</td>
          <td><el-button type="primary" @click="downloadFile(item.FILEPATH)">下载</el-button></td>
        </tr>
        <!--<tr v-if="pd.EXAMINATION">
          <td class="tbg">重点工程考试题</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.EXAMINATION }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.EXAMINATION)">下载</el-button></td>
        </tr>
        <tr v-if="pd.OATTACHMENTS">
          <td class="tbg">其他附件</td>
          &lt;!&ndash;          <td colspan="2">{{ pd.OATTACHMENTS }}</td>&ndash;&gt;
          <td colspan="3"><el-button type="primary" @click="downloadFile(pd.OATTACHMENTS)">下载</el-button></td>
        </tr>-->

        <div class="level-line" />
        <div class="level-title">
          <h1>处罚相关：</h1>
        </div>
        <tr v-for="(item,index) in punishThePerson" :key="index">
          <td class="tbg">处罚人员部门</td>
          <td>{{ item.punishname }}</td>
          <td class="tbg">处罚人员</td>
          <td>{{ item.NAME }}</td>
        </tr>
      </table>
    </div>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button icon="el-icon-arrow-left" @click="goBack">返 回</el-button>
    </div>

    <el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
      <div id="map" />
      <div slot="footer" class="dialog-footer">
        <span>经度：</span>
        <el-input v-model="form.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
        <span>纬度：</span>
        <el-input v-model="form.LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
        <el-button @click="dialogFormMap = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import TiandiMap from '../../../../components/TianMap/TiandiMap'

export default {
  components: { TiandiMap },
  data() {
    return {
      pd: {
        DEPARTMENT_NAME: '', // 集团监管部门
        DEPARTMENT_ID: '', // 发包部门
        CONTRACT_PIC: '', // 发包部门负责人
        OUTSOURCED_NAME: '', // 外包工程名称
        STARTTIME: '', // 计划工期开始时间
        ENDTIME: '', // 计划工期结束时间
        CONTRACTTIME: [], // 区间条件
        TRAINING_TIME: [], // 区间条件
        CONTRACT_NAME: '',
        CONTRACT_STIME: '', // 合同起止时间
        CONTRACT_ETIME: '', // 合同起止时间
        UNITS_ID: '', // 相关方单位名称
        CONTRACT_NUM: '', // 合同号
        UNITS_APTITUDE: '', // 相关方单位资质
        UNITS_APTITUDEPATH: '',
        UNITS_PIC: '', // 相关方单位本项目负责人
        UNITS_PIC_NAME: '',
        UNITS_PHONE: '', // 相关方单位本项目负责人手机
        MANAGE_NAME: '', // 监理单位名称
        MANAGE_APTITUDE: '', // 监理单位资质
        MANAGE_APTITUDEPATH: '',
        MANAGE_PIC: '', // 监理单位本项目负责人姓名
        DESIGE: '', // 相关方组织设计
        DESIGEPATH: '', // 相关方组织设计
        MANAGE_PHONE: '', // 监理单位本项目负责人手机
        MEASURES: '', // 安全技术措施
        MEASURESPATH: '', // 安全技术措施
        ATTACHMENTS: '', // 附件
        ATTACHMENTSPATH: '', // 附件
        REMARKS: '', // 备注
        TRAINING_NAME: '', // 培训管理单位
        TRAINING_PIC: '', // 培训管理负责人
        TRAINING_STIME: '', // 培训时间
        TRAINING_ETIME: '', // 培训时间
        RECORDS: '', // 安全培训记录
        RECORDSPATH: '', // 安全培训记录
        SHEET: '', // 培训签名表
        SHEETPATH: '', // 培训签名表
        EXAMINATION: '', // 重点工程考试题
        EXAMINATIONPATH: '', // 重点工程考试题
        OATTACHMENTS: '', // 其他附件
        OATTACHMENTSPATH: '', // 其他附件
        file: '', // 相关附件
        APPLICANT: '', // 申请人
        STATE: ''// 状态
      },
      punishThePerson: [],
      file9: [],
      treeData: [],
      userList: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      // 地图所需参数
      map: null,
      marker: null,
      dialogFormMap: false,
      form: {
        LONGITUDE: '',
        LATITUDE: ''
      }
    }
  },
  watch: {
    CONTRACTTIME: function(newData, oldData) {
      if (!newData) {
        this.CONTRACTTIME = ['', '']
        this.getQuery()
      }
    },
    'form.DEPARTMENT_ID': {
      handler: function() {
        this.pd.RECTIFICATIONOR = ''
        if (this.form.DEPARTMENT_ID) this.getUserList()
      }
    },

    TRAINING_TIME: function(newData, oldData) {
      if (!newData) {
        this.TRAINING_TIME = ['', '']
        this.getQuery()
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleTreeSelected(checkedIds, checkedData) {
      this.DEPTIDS = checkedIds.join(',')
    },
    getData() {
      requestFN(
        '/outsourced/goEdit',
        {
          OUTSOURCED_ID: this.$parent.OUTSOURCED_ID
        }
      ).then((data) => {
        this.pd = data.pd
        this.punishThePerson = data.punishThePerson
        this.file9 = data.file9
      }).catch((e) => {
      })
    },
    getUserList() {
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: this.form.DEPARTMENT_ID
        }
      ).then((data) => {
        this.userList = data.userList
      })
    },
    getTreeList() {
      return new Promise((resolve) => {
        requestFN(
          '/department/listTree',
          {}
        ).then((data) => {
          this.treeData = JSON.parse(data.zTreeNodes)
          resolve()
        }).catch((e) => {
        })
      })
    },
    downloadFile(filePath) {
      this.$confirm('确定要下载此文件吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        // window.location.href = config.httpurl + 'outsourced/download?OUTSOURCED_ID=' + OUTSOURCED_ID
        window.open(config.fileUrl + filePath)
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    goBack() {
      this.$parent.activeName = 'List'
      this.$parent.OUTSOURCED_ID = ''
    },
    /**
     * 初始化天地图对象
     */
    initTDT() {
      return new Promise((resolve, reject) => {
        if (window.T) {
          console.log('天地图初始化成功...')
          resolve(window.T)
          reject('error')
        }
      }).then(T => {
        window.T = T
      })
    },
    /**
     * 初始化地图
     * @param {*} lng 经度
     * @param {*} lat 纬度
     * @param {*} zoom 缩放比例(1~18)
     */
    initMap(lng, lat, zoom) {
      this.initTDT().then((T) => {
        const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
        // 创建自定义图层对象
        this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
        // 初始化地图对象
        this.map = new window.T.Map('map')
        this.initCenter(lng, lat, zoom)
      })
    },
    initCenter(lng, lat, zoom) {
      // 设置显示地图的中心点和级别
      if (!this.form.LONGITUDE && !this.form.LATITUDE) {
        this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
        this.marker && this.map.removeOverLay(this.marker)
      } else {
        this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
        this.marker && this.map.removeOverLay(this.marker)
        this.form.LONGITUDE = lng
        this.form.LATITUDE = lat
        this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
        // 向地图上添加标注
        this.map.addOverLay(this.marker)
      }
      // 创建卫星和路网的混合视图
      this.map.setMapType(window.TMAP_HYBRID_MAP)
      // 允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom()
      // 允许鼠标移动地图
      this.map.enableInertia()
      // 向地图上添加标注
      this.map.addEventListener('click', this.MapClick)
    },
    MapClick(event) {
      this.marker && this.map.removeOverLay(this.marker)
      this.form.LONGITUDE = event.lnglat.getLng()
      this.form.LATITUDE = event.lnglat.getLat()
      this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
      // 向地图上添加标注
      this.map.addOverLay(this.marker)
    },
    handleMap(row) {
      this.form.LATITUDE = ''
      this.form.LONGITUDE = ''
      this.dialogFormMap = true
      this.form.LATITUDE = this.pd.WORK_LATITUDE
      this.form.LONGITUDE = this.pd.WORK_LONGITUDE
      this.$nextTick(() => {
        if (!this.map) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 16)
        else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)
      })
    }
  }
}
</script>

<style scoped>
  .tbg{width:180px;
    /*text-align: left;*/
  }
  #map{
    width: 1000px;
    height: 500px;
  }
</style>