cxyy-web/src/views/brain/one.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">
            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
              <div class="title center">
                <div class="titleRight">产业链图谱</div>
              </div>
              <div class="image1">
                <div style="height: 100%">
                  <vue3-tree-org
                    :data="list_3"
                    center
                    :toolBar="toolBar"
                    :horizontal="horizontal"
                    :collapsable="collapsable"
                    :label-style="style"
                    :only-one-node="onlyOneNode"
                    :clone-node-drag="cloneNodeDrag"
                    :before-drag-end="beforeDragEnd"
                    @on-node-drag="nodeDragMove"
                    @on-node-drag-end="nodeDragEnd"
                    @on-contextmenu="onMenus"
                    @on-expand="onExpand"
                    @on-node-dblclick="onNodeDblclick"
                    @on-node-click="onNodeClick"
                  />
                </div>
              </div>
            </BorderBox13>
          </div>
          <div class="thr_2">
            <BorderBox13 class="boxall boxall_2" title="完整性">
              <div class="title center">
                <div class="titleRight">完整性</div>
              </div>
              <div class="round">
                <div class="round_1">
                  <div class="round_left">
                    <div class="title_1">国内有厂商环节</div>
                    <div class="title_2">225</div>
                  </div>
                  <div class="round_center">
                    <echarts1 :data="list_1"></echarts1>
                  </div>
                  <div class="round_right">占比：85.88%</div>
                </div>
                <div class="round_1">
                  <div class="round_left">
                    <div class="title_1">本地有厂商环节</div>
                    <div class="title_3">176</div>
                  </div>
                  <div class="round_center">
                    <echarts1 :data="list_2"></echarts1>
                  </div>
                  <div class="round_right">占比：63.74%</div>
                </div>
              </div>
            </BorderBox13>
            <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">
                <div class="titleRight">韧性</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list flex">
                <div class="list_5" v-for="(item, index) in list_5" :key="index">
                  <div class="titleList">{{ item.name || '暂无' }}</div>
                  <div class="num">{{ item.total || '暂无' }}</div>
                </div>
              </div>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_5" title="稳定性">
              <div class="title">
                <div class="titleRight">稳定性</div>
                <div class="titleLeft">更多</div>
              </div>
              <echarts2></echarts2>
            </BorderBox13>
            <BorderBox13 class="boxall boxall_6" title="可靠性">
              <div class="title">
                <div class="titleRight">可靠性</div>
                <div class="titleLeft">更多</div>
              </div>
              <div class="list">
                <div class="list_4" v-for="(item, index) in list_4" :key="index">
                  <BorderBox10 class="Box10">
                    <div class="titleList">{{ item.name || '暂无' }}</div>
                    <div class="num">{{ item.total1 || '暂无' }}</div>
                  </BorderBox10>
                  <BorderBox10 class="Box10">
                    <div class="titleList">总市值</div>
                    <div class="num">
                      {{ item.total2 || '暂无' }}
                      <span>亿元</span>
                    </div>
                  </BorderBox10>
                  <BorderBox10 class="Box10">
                    <div class="titleList">参与环节</div>
                    <div class="num">{{ item.total2 || '暂无' }}</div>
                  </BorderBox10>
                </div>
              </div>
            </BorderBox13>
          </div>
        </div>
      </div>
    </div>
  </myMain>
</template>

