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

<template>
  <myMain>
    <div class="brainThr">
      <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" clearable :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" :teleported="false" />
            </div>
          </div>
          <div class="two_1">
            <div class="two_left">当前产业：</div>
            <div class="two_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="two_1">
            <div class="two_left">产业链：</div>
            <div class="two_right">
              <el-select v-model="form.chain" clearable placeholder="请选择" 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">
            <BorderBox13 class="boxall boxall_1" title="产业分布">
              <div class="title">
                <div class="titleRight">产业分布</div>
                <div class="titleLeft">智能网联汽车</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_2" title="区域创新资源">
              <div class="title center">
                <div class="titleRight">区域创新资源</div>
              </div>
              <div class="circles">
                <div class="circle" v-for="(item, index) in circleList" :key="index">
                  {{ item }}
                </div>
              </div>
            </BorderBox13>
          </div>
          <div class="thr_2">
            <BorderBox13 class="boxall boxall_3" title="国家重点研发项目">
              <div class="title center">
                <div class="titleRight">国家重点研发项目</div>
              </div>
              <echarts3></echarts3>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_4" title="全国产业化项目">
              <div class="title center">
                <div class="titleRight">全国产业化项目</div>
              </div>
              <echarts7></echarts7>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_5" title="全国科技成果">
              <div class="title center">
                <div class="titleRight">全国科技成果</div>
              </div>
              <echarts2></echarts2>
            </BorderBox13>
          </div>
          <div class="thr_3">
            <BorderBox13 class="boxall boxall_6" title="区域承担研发项目">
              <div class="title">
                <div class="titleRight">区域承担研发项目</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list" v-for="(item, index) in list_1" :key="index">
                <div class="list_1">
                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
                  <div class="list_right">{{ item.time || '暂无' }}</div>
                </div>
                <div class="list_2">
                  <span>{{ item.area || '暂无' }}</span>
                </div>
              </div>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_7" title="区域产业化项目">
              <div class="title">
                <div class="titleRight">区域产业化项目</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list" v-for="(item, index) in list_2" :key="index">
                <div class="list_1">
                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
                  <div class="list_right">{{ item.time || '暂无' }}</div>
                </div>
                <div class="list_2">
                  <span>{{ item.person || '暂无' }}</span>
                  <span>{{ item.area || '暂无' }}</span>
                </div>
              </div>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_8" title="区域科技成果">
              <div class="title">
                <div class="titleRight">区域科技成果</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list" v-for="(item, index) in list_3" :key="index">
                <div class="list_1">
                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
                  <div class="list_right">{{ item.time || '暂无' }}</div>
                </div>
                <div class="list_3" v-if="item.brief">
                  <span>{{ item.brief || '暂无' }}</span>
                </div>
              </div>
            </BorderBox13>
          </div>
          <div class="thr_4">
            <BorderBox13 class="boxall boxall_9" title="区域项目研发承担单位">
              <div class="title center">
                <div class="titleRight">区域项目研发承担单位</div>
              </div>
              <div class="select">
                <div class="select_1">
                  <div class="select_left">TOP:</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>
              <echarts4></echarts4>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_10" title="区域产业化项目承担单位">
              <div class="title center">
                <div class="titleRight">区域产业化项目承担单位</div>
              </div>
              <echarts5></echarts5>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_11" title="区域成果完成单位">
              <div class="title center">
                <div class="titleRight">区域成果完成单位</div>
              </div>
              <echarts6></echarts6>
            </BorderBox13>
          </div>
          <div class="thr_5">
            <BorderBox13 class="boxall boxall_12" title="重点培育企业">
              <div class="title">
                <div class="titleRight">重点培育企业</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list" v-for="(item, index) in list_4" :key="index">
                <div class="list_4">
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <div class="list_1">
                  <span>上市板块：{{ item.plate || '暂无' }}</span>
                  <span>市值：{{ item.money || '暂无' }}</span>
                </div>
                <div class="list_5">
                  <span>重大研发项目数：{{ item.total1 || '暂无' }}</span>
                  <span>产业化项目数：{{ item.total2 || '暂无' }}</span>
                  <span>成果数：{{ item.total3 || '暂无' }}</span>
                  <span>科技平台数：{{ item.total4 || '暂无' }}</span>
                  <span>制定标准数：{{ item.total5 || '暂无' }}</span>
                </div>
              </div>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_13" title="科技舆情">
              <div class="title">
                <div class="titleRight">科技舆情</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list" v-for="(item, index) in list_5" :key="index">
                <div class="list_4 textOne">
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <div class="list_3" v-if="item.person">
                  <span>{{ item.person || '暂无' }}</span>
                </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 './thr/echarts1.vue'
