<el-dialog :visible.sync="dialogVisible" width="46rem" class="animate__zoomIn">
<div class="dialog">
<div class="close" @click="dialogVisible = false">
<img class="close-img" src="../../assets/images/large/gb.png" alt />
</div>
<div class="dialog-title">中国节能环保集团有限公司</div>
<div>
<swiper ref="mySwiper" class="swiper" :options="swiperOption">
<swiper-slide :key="index" v-for="(item, index) in swiperList">
<div class="banner">
<img :src="item.img" alt />
</div>
</swiper-slide>
</swiper>
</div>
<div class="dialog-content">
<el-row>
<el-col v-for="(t,i) in companyDetail" :key="i" :span="i == 0 ? 24 : 8">
<span>{
{t.label + ' : ' }}</span>
<span style="color:RGBA(255, 255, 255, 0.9);margin-left:5px">{
{t.value}}</span>
</el-col>
</el-row>
</div>
</div>
</el-dialog>Full code:
<template>
<div class="container">
<div class="header">
<div class="top">
<Date />
</div>
<div class="sec_top">
<div class="top-left">
<img src="../../assets/images/large/qjdc.png" alt />
</div>
<div class="se_top">
<div
class="nav"
v-for="(item, index) in navTab"
:key="index"
:class="{ tabactive: activeTab == index }"
@click="changeaTb(index)"
>
<div>{
{ item }}</div>
</div>
</div>
<div class="top-right">
<img src="../../assets/images/large/qyhx.png" alt />
</div>
<div class="top-right-back">
<a
href="http://localhost/#/publish/74?token=fSsdCh09Y2A%2BIUl%2Bxuf6tw%3D%3D"
target="_self"
>
<img src="../../assets/images/large/back_1.png" alt />
</a>
</div>
</div>
</div>
<div class="content">
<!-- <div v-if="!isShow" class="model" style="width: 13rem;
height: 100%;
position: relative;">-->
<div class="left" v-if="isShow">
<div style="margin-top: -0.625rem">
<div class="sec-img">
<img src="../../assets/images/large/zdxm.png" alt style="width:12.75rem" />
</div>
</div>
<div class="prototal">
<img src="../../assets/images/large/ptotal.png" alt />
<div>
<div class="title">项目总数</div>
<div class="tnum">
<countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
</div>
</div>
<div>
<div class="title">项目总投资额</div>
<div class="num">
<span>
<countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo>
</span>
<span class="unit">亿元</span>
</div>
</div>
<div>
<div class="title">累计到位投资</div>
<div class="num">
<span>
<countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo>
</span>
<span class="unit">亿元</span>
</div>
</div>
</div>
<chart-view
style="height: 2.25rem; width: 12rem"
:chart-option="barOptions"
:auto-resize="true"
height="100%"
></chart-view>
<div class="sbjd">
<div class="sbshow" v-for="(item, index) in sjlist" :key="index">
<img :src="item.img" alt />
<div style="margin-left: 0.125rem">
<div class="title">{
{ item.name }}</div>
<div class="num">
<countTo
:startVal="0"
:endVal="item.num"
:duration="3000"
:style="{ color: item.color }"
></countTo>
</div>
</div>
</div>
</div>
<div>
<div class="sec-img">
<img src="../../assets/images/large/cyfz.jpg" alt style="height: 0.875rem;" />
</div>
</div>
<div>
<div class="showBusiness">
<img src="../../assets/images/large/zdcyicon.png" alt />
<span>主导产业一总数</span>
<countTo class="cy1" :startVal="0" :endVal="1403" :duration="3000" separator></countTo>
<span>主导产业二总数</span>
<countTo class="cy2" :startVal="0" :endVal="2303" :duration="3000" separator></countTo>
</div>
<chart-view
style="height: 4.5rem; width: 11rem"
:chart-option="chartOpt2"
:auto-resize="true"
height="100%"
ref="lineCharts"
></chart-view>
<!-- <div id="line" style="height: 4.5rem; width: 11rem" ref="lines"></div> -->
</div>
<div class="sec-titleImg" style="margin-left: 0.875rem">
<img src="../../assets/images/large/cyfz2.png" alt />
</div>
<div class="sec-img">
<img src="../../assets/images/large/business.png" alt />
</div>
<!-- <div
id="barwater"
style="height: 5.5rem; width: 11rem"
ref="barwater"
></div>-->
<chart-view
style="height: 5.5rem; width: 12rem"
:chart-option="chartOpt1"
:auto-resize="true"
height="100%"
></chart-view>
<div class="left-side">
<img src="../../assets/images/large/leftside.png" alt />
</div>
<div class="sec-titleImg" style="margin-left: 0.875rem">
<img src="../../assets/images/large/jjyx.png" alt />
</div>
<div class="trend">
<div class="sec-img">
<img src="../../assets/images/large/ztts.png" alt />
</div>
<!--3D饼图 GO-->
<div class="gdp">
<div class="gdpvalue">
<img src="../../assets/images/large/gdp.png" alt />
<!-- <div > -->
<span style="font-style: italic">生产总值</span>
<span class="strongnum">112</span>
<span>亿元</span>
</div>
<!-- <div class="warning-pie" id="pieChart" style="width:100%;height:5.5rem"></div> -->
<div class="big-box" style="width: 100%; height: 3.5rem">
<div class="com-container" ref="container"></div>
<div class="dz"></div>
<div class="tulibox">
<div v-for="(item, index) in peiData" :key="index" class="tuliboxitem">
<div class="name">{
{ item.name }}</div>
<div class="acc">
<countTo :startVal="0" :endVal="item.account" :duration="3000"></countTo>元
</div>
<div class="value">{
{ item.y }}%</div>
<div class="rate">
同比
<span
style="margin-left: 0.25rem"
:style="{
color:
item.rate > 0
? 'rgba(255, 88, 88, 1)'
: 'rgba(22, 226, 132, 1)',
}"
>{
{ item.rate }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sec-img">
<img src="../../assets/images/large/zdcy.png" alt />
</div>
<div class="industry">
<div class="item" v-for="(item, index) in industryList" :key="index">
<img :src="item.icon" alt />
<div>{
{ item.name }}</div>
<div>
<countTo class="value" :startVal="0" :endVal="item.value" :duration="3000" separator></countTo>
<span>家</span>
</div>
<div class="firm">
<span>营收</span>
<countTo
class="firmvalue"
:startVal="0"
:endVal="item.firm"
:duration="3000"
separator
></countTo>
<span>亿元</span>
</div>
<div class="revenue">
<span>税收</span>
<countTo
class="revenuevalue"
:startVal="0"
:endVal="item.revenue"
:duration="3000"
separator
:decimals="1"
></countTo>
<span>亿元</span>
</div>
</div>
</div>
</div>
<!-- </div> -->
<div class="map">
<div class="asideleft" @click="detail" v-if="isShow">
<div class="map-left">
<div class="mjitem" style="left: 0">
企业总数
<countTo class="count" :startVal="0" :endVal="5791" :duration="3000" separator></countTo>
<span class="units">个</span>
</div>
</div>
<div class="map-left" style="top: 8.2rem; left: -5.5rem">
<div class="mjitem" style="left: -0.5rem">
园区总面积
<countTo
class="count"
:startVal="0"
:endVal="6.23"
:duration="3000"
:decimals="2"
separator
></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-left" style="top: 10rem; left: -5.5rem">
<div class="mjitem" style="left: -0.5rem">
规划总面积
<countTo
class="count"
:startVal="0"
:endVal="5.21"
:duration="3000"
separator
:decimals="2"
></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-left" style="top: 11.8rem; left: -5.8rem">
<div class="mjitem" style="left: -0.5rem">
已利用面积
<countTo class="count" :startVal="0" :endVal="3.21" :duration="3000" :decimals="2"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-left" style="top: 13.5rem; left: -5.8rem">
<div class="mjitem" style="left: -0.4rem">
楼宇面积
<countTo class="count" :startVal="0" :endVal="148" :duration="3000"></countTo>
<span class="units">楼</span>
</div>
</div>
<div class="map-left" style="top: 15.2rem; left: -5.5rem">
<div class="mjitem" style="left: -1.5rem">
可租售面积
<countTo class="count" :startVal="0" :endVal="7853180" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-left" style="top: 16.8rem; left: -5.5rem">
<div class="mjitem" style="left: -0.4rem">
空置率
<countTo class="count" :startVal="0" :endVal="16.48" :decimals="2" :duration="3000"></countTo>
<span class="units">%</span>
</div>
</div>
<div class="map-left" style="top: 18.4rem; left: -5rem">
<div class="mjitem" style="left: -1.3rem">
空置面积
<countTo class="count" :startVal="0" :endVal="1294192" :duration="3000"></countTo>km2
</div>
</div>
</div>
<div class="asideright" v-if="isShow">
<div class="map-right">
<div class="rkitem">
<div class="rkname">区域总面积</div>
<countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-right" style="top: 9.2rem; right: -10.5rem">
<div class="rkitem">
<div class="rkname">区域总面积</div>
<countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-right" style="top: 12rem; right: -10.8rem">
<div class="rkitem">
<div class="rkname">区域总面积</div>
<countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-right" style="top: 15rem; right: -10.3rem">
<div class="rkitem">
<div class="rkname">区域总面积</div>
<countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
<div class="map-right" style="top: 17.8rem; right: -9.5rem">
<div class="rkitem">
<div class="rkname">区域总面积</div>
<countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
<span class="units">km2</span>
</div>
</div>
</div>
<div class="location">
<div class="building">
<img @click="detail" src="../../assets/images/large/building2.png" alt />
</div>
<div class="bottomBox">
<div class="bqy">
<img src="../../assets/images/large/gx.png" alt />
<div>高新技术企业</div>
</div>
<div class="bqy">
<img src="../../assets/images/large/ss.png" alt />
<div>上市企业</div>
</div>
<div class="bqy">
<img src="../../assets/images/large/djs.png" alt />
<div>独角兽企业</div>
</div>
</div>
</div>
</div>
<!-- <div v-if="!isShow" class="model" style="width: 16rem;
height: 100%;
position: relative;">-->
<div class="right" v-if="isShow">
<div class="secr-img" style="margin-top: -0.625rem">
<img src="../../assets/images/large/qyl.png" alt />
</div>
<chart-view
style="height: 5rem; width: 11rem; margin-left: 10.5rem"
:chart-option="chartqyBar"
:auto-resize="true"
height="100%"
ref="lineqyBar"
></chart-view>
<div class="sec-titleImg" style="margin-right: 3.5rem;margin-top: 0.5rem;">
<img src="../../assets/images/large/qydc.png" alt />
</div>
<div class="secr-img" style="margin-left: 9.5rem">
<img src="../../assets/images/large/qyzl.png" alt />
</div>
<div class="qyzl">
<div>
<div class="shownum">
<img src="../../assets/images/large/zyqy.png" alt />
<div>
<div class="title">在营企业总数</div>
<div class="tnum">
<countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
</div>
</div>
</div>
<div class="shownum">
<img src="../../assets/images/large/ssqy.png" alt />
<div>
<div class="title">上市企业</div>
<div class="num">
<countTo :startVal="0" :endVal="231" :duration="3000" separator></countTo>
</div>
</div>
</div>
</div>
<!-- <div style=" height: 100%; width: 5rem"> -->
<chart-view
style="height: 100%; width: 10rem"
:chart-option="sxbarOptions"
:auto-resize="true"
ref="refsxbar"
height="100%"
></chart-view>
<!-- </div> -->
</div>
<div class="sec-titleImg" style="margin-right: 2.5rem">
<img src="../../assets/images/large/zd.png" alt />
</div>
<div class="secr-img" style="margin-left: 10rem">
<img src="../../assets/images/large/zdtj.png" alt />
</div>
<div class="prototal-right" style="margin-left: 12rem">
<img src="../../assets/images/large/ptotal.png" alt />
<div>
<div class="title" style="font-size:0.3rem">项目总数</div>
<div class="tnum">
<countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
</div>
</div>
<div>
<div class="title">项目总投资额</div>
<div class="num">
<span>
<countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo>亿元
</span>
</div>
</div>
<div>
<div class="title">累计到位投资</div>
<div class="num">
<span>
<countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo>亿元
</span>
</div>
</div>
</div>
<chart-view
style="height: 2.25rem; width: 12rem; margin-left: 11rem"
:chart-option="barOptions"
:auto-resize="true"
height="100%"
></chart-view>
<div class="secr-img" style="margin-left: 9.5rem">
<img src="../../assets/images/large/zdjd.png" alt />
<div class="xmpogress">
<div class="protitle">
<div class="tl" v-for="item in protitleList" :key="item">{
{ item }}</div>
</div>
<div class="prodata" v-for="(item, index) in prodataList" :key="index">
<div class="proitem">{
{ item.name }}</div>
<div class="proitem">{
{ item.qy }}</div>
<div class="proitem" style="color: #ffb400">{
{ item.progress }}</div>
<div class="proitem">{
{ item.lcb }}</div>
<div class="proitem">{
{ item.step }}</div>
<div class="proitem">{
{ item.status }}</div>
</div>
</div>
<!-- <el-table
:data="tableData"
:row-style="{ height: '0.45rem' }"
style="width: 100%"
>
<el-table-column prop="name" label="项目名称"> </el-table-column>
<el-table-column prop="qy" label="项目所属企业"> </el-table-column>
<el-table-column prop="progress" label="项目审批进度">
</el-table-column>
<el-table-column prop="lcb" label="项目承诺里程碑">
</el-table-column>
<el-table-column prop="step" label="项目阶段"> </el-table-column>
<el-table-column prop="status" label="最新状态"> </el-table-column>
</el-table>-->
</div>
<div class="project">
<div class="sec-img" style="margin-top:0.5rem">
<img src="../../assets/images/large/xmjd.png" alt />
</div>
<!--3D饼图 GO-->
<div class="gdps">
<div class="projectTotal">
<img src="../../assets/images/large/ptotal.png" alt />
<span style="font-style: italic">项目总数</span>
<span class="strongnum">112</span>
<span>亿元</span>
</div>
<!-- <div class="warning-pie" id="pieChart" style="width:100%;height:5.5rem"></div> -->
<div class="big-box" style="width: 100%; height: 3.5rem">
<div class="com-container" ref="container1"></div>
<div class="dz"></div>
<div class="tulibox">
<div v-for="(item, index) in projectData" :key="index" class="tuliboxitem">
<div class="name">{
{ item.name }}</div>
<div class="acc">
<countTo :startVal="0" :endVal="item.y" :duration="3000"></countTo>个
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
<el-dialog :visible.sync="dialogVisible" width="46rem" class="animate__zoomIn">
<div class="dialog">
<div class="close" @click="dialogVisible = false">
<img class="close-img" src="../../assets/images/large/gb.png" alt />
</div>
<div class="dialog-title">中国节能环保集团有限公司</div>
<div>
<swiper ref="mySwiper" class="swiper" :options="swiperOption">
<swiper-slide :key="index" v-for="(item, index) in swiperList">
<div class="banner">
<img :src="item.img" alt />
</div>
</swiper-slide>
</swiper>
</div>
<div class="dialog-content">
<el-row>
<el-col v-for="(t,i) in companyDetail" :key="i" :span="i == 0 ? 24 : 8">
<span>{
{t.label + ' : ' }}</span>
<span style="color:RGBA(255, 255, 255, 0.9);margin-left:5px">{
{t.value}}</span>
</el-col>
</el-row>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import "animate.css";
import "@/utils/flexs.js";
import { fontChart } from "@/utils/echartPxToRem.js";
import "@/assets/styles/largeScreen.scss";
import countTo from "vue-count-to";
import ChartView from "@/components/Chart/index.vue";
import Date from "@/components/Date/index.vue";
import coverImgUrl from "../../assets/images/large/boxactive.png";
// import { getPie3D, getParametricEquation } from '@/utils/charts.js'
import HighCharts from "highcharts";
import Highcharts3d from "highcharts/highcharts-3d";
Highcharts3d(HighCharts);
// const color = ['#259AA2','#1A52A3', '#86CBF0','#F6BE52','F0833A']
export default {
components: {
countTo,
ChartView,
Date,
swiper,
swiperSlide
},
data() {
return {
chartOpt1: null,
chartOpt2: null,
barOptions: null,
chartqyBar: null,
// charts: null,
sxbarOptions: null,
navTab: ["产业园区分布", "办公楼宇分布", "入驻企业分布"],
activeTab: 0,
sjlist: [
{
name: "申报评价阶段",
img: require("../../assets/images/large/sbpj.png"),
num: 358,
color: "#32DCFB"
},
{
name: "国土规划阶段",
img: require("../../assets/images/large/gtgh.png"),
num: 766,
color: "#CF6346"
},
{
name: "施工许可阶段",
img: require("../../assets/images/large/sgxk.png"),
num: 976,
color: "#01D2A8"
},
{
name: "施工验收阶段",
img: require("../../assets/images/large/sgys.png"),
num: 976,
color: "#FFDF48"
}
],
industryList: [
{
icon: require("../../assets/images/large/majorIcon.png"),
name: "重点产业1",
value: 24,
firm: 23,
revenue: 7.2
},
{
icon: require("../../assets/images/large/majorIcon.png"),
name: "重点产业2",
value: 15,
firm: 23,
revenue: 7.2
},
{
icon: require("../../assets/images/large/majorIcon.png"),
name: "重点产业3",
value: 41,
firm: 23,
revenue: 7.2
},
{
icon: require("../../assets/images/large/majorIcon.png"),
name: "重点产业4",
value: 37,
firm: 23,
revenue: 7.2
},
{
icon: require("../../assets/images/large/majorIcon.png"),
name: "重点产业5",
value: 12,
firm: 23,
revenue: 7.2
}
],
prodataList: [
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
},
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
},
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
},
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
},
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
},
{
name: "改建回迁1",
qy: "中建第三建设",
progress: "审批中",
lcb: "2025年",
step: "2025年",
status: "审批中"
}
],
protitleList: [
"项目名称",
"项目所属企业",
"项目审批进度",
"项目承诺里程碑",
"项目阶段",
"最新状态"
],
buildNo: [
{
value: 101,
status: "zz"
},
{
value: 102,
status: "zz"
},
{
value: 103,
status: "zz"
},
{
value: 201,
status: "zz"
},
{
value: 202,
status: "zz"
},
{
value: 203,
status: "zz"
},
{
value: 101,
status: "zz"
},
{
value: 102,
status: "zz"
},
{
value: 103,
status: "cz"
},
{
value: 201,
status: "zz"
},
{
value: 202,
status: "kz"
},
{
value: 203,
status: "zz"
},
{
value: 101,
status: "zz"
},
{
value: 102,
status: "zz"
},
{
value: 103,
status: "cz"
},
{
value: 201,
status: "cz"
},
{
value: 202,
status: "zz"
},
{
value: 203,
status: "zz"
},
{
value: 101,
status: "zz"
},
{
value: 102,
status: "cz"
},
{
value: 103,
status: "zz"
},
{
value: 201,
status: "kz"
},
{
value: 202,
status: "kz"
},
{
value: 203,
status: "zz"
},
{
value: 101,
status: "kz"
},
{
value: 102,
status: "zz"
},
{
value: 103,
status: "zz"
},
{
value: 201,
status: "zz"
},
{
value: 202,
status: "cz"
},
{
value: 203,
status: "zz"
},
{
value: 101,
status: "zz"
},
{
value: 102,
status: "cz"
},
{
value: 103,
status: "zz"
},
{
value: 201,
status: "zz"
},
{
value: 202,
status: "zz"
},
{
value: 203,
status: "zz"
}
],
peiData: [
{ name: "规上工业总产值", y: 28, h: 60, account: 12355923, rate: 15 },
{
name: "社会消费品零售总额",
y: 20,
h: 5,
account: 12355923,
rate: 9.2
},
{ name: "实际利用外资", y: 10, h: 20, account: 12355923, rate: 0.11 },
{ name: "固定资产投资", y: 19, h: 30, account: 12355923, rate: -0.33 },
{ name: "地方税收收入", y: 6, h: 50, account: 12355923, rate: 0.23 }
],
projectData: [
{ name: "申报评价阶段项目总数", y: 12, h: 60 },
{ name: "施工验收阶段项目总数", y: 12, h: 5 },
{ name: "施工许可阶段项目总数", y: 12, h: 20 },
{ name: "国土规划阶段项目总数", y: 12, h: 30 }
],
statusChart: null,
lineCharts: null,
currentindex: 14,
isShow: true,
dialogVisible: false,
companyDetail: [
{
label: "英文名",
value: "China Energy Conservation and Environmental Protection Grou"
},
{
label: "电话",
value: "010-83052888"
},
{
label: "投资人",
value: "国务院国有资产监督管理委员会"
},
{
label: "联系电话",
value: "010-83052888"
},
{
label: "区域",
value: "北京市 大兴区"
},
{
label: "投资人类型",
value: "法人股东"
},
{
label: "邮箱",
value: "[email protected]"
},
{
label: "法定代表人名称",
value: "宋鑫"
},
{
label: "人员规模",
value: "100-199人"
},
{
label: "行业门类描述",
value: "科学研究和技术服务业"
},
{
label: "工商注册号",
value: "100000000010315"
},
{
label: "参保人数",
value: "191"
},
{
label: "行业大类描述",
value: "研究和试验发展"
},
{
label: "成立日期",
value: "1989-06-22 00:00:00"
},
{
label: "持股比例",
value: "100%"
},
{
label: "省份",
value: "北京市"
},
{
label: "登记状态",
value: "存续（在营、开业、在册）"
},
{
label: "认缴出资额",
value: "810000"
},
{
label: "城市",
value: "北京市"
},
{
label: "更新日期",
value: "2023-04-19 22:06:51"
},
{
label: "认缴出资时间",
value: "1989-06-21"
},
{
label: "区域",
value: "大兴区"
},
{
label: "注册资本",
value: "¥ 810000 万元"
},
{
label: "最终受益股份",
value: "100%"
},
{
label: "类型",
value: "实际控制人"
},
{
label: "企业类型",
value: "有限责任公司（国有独资）"
},
{
label: "名称",
value: "宋鑫"
},
{
label: "类型说明",
value: "大股东"
},
{
label: "注册地址",
value: "北京市大兴区宏业东路1号院25号楼"
},
{
label: "职位",
value: "董事长"
},
{
label: "企业联系电话",
value: "[email protected]"
},
{
label: "注册地址",
value: "北京市大兴区宏业东路1号院25号楼"
},
{
label: "注册号",
value: "110108027756907"
},
{
label: "企业通讯地址",
value: "北京市海淀区西直门北大街42号节能大厦"
},
{
label: "营业期限始",
value: "2017-12-05 00:00:00"
},
{
label: "名称",
value: "中国节能环保集团有限公司绿色供应链管理服务分公司"
},
{
label: "曾用名",
value: "中国节能环保集团公司"
},
{
label: "核准日期",
value: "2022-11-10 00:00:00"
},
{
label: "登记机关",
value: "北京市西城区市场监督管理局"
},
{
label: "变更日期",
value: "2017-12-05"
}
],
swiperList: [
{ img: require("../../assets/images/large/b1.png"), title: "图1" },
{ img: require("../../assets/images/large/b2.png"), title: "图2" },
{ img: require("../../assets/images/large/b3.png"), title: "图3" }
],
swiperOption: {
slidesPerView: 3,
spaceBetween: 0,
centeredSlides: true,
loop: true, //循环
observer: true,
observeParents: true,
initialSlide: 1,
// 页数指示器
pagination: {
el: ".swiper-pagination",
clickable: true
},
// 左右导航按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// 自动滚动
autoplay: {
delay: 2500,
disableOnInteraction: false //人为交互 不会让自动滚动失效
}
// on: {
// slideChange: () => {
// this.selectSwiper = this.$refs.mySwiper.swiper.realIndex;
// // console.log("轮播图滚动事件 --->", this.$refs.mySwiper.swiper);
// // console.log("轮播图滚动事件 --->",this.$refs.mySwiper.swiper.realIndex)
// }
// }
}
};
},
created() {
this.getLine();
this.chartqyBar = this.$eChartFn.cyBar();
this.barOptions = this.$eChartFn.getBar();
this.chartOpt1 = this.$eChartFn.liquidBar();
this.sxbarOptions = this.$eChartFn.rightPie();
// this.getNowTime()
},
mounted() {
this.initChart();
this.initChartRight();
const that = this;
window.onresize = function() {
that.initChart(), that.initChartRight();
};
this.lineCharts = this.$refs.lineCharts.chart;
this.lineqyBar = this.$refs.lineqyBar.chart;
this.refsxbar = this.$refs.refsxbar.chart;
this.setIntervals(this.chartqyBar, this.lineqyBar);
this.setIntervals(this.chartOpt2, this.lineCharts);
this.setIntervals(this.sxbarOptions, this.refsxbar);
},
destroyed() {
window.removeEventListener("resize", this.initOption);
},
methods: {
//获取当前时间
getNowTime() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//获取当前年月日 时分秒
this.nowdate =
this.year +
"/" +
this.addZero(this.month) +
"/" +
this.addZero(this.date);
this.time =
this.addZero(hour) +
":" +
this.addZero(minute) +
":" +
this.addZero(second);
// 获取农历
this.getLunarDay = getLunar(this.year, this.month, this.date);
this.lunarYear =
this.getLunarDay.lunarYear + "农历" + this.getLunarDay.dateStr;
// console.log(this.nowdate);
// console.log(this.time, "time");
// console.log(this.lunarYear, "day");
},
//小于10的拼接上0字符串
addZero(s) {
return s < 10 ? "0" + s : s;
},
initChart() {
// 修改3d饼图绘制过程
const each = HighCharts.each;
const round = Math.round;
const cos = Math.cos;
const sin = Math.sin;
const deg2rad = Math.deg2rad;
// console.log();
HighCharts.wrap(
HighCharts.seriesTypes.pie.prototype,
"translate",
function(proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
// Do not do this if the chart is not 3D
// if (!this.chart.is3d()) {
// return
// }
const series = this;
const chart = series.chart;
const options = chart.options;
const seriesOptions = series.options;
const depth = seriesOptions.depth || 0;
const options3d = options.chart.options3d;
const alpha = options3d.alpha;
const beta = options3d.beta;
var z = seriesOptions.stacking
? (seriesOptions.stack || 0) * depth
: series._i * depth;
z += depth / 2;
if (seriesOptions.grouping !== false) {
z = 0;
}
each(series.data, function(point) {
const shapeArgs = point.shapeArgs;
var angle;
point.shapeType = "arc3d";
var ran = point.options.h;
shapeArgs.z = z;
shapeArgs.depth = depth * 0.75 + ran;
shapeArgs.alpha = alpha;
shapeArgs.beta = beta;
shapeArgs.center = series.center;
shapeArgs.ran = ran;
angle = (shapeArgs.end + shapeArgs.start) / 2;
point.slicedTranslation = {
translateX: round(
cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
translateY: round(
sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
)
};
});
}
);
(function(H) {
H.wrap(HighCharts.SVGRenderer.prototype, "arc3dPath", function(
proceed
) {
// Run original proceed method
const ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
});
})(HighCharts);
// 生成不同高度的3d饼图
const highEcharts = this.$refs.container;
HighCharts.chart(highEcharts, {
chart: {
type: "pie",
animation: false,
backgroundColor: "rgba(0,0,0,0)",
events: {
load: function() {
const each = HighCharts.each;
const points = this.series[0].points;
// console.log(points, "points");
each(points, function(p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
});
});
}
},
options3d: {
enabled: true,
alpha: 65
}
},
title: {
show: "false",
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
legend: {
// 【图例】位置样式
backgroundColor: "rgba(0,0,0,0)",
shadow: false,
layout: "vertical",
align: "right", // 水平方向位置
verticalAlign: "top", // 垂直方向位置
x: 0, // 距离x轴的距离
y: fontChart(1), // 距离Y轴的距离
symbolPadding: fontChart(0.1),
symbolHeight: fontChart(0.14),
itemStyle: {
lineHeight: fontChart(0.16),
fontSize: fontChart(0.16),
color: "#fff"
},
labelFormatter: function() {
/*
* 格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
* this 代表当前数据列对象，所以默认的实现是 return this.name
*/
return this.name + this.h + "%";
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: "pointer",
depth: fontChart(0.35),
innerSize: fontChart(1.8),
dataLabels: {
enabled: false
},
// 显示图例
showInLegend: false
}
},
series: [
{
type: "pie",
name: "占比",
// h 是高度 y是占的圆环长度
colorByPoint: true,
colors: [
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#19596d"], //
[1, "#2ea1b2"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#ee7529"], //
[1, "#f5a86c"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#f5c055"], //
[1, "#967b3d"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#79BFFF"], //
[1, "#86CBF0"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#2d7bb5"], //
[1, "#1a5784"]
]
}
],
data: this.peiData
}
]
});
},
initChartRight() {
// 修改3d饼图绘制过程
const each = HighCharts.each;
const round = Math.round;
const cos = Math.cos;
const sin = Math.sin;
const deg2rad = Math.deg2rad;
// console.log();
HighCharts.wrap(
HighCharts.seriesTypes.pie.prototype,
"translate",
function(proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
// Do not do this if the chart is not 3D
// if (!this.chart.is3d()) {
// return
// }
const series = this;
const chart = series.chart;
const options = chart.options;
const seriesOptions = series.options;
const depth = seriesOptions.depth || 0;
const options3d = options.chart.options3d;
const alpha = options3d.alpha;
const beta = options3d.beta;
var z = seriesOptions.stacking
? (seriesOptions.stack || 0) * depth
: series._i * depth;
z += depth / 2;
if (seriesOptions.grouping !== false) {
z = 0;
}
each(series.data, function(point) {
const shapeArgs = point.shapeArgs;
var angle;
point.shapeType = "arc3d";
var ran = point.options.h;
shapeArgs.z = z;
shapeArgs.depth = depth * 0.75 + ran;
shapeArgs.alpha = alpha;
shapeArgs.beta = beta;
shapeArgs.center = series.center;
shapeArgs.ran = ran;
angle = (shapeArgs.end + shapeArgs.start) / 2;
point.slicedTranslation = {
translateX: round(
cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
translateY: round(
sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
)
};
});
}
);
(function(H) {
H.wrap(HighCharts.SVGRenderer.prototype, "arc3dPath", function(
proceed
) {
// Run original proceed method
const ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
});
})(HighCharts);
// 生成不同高度的3d饼图
const highEcharts = this.$refs.container1;
HighCharts.chart(highEcharts, {
chart: {
type: "pie",
animation: false,
backgroundColor: "rgba(0,0,0,0)",
events: {
load: function() {
const each = HighCharts.each;
const points = this.series[0].points;
// console.log(points, "points");
each(points, function(p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
});
});
}
},
options3d: {
enabled: true,
alpha: 65
}
},
title: {
show: "false",
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
legend: {
// 【图例】位置样式
backgroundColor: "rgba(0,0,0,0)",
shadow: false,
layout: "vertical",
align: "right", // 水平方向位置
verticalAlign: "top", // 垂直方向位置
x: 0, // 距离x轴的距离
y: fontChart(1), // 距离Y轴的距离
symbolPadding: fontChart(0.1),
symbolHeight: fontChart(0.14),
itemStyle: {
lineHeight: fontChart(0.16),
fontSize: fontChart(0.16),
color: "#fff"
},
labelFormatter: function() {
/*
* 格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
* this 代表当前数据列对象，所以默认的实现是 return this.name
*/
return this.name + this.h + "个";
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: "pointer",
depth: fontChart(0.35),
innerSize: fontChart(1.8),
dataLabels: {
enabled: false
},
// 显示图例
showInLegend: false
}
},
series: [
{
type: "pie",
name: "占比",
// h 是高度 y是占的圆环长度
colorByPoint: true,
colors: [
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#19596d"], //
[1, "#2ea1b2"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#f5c055"], //
[1, "#967b3d"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#79BFFF"], //
[1, "#86CBF0"]
]
},
{
// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
},
stops: [
[0, "#2d7bb5"], //
[1, "#1a5784"]
]
}
],
data: this.projectData
}
]
});
},
currentStyle(ele, index) {
const colorMap = {
cz: "#23d587",
kz: "#bcd2db",
zz: "#3fbaef"
};
const { status } = ele;
return {
color: colorMap[status],
backgroundImage:
this.currentindex == index ? "url(" + coverImgUrl + ")" : "",
backgroundSize: "100% 100%"
};
},
setInterChartShow(refName, data) {
// console.log("thsi.$refs", this.$refs[refName]);
const nameArr = data[0].list.map(it => it.name);
let len = 0;
setInterval(() => {
if (len === nameArr.length) {
len = 0;
}
this.$ref[refName].chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: len
});
len++;
}, 2000);
},
changeaTb(index) {
this.activeTab = index;
},
setIntervals(option, charts) {
if (option) {
// console.log(option, "option");
let current = -1;
let dataLen1 = option.series[0].data.length;
setInterval(() => {
// 取消之前高亮的图形
charts.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: current
});
current = (current + 1) % dataLen1;
// 高亮当前图形
charts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: current
});
// 显示 tooltip
charts.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: current
});
}, 2000);
}
},
changeActive(index) {
this.currentindex = index;
},
getLine() {
let dataArr = [
{
name: "主导产业二总数",
list: [
{
name: "1月",
value: 20
},
{
name: "2月",
value: 10
},
{
name: "3月",
value: 20
},
{
name: "4月",
value: 15
},
{
name: "5月",
value: 10
},
{
name: "6月",
value: 20
},
{
name: "7月",
value: 10
},
{
name: "8月",
value: 20
},
{
name: "9月",
value: 15
},
{
name: "10月",
value: 10
},
{
name: "11月",
value: 30
},
{
name: "12月",
value: 17
}
]
},
{
name: "主打产业一总数",
list: [
{
name: "1月",
value: 20
},
{
name: "2月",
value: 10
},
{
name: "3月",
value: 20
},
{
name: "4月",
value: 15
},
{
name: "5月",
value: 10
},
{
name: "6月",
value: 20
},
{
name: "7月",
value: 10
},
{
name: "8月",
value: 20
},
{
name: "9月",
value: 15
},
{
name: "10月",
value: 10
},
{
name: "11月",
value: 30
},
{
name: "12月",
value: 30
}
]
}
];
// x轴
let nameArr = dataArr[0].list.map(it => it.name);
// 颜色
let colors = ["#C8C83A", "#3ACC9C"];
let option = {
color: colors,
tooltip: {
trigger: "axis",
backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 0,
axisPointer: {
lineStyle: {
color: "rgba(11, 208, 241, 1)",
type: "slider"
}
},
textStyle: {
color: "rgba(212, 232, 254, 1)",
fontSize: 12
},
extraCssText: "z-index:2"
},
grid: {
left: "20%",
top: "15%",
bottom: "10%",
right: "0",
containLabel: true
},
xAxis: [
{
type: "category",
data: nameArr,
axisLabel: {
textStyle: {
fontSize: "12",
color: "#B5C5D4"
},
interval: 0
},
axisTick: {
show: false
},
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "rgba(108, 166, 219, 0.5)"
}
}
}
],
yAxis: [
{
nameTextStyle: {
color: "rgba(212, 232, 254, 1)",
fontSize: 12
},
type: "value",
min: 0, // 坐标轴刻度最小值。
max: 80, // 坐标轴刻度最大值。
splitNumber: 10, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
splitLine: {
lineStyle: {
color: "rgba(108, 166, 219, 0.5)",
type: "dashed"
}
}, //设置横线样式
axisLine: {
show: false,
lineStyle: {
color: "#233653"
}
},
axisLabel: {
textStyle: {
fontSize: "12",
color: "#B5C5D4"
}
}
}
],
series: [
{
name: dataArr[0].name,
type: "bar",
stack: "total",
data: dataArr[0].list.map(it => it.value),
barWidth: 16,
showBackground: true,
backgroundStyle: {
color: "rgba(0, 159, 161, 0.40)"
},
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#3ACC9C"
},
{
offset: 1,
color: "#3ACC9C"
}
])
}
},
{
name: dataArr[1].name,
type: "bar",
stack: "total",
data: dataArr[1].list.map(it => it.value),
barWidth: 16
}
]
};
this.chartOpt2 = option;
},
detail() {
console.log("点击我");
this.dialogVisible = true;
}
}
};
</script>
<style scoped lang="scss">
// .data-dialog1 {
// width: 21.5rem;
// height: 16.8rem;
// border: 1px solid red;
// }
.building {
width: 100%;
height: 6rem;
// border: 2px solid red;
// cursor: pointer;
// z-index: 2000;
// background-color: red;
// background-color: transparent;
// background-color: rgba(209, 14, 14, 0.5);
// background-color: rgba(225, 225, 225, 0.1);
// background: url("../../assets/images/large/building2.png") no-repeat center center;
// background-size: 100% 100%;
}
.building img {
width: 100%;
height: 100%;
cursor: pointer;
pointer-events: auto;
}
.location {
z-index: 2000;
// background: transparent;
// background-color: rgba(225, 225, 225, 0.001);
}
.swiper {
width: 60%;
height: 4.5rem;
// border: 1px solid red;
// display: none;
margin: 0.4rem auto;
}
.banner img {
height: 4.5rem;
width: 100%;
}
.dialog {
height: 26.4rem;
padding-left: 2.8rem;
padding-right: 0.8rem;
padding-top: 0.86rem;
position: relative;
.dialog-title {
text-align: center;
font-size: 0.8rem;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #a0f9ff;
letter-spacing: 0.35rem;
padding-right: 1.2rem;
// margin-top: 1.1rem;
text-shadow: 0px 5px 8px rgba(1, 32, 34, 0.3);
}
}
.swiper-slide {
transition: 300ms;
transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1.2);
}
.dialog-content {
color: white;
// height: 23px;
font-size: 0.5rem;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #b7c1d4;
line-height: 1.25rem;
}
::v-deep .el-dialog__header {
display: none;
}
.close {
position: absolute;
right: -0.3rem;
top: -0.3rem;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
}
.close img {
width: 1.5rem;
height: 1.5rem;
}
::v-deep .el-dialog {
background: none;
/* border: 1px solid blue; */
}
::v-deep .el-dialog__header {
padding: 0px;
}
::v-deep .el-dialog__body {
padding: 0;
background: transparent url("../../assets/images/large/tc2.png") no-repeat
center center;
// background: red;
background-size: 100% 100%;
}
.close-img:hover {
animation: mymove 500ms linear infinite;
}
@keyframes mymove {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove {
/* Safari and Chrome */
100% {
transform: rotate(360deg);
// transform: scale(1.2);
}
}
::v-deep .dialog-fade-leave-active .el-dialog {
animation-duration: 0.3s;
animation-name: anim-close;
}
@keyframes anim-close {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale3d(0.5, 0.5, 1);
}
}
</style>