From 541dab9b5b1af7902e548482d58431a20c882d4c Mon Sep 17 00:00:00 2001
From: zyn <nn_0223@163.com>
Date: Fri, 8 Dec 2023 16:18:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=90=9C=E7=B4=A2=E4=B8=AD=E5=BF=83):?=
 =?UTF-8?q?=20=E9=87=8D=E6=9E=84=E6=90=9C=E7=B4=A2=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/standardSearch/index.vue            | 626 ++++++++++++++++++
 src/router/index.js                           |   3 +
 2 files changed, 629 insertions(+)
 create mode 100644 src/pages/searchCenter/pages/standardSearch/index.vue

diff --git a/src/pages/searchCenter/pages/standardSearch/index.vue b/src/pages/searchCenter/pages/standardSearch/index.vue
new file mode 100644
index 000000000..ef386d537
--- /dev/null
+++ b/src/pages/searchCenter/pages/standardSearch/index.vue
@@ -0,0 +1,626 @@
+<template>
+  <div class="standard-search">
+    <personal-center></personal-center>
+    <div class="search" style="margin: 20px 20px 0;">
+
+      <div class="search-content"
+           @mouseenter="setShowAllSearch(true)"
+           @mouseleave="setShowAllSearch(false)">
+        <div class="search-item">
+          <div class="condition-item-title">检索方式</div>
+          <div class="search-item-content">
+            <div
+                :class="searchForm.selectType === 'allTextSearch' ? 'selected' : ''"
+                @click="searchFormChange('selectType', 'allTextSearch')"
+            >全文检索</div>
+            <div
+                :class="searchForm.selectType === 'titleSearch' ? 'selected' : ''"
+                @click="searchFormChange('selectType', 'titleSearch')"
+            >标题检索</div>
+          </div>
+        </div>
+        <i class="icon el-icon-arrow-down" :class="{ 'icon-arrow': showAllSearch}"></i>
+        <div style="height: 5px;width: 100%;background-color: transparent;position: absolute;bottom: -5px;left: 0"></div>
+
+        <transition name="fade">
+          <el-card class="box-card" v-show="showAllSearch">
+            <template v-for="(item,key) in searchOptions">
+
+              <!-- 标准类别 -->
+              <template v-if="key === 'standSort'">
+                <!-- 资源类型非全部时 根据标准类别显示对应标准类别 -->
+                <!-- 资源类型全部时隐藏标准类别 -->
+                <div v-if="searchForm.standType !== ''" class="search-item card-search-item" :key="key">
+                  <div class="condition-item-title">{{ item.title }}</div>
+                  <div class="search-item-content">
+                    <div v-for="(option, index) in item.options.filter(i => i.type === searchForm.standType || i.type === 'all')"
+                         :key="option.value"
+                         :class="searchForm[key].split(',').indexOf(option.value) !== -1 ? 'selected' : ''"
+                         @click="searchFormChange(key, option.value)"
+                    >{{ option.label }}</div>
+                  </div>
+                </div>
+              </template>
+
+              <div v-else class="search-item card-search-item" :key="key">
+                <div class="condition-item-title">{{ item.title }}</div>
+                <div class="search-item-content">
+                  <div v-for="(option, index) in item.options"
+                       :key="option.value"
+                       :class="searchForm[key].split(',').indexOf(option.value) !== -1 ? 'selected' : ''"
+                       @click="searchFormChange(key, option.value)"
+                  >{{ option.label }}</div>
+                </div>
+              </div>
+            </template>
+          </el-card>
+        </transition>
+      </div>
+
+      <div class="search-input">
+        <el-input placeholder="请输入查询条件" v-model="searchForm.selectValue" @keyup.enter.native="onSearch" clearable>
+          <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
+        </el-input>
+      </div>
+
+      <div class="search-link">
+        <router-link to="/advancedSearch" class="link">
+          <div>高级检索</div>
+        </router-link>
+        <router-link to="/home2" class="link" style="margin-left: 20px">
+          <div>首页</div>
+        </router-link>
+      </div>
+
+    </div>
+    <div class="main">
+      <loading :loading="loading">数据获取中</loading>
+      <has-no-data tips="暂无查询结果" p-class="no-data-class" v-if="list.length === 0" />
+      <template v-else>
+        <div style="height: calc(100% - 56px + 20px);overflow-y: auto;">
+          <div v-for="(item,key) in list" :key="key" class="main-box">
+            <div class="main-box-title">
+              <div class="left">
+                <span v-html="item.indexType === 'stand' ? '国内标准法规' : (item.indexType === 'FOREIGN' ? '国外标准法规' : (item.indexType === 'laws' ? '国内外政策' : (item.indexType === 'bussstand' ? '企业标准' : (item.indexType === 'items' ? '数据化条目' : '动态&资料'))))" class="type-tip"></span>
+                <span style="cursor:pointer;" class="main-title" v-html="item.title" @click="jumpDetails(item)"></span>
+              </div>
+              <span class="more" @click="checkDetail(item)">详情</span>
+            </div>
+            <div class="main-content" v-html="item.textContent"></div>
+            <div v-if="item.indexType !== 'items' && item.indexType !== 'msgdyinfo'" class="time">
+              <div style="margin-right: 15px;">发布日期:  {{ item.issue_time !== null && item.issue_time !== '' ? $moment(item.issue_time).format('YYYY-MM-DD')  : '--' }} </div>
+            </div>
+          </div>
+        </div>
+        <pagination
+            :page="searchForm.page"
+            :total="total"
+            @pageChange="pageChange"
+            @pageSizeChange="pageSizeChange"
+            style="border-radius: 24px;"></pagination>
+      </template>
+    </div>
+
+    <el-dialog
+        title="查看详情"
+        :visible.sync="isShowDetail"
+        size="800px">
+      <loading :loading="detailLoading">数据获取中</loading>
+      <div style="height: 500px;overflow: auto;" >
+        <div v-html="detail.textContent" style="line-height: 20px;"></div>
+        <br>
+        <br>
+        <div v-html="detail.textItems" style="line-height: 20px;"></div>
+      </div>
+      <div slot="footer">
+        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="() => {this.isShowDetail = false}">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PersonalCenter from '@/components/personalCenter/index.vue'
+export default {
+  name: "index",
+  components: {
+    PersonalCenter
+  },
+  data() {
+    const searchOptions = {
+      // selectType: {
+      //   title: '检索方式',
+      //   options: [
+      //     {
+      //       label: '全文检索',
+      //       value: 'allTextSearch'
+      //     },
+      //     {
+      //       label: '标题检索',
+      //       value: 'titleSearch'
+      //     }
+      //   ]
+      // },
+      standType: {
+        title: '资源类型',
+        options: [
+          {
+            label: '全部',
+            value: ''
+          },
+          {
+            label: '国内标准法规',
+            value: 'stand'
+          },
+          {
+            label: '国外标准法规',
+            value: 'FOREIGN'
+          },
+          {
+            label: '企业标准',
+            value: 'bussstand'
+          }
+        ]
+      },
+      standSort: {
+        title: '标准类别',
+        options: [
+          {
+            label: '全部',
+            value: '',
+            type: 'all'
+          }
+        ]
+      },
+      NYLXCLASS: {
+        title: '能源类型',
+        options: [
+          {
+            label: '全部',
+            value: ''
+          }
+        ]
+      },
+      CLLX: {
+        title: '适用车辆类型',
+        options: [
+          {
+            label: '全部',
+            value: ''
+          }
+        ]
+      },
+    }
+    return {
+      searchOptions,
+      showAllSearch: false,
+      url: {
+        searchSarBykey: 'search/searchCenter/searchSarBykey',
+        searchSarBykeyByDetils: 'search/searchCenter/searchSarBykeyByDetils'
+      },
+      searchForm: {
+        selectIndex: 'fulltextserch',
+        selectType: this.$route.params.allType || 'titleSearch',
+        standType: '',
+        standSort: '',
+        NYLXCLASS: '',
+        CLLX: '',
+        page: 1,
+        pageSize: this.$store.getters.userInfo.configContent,
+        selectValue: ''
+      },
+      total: 0,
+      list: [],
+      loading: false,
+      isShowDetail: false,
+      detail: {
+        textContent: '',
+        textItems: ''
+      },
+      detailLoading: false
+    };
+  },
+  created() {
+    this.getDicTypeListCode()
+    this.getData()
+  },
+  methods: {
+    onSearch () {
+      this.searchForm.page = 1
+      this.getData()
+    },
+    getData () {
+      const config = {
+        _this: this,
+        loading: 'loading'
+      }
+      this.$http._post(this.url.searchSarBykey, this.searchForm, config).then(res => {
+        if (res.ok) {
+          this.list = res.data.list
+          this.total = res.data.count
+        }
+      })
+    },
+    searchFormChange (key, value) {
+      if (key === 'selectType') {
+        this.searchForm[key] = value
+      } else if (key === 'standType') {
+        this.searchForm[key] = value;
+        ['standSort', 'NYLXCLASS', 'CLLX'].forEach(item => {
+         this.searchForm[item] = ''
+        })
+      } else {
+        if (value === '') {
+          this.searchForm[key] = ''
+        } else {
+          if (this.searchForm[key] === '') {
+            this.searchForm[key] = value
+          } else {
+            const list = this.searchForm[key].split(',')
+            if (list.indexOf(value) === -1) {
+              this.searchForm[key] = this.searchForm[key] + ',' + value
+            } else {
+              this.searchForm[key] = list.filter(item => item !== value).join(',')
+            }
+          }
+        }
+      }
+      this.getData()
+    },
+    setShowAllSearch (flag) {
+      this.showAllSearch = flag
+    },
+    pageChange (page) {
+      this.searchForm.page = page
+      this.getData()
+    },
+    pageSizeChange (pageSize) {
+      this.searchForm.pageSize = pageSize
+      this.getData()
+    },
+    checkDetail (item) {
+      const query = {}
+      query.selectIndex = 'fulltextserch'
+      query.selectValue = this.searchForm.selectValue
+      query.standId = item.id
+      this.isShowDetail = true
+      this.$http.post('search/searchCenter/searchSarBykeyByDetils', query, {
+        _this: this,
+        loading: 'detailLoading'
+      }, res => {
+        if (res.ok && res.data) {
+          this.detail.textContent = res.data.textContent.replace(/null/g, '- -')
+          this.detail.textItems = res.data.textItems
+        }
+      }, e => {
+      })
+    },
+    jumpDetails (item) {
+      let name = '',pageType = ''
+      switch (item.indexType) {
+        case 'stand':
+          name = 'OtherStandardDetails'
+          pageType = 'INLAND_STAND'
+          break
+          // 企标
+        case 'bussstand':
+          name = 'OtherBussStandardDetails'
+          pageType = 'BUSINESS_STAND'
+          break
+        case 'FOREIGN':
+          name = 'OtherStandardDetails'
+          pageType = 'FOREIGN_STAND'
+          break
+      }
+      let routeUrl = this.$router.resolve({
+        name,
+        params: {
+          id: item.id,
+          pageType
+        }
+      })
+      window.open(routeUrl.href, '_blank')
+    },
+    getDicTypeListCode () {
+      this.$http._getData('sys/dictype/getDicTypeListCode', {}, {}).then(res => {
+        if (res.ok) {
+          // 能源类型
+          this.searchOptions.NYLXCLASS.options = [...this.searchOptions.NYLXCLASS.options, ...res.data.NYLXCLASS]
+          // 适用车辆类型
+          this.searchOptions.CLLX.options = [...this.searchOptions.CLLX.options, ...res.data.ENERGYTYPES]
+          // 标准类别
+          if (res.data.STANDCLASSIFY) {
+            const data = res.data.STANDCLASSIFY
+            const standVerify = ["GB","GB/T","QC/T","JT","JB","GA","GJB","HJ"];
+            const bussstandVerify = ["ECE","EU","EC","EEC","ISO","IEC","GTR","CFR",
+              "JASO","JIS","GSO","GOST","ΓOCT","TP","SASO","UAE","CONTRAN","DENATRAN",
+              "ABNT NBR","NBR","INMETRO","CONAMA","Normative Instruction","ADR"];
+            const enterpriseVerify = ["Q/FT A","Q/FT B","Q/FT E","Q/FT F","Q/FT G","Q/FT M",
+              "Q/FT Q","Q/FT R","Q/FT S","Q/FT T","Q/FT V","Q/FT X","Q/FT Y","Q/FT Z","Q/QCBFC"];
+            // 国内
+            const standList = data.filter(item => standVerify.includes(item.label))
+            standList.forEach(item => item.type = 'stand')
+            // 国外
+            const bussstandList = data.filter(item => bussstandVerify.includes(item.label))
+            bussstandList.forEach(item => item.type = 'FOREIGN')
+            // 企标
+            const enterpriseList = data.filter(item => enterpriseVerify.includes(item.label))
+            enterpriseList.forEach(item => item.type = 'bussstand')
+
+            this.searchOptions.standSort.options = [...this.searchOptions.standSort.options, ...standList, ...bussstandList, ...enterpriseList]
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@/assets/styles/style';
+/deep/ .yellowEsClass{
+  background-color: #E6A23C !important;
+}
+
+/deep/ .greenEsClass{
+  background-color: #35720B !important;
+}
+
+/deep/ .redEsClass{
+  background-color: #F56C6C !important;
+}
+
+/deep/ .greenClass{
+  color: #35720B !important;
+}
+
+/deep/ .yellowClass{
+  color: #E6A23C !important;
+}
+
+/deep/ .redClass{
+  color: #F56C6C !important;
+}
+/deep/ p{
+  display: inline;
+}
+/deep/.highlight-Es-class {
+  background-color: #3fb3ff !important;
+}
+/deep/.highlight-class {
+  color: #3fb3ff !important;
+}
+
+.standard-search{
+  height: 100%;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  .search {
+    display: flex;
+    align-items: center;
+    .search-content {
+      position: relative;
+      background-color: #fff;
+      height: 100%;
+      width: 31%;
+      border-radius: 24px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid transparent;
+      .search-item {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        .condition-item-title{
+          color: #313131;
+          font-weight: bold;
+          min-width: 90px;
+          font-size: 15px;
+        }
+        .search-item-content {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          flex-wrap: wrap;
+          margin-left: 10px;
+          div {
+            color: #333;
+            margin: 5px;
+          }
+          div:hover {
+            cursor: pointer;
+            color: #3391CE;
+          }
+          .selected {
+            background-color: @baseColor;
+            color: #fff;
+            border-radius: 4px;
+            padding: 3px 7px;
+          }
+          .selected:hover {
+            background-color: @baseColor;
+            color: #fff;
+          }
+        }
+      }
+      .icon {
+        font-weight: 600;
+        font-size: 18px;
+      }
+      .box-card {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 50px;
+        border-radius: 24px;
+        border-top: 2px solid transparent;
+        z-index: 99;
+        /deep/.el-card__body{
+          padding: 0;
+        }
+        .card-search-item {
+          min-height: 48px;
+          padding: 0 16px;
+          border-bottom: 1px dashed #BFBFBF;
+        }
+        .card-search-item:last-child {
+          border-bottom: 1px dashed transparent;
+        }
+      }
+    }
+    .search-input {
+      width: 31%;
+      margin: 0 calc((100% - 93%) / 2);
+      /deep/.el-input__inner{
+        font-size: 16px;
+        border-radius: 24px 0 0 24px;
+        font-family: PingFang-SC-Medium;
+        color: #666;
+        height: 48px;
+        border: none;
+        padding: 0 25px;
+      }
+      /deep/.el-input__inner::placeholder {
+        color: #A2AAB3;
+        //padding-left: 8px;
+      }
+      /deep/.el-input-group__append{
+        border-radius: 0 24px 24px 0;
+        background-color: #fff;
+        border: none;
+        border-left: 1px solid #DCDFE6;
+        .el-icon-search {
+          font-size: 22px;
+          font-weight: 600;
+        }
+      }
+    }
+    .search-link {
+      display: flex;
+      align-items: center;
+      .link {
+        color: #333;
+        font-family: PingFang-SC-Medium;
+        font-size: 16px;
+        text-decoration: underline;
+        font-weight: 600;
+      }
+    }
+  }
+  .main {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px 0 20px 20px;
+    margin: 20px;
+    position: relative;
+    height: calc(100vh - 158px);
+
+    .main-box {
+      position: relative;
+      margin-top: 12px;
+      background-color: #fff;
+      border-radius: 20px;
+      &:last-child {
+        margin-bottom: 20px;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .main-box-title {
+        position: relative;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        line-height: 20px;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .left {
+          display: flex;
+          align-items: center;
+          flex: 1;
+        }
+        .more {
+          cursor: pointer;
+          position: absolute;
+          right: 5px;
+          color: #C0C4CC;
+        }
+        .more:hover {
+          color: #3391CE;
+        }
+        .type-tip {
+          height: 20px;
+          line-height: 20px;
+          padding: 0 5px;
+          border-radius: 6px;
+          color: #fff;
+          background: #3391CE;
+        }
+        .main-title {
+          margin-left: 10px;
+          font-size: 20px;
+          font-weight: bold;
+
+          //flex: 1;
+          //width: 0;
+          //
+          //text-overflow: ellipsis;
+          //white-space: nowrap;
+          //overflow: hidden;
+        }
+      }
+      .main-content {
+        line-height: 20px;
+        //display: block;
+        //word-break: break-all;
+        ////多行文本溢出
+        //overflow: hidden;
+        ////text-overflow: ellipsis;
+        ////display: -webkit-box;
+        ////-webkit-line-clamp: 3;
+        //-webkit-box-orient: vertical;
+        //max-height: 78px;
+
+        display: -webkit-box;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        /* autoprefixer: on */
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+      }
+      .time {
+        margin-top: 10px;
+        display: flex;
+      }
+    }
+  }
+}
+
+.no-data-class {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.el-icon-arrow-down {
+  transition: transform .5s
+}
+.icon-arrow {
+  transform: rotate(180deg);
+}
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index aaf88fedc..c856fd419 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5000,8 +5000,11 @@ const routes = [
   {
     path: '/standardSearch/:selectKey?/:searchValue?',
     name: 'StandardSearch',
+    /*
     component: () =>
       import('@/pages/searchCenter/pages/standardSearch'),
+     */
+    component: () => import('@/pages/searchCenter/pages/standardSearch/index'),
     meta: {
       requireAuth: true,
       title: '标准检索',