import echarts2 from './thr/echarts2.vue'
import echarts3 from './thr/echarts3.vue'
import echarts4 from './thr/echarts4.vue'
import echarts5 from './thr/echarts5.vue'
import echarts6 from './thr/echarts6.vue'
import echarts7 from './thr/echarts7.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 cityList = ref([])
const industryList = ref([{ label: '智能网联汽车', value: '0' }])
const chainList = ref([{ label: '新能源汽车', value: '0' }])
// 区域承担研发项目
const list_1 = ref([
  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' }
])
// 区域产业化项目
const list_2 = ref([
  { name: '基于压膜芯片的陶瓷电容式车…', person: '陈石煤', time: '2024', area: '吉林大学' },
  { name: '基于压膜芯片的陶瓷电容式车…', person: '陈石煤', time: '2024', area: '吉林大学' }
])
// 区域科技成果
const list_3 = ref([
  {
    name: '磷酸铁锂动力电池制造及其…',
    brief: '长春中聚佳华电池科技有限公司,长春交通大学,教育部,比亚迪汽车工业有限公司,江苏乐能电池股份有限公司丁建民,何雨石,尹韶文,廖小珍,张子峰,杨军沈佳妮,贺益君,赵政贼,马紫峰',
    time: '2024',
    area: '吉林大学'
  },
  {
    name: '磷酸铁锂动力电池制造及其…',
    time: '2024',
    area: '吉林大学'
  }
])
// 区域产业化项目
const list_4 = ref([
  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' },
  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' },
  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' }
])
// 科技舆情
const list_5 = ref([
  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' }
])
// 区域创新资源
const circleList = ref(['专利', '科技', '创新', '技术设备', '技术人才', '科研机构', '创新资源'])
// 请求
onMounted(async () => {
  getCity().then((response) => {
    cityList.value = response.address
  })
})
// 查看
const toView = (item) => {
  router.push(item.route)
}
</script>
<style scoped lang="scss">
.brainThr {
  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: 35%;
    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;
      // margin: 0.8rem 0 0 0;
      color: #ffffff;
      font-size: 1.2rem;
      .two_1 {
        display: flex;
        align-items: center;
        margin: 0 0 0 1rem;
      }
    }
    .thr {
      display: flex;
      width: 100%;
      height: 89%;
      .thr_1 {
        width: 24%;
        height: 100%;
        .boxall_1 {
          width: 100%;
          height: 60%;
        }
        .boxall_2 {
          width: 100%;
          height: 40%;
        }
      }
      .thr_2 {
        width: 20%;
        height: 100%;
        .boxall_3 {
          width: 100%;
          height: 40%;
        }
        .boxall_4 {
          width: 100%;
          height: 30%;
        }
        .boxall_5 {
          width: 100%;
          height: 30%;
        }
      }
      .thr_3 {
        width: 16%;
        height: 100%;
        .boxall_6 {
          width: 100%;
          height: 40%;
        }
        .boxall_7 {
          width: 100%;
          height: 30%;
        }
        .boxall_8 {
          width: 100%;
          height: 30%;
        }
      }
      .thr_4 {
        width: 20%;
        height: 100%;
        .boxall_9 {
          width: 100%;
          height: 40%;
        }
        .boxall_10 {
          width: 100%;
          height: 30%;
        }
        .boxall_11 {
          width: 100%;
          height: 30%;
        }
      }
      .thr_5 {
        width: 20%;
        height: 100%;
        .boxall_12 {
          width: 100%;
          height: 60%;
        }
        .boxall_13 {
          width: 100%;
          height: 40%;
        }
      }
      .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秒钟的开始结束都慢的无限次动画*/
        }
        .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;
            }
          }
        }
        .circles {
          position: relative;
          margin: 3.5rem 0 0 0;
        }

        .circle {
          position: absolute;
          width: 5rem;
          height: 5rem;
          line-height: 5rem;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          box-shadow:
            0 0 0.2rem #fff,
            /* 主边框发光 */ 0 0 0.2rem #fff inset,
            /* 内发光 */ 0 0.1rem 0.3rem #fff; /* 侧发光 */
        }

        .circle:nth-child(1) {
          top: 4rem;
          left: 17rem;
          background-color: #b886f8;
        }

        .circle:nth-child(2) {
          top: 8rem;
          left: 14rem;
          background-color: #4095e5;
        }

        .circle:nth-child(3) {
          top: -1rem;
          left: 15rem;
          background-color: #f4ce98;
        }

        .circle:nth-child(4) {
          top: 3rem;
          left: 12rem;
          background-color: #7728f5;
        }

        .circle:nth-child(5) {
          top: 7rem;
          left: 9rem;
          background-color: #b4fdff;
        }

        .circle:nth-child(6) {
          top: 2rem;
          left: 7rem;
          background-color: #8692c5;
        }
        .circle:nth-child(7) {
          top: -2rem;
          left: 10rem;
          background-color: #560c9c;
        }
        .list {
          margin: 0.5rem 0 0 0;
          padding: 0 0.5rem;
          width: 100%;
          .list_1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .list_left {
              width: 80%;
              font-size: 1.2rem;
              color: #75f9fd;
            }
            .list_right {
              text-align: center;
              padding: 0.4rem;
              width: 20%;
              background-color: #54bcbd;
              border-radius: 0.2rem;
            }
          }
          .list_2 {
            margin: 0.8rem 0 0 0;
            span {
              padding: 0.2rem 0.5rem;
              border-radius: 0.2rem;
              margin: 0 0.5rem 0 0;
              background-color: rgba($color: #ffffff, $alpha: 0.1);
            }
          }
          .list_4 {
            margin: 0 0 0.5rem 0;
            font-size: 1.2rem;
            color: #75f9fd;
          }
          .list_5 {
            display: flex;
            flex-wrap: wrap;
            span {
              padding: 0.2rem 0.5rem;
              border-radius: 0.2rem;
              margin: 0.4rem 0.5rem 0.2rem 0;
              color: #ebc128;
              background-color: rgba($color: #ffffff, $alpha: 0.1);
            }
          }
        }
      }
    }
  }

  //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;
  }
}
</style>