cxyy-web/src/views/brain/four.vue

<template>
  <myMain>
    <div class="brainOne">
      <div class="menu_1" v-if="is_show">
        <div class="left">
          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
            {{ item.label }}
          </div>
        </div>
        <div class="right" @click="is_show = false">
          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
        </div>
      </div>
      <div class="menu_2" v-else @click="is_show = true">
        <el-icon color="#595959"><ArrowRightBold /></el-icon>
      </div>
      <div class="content">
        <div class="one">
          <span>产学研用协同创新数字化平台</span>
        </div>
        <div class="two">
          <div class="two_1">
            <div class="two_left">当前区域：</div>
            <div class="two_right">
              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
            </div>
          </div>
          <div class="two_1">
            <div class="two_left">当前产业：</div>
            <div class="two_right">
              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </div>
          <div class="two_1">
            <div class="two_left">产业链：</div>
            <div class="two_right">
              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="thr">
          <div class="thr_1">
            <div class="boxall_1">
              <BorderBox13 class="boxall boxall_1_1" title="产业分布">
                <div class="title center">
                  <div class="titleRight">产业分布</div>
                </div>
                <div class="select">
                  <div class="select_1">
                    <div class="select_left">指标:</div>
                    <div class="select_right">
                      <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem" :teleported="false">
                        <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.label" />
                      </el-select>
                    </div>
                  </div>
                  <div class="select_1">
                    <div class="select_left">对比对象:</div>
                    <div class="select_right">
                      <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" :teleported="false" />
                    </div>
                  </div>
                </div>
                <echarts1></echarts1>
              </BorderBox13>
              <BorderBox13 class="boxall boxall_1_2" title="产业人才">
                <div class="title">
                  <div class="titleRight">产业人才</div>
                </div>
                <div class="list flex">
                  <div class="list_1" v-for="(item, index) in list_1" :key="index">
                    <div class="titleList">{{ item.name || '暂无' }}</div>
                    <div class="num">{{ item.total || '暂无' }}</div>
                  </div>
                </div>
              </BorderBox13>
            </div>
            <div class="boxall boxall_2" title="关系图谱">
              <div class="title">
                <div class="titleRight">关系图谱</div>
              </div>
              <person></person>
            </div>
            <div class="boxall_3">
              <BorderBox13 class="boxall boxall_3_1" title="院士">
                <div class="title">
                  <div class="titleRight">院士</div>
                  <div class="titleCenter">
                    <el-input v-model="input" style="width: 14rem" placeholder="请输入名称" />
                  </div>
                </div>
                <div class="list flex">
                  <div class="list_2" v-for="(item, index) in list_4" :key="index">
                    <div class="list_title">{{ item.name || '暂无' }}</div>
                    <div class="list_school">{{ item.school || '暂无' }}</div>
                  </div>
                </div>
                <div class="total">
                  <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
                </div>
              </BorderBox13>
              <BorderBox13 class="boxall boxall_3_2" title="成果完成人">
                <div class="title center">
                  <div class="titleRight">成果完成人</div>
                </div>
                <div class="person">
                  <div class="person_left">
                    <div class="person_search" v-for="(item, index) in list_5" :key="index">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="person_right">
                    <div class="person_list">
                      <div class="list_2" v-for="(item, index) in list_4" :key="index">
                        <div class="list_title">{{ item.name || '暂无' }}</div>
                        <div class="list_school">{{ item.school || '暂无' }}</div>
                      </div>
                    </div>
                    <div class="total">
                      <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
                    </div>
                  </div>
                </div>
              </BorderBox13>
            </div>
          </div>
          <div class="thr_2">
            <BorderBox13 class="boxall boxall_4" title="国内人才分布">
              <div class="title">
                <div class="titleRight">国内人才分布</div>
              </div>
              <map1></map1>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_5" title="上市公司人才">
              <div class="title center">
                <div class="titleRight">上市公司人才</div>
              </div>
              <div class="table">
                <div class="table-head">
                  <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
                    {{ item.name }}
                  </div>
                </div>
                <div class="table-value">
                  <div class="value" v-for="(item, index) in list_2" :key="index">
                    <div class="table-colunm">{{ index + 1 }}</div>
                    <div class="table-colunm textOne">{{ item.company || '暂无' }}</div>
                    <div class="table-colunm textOne">{{ item.name || '暂无' }}</div>
                    <div class="table-colunm textOne">{{ item.gender || '暂无' }}</div>
                    <div class="table-colunm textOne">{{ item.education || '暂无' }}</div>
                    <div class="table-colunm textOne">{{ item.title || '暂无' }}</div>
                  </div>
                </div>
                <div class="total">
                  <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
                </div>
              </div>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_6" title="职业技术人才">
              <div class="title center">
                <div class="titleRight">职业技术人才</div>
              </div>
              <echarts2></echarts2>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_7" title="专家舆情">
              <div class="title">
                <div class="titleRight">专家舆情</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list">
                <div class="list_3" v-for="(item, index) in list_3" :key="index">
                  <div class="list_title textOne">
                    <span>{{ item.name || '暂无' }}</span>
                  </div>
                  <div class="list_person" v-if="item.person">
                    <span>{{ item.person || '暂无' }}</span>
                  </div>
                </div>
              </div>
            </BorderBox13>
          </div>
        </div>
      </div>
    </div>
  </myMain>
