web-test/src/views/market/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <div class="w_1200">
            <el-col :span="24" class="left">
              <el-col :span="24" class="leftTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>技术成果</span>
                  <span>A</span>
                  <span>chieve</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '1', column_name: '技术成果' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="leftDown">
                <el-row :gutter="7">
                  <el-col
                    :span="4"
                    class="achieveList"
                    v-for="(item, index) in achieveList"
                    :key="index"
                    @click.native="$router.push({ path: '/market/marketlists', query: { type: '1', column_name: '技术成果', id: item._id } })"
                  >
                    <el-col :span="24" class="achieveImage">
                      <el-image v-if="item.image && item.image.length > 0" :src="item.image[0].url"></el-image>
                      <span v-else>
                        <el-image :src="item.company == '中科院长春分院' ? ccfy : achievezb"></el-image>
                        <el-col :span="24" class="company textOver">
                          {{ item.company }}
                        </el-col>
                        <el-col :span="24" class="aName textOver">
                          {{ item.name }}
                        </el-col>
                        <el-col :span="24" class="a-brief">{{ item.achievebrief }}</el-col>
                        <el-col :span="24" class="cont">
                          <el-col :span="24" class="a-field">领域：{{ item.field }}</el-col>
                          <el-col :span="24" class="a-contacts">联系人：{{ item.contacts }}</el-col>
                        </el-col>
                      </span>
                    </el-col>
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
            <el-col :span="24" class="right">
              <el-col :span="24" class="rightTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>科技需求</span>
                  <span>T</span>
                  <span>echnology</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '0', column_name: '科技需求' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="rightDown">
                <el-col
                  :span="4"
                  class="technologyList"
                  v-for="(item, index) in technologyList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '0', column_name: '科技需求', id: item._id } })"
                >
                  <el-col :span="12" class="name textOver">
                    {{ item.name }}
                  </el-col>
                  <el-col :span="12" class="date">
                    {{ item.meta | getDate }}
                  </el-col>
                  <!-- <el-col :span="12" class="field"> 所属领域：{{ item.requirementdesc }} </el-col>
                  <el-col :span="12" class="field"> 合作方式：{{ item.cooperation }} </el-col> -->
                  <el-col :span="24" class="demand">{{ item.requirementdesc }}</el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="centerimage">
          <el-image :src="gongqiuImage"></el-image>
        </el-col>
        <el-col :span="24" class="down">
          <div class="w_1200">
            <el-col :span="24" class="left">
              <el-col :span="24" class="leftTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>商务服务</span>
                  <span>B</span>
                  <span>usiness</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '2', column_name: '商务服务' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="leftDown">
                <el-col
                  :span="4"
                  class="businessList"
                  v-for="(item, index) in businessList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '2', column_name: '商务服务', id: item._id } })"
                >
                  <el-col :span="12" class="name textOver">
                    {{ item.name }}
                  </el-col>
                  <!-- <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col> -->
                  <el-col :span="12" class="date">
                    {{ item.meta | getDate }}
                  </el-col>
                  <el-col :span="24" class="info">
                    {{ item.informationdesc }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="right">
              <el-col :span="24" class="rightTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>专家智库</span>
                  <span>E</span>
                  <span>xpert</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '3', column_name: '专家智库' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="rightDown">
                <el-col
                  :span="4"
                  class="expertList"
                  v-for="(item, index) in expertList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '3', column_name: '专家智库', id: item._id } })"
                >
                  <el-col :span="12" class="expertimage">
                    <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
                    <el-image :src="expertimage" v-else></el-image>
                  </el-col>
                  <el-col :span="12" class="rightInfo">
                    <el-col :span="24" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="24" class="school textOver"> {{ item.zwzc }} </el-col>
                    <el-col :span="24" class="company textOver">{{ item.company }} </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="createpro" style="display:none;">
      <el-button type="text" @click="dialog = true">我要<br />发布</el-button>
    </el-col>
    <el-dialog :visible.sync="dialog" class="releaseDialog" title="信息征集" @close="toClose" width="61%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="技术需求" name="first">
          <el-col :span="24" class="first">
            <el-form ref="technologyForm" :model="technologyForm" :rules="technologyRules" label-width="140px">
              <el-col :span="24" class="company">
                <h1>企业信息</h1>
                <el-col :span="24" class="compnayInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业名称:" prop="company">
                      <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册类型：">
                      <el-input v-model="technologyForm.companytype" placeholder="请输入注册类型"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="统一社会信用代码：">
                      <el-input v-model="technologyForm.zzjgdm" placeholder="请输入统一社会信用代码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册时间：">
                      <el-date-picker v-model="technologyForm.companydate" type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册资金：">
                      <el-input v-model="technologyForm.companycapital" placeholder="请输入注册资金"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业法人：">
                      <el-input v-model="technologyForm.companyperson" placeholder="请输入企业法人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业网址：">
                      <el-input v-model="technologyForm.companyweb" placeholder="请输入企业网址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系人：">
                      <el-input v-model="technologyForm.contacts" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系电话：" prop="phone">
                      <el-input v-model="technologyForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="QQ/微信：">
                      <el-input v-model="technologyForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="电子邮箱：">
                      <el-input v-model="technologyForm.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="上年度企业总收入：">
                      <el-input v-model="technologyForm.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="上年度研发费用：">
                      <el-input v-model="technologyForm.sndyffy" placeholder="请输入上年度研发费用"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业总人数：">
                      <el-input v-model="technologyForm.companytotal" placeholder="请输入企业总人数"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="专(兼)职研发人数：">
                      <el-input v-model="technologyForm.zjzyfrs" placeholder="请输入专(兼)职研发人数"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业简介：">
                      <el-input
                        v-model="technologyForm.companybrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="主要产品：">
                      <el-input
                        v-model="technologyForm.mainproduct"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入主要产品"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业资质(荣誉)：">
                      <el-input
                        v-model="technologyForm.qualifications"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业资质(荣誉)"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="product">
                <h1>技术需求</h1>
                <el-col :span="24" class="productInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="名称：" prop="name">
                      <el-input v-model="technologyForm.name" placeholder="请输入需求名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="需求紧急程度：">
                      <el-select v-model="technologyForm.degreeurgency" placeholder="请选择需求紧急程度">
                        <el-option label="特急" value="特急"></el-option>
                        <el-option label="一般" value="一般"></el-option>
                        <el-option label="储备" value="储备"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="所属领域：">
                      <el-select v-model="technologyForm.field" filterable>
                        <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="投资预算：">
                      <el-input v-model="technologyForm.budget" placeholder="请输入投资预算"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="合作方式：">
                      <el-select v-model="technologyForm.cooperation" filterable>
                        <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术说明：">
                      <el-input
                        v-model="technologyForm.requirementdesc"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术难题/需求说明"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="预期目标：">
                      <el-input
                        v-model="technologyForm.expect"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入预期技术目标描述"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="需求现状：">
                      <el-input
                        v-model="technologyForm.present"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入需求现状及应对措施"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="合作条件及要求：">
                      <el-input
                        v-model="technologyForm.condition"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入合作条件及要求"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-form>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini" @click="technologyBtn">保存</el-button>
            </el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="科技成果" name="second">
          <el-col :span="24" class="first">
            <el-form ref="achieveForm" :model="achieveForm" :rules="technologyRules" label-width="140px">
              <el-col :span="24" class="company">
                <h1>企业信息</h1>
                <el-col :span="24" class="compnayInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业名称:" prop="company">
                      <el-input v-model="achieveForm.company" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业网址：">
                      <el-input v-model="achieveForm.companyweb" placeholder="请输入企业网址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系人：">
                      <el-input v-model="achieveForm.contacts" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系电话：" prop="phone">
                      <el-input v-model="achieveForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="QQ/微信：">
                      <el-input v-model="achieveForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="电子邮箱：">
                      <el-input v-model="achieveForm.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业简介：">
                      <el-input
                        v-model="achieveForm.companybrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="product">
                <h1>科技成果</h1>
                <el-col :span="24" class="productInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果名称：" prop="name">
                      <el-input v-model="achieveForm.name" placeholder="请输入注册类型"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="所属领域：">
                      <el-select v-model="achieveForm.field" filterable>
                        <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="合作方式：">
                      <el-select v-model="achieveForm.cooperation" filterable>
                        <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="成果状态：">
                      <el-select v-model="achieveForm.achievestatus" filterable>
                        <el-option v-for="(item, index) in achievestatusList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果权属：">
                      <el-input v-model="achieveForm.achieveown" placeholder="请输入成果权属"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果来源：">
                      <el-select v-model="achieveForm.achievesource" placeholder="请选择成果来源">
                        <el-option label="国家项目" value="国家项目"></el-option>
                        <el-option label="省级项目" value="省级项目"></el-option>
                        <el-option label="市级项目" value="市级项目"></el-option>
                        <el-option label="自选项目" value="自选项目"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="意向价格：">
                      <el-input v-model="achieveForm.intentionprice" placeholder="请输入意向价格"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="专利信息：">
                      <el-input v-model="achieveForm.patentinfo" placeholder="请输入专利信息"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="专利状态：">
                      <el-select v-model="achieveForm.patentstatus" placeholder="请选择专利状态">
                        <el-option label="已申请" value="已申请"></el-option>
                        <el-option label="已授权" value="已授权"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="项目路演：">
                      <el-input v-model="achieveForm.roadshow" placeholder="请输入项目路演"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="成果简介：">
                      <el-input
                        v-model="achieveForm.achievebrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入成果简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术特点：">
                      <el-input
                        v-model="achieveForm.features"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术特点"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术团队：">
                      <el-input
                        v-model="achieveForm.team"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术团队"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="商业预期：">
                      <el-input
                        v-model="achieveForm.expectations"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入商业预期"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="合作条件及要求：">
                      <el-input
                        v-model="achieveForm.condition"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入合作条件及要求"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-form>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini" @click="achieveBtn">保存</el-button>
            </el-col>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: product } = createNamespacedHelpers('marketproduct');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: markettype } = createNamespacedHelpers('markettype');
