Skip to content

G
GaoQuIncubator
Commit dfee25df authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

dp overview

parent e412721c
Hide whitespace changes
Inline Side-by-side
Showing with 1253 additions and 13 deletions
src/views/Screen/index.vue
View file @ dfee25df
...@@ -401,7 +401,8 @@ ...@@ -401,7 +401,8 @@
method: "get", method: "get",
}).then((res) => { }).then((res) => {
const list = res.body || []; const list = res.body || [];
var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"]; // var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
var colors = ["#00f0ff", "#00d1e6", "#0ce2a6", "#fdbe17", '#ff1fdd', '#ff3333', '#f8ff3a'];
var seriesFormat = Highchart.formatSeriesList(list, { var seriesFormat = Highchart.formatSeriesList(list, {
value: "num", value: "num",
colors: colors, colors: colors,
...@@ -421,6 +422,7 @@ ...@@ -421,6 +422,7 @@
floating: true, floating: true,
style: { style: {
color: "#00f6ff", color: "#00f6ff",
// textOutline: 'none' // 去掉文字轮廓
}, },
}, },
tooltip: { tooltip: {
...@@ -441,6 +443,7 @@ ...@@ -441,6 +443,7 @@
dataLabels: { dataLabels: {
textOutline: "none", // 禁用文本轮廓 textOutline: "none", // 禁用文本轮廓
enabled: true, enabled: true,
useHTML: true,
format: format:
'<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致 '<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致
// format: "<b>{point.name}</b>: {point.percentage:.1f} %", // format: "<b>{point.name}</b>: {point.percentage:.1f} %",
...@@ -1726,7 +1729,7 @@ ...@@ -1726,7 +1729,7 @@
font-family: SimHei; font-family: SimHei;
font-weight: 400; font-weight: 400;
font-size: 0.24rem; font-size: 0.24rem;
color: #ffffff; color: #fdbe17;
background-image: url("~@/assets/images/dpNew/title2.png"); background-image: url("~@/assets/images/dpNew/title2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
......
src/views/system/home/overview.vue
View file @ dfee25df
<template> <template>
<div class="app-container">
<div class="header">
<ul>
<li @click="changeNav(0)" :class="{ active: activeIndex === 0 }">
<div class="title">孵化器概况</div>
</li>
<li @click="changeNav(1)" :class="{ active: activeIndex === 1 }">
<div class="title">在孵企业</div>
</li>
<li @click="changeNav(2)" :class="{ active: activeIndex === 2 }">
<div class="title">毕业企业</div>
</li>
<li @click="changeNav(3)" :class="{ active: activeIndex === 3 }">
<div class="title">中介机构</div>
</li>
<li @click="changeNav(4)" :class="{ active: activeIndex === 4 }">
<div class="title">创业导师</div>
</li>
</ul>
</div>
</template> <div class="bodyer">
<ul class="panelsWrapper">
<script> <li class="overview tab_panel_0" v-if="activeIndex === 0">
export default { <h2>{{ data4panel0.incubatorName }}</h2>
<div class="contentWrapper">
} <div class="left">
</script> <div class="item">
<div class="_title prefixDiv">
<style> <span class="_left">总收入</span>
<span class="_right" @click="getMore4panel0">查看更多>></span>
</style> </div>
\ No newline at end of file <div class="body">
<div class="_left">
<ul>
<li>孵化器总收入：{{ data4panel0.totalRevenue }}万元</li>
<li>
综合服务收入：{{ data4panel0.serviceRevenue }}万元
</li>
<li>物业费收入：{{ data4panel0.propertyRevenue }}万元</li>
<li>房租费收入：{{ data4panel0.rentRevenue }}万元</li>
<li>投资收入：{{ data4panel0.investmentRevenue }}万元</li>
<li>政策性收入：{{ data4panel0.policyRevenue }}万元</li>
<li>其他：{{ data4panel0.otherRevenue }}万元</li>
</ul>
</div>
<div class="_right">
<div
ref="pieChart4panel0_1"
style="width: 300px; height: 300px"
class="charts pie"
></div>
</div>
</div>
</div>
<div class="item">
<div class="_title prefixDiv">
<span class="_left">使用面积</span>
</div>
<div class="body">
<div class="_left">
<ul>
<li>孵化器使用总面积：{{ data4panel0.totalArea }}㎡</li>
<li>
用于企业孵化的面积：{{ data4panel0.incubationArea }}㎡
</li>
<li>剩余孵化面积：{{ data4panel0.remainingArea }}㎡</li>
</ul>
</div>
<div class="_right">
<div
ref="pieChart4panel0_2"
style="width: 300px; height: 300px"
class="charts pie"
></div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item">
<div class="_title prefixDiv">
<span class="_left">简介</span>
</div>
<div class="body">
<div class="_top">
<ul>
<li>运营机构:{{ data4panel0.operatingAgency }}</li>
<li>联 系人:{{ data4panel0.contactPerson }}</li>
<li>联系电话:{{ data4panel0.contactPhone }}</li>
</ul>
</div>
<div class="_bottom">
<img
:src="`${baseAPI}file/${data4panel0.incubatorImage}`"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="tab_panel_1" v-if="activeIndex === 1||activeIndex === 2||activeIndex === 3">
<div class="_left">
<div class="_title">
<span>在孵企业</span>
<span>{{ totalCount4panel1 }}家</span>
</div>
<div class="_list">
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="searchQuery4panel1"
@blur="getData4panel1"
></el-input>
<ul>
<li v-for="item1 in tableData4panel1" :key="item1.companyId" :class="{active: currentSelectedCompanyId===item1.companyId}" @click="changeCompany(item1.companyId)">
{{ item1.companyName }}
</li>
</ul>
<el-pagination
@current-change="handleCurrentChange4panel1"
@size-change="handleSizeChange4panel1"
:current-page="currentPage4panel1"
:page-size="pageSize4panel1"
:total="totalCount4panel1"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, sizes"
/>
</div>
</div>
<div class="_right">
<h2>{{data4panel1.companyName}}</h2>
<div class="divider"></div>
<div class="_title prefixDiv">
<div class="_left">企业基础信息</div>
<div class="_right" @click="getMore4panel1">查看企业简介>></div>
</div>
<div class="_body">
<ul>
<li class="prefixPoint">
入驻时间: {{ data4panel1.entryDate }}
</li>
<li class="prefixPoint">
企业负责人: {{ data4panel1.principal }}
</li>
<li class="prefixPoint">
联系电话: {{ data4panel1.contactPhone }}
</li>
<li class="prefixPoint">
企业类型: {{ data4panel1.xxx }}
</li>
<li class="prefixPoint">
主要负责人创业特征: {{ data4panel1.xxx }}
</li>
<li class="prefixPoint">
创业导师:: {{ data4panel1.xxx }}
</li>
<li class="prefixPoint">
孵化状态: {{ data4panel1.incubationStatusName }}
</li>
<li class="prefixPoint">
企业级别: {{ data4panel1.companyLevelName }}
</li>
<li class="prefixPoint">
所属技术领域: {{ data4panel1.xxx }}
</li>
<li class="prefixPoint">
占用孵化场地面积: {{ data4panel1.occupiedArea }}
</li>
<li class="prefixPoint">
累计获得融资总额: {{ data4panel1.totalFunding }}
</li>
<li class="prefixPoint">
注册资金: {{ data4panel1.xxx }}
</li>
<li class="prefixPoint">
位置: {{ data4panel1.address }}
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">知识产权</div>
</div>
<div class="_body">
<ul>
<li class="prefixPoint">
发明专利数: {{ data4panel1.inventionPatentsNumber }}
</li>
<li class="prefixPoint">
实用新型数: {{ data4panel1.utilityModelsNumber }}
</li>
<li class="prefixPoint">
软件著作权数: {{ data4panel1.softwareCopyrightNumber }}
</li>
<li class="prefixPoint">
发明申请数: {{ data4panel1.inventionPatentsNumber }}
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">创业创新企业情况</div>
</div>
<div class="_body">
<ul>
<li v-for="(item, index) in data4panel1.entrepreneurshipInnovationEnterprises" class="prefixPoint" :key="index">
{{ item.name }}: {{ item.value }}
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">今年企业经营信息</div>
<div class="_right" @click="getMore4panel1_2">查看更多>></div>
</div>
<div class="_body">
<ul>
<li class="prefixPoint">
从业人员: {{ data4panel1.totalEmployees }}人
</li>
<li class="prefixPoint">
博士人数: {{ data4panel1.phdEmployees }}人
</li>
<li class="prefixPoint">
留学人数: {{ data4panel1.overseasEmployees }}人
</li>
<li class="prefixPoint">
净利润: {{ data4panel1.netProfit }}万元
</li>
<li class="prefixPoint">
上缴税费: {{ data4panel1.taxesPaid }}万元
</li>
<li class="prefixPoint">
研发投入: {{ data4panel1.researchInput }}万元
</li>
<li class="prefixPoint">
研发投入占比: {{ data4panel1.investmentProportion }}%
</li>
<li class="prefixPoint">
总收入: {{ data4panel1.grossIncome }}万元
</li>
</ul>
</div>
<!-- -->
<div class="_title prefixDiv">
<div class="_left">企业产品</div>
<div class="_right" @click="getMore4panel1_3">查看更多>></div>
</div>
<div class="_body">
<dl>
<dd v-for="(item,index) in data4panel1.companyProductList" :key="index">
<img
:src="`${baseAPI}file/${item.image}`"
alt=""
/>
<h3>{{ item.productName }}</h3>
<p v-html="item.description">
<!-- 内置NB-IoT物联网SIM卡，把数据传
输到晶合云平台或客户私有云平台， 实现数据 -->
</p>
</dd>
</dl>
</div>
</div>
</li>
<li class="tab_panel_4" v-if="activeIndex === 4">
<div class="_title">
<span>创业导师</span>
<el-input
placeholder="请输入姓名搜索"
prefix-icon="el-icon-search"
v-model="searchQuery4panel4"
style="width: 300px; margin-right: 10px;"
@blur="filterData4panel4"
></el-input>
</div>
<ul>
<li v-for="item in tableData4panel4" :key="item.id">
<img
:src="`${baseAPI}file/${item.photo}`"
alt=""
/>
<p>姓名：{{ item.mentorName }}</p>
<p>学历：{{ item.education }}</p>
<p>毕业学校：{{ item.graduationSchool }}</p>
<p>联系电话：{{ item.contactPhone }}</p>
<a @click="getMore4panel4(item)">查看简介&gt;</a>
</li>
</ul>
<el-pagination
style="text-align: center; margin-top: 20px;"
@current-change="handleCurrentChange4panel4"
@size-change="handleSizeChange4panel4"
:current-page="currentPage4panel4"
:page-size="pageSize4panel4"
:total="totalCount4panel4"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, sizes"
></el-pagination>
</li>
</ul>
</div>
<el-dialog
title="孵化器年度收入信息"
:visible.sync="dialogVisible4panel0"
width="1100px"
>
<el-input
placeholder="请输入年度搜索"
prefix-icon="el-icon-search"
v-model="searchQuery4panel0"
style="width: 300px;margin-bottom: 10px;"
@blur="filterData4panel0"
></el-input>
<el-table :data="tableData4panel0" style="width: 100%">
<el-table-column
prop="year"
label="年度"
width="50"
></el-table-column>
<el-table-column
prop="totalRevenue"
label="孵化器总收入（万元）"
></el-table-column>
<el-table-column
prop="serviceRevenue"
label="综合服务收入（万元）"
></el-table-column>
<el-table-column
prop="rentRevenue"
label="房租收入（万元）"
></el-table-column>
<el-table-column
prop="propertyRevenue"
label="物业收入（万元）"
></el-table-column>
<el-table-column
prop="investmentRevenue"
label="投资收入（万元）"
></el-table-column>
<el-table-column
prop="policyRevenue"
label="政策性收入（万元）"
></el-table-column>
<el-table-column
prop="otherRevenue"
label="其他收入（万元）"
></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange4panel0"
@size-change="handleSizeChange4panel0"
:current-page="currentPage4panel0"
:page-size="pageSize4panel0"
:total="totalCount4panel0"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, sizes"
></el-pagination>
</el-dialog>
<el-dialog
title="企业经营信息"
:visible.sync="dialogVisible4panel1_2"
width="1100px"
>
<el-input
placeholder="请输入年度搜索"
prefix-icon="el-icon-search"
v-model="searchQuery4panel1_2"
style="width: 300px;margin-bottom: 10px;"
@blur="filterData4panel1_2"
></el-input>
<el-table :data="tableData4panel1_2" style="width: 100%">
<el-table-column
prop="year"
label="年度"
width="50"
></el-table-column>
<el-table-column
prop="totalEmployees"
label="从业人数"
></el-table-column>
<el-table-column
prop="phdEmployees"
label="博士从业人数"
></el-table-column>
<el-table-column
prop="overseasEmployees"
label="留学人数"
></el-table-column>
<el-table-column
prop="netProfit"
label="净利润(万元)"
></el-table-column>
<el-table-column
prop="taxesPaid"
label="上缴税费(万元)"
></el-table-column>
<el-table-column
prop="researchInput"
label="研发投入(万元)"
></el-table-column>
<el-table-column
prop="investmentProportion"
label="研发投入占比"
></el-table-column>
<el-table-column
prop="grossIncome"
label="总收入(万元)"
></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange4panel1_2"
@size-change="handleSizeChange4panel1_2"
:current-page="currentPage4panel1_2"
:page-size="pageSize4panel1_2"
:total="totalCount4panel1_2"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, sizes"
></el-pagination>
</el-dialog>
<el-dialog
title="企业产品信息"
:visible.sync="dialogVisible4panel1_3"
width="1100px"
>
<el-input
placeholder="请输入产品名称"
prefix-icon="el-icon-search"
v-model="searchQuery4panel1_3"
style="width: 300px;margin-bottom: 10px;"
@blur="filterData4panel1_3"
></el-input>
<el-table :data="tableData4panel1_3" style="width: 100%">
<el-table-column
prop="productName"
label="产品名称"
align="center"
></el-table-column>
<el-table-column
prop="totalEmployees"
label="图片"
width="120"
align="center"
>
<template slot-scope="scope">
<img :src="`${baseAPI}file/${scope.row.image}`" alt="Image" style="width: 80px; height: auto;" />
</template>
</el-table-column>
<el-table-column
prop="description"
label="简介"
align="center"
>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange4panel1_3"
@size-change="handleSizeChange4panel1_3"
:current-page="currentPage4panel1_3"
:page-size="pageSize4panel1_3"
:total="totalCount4panel1_3"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next, sizes"
></el-pagination>
</el-dialog>
<!-- penel -->
<el-dialog
title="简介信息"
:visible.sync="dialogVisible4panel4"
>
<div v-html="introduction4panel4"></div>
</el-dialog>
<el-dialog
title="企业简介"
:visible.sync="dialogVisible4panel1"
>
<div v-html="data4panel1.introduction"></div>
</el-dialog>
</div>
</template>
<script>
var baseAPI =
process.env.NODE_ENV === "development"
? process.env.VUE_APP_LOCAL_API + "/"
: (VUE_APP_API.ServiceURL || process.env.VUE_APP_LOCAL_API) + "/";
import overviewApi from "@/api/system/overview.js";
import * as echarts from "echarts";
export default {
name: "Overview",
components: {},
data() {
return {
// 公共用
baseAPI: baseAPI,
incubatorId: "",
// 顶部切换菜单
activeIndex: 0,
// panel0 孵化器概况
data4panel0: {},
totalCount4panel0: 0, // 总条目数
currentPage4panel0: 0, // 当前页码
pageSize4panel0: 10, // 每页显示的条目数量
dialogVisible4panel0: false,
searchQuery4panel0: '',
tableData4panel0: [],
// panel123 企业信息
data4panel1: {},
totalCount4panel1: 0, // 总条目数
currentPage4panel1: 0, // 当前页码
pageSize4panel1: 10, // 每页显示的条目数量
searchQuery4panel1: '',
tableData4panel1: [],
// panel_1 企业简介 弹窗
dialogVisible4panel1: false,
introduction4panel1: '',
// panel_1 年度收入信息 弹窗
currentPage4panel1_2: 0, // 当前页码
pageSize4panel1_2: 10, // 每页显示的条目数量
dialogVisible4panel1_2: false,
searchQuery4panel1_2: '',
tableData4panel1_2: [],
totalCount4panel1_2: 0, // 总条目数
// panel_1 产品信息 弹窗
currentSelectedCompanyId: '',
currentPage4panel1_3: 0, // 当前页码
pageSize4panel1_3: 10, // 每页显示的条目数量
dialogVisible4panel1_3: false,
searchQuery4panel1_3: '',
tableData4panel1_3: [],
totalCount4panel1_3: 0,
// panel4 创业导师
totalCount4panel4: 0, // 总条目数
currentPage4panel4: 0, // 当前页码
pageSize4panel4: 10, // 每页显示的条目数量
dialogVisible4panel4: false,
searchQuery4panel4: '',
tableData4panel4: [],
introduction4panel4: '',
};
},
computed: {},
mounted() {
this.incubatorId = this.$route.query.id;
// this.getData4panel0();
// this.getData4panel4();
this.getData4panel0()
},
methods: {
changeNav(index) {
this.activeIndex = ~~index;
if(~~this.activeIndex === 1 || ~~this.activeIndex === 2 || ~~this.activeIndex === 3){
this.getData4panel1()
}else if(~~this.activeIndex === 0){
this.getData4panel0()
}else if(~~this.activeIndex === 4){
this.getData4panel4()
}
},
/**
* getData4enterprise
* panel 1,2,3 企业信息
*/
filterData4panel1() {
this.currentPage4panel1 = 1; // 重置当前分页
this.getData4panel1();
},
getMore4panel1(item){
this.dialogVisible4panel1 = true
this.introduction4panel1 = item.introduction
},
handleCurrentChange4panel1(newPage) {
// 切换分页
this.currentPage4panel1 = newPage;
this.getData4panel1()
},
handleSizeChange4panel1(newSize){
this.pageSize4panel1 = newSize;
this.getData4panel4()
},
getData4panel1() { // 获取panel2，3，4企业列表
let companyType = ''
if(~~this.activeIndex === 1){
companyType = '1'
}else if(~~this.activeIndex === 2){
companyType = '2'
}else if(~~this.activeIndex === 3){
companyType = '3'
}
overviewApi
.getData4enterprise({
page: this.currentPage4panel1 > 0 ? this.currentPage4panel1-1 : this.currentPage4panel1,
size: this.pageSize4panel1,
incubatorId: this.incubatorId,
companyType,
vague: {"companyName": this.searchQuery4panel1}
})
.then((res) => {
this.tableData4panel1 = res.body.records || [];
this.totalCount4panel1 = res.body.total
if(this.tableData4panel1.length){
this.getData4panel1_1(this.tableData4panel1[0].companyId)
this.currentSelectedCompanyId = this.tableData4panel1[0].companyId
}
});
},
getData4panel1_1(companyId) { // 获取panel2，3，4企业详情
overviewApi
.getData4enterpriseDetail({
companyId: companyId+''
})
.then((res) => {
this.data4panel1 = res.body || {};
});
},
changeCompany(companyId){
this.currentSelectedCompanyId = companyId
this.getData4panel1_1(companyId)
},
getMore4panel1(){// 获取企业简介
this.dialogVisible4panel1 = true
},
filterData4panel1_2() {
this.currentPage4panel1_2 = 1; // 重置当前分页
this.getDialogData4panel1_2();
},
getMore4panel1_2(){ // 获取更多年度收入信息
this.dialogVisible4panel1_2 = true
this.getDialogData4panel1_2()
},
getDialogData4panel1_2(fn) { // 获取panel1 经营信息 弹窗列表信息
overviewApi
.getDialogData4panel1_2({
page: this.currentPage4panel1_2 > 0 ? this.currentPage4panel1_2-1 : this.currentPage4panel1_2,
size: this.pageSize4panel1_2,
exact:{
companyId: this.currentSelectedCompanyId,
},
vague:{
year: this.searchQuery4panel1_2
}
})
.then((res) => {
this.tableData4panel1_2 = res.body.list || [];
});
},
handleCurrentChange4panel1_2(newPage) {
// 切换分页
this.currentPage4panel1_2 = newPage;
// 这里可以添加代码来加载新页的数据
console.log(`当前页: ${newPage}`);
this.getDialogData4panel1_2()
},
handleSizeChange4panel1_2(newSize){
this.pageSize4panel1_2 = newSize;
this.getDialogData4panel1_2()
},
getMore4panel1_3(){ // 获取更多产品信息
this.dialogVisible4panel1_3 = true
this.getDialogData4panel1_3()
},
getDialogData4panel1_3() { // 获取panel1 产品弹窗列表信息
overviewApi
.getDialogData4panel1_3({
page: this.currentPage4panel1_3 > 0 ? this.currentPage4panel1_3-1 : this.currentPage4panel1_3,
size: this.pageSize4panel1_3,
exact:{
companyId: this.currentSelectedCompanyId,
},
vague: {"productName": this.searchQuery4panel1_3}
})
.then((res) => {
this.tableData4panel1_3 = res.body.list || [];
this.totalCount4panel1_3 = res.body.total
});
},
filterData4panel1_3() {
this.currentPage4panel1_3 = 1; // 重置当前分页
this.getDialogData4panel1_3();
},
handleCurrentChange4panel1_3(newPage) {
// 切换分页
this.currentPage4panel1_3 = newPage;
// 这里可以添加代码来加载新页的数据
console.log(`当前页: ${newPage}`);
this.getDialogData4panel1_3()
},
handleSizeChange4panel1_3(newSize){
this.pageSize4panel1_3 = newSize;
this.getDialogData4panel1_3()
},
/**
* panel0
*/
filterData4panel0() {
this.currentPage4panel0 = 1; // 重置当前分页
this.getDialogData4panel0();
},
getMore4panel0(){
this.dialogVisible4panel0 = true
this.getDialogData4panel0()
},
handleCurrentChange4panel0(newPage) {
// 切换分页
this.currentPage4panel0 = newPage;
// 这里可以添加代码来加载新页的数据
console.log(`当前页: ${newPage}`);
this.getDialogData4panel0()
},
handleSizeChange4panel0(newSize){
this.pageSize4panel0 = newSize;
this.getDialogData4panel0()
},
initChart4panel0_1() {
const chartDom = this.$refs.pieChart4panel0_1;
const myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: "item",
},
series: [
{
name: "孵化器总收入",
type: "pie",
radius: "50%",
data: this.data4panel0.revenueChartData || [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myChart.setOption(option);
},
initChart4panel0_2() {
const chartDom = this.$refs.pieChart4panel0_2;
const myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: "item",
},
series: [
{
name: "孵化器使用总面积",
type: "pie",
radius: "50%",
data: this.data4panel0.areaChartData || [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myChart.setOption(option);
},
getDialogData4panel0(fn) { // 获取panel0弹窗列表信息
overviewApi
.getDialogData4panel0({
page: this.currentPage4panel0 > 0 ? this.currentPage4panel0-1 : this.currentPage4panel0,
size: this.pageSize4panel0,
incubatorId: this.incubatorId,
vague:{
year: this.searchQuery4panel0
}
})
.then((res) => {
console.log(res, "getData4panel04tech");
this.tableData4panel0 = res.body.list || [];
this.totalCount4panel0 = res.body.total
});
},
getData4panel0(fn) { // 获取panel0页面统计信息
overviewApi
.getData4panel0({
incubatorId: this.incubatorId,
})
.then((res) => {
console.log(res, "getData4panel04tech");
this.data4panel0 = res.body;
this.initChart4panel0_1();
this.initChart4panel0_2()
});
},
/**
* panel4
* @param {*} fn
*/
filterData4panel4() {
this.currentPage4panel4 = 1; // 重置当前分页
this.getData4panel4();
},
getMore4panel4(item){
this.dialogVisible4panel4 = true
this.introduction4panel4 = item.introduction
},
handleCurrentChange4panel4(newPage) {
// 切换分页
this.currentPage4panel4 = newPage;
this.getData4panel4()
},
handleSizeChange4panel4(newSize){
this.pageSize4panel4 = newSize;
this.getData4panel4()
},
getData4panel4(fn) { // 获取panel4导师信息
overviewApi
.getData4panel4({
page: this.currentPage4panel4 > 0 ? this.currentPage4panel4-1 : this.currentPage4panel4,
size: this.pageSize4panel4,
incubatorId: this.incubatorId,
vague: {"mentorName":this.searchQuery4panel4}
})
.then((res) => {
this.tableData4panel4 = res.body.list || [];
this.totalCount4panel4 = res.body.total
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
padding: 20px;
background-color: #fff;
font-family: Microsoft YaHei;
}
.page-footer {
display: none !important;
}
.header {
// 菜单标题头
background: #f5f7fa;
ul {
display: flex;
justify-content: start;
border: 1px solid #d8dce5;
background-color: #fff;
li {
width: 238px;
height: 48px;
display: flex;
align-items: center;
list-style: none;
justify-content: center;
cursor: pointer;
&:active,
&.active {
background: #1890ff;
.title {
color: #ffffff;
}
}
.title {
font-size: 16px;
color: #303133;
font-weight: bold;
}
}
}
}
.bodyer {
// panels最外层容器
background-color: #fff;
}
.panelsWrapper {
// panels父容器
background: #f5f6fb;
display: flex;
flex-wrap: wrap;
& > li {
width: 100%;
height: 442px;
background: #ffffff;
position: relative;
}
}
/**公共类 */
.divider {
width: 100%;
height: 1px;
border: 1px dashed #dddee1;
}
.prefixDiv {
position: relative;
&:before {
width: 4px;
height: 16px;
background: #1890ff;
position: absolute;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
left: 16px;
content: "";
}
}
.prefixPoint {
position: relative;
&:before {
content: "";
width: 6px;
height: 6px;
background: #1890ff;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
}
}
/** 第五个面板 */
.tab_panel_4 {
._title {
font-size: 16px;
color: #1890ff;
width: 100%;
height: 50px;
background: #e4f2ff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-left: 26px;
&:before {
width: 4px;
height: 16px;
background: #1890ff;
position: absolute;
// top: 19px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
left: 16px;
content: "";
}
}
ul {
display: flex;
flex-wrap: wrap;
margin-left: 68px;
// margin-top: 20px;
& > li {
position: relative;
width: 260px;
height: 334px;
background: #fff;
border: 1px solid #dddee1;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 40px;
margin-top: 20px;
img {
width: 200px;
height: 200px;
margin: 0 auto;
}
a {
position: absolute;
right: 11px;
bottom: 96px;
font-size: 15px;
color: #1890ff;
}
p {
font-size: 15px;
color: #606266;
padding-left: 18px;
text-align: left;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
&:before {
content: "";
width: 6px;
height: 6px;
background: #1890ff;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
}
}
}
}
}
.tab_panel_1 {
display: flex;
padding: 10px;
& > ._left {
flex: 1;
margin-right: 20px;
height: 798px !important;
border: 1px solid #dddee1;
padding: 20px;
._title {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
span {
&:first-child {
font-size: 19px;
color: #303133;
}
&:last-child {
font-size: 19px;
color: #42b983;
}
}
}
li {
font-size: 15px;
color: #666666;
width: 100%;
height: 38px;
line-height: 38px;
text-align: left;
padding-left: 10px;
cursor: pointer;
&.active,
&:hover {
background: #1890ff;
color: #fff;
}
}
}
& > ._right {
flex: 4;
h2 {
font-weight: 400;
font-size: 27px;
color: #42b983;
text-align: center;
margin-top: 20px;
margin-block: 20px;
}
._title {
width: 100%;
height: 36px;
background: #e4f2ff;
font-size: 16px;
color: #1890ff;
margin-top: 10px;
margin-bottom: 6px;
._left {
float: left;
margin-left: 30px;
margin-top: 6px;
}
._right {
float: right;
margin-right: 30px;
margin-top: 6px;
cursor: pointer;
}
}
ul {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
li {
width: 290px;
font-size: 15px;
color: #606266;
padding: 10px;
padding-left: 20px;
}
}
dl {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
dd {
width: 250px;
height: 274px;
font-size: 15px;
color: #606266;
/* padding: 10px; */
margin-left: 20px;
margin-right: 20px;
border: 1px solid #dddee1;
margin-top: 10px;
img {
width: 250px;
height: 150px;
}
h3 {
font-size: 15px;
color: #606266;
padding-left: 15px;
}
p {
font-size: 13px;
color: #969aa3;
padding-left: 15px;
line-height: 20px;
}
}
}
}
}
.tab_panel_0 {
h2 {
font-weight: 400;
font-size: 27px;
color: #42b983;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
}
._title {
color: #1890ff;
height: 48px;
background: #e4f2ff;
font-weight: 400;
font-size: 16px;
line-height: 48px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
padding-left: 26px;
padding-right: 20px;
&>._right{
cursor: pointer;
}
}
.contentWrapper {
border-top: 1px dashed #dddee1;
display: flex;
padding: 16px;
& > div {
flex: 1;
}
.left {
border-right: 1px dashed #dddee1;
padding-left: 20px;
padding-right: 20px;
.body {
display: flex;
._left,
._right {
flex: 1;
}
}
li {
font-size: 15px;
color: #606266;
line-height: 26px;
padding: 4px 42px;
}
}
.right {
padding-left: 20px;
padding-right: 20px;
.body {
display: flex;
flex-direction: column;
}
._top {
li {
font-size: 15px;
color: #606266;
line-height: 26px;
padding: 4px 42px;
}
}
._bottom {
padding-left: 40px;
img {
width: 418px;
height: 272px;
}
}
}
}
}
::v-deep .el-dialog__body .el-table th.el-table__cell{
background-color: #f9ffec;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment