|
@@ -1,208 +1,25 @@
|
|
|
<template>
|
|
|
- <div class="occdb_interestcode">
|
|
|
- <head-component :headinfo=headinfo></head-component>
|
|
|
- <div class="page-content">
|
|
|
- <div class="content">
|
|
|
- <div class="result-box">
|
|
|
- <div class="two-page-result">
|
|
|
- <div v-for="(item,index) in interestcode"
|
|
|
- :class="[item.selected?'item-result-box-active':'item-result-box']"
|
|
|
- @click="addItem(item,index)">{{ item.selected }}
|
|
|
- <div v-html="item.label"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="search-btn">
|
|
|
- <img @click="jumpToList('/xjc-integratedmachine/environment/occdb_search_industry_list')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <drag_component></drag_component>
|
|
|
+ 霍兰德码查询
|
|
|
+ <div v-for="(item,index) in interestcode" @click="jumpToList(item)">
|
|
|
+ {{item.label}}
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
-import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
|
|
|
-import {specialtyList1} from '@/api/xjc-integratedmachine/environment/specialty.js'
|
|
|
-
|
|
|
-const router = useRouter()
|
|
|
-const route = useRoute()
|
|
|
-const total = ref(0)
|
|
|
-const param = route.query
|
|
|
-const data_rows = ref([])
|
|
|
-const headinfo = ref({})
|
|
|
-const resultVal =ref([])
|
|
|
-const resultValCode =ref('')
|
|
|
-function setHeadinfo() {
|
|
|
- headinfo.value = {
|
|
|
- title: '专业类',
|
|
|
- user: {
|
|
|
- avatar: '头像路径',
|
|
|
- nickName: '张三'
|
|
|
- },
|
|
|
- backUrl: '/xjc-integratedmachine/environment/index',
|
|
|
- homeUrl: '/xjc-integratedmachine/environment/index',
|
|
|
- contrast:true,
|
|
|
- }
|
|
|
-}
|
|
|
const {proxy} = getCurrentInstance()
|
|
|
const {interestcode} = proxy.useDict('interestcode')
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
function jumpToList(item) {
|
|
|
router.push({
|
|
|
path : '/xjc-integratedmachine/environment/occdb_interestcode_list',
|
|
|
query:{
|
|
|
- code : resultValCode.value
|
|
|
+ code : item.value
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-onMounted(() => {
|
|
|
- setHeadinfo()
|
|
|
- // interestList.value = interestcode.value.map(item =>{
|
|
|
- // console.log("item",item.selected);
|
|
|
- // item.selected = false;
|
|
|
- // })
|
|
|
-})
|
|
|
-const queryParams = ref({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- oldid: param.oldid
|
|
|
-})
|
|
|
-function addItem (val,index){
|
|
|
- resultVal.value.push(val);
|
|
|
- resultVal.value.map(item =>{
|
|
|
- resultValCode.value += item.code
|
|
|
- })
|
|
|
- resultVal.value[index].selected = true;
|
|
|
-
|
|
|
- if( resultVal.value.length >=3 ){
|
|
|
- resultVal.value = resultVal.value.shift();
|
|
|
- }
|
|
|
-}
|
|
|
-function list1() {
|
|
|
- specialtyList1(queryParams.value).then(resp => {
|
|
|
- data_rows.value = resp.data.rows
|
|
|
- total.value = resp.data.total
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-list1()
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
-div,p{
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-.occdb_interestcode {
|
|
|
- background: url('@/assets/images/login/login-home-background.png') no-repeat;
|
|
|
- background-size: 1920px 1080px;
|
|
|
- z-index: 10;
|
|
|
- width: 100%;
|
|
|
- height: 1080px;
|
|
|
- .page-content {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .content{
|
|
|
- width: 1832px;
|
|
|
- height: 922px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 35px 35px 35px 35px;
|
|
|
- margin-top:13px;
|
|
|
- }
|
|
|
- .result-box {
|
|
|
- width: 100%;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .two-page-result {
|
|
|
- width: 1276px;
|
|
|
- height: 337px;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- margin-top: 195px;
|
|
|
- .item-result-box-active {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
- box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- border: 1px solid #A2F57F;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #0DE6A1;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-right: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-result-box {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: #E0EEF4;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #000000;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-right: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
|
|
|
- .item-result-box:hover {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
- box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- border: 1px solid #A2F57F;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #000000;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- margin-top: 280px;
|
|
|
- img {
|
|
|
- width: 244px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- p{
|
|
|
-
|
|
|
- }
|
|
|
- span{
|
|
|
- margin-left: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|