</template>

<script setup>
import { BorderBox13 } from '@kjgl77/datav-vue3'
import myMain from '@/components/dataV/myMain.vue'
// 组件
import echarts1 from './four/echarts1.vue'
import echarts2 from './four/echarts2.vue'
import map1 from './four/map.vue'
import person from './four/person.vue'
import { UserStore } from '@/store/user'
import { getCity } from '@/utils/city'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 路由
const is_show = ref(false)
const form = ref({})
const list = ref([
  { label: '产业大脑', route: '/brain' },
  { label: '产业链供应链监测', route: '/brain/one' },
  { label: '上市公司监测与培育', route: '/brain/two' },
  { label: '科技要素整合', route: '/brain/thr' },
  { label: '人才资源配置', route: '/brain/four' },
  { label: '营商环境监测', route: '/brain/five' },
  { label: '优质企业梯度培育', route: '/brain/six' }
])
const list_1 = ref([
  { name: '标准专家', total: 24 },
  { name: '获奖完成人', total: 8 },
  { name: '院士', total: 2 },
  { name: '项目完成人', total: 257 }
])
const column = ref([
  { name: '序号', style: { width: '16.5%' }, key: 'key' },
  { name: '公司名称', style: { width: '16.5%' }, key: 'company' },
  { name: '姓名', style: { width: '16.5%' }, key: 'name' },
  { name: '性别', style: { width: '16.5%' }, key: 'gender' },
  { name: '学历', style: { width: '16.5%' }, key: 'education' },
  { name: '职务', style: { width: '16.5%' }, key: 'title' }
])
// 列表
const list_2 = ref([
  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' }
])
let skip = 0
let limit = 15
const total = ref(0)
// 科技舆情
const list_3 = ref([
  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' }
])
const list_4 = ref([
  { name: '颜德岳', school: '吉林大学' },
  { name: '颜德岳', school: '吉林大学' },
  { name: '颜德岳', school: '吉林大学' },
  { name: '颜德岳', school: '吉林大学' },
  { name: '颜德岳', school: '吉林大学' },
  { name: '颜德岳', school: '吉林大学' }
])
const list_5 = ref([
  { name: '高级管理人才', value: '0' },
  { name: '标准起草专家', value: '1' },
  { name: '项目完成人', value: '2' },
  { name: '成果完成人', value: '3' },
  { name: '其它专家', value: '4' }
])
// 字典表
const cityList = ref([])
const industryList = ref([{ label: '智能网联汽车', value: '0' }])
const chainList = ref([{ label: '新能源汽车', value: '0' }])
// 请求
onMounted(async () => {
  getCity().then((response) => {
    cityList.value = response.address
  })
})
// 查看
const toView = (item) => {
  router.push(item.route)
}
</script>
<style scoped lang="scss">
.brainOne {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #17171d;
  background: url(/images/brain/brain-bg.gif);
  background-size: 100% 100%;
  padding: 0rem;
  margin: 0rem;
  color: #ffffff;
  font-family: '微软雅黑';
  cursor: default; /* 将鼠标样式更改为箭头 */
  .menu_1 {
    display: flex;
    align-items: center;
    background: rgba(194, 209, 225, 0.2);
    position: absolute;
    padding: 1.5rem 1rem;
    left: 0;
    top: 35%;
    border-radius: 0 1rem 1rem 0;
    font-size: 1.2rem;
    z-index: 10000;
    .left {
      .label {
        text-align: center;
        background: rgba(5, 28, 53, 0.2);
        padding: 0.5rem;
        margin: 0 0 1rem 0;
        border-radius: 0.5rem;
        color: #595959;
      }
      .label:hover {
        text-align: center;
        background: rgba(20, 123, 233, 0.2);
        padding: 0.5rem;
        margin: 0 0 1rem 0;
        border-radius: 0.5rem;
        color: #ffffff;
        text-shadow:
          0 0 0.5rem #fff,
          0 0 1rem #fff,
          0 0 1.5rem #fff,
          0 0 2rem #1073ff,
          0 0 3.5rem #1073ff,
          0 0 4.5rem #1073ff,
          0 0 5rem #1073ff,
          0 0 7.5rem #1073ff;
      }
    }
    .right {
      margin: 0 0 0 1rem;
    }
  }
  .menu_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(194, 209, 225, 0.2);
    position: absolute;
    left: 0;
    top: 35%;
    height: 30%;
    padding: 0 0.3rem;
    border-radius: 0 1.5rem 1.5rem 0;
    z-index: 10000;
  }
  .content {
    width: 100%;
    height: 100%;
    .one {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 6%;
      background: url(/images/brain/titleBg.svg);
      background-size: 100% 100%;
      font-size: 2.4rem;
      color: #53befe;
      span {
        letter-spacing: 0.2em;
      }
    }
    .two {
      width: 100%;
      height: 5%;
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 1.2rem;
      .two_1 {
        display: flex;
        align-items: center;
        margin: 0 0 0 1rem;
      }
    }
    .thr {
      width: 100%;
      height: 89%;
      .thr_1 {
        display: flex;
        width: 100%;
        height: 65%;
        .boxall_1 {
          width: 25%;
          height: 100%;
          .boxall_1_1 {
            width: 100%;
            height: 60%;
          }
          .boxall_1_2 {
            width: 100%;
            height: 40%;
          }
        }
        .boxall_2 {
          width: 50%;
          height: 100%;
        }
        .boxall_3 {
          width: 25%;
          height: 100%;
          .boxall_3_1 {
            width: 100%;
            height: 50%;
          }
          .boxall_3_2 {
            width: 100%;
            height: 50%;
          }
        }
      }
      .thr_2 {
        display: flex;
        width: 100%;
        height: 35%;
        .boxall_4 {
          width: 25%;
          height: 100%;
        }
        .boxall_5 {
          width: 35%;
          height: 100%;
        }
        .boxall_6 {
          width: 20%;
          height: 100%;
        }
        .boxall_7 {
          width: 20%;
          height: 100%;
        }
      }
      .boxall {
        padding: 1.5rem 1rem;
        .title {
          display: flex;
          justify-content: space-between;
          background-color: rgba($color: #18459d, $alpha: 0.3);
          padding: 0.4rem;
          font-size: 1.2rem;
          border-bottom: 0.3rem solid #18459d;
          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
          .titleCenter {
            margin: 0 2rem 0 0;
          }
        }
        .center {
          justify-content: center !important;
          align-items: center;
        }
        @-webkit-keyframes twinkling {
          /*透明度由0到1*/
          0% {
            border-color: #612bdf;
            box-shadow:
              0 0 10px rgba(97, 43, 223, 0.2),
              inset 0 0 10px rgba(97, 43, 223, 0.1),
              0 1px 0 rgb(97, 43, 223);
          }
          100% {
            border-color: rgb(56, 201, 226);
            box-shadow:
              0 0 25px rgba(56, 201, 226, 0.6),
              inset 0 0 15px rgba(56, 201, 226, 0.4),
              0 1px 0 rgb(56, 201, 226);
          }
        }
        .select {
          margin: 0.5rem 0;
          .select_1 {
            display: flex;
            align-items: center;
            margin: 0 0 0.5rem 0;
            .select_left {
              width: 5rem;
              margin: 0 0.2rem 0 0;
            }
          }
        }
        .person {
          width: 100%;
          height: 100%;
          display: flex;
          .person_left {
            height: 100%;
            width: 30%;
            padding: 0.5rem 1rem 0 0;
            .person_search {
              padding: 0.5rem;
              font-size: 1.2rem;
            }
            .person_search:hover {
              background-color: #1ab7d3;
              border-radius: 2rem;
            }
          }
          .person_right {
            width: 70%;
            height: 100%;
            .person_list {
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              height: 70%;
              .list_2 {
                height: 45%;
                width: 31.5%;
                background-color: rgba($color: #75f9fd, $alpha: 0.3);
                padding: 0.5rem;
                margin: 0.5rem 0.5rem 0 0;
                .list_title {
                  margin: 0.5rem 0;
                  font-size: 1.2rem;
                  color: #75f9fd;
                }
                .list_school {
                  font-size: 1rem;
                }
              }
              .list_2:nth-child(3n) {
                margin: 0.5rem 0 0 0;
              }
            }

            .total {
              width: 100%;
              height: 18%;
              display: flex;
              justify-content: center;
            }
          }
        }
        .list {
          height: 80%;
          width: 100%;
          .list_1 {
            background: url(/images/brain/title-bg.png);
            background-size: 100% 100%;
            height: 45%;
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            color: #ffffff;
            font-size: 1.2rem;
          }
          .list_2 {
            height: 45%;
            width: 31.5%;
            background-color: rgba($color: #75f9fd, $alpha: 0.3);
            padding: 0.5rem;
            margin: 0.5rem 0.5rem 0 0;
            .list_title {
              margin: 0.5rem 0;
              font-size: 1.2rem;
              color: #75f9fd;
            }
            .list_school {
              font-size: 1rem;
            }
          }
          .list_2:nth-child(3n) {
            margin: 0.5rem 0 0 0;
          }
          .list_3 {
            width: 100%;
            .list_title {
              margin: 0.5rem 0;
              font-size: 1.2rem;
              color: #75f9fd;
            }
            .list_person {
              font-size: 1rem;
            }
          }
        }
        .flex {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 100%;
          height: 66%;
        }
        .table {
          width: 100%;
          height: 88%;
          margin: 0.5rem 0;
          .table-head {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            color: #fff;
            font-size: 1.2rem;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 0;
            .label {
              text-align: center;
            }
          }
          .table-value {
            width: 100%;
            height: 70%;
            color: #fff;
            font-size: 1.2rem;
            .value {
              display: flex;
              justify-content: space-between;
              padding: 0.5rem 0;
              .table-colunm {
                width: 16.5%;
                text-align: center;
              }
            }
            .value:nth-child(2n) {
              background-color: rgba(255, 255, 255, 0.1);
            }
          }
          .total {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
          }
        }
        .total {
          width: 100%;
          height: 18%;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
  //select 选择器
  :deep(.el-select__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }
  :deep(.el-input__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }
  // 修改下拉框背景颜色
  :deep(.el-popper.is-light) {
    background: #0b3571 !important;
    border: 1px solid #33394d !important;
  }

  // 小三角颜色修改
  :deep(.el-popper.is-light .el-popper__arrow::before) {
    border: 1px solid #33394d !important;
    background: #0b3571 !important;
  }
  //下拉选项字体颜色修改
  :deep(.el-select-dropdown__item) {
    color: #6687b8 !important;
  }
  :deep(.el-select-dropdown__item.is-hovering) {
    background: #0b3571 !important;
  }
  :deep(.el-cascader-node:hover) {
    background: #4d5b87 !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    margin: 0 0.7vh !important;
  }
  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
  :deep(.el-select-dropdown__item:hover) {
    background: #4d5b87 !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    margin: 0 0.7vh !important;
  }
  :deep(.el-pagination.is-background .btn-prev:disabled) {
    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
    color: #ffffff !important;
  }
  :deep(.el-pagination.is-background .btn-next:disabled) {
    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
    color: #ffffff !important;
  }
  :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #4d5b87 !important;
    color: #ffffff !important;
  }
}
</style>