<script setup>
import { BorderBox13, BorderBox10 } from '@kjgl77/datav-vue3'
import myMain from '@/components/dataV/myMain.vue'
// 组件
import echarts1 from './one/echarts1.vue'
import echarts2 from './one/echarts2.vue'
import echarts3 from './one/echarts3.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: '国内有厂商环节', value: 176 },
  { name: '本地有厂商环节', value: 288 }
])
const list_2 = ref([
  { name: '国内有厂商环节', value: 176 },
  { name: '本地有厂商环节', value: 288 }
])
const horizontal = ref(true)
const collapsable = ref(true)
const onlyOneNode = ref(false)
const style = ref({
  color: '#ffffff'
})
const toolBar = ref({ scale: false, restore: false, expand: false, zoom: false, fullscreen: false })
const list_3 = ref({
  id: 1,
  label: '长春xxx科技有限公司',
  style: { color: '#fff', background: '#7B68EE' },
  children: [
    {
      id: 2,
      pid: 1,
      label: '产品研发部',
      style: { color: '#fff', background: '#7B68EE' },
      children: [
        { id: 6, pid: 2, label: '产品研发一部' },
        { id: 8, pid: 2, label: '产品研发二部' },
        { id: 10, pid: 2, label: '产品研发三部' }
      ]
    },
    {
      id: 3,
      pid: 1,
      label: '客服部',
      style: { color: '#fff', background: '#7B68EE' },
      children: [
        { id: 11, pid: 3, label: '客服一部' },
        { id: 12, pid: 3, label: '客服二部' }
      ]
    },
    {
      id: 4,
      pid: 1,
      label: '业务部',
      style: { color: '#fff', background: '#7B68EE' },
      children: [
        { id: 11, pid: 3, label: '业务一部' },
        { id: 12, pid: 3, label: '业务二部' }
      ]
    }
  ]
})
const list_4 = ref([
  { name: 'A股上市公司', total1: 88, total2: 17800.26, total3: '108/262' },
  { name: '科创板上市公司', total1: 10, total2: 1210.67, total3: '34/262' }
])
const list_5 = ref([
  { name: '专利', total: 14701 },
  { name: '产业化计划', total: 8 },
  { name: '创新平台', total: 2 },
  { name: '制定标准', total: 257 },
  { name: '检验检测平台', total: 571 },
  { name: '科技成果', total: 37 },
  { name: '认证认可平台', total: 11 },
  { name: '重点研发计划', total: 2 }
])
// 请求
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 {
      display: flex;
      width: 100%;
      height: 89%;
      .thr_1 {
        width: 50%;
        height: 100%;
        .boxall_1 {
          width: 100%;
          height: 100%;
        }
      }
      .thr_2 {
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        height: 100%;
        .boxall_2 {
          width: 50%;
          height: 35%;
        }
        .boxall_3 {
          width: 50%;
          height: 35%;
        }
        .boxall_4 {
          width: 50%;
          height: 35%;
        }
        .boxall_5 {
          width: 50%;
          height: 35%;
        }
        .boxall_6 {
          width: 100%;
          height: 30%;
        }
      }
      .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);
          }
        }
        .image1 {
          background: url(/images/brain/car.png);
          background-size: 100% 100%;
          width: 100%;
          height: 96%;
        }
        .round {
          margin: 0.5rem 0 0 0;
          padding: 0 0.5rem;
          .round_1 {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 4rem 0;
            .round_left {
              font-size: 1.5rem;
              .title_1 {
                margin: 0 0 0.5rem 0;
              }
              .title_2 {
                color: #75f9fd;
                font-weight: bold;
              }
              .title_3 {
                color: #2785f2;
                font-weight: bold;
              }
            }
            .round_center {
              position: absolute;
              top: -3.5rem;
              left: 0;
              height: 100%;
              width: 100%;
            }
            .round_right {
              font-size: 1.3rem;
            }
          }
        }
        .list {
          margin: 0.5rem 0 0 0;
          height: 80%;
          width: 100%;
          .list_4 {
            display: flex;
            justify-content: space-between;
            height: 47%;
            width: 96%;
            margin: 0.5rem 1rem;
            .Box10 {
              width: 30%;
              height: 100%;
              padding: 1rem;
              text-align: center;
              font-size: 1.4rem;
              .titleList {
                margin: 0 0 0.5rem 0;
              }
              .num {
                color: #54bcbd;
                span {
                  color: #ffffff;
                  font-size: 1rem;
                }
              }
            }
          }
          .list_5 {
            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;
          }
        }
        .flex {
          display: flex;
          flex-wrap: wrap;
          align-items: 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(.zm-tree-org) {
    background-color: transparent !important;
  }
}
</style>