web-cms/src/views/investigation/projectDetail.vue

<template>
  <div id="projectDetail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-button type="primary" size="mini" @click="back">返回列表</el-button>
        </el-col>
        <el-col :span="24" class="down">
          <el-col :span="24" class="downtitle">
            2022年度吉林省科技发展计划高新技术领域项目建议书
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="one">
              <el-col :span="24" class="txt">
                <span>项目基本信息</span>
              </el-col>
              <el-col :span="24" class="info">
                <el-col :span="24" class="infoMess">
                  <el-col :span="3" class="title">
                    项目名称：
                  </el-col>
                  <el-col :span="21" class="message textOver">
                    {{ form.name }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    项目负责人：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.pro_user || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    联系电话：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.pro_phone || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    技术阶段：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.techol_stage || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    技术水平：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.techol_level || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    所属领域：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.field || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    市场预估：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.scale || '暂无' }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="one">
              <el-col :span="24" class="txt">
                <span>项目建议单位</span>
              </el-col>
              <el-col :span="24" class="info">
                <el-col :span="24" class="infoMess">
                  <el-col :span="3" class="title">
                    建议单位：
                  </el-col>
                  <el-col :span="21" class="message textOver">
                    {{ form.proposal_company }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    联系人：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.proposal_user || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    联系电话：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.proposal_phone || '暂无' }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="one">
              <el-col :span="24" class="txt">
                <span>主要合作单位</span>
              </el-col>
              <el-col :span="24" class="info">
                <el-col :span="24" class="infoMess">
                  <el-col :span="3" class="title">
                    合作单位：
                  </el-col>
                  <el-col :span="21" class="message textOver">
                    {{ form.coopera_company }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    联系人：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.coopera_user || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="12" class="infoMess">
                  <el-col :span="6" class="title">
                    联系电话：
                  </el-col>
                  <el-col :span="18" class="message textOver">
                    {{ form.coopera_phone || '暂无' }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="one">
              <el-col :span="24" class="txt">
                <span>项目内容简介</span>
              </el-col>
              <el-col :span="24" class="info">
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title"> <span>立项背景</span>（含解决“卡脖子”技术问题及在行业中所处的地位和作用）： </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.sign || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title"> <span>前期基础</span>（含知识产权状况）： </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.work_basics || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title"> <span>研究内容</span>（含项目创新点）： </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.content || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title"> <span>技术路线</span>（含拟解决关键技术）： </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.route || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title">
                    核心指标（要求可量化、可考核、可检测）：
                  </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.quota || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="loangInfoMess">
                  <el-col :span="24" class="title"> <span>经济效益</span>（含市场分析和产业化预期）： </el-col>
                  <el-col :span="24" class="longMessage">
                    {{ form.influence || '暂无' }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: projectsolic } = createNamespacedHelpers('projectsolic');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'projectDetail',
  props: {},
  components: {},
  data: function() {
    return {
      form: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...projectsolic(['fetch']),
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
    },
    // 返回列表
    back() {
      this.$router.push({ path: '/investigation/project' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .top {
    text-align: right;
    margin: 0 0 10px 0;
  }
  .down {
    .downtitle {
      text-align: center;
      font-size: 25px;
      margin: 0 0 30px 0;
    }
    .list {
      padding: 0 15%;
      .one {
        position: relative;
        border: 1px solid #41719c;
        margin: 0 0 35px 0;
        min-height: 150px;
        .txt {
          position: absolute;
          top: -22px;
          text-align: center;
          span {
            height: 40px;
            line-height: 40px;
            display: inline-block;
            padding: 0 35px;
            background: #fff;
            font-weight: bold;
            font-size: 18px;
          }
        }
        .info {
          padding: 20px 10px;
          .infoMess {
            padding: 10px 0;
            border-bottom: 1px dashed #ccc;
            .title {
              font-size: 16px;
              color: #666;
            }
            .message {
              font-size: 16px;
            }
            .longMessage {
              margin: 10px 0 0 0;
              min-height: 150px;
              border: 1px dashed #ccc;
              padding: 10px;
              font-size: 16px;
            }
          }
          .loangInfoMess {
            padding: 10px 0;
            margin: 0 0 15px 0;
            .title {
              font-size: 16px;
              color: #666;
              span {
                font-weight: bold;
              }
            }
            .longMessage {
              margin: 10px 0 0 0;
              min-height: 150px;
              border: 1px dashed #ccc;
              padding: 10px;
              font-size: 16px;
              line-height: 25px;
            }
          }
        }
      }
    }
  }
}
</style>