var moment = require('moment');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      gongqiuImage: require('@/assets/live/main2.png'),
      iconImage: require('@/assets/live/square_big.png'),
      achievezb: require('@/assets/3.png'),
      ccfy: require('@/assets/ccfy1.png'),
      expertimage: require('@/assets/live/222.png'),
      // 成果
      achieveList: [],
      // 技术
      technologyList: [],
      // 商务服务
      businessList: [],
      // 专家信息
      expertList: [],
      // 未注册用户发布产品
      dialog: false,
      activeName: 'first',
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
      // 技术
      technologyForm: {},
      // 成果
      achieveForm: {},
      technologyRules: {
        company: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.search();
    this.searchtype();
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    ...product({ newquery: 'newquery', productCreate: 'create', marketquery: 'marketquery' }),
    ...expertsuser({ expertQuery: 'query', expertquery: 'expertquery' }),
    async search() {
      let res = await this.marketquery({ skip: 0, limit: 6, type: '1', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
      res = await this.marketquery({ skip: 0, limit: 6, type: '0', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
      console.log(res);
      res = await this.marketquery({ skip: 0, limit: 5, type: '2', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
      res = await this.expertquery({ skip: 0, limit: 6 });
      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
    },
    // 未注册用户添加产品
    // 查询字典表
    async searchtype() {
      // 所属领域;
      let res = await this.markettypeList({ category: '01' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
      // 成果状态;
      res = await this.markettypeList({ category: '02' });
      if (this.$checkRes(res)) {
        this.$set(this, `achievestatusList`, res.data);
      }
      // 合作方式;
      res = await this.markettypeList({ category: '03' });
      if (this.$checkRes(res)) {
        this.$set(this, `cooperationList`, res.data);
      }
    },
    // 技术保存
    async technologyBtn() {
      let data = this.technologyForm;
      data.type = '0';
      data.status = '0';
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息创建成功',
          type: 'success',
        });
        this.toClose();
      } else {
        this.$message.error('信息创建失败');
      }
    },
    // 成果保存
    async achieveBtn() {
      let data = this.achieveForm;
      data.type = '0';
      data.status = '0';
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息创建成功',
          type: 'success',
        });
        this.toClose();
      } else {
        this.$message.error('信息创建失败');
      }
    },
    // 取消
    toClose() {
      this.technologyForm = {};
      this.achieveForm = {};
      this.dialog = false;
    },
  },
  // 过滤时间
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  // width: 80%;
  width: 1200px;
  margin: 0 auto;
}
.top {
  margin: 15px 0 30px 0;
  height: 500px;
  overflow: hidden;
  .left {
    border-right: 1px dashed #ccc;
    margin-bottom: 15px;
    .leftTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .leftDown {
      // height: 450px;
      margin-top: 15px;
      .achieveList {
        // position: relative;
        overflow: hidden;
        height: 220px;
        margin-top: 5px;
        padding: 0px 8px;
        .achieveImage {
          position: relative;
          .el-image {
            width: 100%;
            height: 220px;
            overflow: hidden;
            border-radius: 5px;
            transition: all 0.4s linear;
            position: relative;
          }
          .aName {
            position: absolute;
            top: 25px;
            left: 0px;
            text-align: center;
            transform: scale(0.8);
            font-weight: bolder;
            // color: transparent;
            // 文字边框宽度和颜色
            -webkit-text-stroke: 1px #f18d2c;
            font-style: oblique;
            // 文字填充色
            -webkit-text-fill-color: transparent;
            letter-spacing: 3px;
          }
          .a-brief {
            margin: 10px 0px;
            position: absolute;
            top: 31px;
            left: 0px;
            overflow: hidden;
            line-height: 20px;
            letter-spacing: 2px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 7;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            transform: scale(0.8);
          }
          .cont {
            position: absolute;
            left: 0px;
            bottom: 10px;
            transform: scale(0.8);
            .a-field {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .company {
            position: absolute;
            top: 3px;
            left: 20px;
            width: 86%;
            color: #ec6c2d;
            -webkit-text-stroke: 1px #f18d2c;
            font-style: oblique;
            -webkit-text-fill-color: #ec6c2d;
            letter-spacing: 3px;
          }
        }
      }
      .achieveList:hover {
        cursor: pointer;
      }
      .achieveList::before {
        content: '';
      }
    }
  }
  .right {
    margin-top: 15px;
    .rightTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .rightDown {
      // padding: 0 10px;
      margin-top: 15px;
      .technologyList {
        padding: 10px 5px 0px 5px;
        // border-bottom: 1px dashed #ccc;
        border: 1px dashed #ccc;
        margin-right: 15px;
        width: 185px;
        .name {
          font-size: 13px;
        }
        .date {
          text-align: right;
          font-size: 13px;
        }
        .demand {
          height: 80px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
          margin-top: 5px;
        }
      }
      .technologyList:last-child {
        margin-left: 0px;
      }
      .technologyList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
}
.centerimage {
  text-align: center;
  .el-image {
    height: 140px;
  }
}
.down {
  // height: 550px;
  padding: 50px 0 50px 0;
  margin: 0 0 15px 0;
  background-color: #e9edf6;
  .left {
    border-right: 1px dashed #ccc;
    margin-bottom: 30px;
    .leftTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .leftDown {
      // height: 450px;
      padding: 0 10px;
      margin-top: 15px;
      .businessList {
        padding: 10px 5px;
        margin-right: 15px;
        width: 190px;
        // border-bottom: 1px dashed #044b79;
        border: 1px dashed #044b79;
        .name {
          font-size: 13px;
        }
        .date {
          text-align: right;
          font-size: 13px;
        }
        .info {
          height: 80px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
          margin-top: 5px;
        }
      }
      // .businessList:last-child {
      //   border-bottom: none;
      // }
      .businessList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    .rightTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .rightDown {
      margin-top: 20px;
      // height: 450px;
      // padding: 0 10px;
      .expertList {
        margin: 0 15px 10px 0;
        // padding: 10px 0;
        width: 185px;
        // border-bottom: 1px dashed #044b79;
        .expertimage {
          .el-image {
            width: 100%;
            height: 98px;
            border-radius: 90px;
          }
        }
        .rightInfo {
          padding: 0 0 0 14px;
          .name {
            font-size: 13px;
            padding: 14px 0 0 0;
          }
          .school {
            font-size: 13px;
            padding: 14px 0 0 0;
          }
          .edu {
            font-size: 13px;
            padding: 14px 0 0 0;
          }
          .company {
            font-size: 13px;
            padding: 14px 0 0 0;
          }
        }
      }
      .expertList:nth-child(5) {
        border-bottom: none;
      }
      .expertList:nth-child(6) {
        border-bottom: none;
      }
      .expertList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
}
.createpro {
  position: fixed;
  bottom: 100px;
  left: 100px;
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  .el-button {
    font-size: 25px;
  }
}
.createpro:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 0 6px #0085d2;
  box-shadow: 0 0 6px #0085d2;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  cursor: pointer;
  .el-button {
    font-weight: bold;
  }
}
.releaseDialog {
  margin: 15px 0;
  .first {
    .company {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .compnayInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .product {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .productInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .btn {
      text-align: center;
      margin: 15px 0;
    }
  }
}
</style>