jijing_park_houtai/src/views/daping/index.vue

<template>
  <div class="daping-bg">
    <img class="daping-top" src="./static/top.png">
    <div class="daping-index-btn" @click="jumpHome">首页</div>
    <div class="daping-menhu-btn" @click="jumpDoor">门户</div>
    <!-- 主体 -->
    <div class="daping-body">
      <!-- up -->
      <div class="daping-row">
        <div class="daping-left">
          <!-- 实时车流量 -->
          <div class="daping-small-size daping-rt-car-flow">
            <div class="daping-title">实时车流量</div>
            <div class="daping-car-flow-wrap-box">
              <img class="car-space-icon" src="./static/car-space-used.png">
              <div class="car-space-num">
                <DigitRoll :roll-digits="digitsRtCar" />
              </div>
              <div class="car-space-text">已用车位</div>
            </div>
            <div class="daping-car-flow-wrap-box">
              <img class="car-space-icon" src="./static/car-space-remain.png">
              <div class="car-space-num">
                <DigitRoll :roll-digits="digitsRemaindCarSpace" />
              </div>
              <div class="car-space-text">剩余车位</div>
            </div>
          </div>
          <!-- 园区环境 -->
          <div class="daping-small-size daping-park-env">
            <div class="daping-title">园区环境</div>
            <div class="tip-square">
              <div class="tip-square-real" />实际值
              <div class="tip-square-standard" />标准值
            </div>
            <div class="env-item">
              <span class="env-item-text">温度</span>
              <div class="env-progress"><div class="env-progress-in" :style="{width: (env.temperature * 145) + 'px'}" /></div>
              <span class="env-item-text-last">°C</span>
            </div>
            <div class="env-item">
              <span class="env-item-text">湿度</span>
              <div class="env-progress"><div class="env-progress-in" :style="{width: (env.humidity * 145) + 'px'}" /></div>
              <span class="env-item-text-last">%</span>
            </div>
            <div class="env-item">
              <span class="env-item-text">噪音</span>
              <div class="env-progress"><div class="env-progress-in" :style="{width: (env.noise * 145) + 'px'}" /></div>
              <span class="env-item-text-last">分贝</span>
            </div>
            <div class="env-item">
              <span class="env-item-text">PM2.5</span>
              <div class="env-progress"><div class="env-progress-in" :style="{width: (env.pm25 * 145) + 'px'}" /></div>
              <span class="env-item-text-last">μg/m³</span>
            </div>
            <div class="env-item">
              <span class="env-item-text">水质</span>
              <div class="env-progress"><div class="env-progress-in" :style="{width: (env.waterQuality * 145) + 'px'}" /></div>
              <span class="env-item-text-last">NTU</span>
            </div>
          </div>
          <!-- 分割 -->
          <div class="sep" />
          <!-- 能耗管理 -->
          <div class="daping-normal-size">
            <div class="daping-title">能耗管理</div>
            <div id="energy-water" />
            <div id="energy-elec" />
          </div>
        </div>
        <div class="daping-middle center-gif">
          <!-- 三片式 -->
          <!-- <el-carousel class="el-carousel-box" :interval="4000" type="card" indicator-position="none" arrow="never">
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/1.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/2.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/3.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/4.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/5.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/6.png">
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carouel-img">
                <img class="image-item" src="./static/7.png">
              </div>
            </el-carousel-item>
          </el-carousel> -->
          <!-- 五片式 -->
          <div class="zy-slide slide">
            <ul>
              <li><img src="./static/1.png" alt=""></li>
              <li><img src="./static/2.png" alt=""></li>
              <li><img src="./static/3.png" alt=""></li>
              <li><img src="./static/4.png" alt=""></li>
              <li><img src="./static/5.png" alt=""></li>
              <li><img src="./static/6.png" alt=""></li>
              <li><img src="./static/7.png" alt=""></li>
            </ul>
          </div>
        </div>
        <div class="daping-right">
          <!-- 园区运营数据管理 -->
          <div class="daping-small-size">
            <div class="daping-title">园区运营数据管理</div>
            <div class="daping-company-service-small">
              <div id="parkOpData" />
              <div class="parkDataRatoUp">40%</div>
              <div class="parkDataRatoDown">60%</div>
            </div>
            <div class="parkNum">场地数量：<span class="parkNumKey">1.42</span> 万方</div>
            <div class="parkNumTips">
              <div class="parkNumTip">
                <div class="parkNumTipIcon parkNumTipIcon1" />园区入驻率
              </div>
              <div class="parkNumTip">
                <div class="parkNumTipIcon parkNumTipIcon2" />闲置率
              </div>
            </div>
          </div>
          <!-- 设备预警 -->
          <div class="daping-small-size daping-device-warn">
            <div class="daping-title">设备预警</div>
            <div class="daping-property-service">
              <div class="daping-property-service-inner">
                <dynamic-marquee :repeat="true" :reverse="true" :repeat-margin="0" :speed="{type: 'pps',number: 10}">
                  <div v-for="(item,index) in devicesWarnList" :key="index" class="daping-property-service-item"><img class="laba" src="./static/laba.png">{{ item }}</div>
                </dynamic-marquee>
              </div>
            </div>
          </div>
          <!-- 分割 -->
          <div class="sep" />
          <!-- 企业访客 -->
          <div class="daping-small-size">
            <div class="daping-title">企业访客</div>
            <div id="companyVisitor" class="daping-company-service" />
          </div>
          <!-- 设备监控数据 -->
          <div class="daping-small-size daping-device-monitor">
            <div class="daping-title">设备监控数据</div>
            <div class="daping-company-service">
              <div class="h">
                <div class="row row1">设备名称</div>
                <div class="row row2">总数</div>
                <div class="row row3">使用数量</div>
                <div class="row row4">故障数量</div>
              </div>
              <div class="device-monitor-wrap">
                <dynamic-marquee :repeat="true" :reverse="true" :repeat-margin="0" :speed="{type: 'pps',number: 10}" >
                    <div v-for="item in deviceMonitoringData" :key="item.key" class="b" >
                        <div class="row row1">{{ item.deviceName }}</div>
                        <div class="row row2">{{ item.totalNum }}</div>
                        <div class="row row3">{{ item.playNum }}</div>
                        <div class="row row4">{{ item.faultNum }}</div>
                    </div>
                  <!-- <div v-for="n in 5" :key="n" class="b">
                    <div class="row row1">{{ n }}智慧路灯</div>
                    <div class="row row2">58</div>
                    <div class="row row3">52</div>
                    <div class="row row4">2</div>
                  </div> -->
                </dynamic-marquee>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- down -->
      <div class="daping-row">
        <div class="daping-left">
          <!-- 报事保修-物业服务-服务评价 -->
          <div class="daping-normal-size">
            <div class="daping-title-wrap">
              <div v-for="(item, index) in propertyServiceItems" :key="index" class="daping-title-item" :style="propertyServiceItemSelectedIndex == index ? 'color: #fff;' : 'color: #4350F0'" @click="propertyItemOnClick(index)">
                {{ item }}
              </div>
            </div>

            <!-- 报事报修 -->
            <div v-show="propertyServiceItemSelectedIndex == 0" class="daping-property-service">
              <div class="daping-property-service-inner">
                <dynamic-marquee :repeat="true" :reverse="true" :repeat-margin="0" :speed="{type: 'pps',number: 10}">
                  <div v-for="(item,index) in baoshibaoxiuList" :key="index" class="daping-property-service-item"><img class="laba" src="./static/laba.png">{{ item }}</div>
                </dynamic-marquee>
              </div>
            </div>
            <!-- 物业服务 -->
            <div v-show="propertyServiceItemSelectedIndex == 1" id="daping-property-service-1" class="daping-property-service" />
            <!-- 服务评价 -->
            <div v-show="propertyServiceItemSelectedIndex == 2" id="daping-property-service-2" class="daping-property-service" />
          </div>
          <!-- 分割 -->
          <div class="sep" />
          <!-- 共享会议室-路演服务-专业服务-人才服务 -->
          <div class="daping-normal-size">
            <div class="daping-title-wrap">
              <div v-for="(item, index) in companyServiceItems" :key="index" class="daping-title-item" :style="companyServiceItemSelectedIndex == index ? 'color: #fff;' : 'color: #4350F0'" @click="companyItemOnClick(index)">
                {{ item }}
              </div>
            </div>

            <!-- 共享会议室 -->
            <div v-show="companyServiceItemSelectedIndex == 0" id="daping-company-service-0" class="daping-company-service" />
            <!-- 路演服务 -->
            <div v-show="companyServiceItemSelectedIndex == 1" id="daping-company-service-1" class="daping-company-service" />
            <!-- 专业服务 -->
            <div v-show="companyServiceItemSelectedIndex == 2" id="daping-company-service-2" class="daping-company-service" />
            <!-- 人才服务 -->
            <div v-show="companyServiceItemSelectedIndex == 3" class="daping-company-service">
              <div class="daping-hr-service-box-wrap">
                <div class="daping-hr-service-box">
                  <div class="daping-hr-service-box-up">200</div>
                  <div class="daping-hr-service-box-down">专业人才库</div>
                </div>
                <div class="daping-hr-service-box">
                  <div class="daping-hr-service-box-up">200</div>
                  <div class="daping-hr-service-box-down">企业招聘</div>
                </div>
              </div>

              <div id="daping-hr-service-chart" />
            </div>
          </div>
        </div>
        <div class="daping-middle">
          <!-- 企业数据可视化 -->
          <div class="daping-big-size">
            <div class="daping-title">企业数据可视化</div>
            <div id="companyDataVisual" class="daping-company-service" />
          </div>
          <!-- 分割 -->
          <div class="sep" />
          <!-- 产融对接 -->
          <div class="daping-big-size">
            <div class="daping-title">产融对接</div>
            <div class="daping-company-service">
              <div id="industryMergeLeft" class="daping-company-service-left" />
              <div id="industryMergeRight" class="daping-company-service-right" />
              <div class="industryMergeTip industryMergeTip1">投资需求</div>
              <div class="industryMergeTip industryMergeTip2">融资需求</div>
              <div class="industryMergeTip industryMergeTip3">投资对接</div>
            </div>
          </div>
        </div>
        <div class="daping-right">
          <!-- 产业活动 -->
          <div class="daping-small-size">
            <div class="daping-title">产业活动</div>
            <div id="industryActivity" class="daping-company-service" />
          </div>
          <!-- 固定车位出租 -->
          <div class="daping-small-size daping-parkingSpaceRental">
            <div class="daping-title">固定车位出租</div>
            <div id="parkingSpaceRental" class="daping-company-service" />
          </div>
          <!-- 分割 -->
          <div class="sep" />
          <!-- 产业培训 -->
          <div class="daping-small-size">
            <div class="daping-title">产业培训</div>
            <div id="industryTraining" class="daping-company-service" />
          </div>
          <!-- 机器人 -->
          <div class="robot-size daping-robot">
            <img class="robot-gif" src="./static/robot.gif">
            <el-tooltip class="item" effect="dark" content="0号球体" placement="right-start">
                <img class="robot-play" style="position: relative;" src="./static/video-icon.png" @click="onVideoPlay(0)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="1号球体" placement="right-start">
                <img class="robot-play" style="position: relative; top: 5px;" src="./static/video-icon.png" @click="onVideoPlay(1)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="2号球体" placement="right-start">
                <img class="robot-play" style="position: relative; top: 10px;" src="./static/video-icon.png" @click="onVideoPlay(2)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="2号球体" placement="right-start">
                <img class="robot-play" style="position: relative; top: 15px;" src="./static/video-icon.png" @click="onVideoPlay(3)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="4号球体" placement="right-start">
                <img class="robot-play" style="position: relative; top: 20px;" src="./static/video-icon.png" @click="onVideoPlay(6)">
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频播放器 -->
    <div v-show="videoShow" class="video-wrapper">
      <div ref="videoBox" class="video-box">
          <!-- <video id="myVideo" class="video-js">
            <source
                src="http://video.bohhom.com/unicom/32058400991320004500.flv?auth_key=1638505450-0-0-1efe01cd459cdd397c5793616b952925"
                type="video/x-flv"
            >
          </video> -->

          <!-- ./static/forza_video_style.mp4 -->
        <!-- <video ref="video" class="video-instance" src="./static/forza_video_style.mp4" /> -->

        <video
             id="videoElement"
             ref="videoElement"
             controlslist="nodownload noremoteplayback"
             disablePictureInPicture
             controls
             autoplay
             style="height: 95%; width: 100%"
             muted></video>
        <img v-if="isVideoFull == false" class="close-small" src="./static/close-small.png" @click="onVideoClose">
        <img v-if="isVideoFull == true" class="close" src="./static/close.png" @click="onVideoClose">
        <img v-if="isVideoFull == false" class="zoom-big" src="./static/zoom-big.png" @click="onVideoFullScreen">
        <img v-if="isVideoFull == true" class="zoom-small" src="./static/zoom-small.png" @click="onVideoExitFullScreen">

      </div>
    </div>
  </div>
</template>
<script>
import flvjs from 'flv.js'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import DigitRoll from '@huoyu/vue-digitroll'

export default {
    name: 'Index',
    components: { DigitRoll },
    data() {
        return {
            flvPlayer: {},
            robotVideo: {},
            digitsRemaindCarSpace: 125,
            digitsRtCar: 12348,
            // 视频组件是否显示
            videoShow: false,
            // 当前全屏状态
            isVideoFull: false,
            //设备监控数据
            deviceMonitoringData: [
                {
                    key: '1',
                    deviceName: "智能垃圾桶",
                    totalNum: 15,
                    playNum: 15,
                    faultNum: 0
                },{
                    key: '2',
                    deviceName: "智能座椅",
                    totalNum: 4,
                    playNum: 4,
                    faultNum: 0
                },{
                    key: '3',
                    deviceName: "巡更机器人",
                    totalNum: 1,
                    playNum: 1,
                    faultNum: 0
                },{
                    key: '4',
                    deviceName: "智慧公厕",
                    totalNum: 1,
                    playNum: 1,
                    faultNum: 0
                },{
                    key: '5',
                    deviceName: "监控系统",
                    totalNum: 63,
                    playNum: 63,
                    faultNum: 0
                },{
                    deviceName: "智慧路灯",
                    totalNum: 18,
                    playNum: 18,
                    faultNum: 0
                },{
                    key: '6',
                    deviceName: "水质检测",
                    totalNum: 1,
                    playNum: 1,
                    faultNum: 0
                }
            ],

            // 物业服务
            propertyServiceItems: [
                '报事报修',
                '物业服务',
                '服务评价'
            ],
            propertyServiceItemSelectedIndex: 0,
            // 公司服务
            companyServiceItems: [
                '共享会议室',
                '路演服务',
                '专业服务',
                '人才服务'
            ],
            companyServiceItemSelectedIndex: 0,
            // 园区环境 数值 比例 （实际值 / 标准值）
            env: {
                temperature: 0.5, // 温度
                humidity: 0.3, // 湿度
                noise: 0.7, // 噪音
                pm25: 0.9, // pm2.5
                waterQuality: 0.8 // 水质
            },
            // 报事报修
            baoshibaoxiuList: [
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。',
                '顺丰速运消防门报修。'
            ],
            // 设备预警
            devicesWarnList: [
                'A设备故障。',
                'B设备故障。',
                'C设备故障。',
                'D设备故障。',
                'E设备故障。',
                'F设备故障。',
                'G设备故障。',
                'H设备故障。',
                'I设备故障。',
                'J设备故障。'
            ]
        }
    },
    mounted() {
        this.getRobotVideo();

        jQuery('.slide').zySlide({ speed: 3000, delay: 2000 }).css({
            'width': '846px',
            'height': '281px'
        })
        // 模拟实时车流量数据 - 接口接入后删除该代码
        setInterval(() => {
            this.digitsRemaindCarSpace = this.digitsRemaindCarSpace + 1
            this.digitsRtCar = this.digitsRtCar + 1
        }, 2000)

        // 默认 - 共享会议室
        this.companyItemOnClick(0)
        // 能耗管理-水
        const energyWaterChart = echarts.init(document.getElementById('energy-water'))
        energyWaterChart.setOption({
            color: ['#1BFFF2', '#795FFF', '#FF9000', '#FF408B', '#FAEE04', '#2EE466'],
            title: {
                top: 35,
                left: 12,
                text: '水',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                subtext: '单位（吨）',
                subtextStyle: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            grid: {
                top: 88,
                left: 12,
                right: 14,
                bottom: 10,
                containLabel: true
            },
            legend: {
                top: 40,
                left: 62,
                itemWidth: 6,
                itemHeight: 6,
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                },
                data: [
                    {
                        name: '1号楼',
                        icon: 'rect',
                        itemStyle: {
                            color: '#000',
                            borderColor: '#f00'
                        },
                        lineStyle: {
                            color: '#000',
                            borderColor: '#f00'
                        }
                    },
                    {
                        name: '2号楼',
                        icon: 'rect'
                    },
                    {
                        name: '3号楼',
                        icon: 'rect'
                    },
                    {
                        name: '4号楼',
                        icon: 'rect'
                    },
                    {
                        name: '5号楼',
                        icon: 'rect'
                    },
                    {
                        name: '6号楼',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '1号楼',
                    type: 'line',
                    data: [0, 20, 30, 36, 37, 78, 89, 20, 55, 66, 77, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '2号楼',
                    type: 'line',
                    data: [0, 30, 50, 111, 45, 46, 47, 48, 49, 50, 51, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '3号楼',
                    type: 'line',
                    data: [0, 20, 50, 113, 70, 60, 30, 80, 89, 78, 45, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '4号楼',
                    type: 'line',
                    data: [0, 22, 33, 44, 55, 66, 77, 88, 99, 100, 70, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '5号楼',
                    type: 'line',
                    data: [0, 22, 34, 56, 23, 100, 110, 59, 23, 45, 17, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '6号楼',
                    type: 'line',
                    data: [0, 23, 34, 56, 78, 90, 100, 12, 65, 19, 23, 10],
                    smooth: true,
                    showSymbol: false
                }
            ]
        })

        // 能耗管理-电
        const energyElecChart = echarts.init(document.getElementById('energy-elec'))
        energyElecChart.setOption({
            color: ['#1BFFF2', '#795FFF', '#FF9000', '#FF408B', '#FAEE04', '#2EE466'],
            title: {
                top: 35,
                left: 6,
                text: '电',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                subtext: '单位（度）',
                subtextStyle: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            grid: {
                top: 88,
                left: 6,
                right: 20,
                bottom: 10,
                containLabel: true
            },
            legend: {
                top: 40,
                left: 66,
                right: 70,
                itemWidth: 6,
                itemHeight: 6,
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                },
                data: [
                    {
                        name: '1号楼',
                        icon: 'rect',
                        itemStyle: {
                            color: '#000',
                            borderColor: '#f00'
                        },
                        lineStyle: {
                            color: '#000',
                            borderColor: '#f00'
                        }
                    },
                    {
                        name: '2号楼',
                        icon: 'rect'
                    },
                    {
                        name: '3号楼',
                        icon: 'rect'
                    },
                    {
                        name: '4号楼',
                        icon: 'rect'
                    },
                    {
                        name: '5号楼',
                        icon: 'rect'
                    },
                    {
                        name: '6号楼',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '1号楼',
                    type: 'line',
                    data: [0, 20, 30, 36, 37, 78, 89, 20, 55, 66, 77, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '2号楼',
                    type: 'line',
                    data: [0, 30, 50, 111, 45, 46, 47, 48, 49, 50, 51, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '3号楼',
                    type: 'line',
                    data: [0, 20, 50, 113, 70, 60, 30, 80, 89, 78, 45, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '4号楼',
                    type: 'line',
                    data: [0, 22, 33, 44, 55, 66, 77, 88, 99, 100, 12, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '5号楼',
                    type: 'line',
                    data: [0, 22, 34, 56, 23, 100, 110, 59, 23, 45, 17, 10],
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '6号楼',
                    type: 'line',
                    data: [0, 23, 34, 56, 78, 90, 100, 12, 65, 19, 23, 10],
                    smooth: true,
                    showSymbol: false
                }
            ]
        })
        // 园区运营数据
        const parkOpDataChart = echarts.init(document.getElementById('parkOpData'))
        parkOpDataChart.setOption({
            series: [{
                type: 'liquidFill',
                name: '园区运营数据', // 系列名称，用于tooltip的显示，legend 的图例筛选
                radius: '74%', // 水球图的半径
                center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
                // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                shape: 'circle',
                phase: 0, // 波的相位弧度 不设置  默认自动
                direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                outline: {
                    show: true,
                    borderDistance: 0, // 边框线与图表的距离 数字
                    itemStyle: {
                        opacity: 0.29, // 边框的透明度   默认为 1
                        borderWidth: 10, // 边框的宽度
                        shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                        shadowColor: '#fff', // 边框的阴影颜色,
                        borderColor: '#4174FF' // 边框颜色
                    }
                },
                // 图形样式
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#3BB9E8' },
                            { offset: 1, color: '#44EAAD' }
                        ]
                    ), // 水球显示的背景颜色
                    opacity: 0.6, // 波浪的透明度
                    shadowBlur: 10 // 波浪的阴影范围
                },
                backgroundStyle: {
                    color: '#284695', // 水球未到的背景颜色
                    opacity: 1
                },
                // 图形的高亮样式
                emphasis: {
                    itemStyle: {
                        opacity: 0.8 // 鼠标经过波浪颜色的透明度
                    }
                },
                // 图形上的文本标签
                label: {
                    show: false,
                    fontSize: 12,
                    fontWeight: 400,
                    color: '#fff'
                },
                data: [0.62] // 系列中的数据内容数组
            }]
        })

        // 企业访客
        const companyVisitorChart = echarts.init(document.getElementById('companyVisitor'))
        companyVisitorChart.setOption({
            title: {
                top: 16,
                left: 18,
                text: '单位（人）',
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            legend: {
                top: 20,
                left: 76,
                right: 70,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                },
                data: [
                    {
                        name: '访客趋势',
                        icon: 'rect'
                    },
                    {
                        name: '访客量',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            grid: {
                top: 50,
                left: 40,
                right: 30,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                offset: 15,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '访客趋势',
                    type: 'line',
                    data: [200, 102.2, 38.3, 4.5, 6.3, 10.2],
                    itemStyle: {
                        color: '#F4ED0A'
                    }
                },
                {
                    name: '访客量',
                    type: 'bar',
                    data: [200, 105.9, 98.0, 26.4, 28.7, 70.7],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#06C5F5' },
                                { offset: 1, color: '#7C04ED' }
                            ]
                        )
                    },
                    type: 'bar',
                    barWidth: 16
                }
            ]
        })
        // 产业活动
        const industryActivityChart = echarts.init(document.getElementById('industryActivity'))
        industryActivityChart.setOption({
            legend: {
                top: 20,
                left: 76,
                right: 70,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                },
                data: [
                    {
                        name: '已结束',
                        icon: 'rect'
                    },
                    {
                        name: '报名中',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            grid: {
                top: 50,
                left: 40,
                right: 30,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                offset: 15,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '已结束',
                    type: 'line',
                    data: [10, 102.2, 38.3, 200, 6.3, 100, 5, 200, 30, 102, 50, 10],
                    itemStyle: {
                        color: '#1BFFF2'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(27,255,242,1)' },
                                { offset: 1, color: 'rgba(27,255,242,0)' }
                            ]
                        )
                    },
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '报名中',
                    type: 'line',
                    data: [0, 105.9, 45, 126.4, 28.7, 70.7, 10, 100, 20, 200, 50, 10],
                    itemStyle: {
                        color: '#19DC7C'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(25,220,124,1)' },
                                { offset: 1, color: 'rgba(25,220,124,0)' }
                            ]
                        )
                    },
                    smooth: true,
                    showSymbol: false
                }
            ]
        })
        // 固定车位出租
        const parkingSpaceRentalChart = echarts.init(document.getElementById('parkingSpaceRental'))
        parkingSpaceRentalChart.setOption({
            title: {
                top: 16,
                left: 18,
                text: '单位（间）',
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            legend: {
                top: 20,
                left: 76,
                right: 70,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                },
                data: [
                    {
                        name: '待租',
                        icon: 'rect'
                    },
                    {
                        name: '已租',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            grid: {
                top: 50,
                left: 40,
                right: 30,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                offset: 15,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '待租',
                    type: 'line',
                    data: [10, 102.2, 38.3, 200, 6.3, 100, 5, 200, 30, 102, 50, 10],
                    itemStyle: {
                        color: '#1BFFF2'
                    },
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '已租',
                    type: 'line',
                    data: [0, 105.9, 45, 126.4, 28.7, 70.7, 10, 100, 20, 200, 50, 10],
                    itemStyle: {
                        color: '#795FFF'
                    },
                    smooth: true,
                    showSymbol: false
                }
            ]
        })
        // 产业培训
        const industryTrainingChart = echarts.init(document.getElementById('industryTraining'))
        industryTrainingChart.setOption({
            legend: {
                top: 20,
                left: 76,
                right: 70,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                },
                data: [
                    {
                        name: '线下',
                        icon: 'rect'
                    },
                    {
                        name: '线上',
                        icon: 'rect'
                    }
                ],
                padding: 0
            },
            grid: {
                top: 50,
                left: 40,
                right: 30,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                offset: 15,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '线下',
                    type: 'line',
                    data: [10, 102.2, 38.3, 200, 6.3, 100, 5, 200, 30, 102, 50, 10],
                    itemStyle: {
                        color: '#1BFFF2'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(27,255,242,1)' },
                                { offset: 1, color: 'rgba(27,255,242,0)' }
                            ]
                        )
                    },
                    smooth: true,
                    showSymbol: false
                },
                {
                    name: '线上',
                    type: 'line',
                    data: [0, 105.9, 45, 126.4, 28.7, 70.7, 10, 100, 20, 200, 50, 10],
                    itemStyle: {
                        color: '#19DC7C'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(25,220,124,1)' },
                                { offset: 1, color: 'rgba(25,220,124,0)' }
                            ]
                        )
                    },
                    smooth: true,
                    showSymbol: false
                }
            ]
        })

        // 企业数据可视化
        const companyDataVisualChart = echarts.init(document.getElementById('companyDataVisual'))
        companyDataVisualChart.setOption({
            color: ['#E7E90A', '#35A9FF', '#8C70F8', '#19DC7C', '#F86464'],
            title: [
                {
                    bottom: 16,
                    left: '53px',
                    text: '产业类别',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                {
                    bottom: 16,
                    left: '202px',
                    text: '企业数量 30家',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                {
                    bottom: 16,
                    left: '379px',
                    text: '产值 87亿',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                {
                    bottom: 16,
                    left: '540px',
                    text: '税收 12亿',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                {
                    bottom: 16,
                    textAlign: 'center',
                    left: '738px',
                    text: '高级人才205\n普通员工 13947',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                }
            ],
            series: [{
                type: 'pie',
                radius: ['15%', '25%'],
                labelLine: {
                    length: 7,
                    length2: 7
                },
                center: ['50%', '45%'],
                data: [{
                    name: '软件',
                    value: 70
                }, {
                    name: '服务',
                    value: 68
                }, {
                    name: '保险',
                    value: 48
                }, {
                    name: '理财',
                    value: 40
                }],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    bleedMargin: 0,
                    margin: 0,
                    formatter: '{b}\n{d}%',
                    fontSize: '6px'
                },
                left: 0,
                right: '80%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: ['15%', '25%'],
                center: ['50%', '45%'],
                labelLine: {
                    length: 7,
                    length2: 7
                },
                data: [{
                    name: '软件',
                    value: 70
                }, {
                    name: '外贸',
                    value: 68
                }, {
                    name: '外贸',
                    value: 48
                }, {
                    name: '保险',
                    value: 40
                }, {
                    name: '保险',
                    value: 32
                }],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    bleedMargin: 0,
                    margin: 0,
                    formatter: '{b}\n{d}%',
                    fontSize: '6px'
                },
                left: '20%',
                right: '60%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: ['15%', '25%'],
                center: ['50%', '45%'],
                labelLine: {
                    length: 7,
                    length2: 7
                },
                data: [{
                    name: '软件',
                    value: 70
                }, {
                    name: '服务',
                    value: 68
                }, {
                    name: '保险',
                    value: 48
                }, {
                    name: '理财',
                    value: 40
                }],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    margin: 0,
                    formatter: '{b}\n{d}%',
                    fontSize: '6px'
                },
                left: '40%',
                right: '40%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: ['15%', '25%'],
                center: ['50%', '45%'],
                labelLine: {
                    length: 7,
                    length2: 7
                },
                data: [{
                    name: '高级人才',
                    value: 70
                }, {
                    name: '普通员工',
                    value: 68
                }],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    margin: 0,
                    formatter: '{b}\n{d}%',
                    fontSize: '6px'
                },
                left: '60%',
                right: '20%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: ['15%', '25%'],
                center: ['50%', '45%'],
                labelLine: {
                    length: 7,
                    length2: 7
                },
                data: [{
                    name: '高级人才',
                    value: 70
                }, {
                    name: '普通员工',
                    value: 68
                }],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    margin: 0,
                    formatter: '{b}\n{d}%',
                    fontSize: '6px'
                },
                left: '80%',
                right: 0,
                top: 0,
                bottom: 0
            }]
        })

        // 产融-right
        const industryMergeRightChart = echarts.init(document.getElementById('industryMergeRight'))
        industryMergeRightChart.setOption({
            title: {
                top: 16,
                left: 18,
                text: '单位（亿元）',
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            grid: {
                top: 50,
                left: 40,
                right: 30,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            yAxis: {
                type: 'value',
                offset: 15,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 8
                }
            },
            series: [
                {
                    name: '已结束',
                    type: 'line',
                    data: [10, 102.2, 38.3, 200, 6.3, 100, 5, 200, 30, 102, 50, 10],
                    itemStyle: {
                        color: '#04CDF4'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(4,205,244,1)' },
                                { offset: 1, color: 'rgba(4,205,244,0)' }
                            ]
                        )
                    },
                    showSymbol: false
                }
            ]
        })

        // 产融-left
        const industryMergeLeftChart = echarts.init(document.getElementById('industryMergeLeft'))
        industryMergeLeftChart.setOption({
            color: ['#01EF97'],
            radar: [{
                indicator: [
                    { name: '箱包', max: 6500 },
                    { name: '文具', max: 16000 },
                    { name: '家居', max: 30000 },
                    { name: '家电', max: 38000 },
                    { name: '食品', max: 25000 },
                    { name: '服饰', max: 25000 }
                ],
                splitArea: {
                    areaStyle: {
                        color: ['#00406C'],
                        opacity: 0
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        padding: [0, 0],
                        fontSize: 8
                    }
                },
                radius: 40,
                center: ['16.5%', '40%']
            }, {
                indicator: [
                    { name: '箱包', max: 6500 },
                    { name: '文具', max: 16000 },
                    { name: '家居', max: 30000 },
                    { name: '家电', max: 38000 },
                    { name: '食品', max: 25000 },
                    { name: '服饰', max: 25000 }
                ],
                splitArea: {
                    areaStyle: {
                        color: ['#00406C'],
                        opacity: 0
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        padding: [0, 0],
                        fontSize: 8
                    }
                },
                radius: 40,
                center: ['49.5%', '40%']
            }, {
                indicator: [
                    { name: '箱包', max: 6500 },
                    { name: '文具', max: 16000 },
                    { name: '家居', max: 30000 },
                    { name: '家电', max: 38000 },
                    { name: '食品', max: 25000 },
                    { name: '服饰', max: 25000 }
                ],
                name: {
                    textStyle: {
                        color: '#fff',
                        padding: [0, 0],
                        fontSize: 8
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#00406C'],
                        opacity: 0
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: ['#0275AE']
                    }
                },
                radius: 40,
                center: ['82.5%', '40%']
            }],
            series: [{
                type: 'radar',
                areaStyle: {},
                radarIndex: 0,
                data: [
                    {
                        value: [6500, 3000, 20000, 35000, 18000]
                    }
                ]
            }, {
                type: 'radar',
                areaStyle: {},
                radarIndex: 1,
                data: [
                    {
                        value: [6500, 3000, 20000, 35000, 18000]
                    }
                ]
            }, {
                type: 'radar',
                areaStyle: {},
                radarIndex: 2,
                data: [
                    {
                        value: [6500, 3000, 20000, 35000, 18000]
                    }
                ]
            }]
        })

        // 定时切换
        setInterval(() => {
            let nowIndex = this.propertyServiceItemSelectedIndex + 1
            if (nowIndex == 3) {
                nowIndex = 0
            }
            this.propertyItemOnClick(nowIndex)
        }, 10000)

        // 定时切换
        setInterval(() => {
            let nowIndex2 = this.companyServiceItemSelectedIndex + 1
            if (nowIndex2 == 4) {
                nowIndex2 = 0
            }
            this.companyItemOnClick(nowIndex2)
        }, 10000)
    },
    methods: {
        jumpHome() {
            this.$router.push('/dashboard')
        },
        jumpDoor() {
            window.open('https://jpark.idea-sf.com/smartPark', '_blank')
        },
        baseRequest(opUrl, postData) {
          return this.$channel.globleRequest('RobotHandleController', opUrl, postData, 'project')
        },
        //获取视频流
        getRobotVideo(){
            this.baseRequest('getRobotVideo', {}).then((res) => {
                console.log("获取视频流_:", res)
                this.robotVideo = res.data.data;
            }).catch(() => {
            })
        },

        initVideo(val) {
            // url: this.robotVideo[val].stream_url_flv
            // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
            //初始化视频方法
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    // isLive: true,
                    // hasAudio: true,
                    // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
                    url: this.robotVideo[val].stream_url_flv
                })
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },

        // 视频播放
        onVideoPlay(val) {
            // alert(this.robotVideo['0'].stream_url_flv)
            this.videoShow = true
            this.initVideo(val);
            // this.$nextTick(() => {
            //     this.$refs.video.play()
            // })
        },
        // 视频关闭
        onVideoClose() {
            this.videoShow = false
            this.flvPlayer = {};
        },
        // 视频全屏
        onVideoFullScreen() {
            var de = this.$refs.videoBox
            if (de.requestFullscreen) {
                de.requestFullscreen()
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen()
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen()
            }
            this.isVideoFull = true
        },
        // 退出全屏
        onVideoExitFullScreen() {
            var de = document
            if (de.exitFullscreen) {
                de.exitFullscreen()
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen()
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen()
            }
            this.isVideoFull = false
        },
        propertyItemOnClick(index) {
            this.propertyServiceItemSelectedIndex = index

            if (index == 1) {
                setTimeout(function() {
                    // 物业服务
                    const propertyServiceChart = echarts.init(document.getElementById('daping-property-service-1'))
                    propertyServiceChart.setOption({
                        color: ['#2AFDFF', '#F86464', '#19DC7C', '#8C70F8', '#35A9FF', '#FAEE04'],
                        legend: {
                            top: 'middle',
                            right: 79,
                            orient: 'vertical',
                            itemWidth: 8,
                            itemHeight: 8,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                name: '物业服务',
                                type: 'pie',
                                radius: '75%',
                                center: ['35%', '50%'],
                                data: [
                                    { value: 335, name: '保洁' },
                                    { value: 310, name: '维修' },
                                    { value: 274, name: '绿化' },
                                    { value: 235, name: '停车位' },
                                    { value: 400, name: '园区导引' },
                                    { value: 500, name: '节日祝福' }
                                ],
                                roseType: 'radius',
                                labelLine: {
                                    length: 10,
                                    length2: 20
                                },
                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function(idx) {
                                    return Math.random() * 200
                                }
                            }
                        ]
                    })
                }, 1)
            } else if (index == 2) {
                setTimeout(function() {
                    // 服务评价
                    const ServiceRateChart = echarts.init(document.getElementById('daping-property-service-2'))
                    ServiceRateChart.setOption({
                        color: ['#01EF97'],
                        radar: {
                            indicator: [
                                { name: '保洁', max: 6500 },
                                { name: '停车', max: 16000 },
                                { name: '绿化', max: 30000 },
                                { name: '报修', max: 38000 },
                                { name: '管家', max: 25000 }
                            ],
                            splitArea: {
                                areaStyle: {
                                    color: ['#00406C'],
                                    opacity: 0
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: ['#0275AE']
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: ['#0275AE']
                                }
                            },
                            name: {
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            radius: 60,
                            center: ['50%', '50%']
                        },
                        series: [{
                            type: 'radar',
                            areaStyle: {},
                            data: [
                                {
                                    value: [6500, 3000, 20000, 35000, 18000]
                                }
                            ]
                        }]
                    })
                }, 1)
            }
        },
        companyItemOnClick(index) {
            this.companyServiceItemSelectedIndex = index
            if (index == 0) {
                setTimeout(function() {
                    // 共享会议室
                    const shareMeetingChart = echarts.init(document.getElementById('daping-company-service-0'))
                    shareMeetingChart.setOption({
                        color: ['#1BFFF2', '#795FFF', '#FF9000', '#FF408B', '#FAEE04', '#2EE466'],
                        grid: {
                            top: 30,
                            left: 40,
                            right: 30,
                            bottom: 20,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        yAxis: {
                            type: 'value',
                            offset: 15,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        series: [{
                            data: [120, 100, 20, 80, 70, 110, 80, 23, 54, 78, 12, 90],
                            itemStyle: {
                                barBorderRadius: 8,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#3AB6EB' },
                                        { offset: 1, color: '#49FCB0' }
                                    ]
                                )
                            },
                            type: 'bar',
                            barWidth: 8
                        }]
                    })
                }, 1)
            } else if (index == 1) {
                setTimeout(function() {
                    // 路演服务
                    const luYanServiceChart = echarts.init(document.getElementById('daping-company-service-1'))
                    luYanServiceChart.setOption({
                        title: {
                            top: 16,
                            left: 18,
                            text: '单位（人）',
                            textStyle: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        legend: {
                            top: 20,
                            left: 76,
                            right: 70,
                            itemWidth: 8,
                            itemHeight: 8,
                            textStyle: {
                                color: '#fff',
                                fontSize: 11
                            },
                            data: [
                                {
                                    name: '路演趋势',
                                    icon: 'rect'
                                },
                                {
                                    name: '路演量',
                                    icon: 'rect'
                                }
                            ],
                            padding: 0
                        },
                        grid: {
                            top: 50,
                            left: 40,
                            right: 30,
                            bottom: 20,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        yAxis: {
                            type: 'value',
                            offset: 15,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        series: [
                            {
                                name: '路演趋势',
                                type: 'line',
                                data: [200, 102.2, 38.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 60.2],
                                itemStyle: {
                                    color: '#F4ED0A'
                                }
                            },
                            {
                                name: '路演量',
                                type: 'bar',
                                data: [200, 105.9, 98.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 180.8, 60.0, 20.3],
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#06C5F5' },
                                            { offset: 1, color: '#7C04ED' }
                                        ]
                                    )
                                },
                                type: 'bar',
                                barWidth: 16
                            }
                        ]
                    })
                }, 1)
            } else if (index == 2) {
                setTimeout(function() {
                    // 专业服务
                    const majorServiceChart = echarts.init(document.getElementById('daping-company-service-2'))
                    majorServiceChart.setOption({
                        color: ['#1BFFF2', '#795FFF', '#FF9000', '#FF408B', '#FAEE04', '#2EE466'],
                        grid: {
                            top: 30,
                            left: 40,
                            right: 30,
                            bottom: 20,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        yAxis: {
                            type: 'value',
                            offset: 15,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 8
                            }
                        },
                        series: [{
                            data: [120, 100, 20, 80, 70, 110, 80, 23, 54, 78, 12, 90],
                            itemStyle: {
                                barBorderRadius: 8,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#3AB6EB' },
                                        { offset: 1, color: '#49FCB0' }
                                    ]
                                )
                            },
                            type: 'bar',
                            barWidth: 8
                        }]
                    })
                }, 1)
            } else if (index == 3) {
                setTimeout(function() {
                    // 人才服务
                    const hrServiceChart = echarts.init(document.getElementById('daping-hr-service-chart'))
                    hrServiceChart.setOption({
                        color: ['#E7E90A', '#35A9FF'],
                        series: [
                            {
                                name: '人才服务',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                label: {
                                    formatter: '{b}: {d}%'
                                },
                                data: [
                                    { value: 200, name: '专业人才库' },
                                    { value: 735, name: '企业招聘' }
                                ]
                            }
                        ]
                    })
                }, 1)
            }
        }
    }
}
</script>

<style scoped>
.daping-bg {
  width: 1920px;
  height: 100%;
  min-height: 1080px;
  background: url(./static/bg.png) center top;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.daping-top {
  width: 1920px;
  height: 126px;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  z-index: 999999;
}
.daping-index-btn {
  position: absolute;
  width: 104px;
  height: 45px;
  background: url(./static/index-btn.png);
  left: 14px;
  top: 49px;
  font-size: 18px;
  color: #fff;
  line-height: 45px;
  box-sizing: border-box;
  padding-left: 49px;
  cursor: pointer;
  z-index: 9999999;
}
.daping-menhu-btn {
  position: absolute;
  width: 104px;
  height: 45px;
  background: url(./static/menhu-btn.png);
  left: 127px;
  top: 49px;
  font-size: 18px;
  color: #fff;
  line-height: 45px;
  box-sizing: border-box;
  padding-left: 49px;
  cursor: pointer;
  z-index: 9999999;
}
.daping-body {
  position: absolute;
  top: 110px;
  left: 20px;
  right: 20px;
  bottom: 10px;
}
.daping-row {
  height: 50%;
}
.daping-left {
  width: 27.5%;
  height: 100%;
  float: left;
}
.daping-middle {
  width: 45%;
  height: 100%;
  float: left;
}
.daping-right {
  width: 27.5%;
  height: 100%;
  float: left;
}
.daping-small-size {
  width: 48.5%;
  height: 46%;
  background: url(./static/item-bg-small.png);
  background-size: 100% 100%;
  float: left;
  position: relative;
}
.daping-normal-size {
  width: 100%;
  height: 46%;
  background: url(./static/item-bg-normal.png);
  background-size: 100% 100%;
  float: left;
  position: relative;
}
.daping-big-size {
  width: 96%;
  height: 46%;
  background: url(./static/item-bg-big.png);
  background-size: 100% 100%;
  float: left;
  margin-left: 2%;
  position: relative;
}
.robot-size {
  width: 48.5%;
  height: 46%;
  float: left;
  position: relative;
}
.sep {
  height: 4%;
  clear: both;
}
.daping-park-env {
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.daping-device-warn {
  margin-left: 3%;
}
.daping-device-monitor {
  margin-left: 3%;
}
.daping-parkingSpaceRental {
  margin-left: 3%;
}
.daping-robot {
  margin-left: 3%;
}
.center-gif {
  background: url(./static/center.gif);
  background-size: 100% 100%;
  margin-top: -46px;
  height: calc(100% + 46px);

  display: flex;
  justify-content: center;
  align-items: center;
}
.robot-gif {
  display: block;
  height: 110%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 0, 0);

}
.robot-play {
  width: 74px;
  height: 40px;
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  cursor: pointer;
}
.daping-title {
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  left: 18px;
  top: 11px;
  z-index: 99999;
}
.daping-title-wrap {
  overflow: hidden;
  position: absolute;
  left: 18px;
  top: 11px;
  z-index: 99999;
}
.daping-title-item {
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  float: left;
  margin-left: 26px;
  color: #4350F0;
  cursor: pointer;
}
.daping-title-item:nth-child(1) {
  margin-left: 0;
}
.daping-rt-car-flow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.daping-car-flow-wrap-box {
  width: 105px;
  height: 103px;
  background: url(./static/car-flow-bg.png);
  background-size: 100% 100%;
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.daping-car-flow-wrap-box:nth-child(2) {
  margin-right: 12px;
}
.car-space-icon {
  width: 33px;
  height: 25px;
  display: block;
}
.car-space-num {
  color: #FF9000;
  font-size: 18px;
  margin-top: 6px;
  height: 32px;
}
.d-roll-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}
.car-space-text {
  color: #fff;
  font-size: 11px;
  margin-top: 3px;
}
.tip-square {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 10px;
  height: 20px;
  margin-top: 25px;
}
.tip-square-real {
  width: 8px;
  height: 8px;
  background: #1BFFF2;
  margin-right: 6px;
  margin-top: -1px;
}
.tip-square-standard {
  width: 8px;
  height: 8px;
  background: #082962;
  margin-right: 7px;
  margin-left: 20px;
  margin-top: -1px;
}
.env-item {
  height: 25px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 10px;
  margin-top: 2px;
}
.env-item-text {
  width: 40px;
}
.env-progress {
  width: 145px;
  height: 8px;
  background: #082962;
  margin-right: 6px;
  border-radius: 8px;
}
.env-item-text-last {
  width: 32px;
}
.env-progress-in {
  width: 0px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(-90deg, #49F9B0, #3AB7EB);
  transition: all 0.65s linear;
}
#energy-water {
  width: 50%;
  height: 100%;
  float: left;
}
#energy-elec {
  width: 50%;
  height: 100%;
  float: left;
}
.daping-property-service {
  width: 100%;
  height: calc(100% - 32px);
  margin-top: 32px;
  overflow: hidden;
}
.daping-company-service {
  width: 100%;
  height: calc(100% - 32px);
  margin-top: 32px;
}
.daping-company-service-small {
  width: 105px;
  height: 105px;
  box-sizing: border-box;
  border: 6px dashed rgb(37, 63, 142);
  border-radius: 50%;
  position: absolute;
  top: 87px;
  right: 21px;
}
.daping-property-service-item {
  display: flex;
  color: #fff;
  font-size: 14px;
  height: 30px;
  align-items: center;
  padding-left: 20px;
}
.laba {
  display: block;
  width: 14px;
  height: 11px;
  margin-right: 10px;
}
.daping-hr-service-box {
  width: 110px;
  height: 70px;
  border: 1px solid #23277E;
}
.daping-hr-service-box:nth-child(2) {
  margin-top: 16px;
}
.daping-hr-service-box-up {
  height: 46px;
  font-size: 24px;
  color: #EDEF13;
  display: flex;
  align-items: center;
  justify-content: center;
}
.daping-hr-service-box-down {
  height: 24px;
  background: #35A9FF;
  font-size: 12px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.daping-hr-service-box-wrap {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px;
  box-sizing: border-box;
  float: left;
}
#daping-hr-service-chart {
  width: 75%;
  height: 100%;
  float: left;
}
.parkNum {
  color: #fff;
  font-size: 12px;
  position: absolute;
  left: 18px;
  top: 61px;
  line-height: 14px;
}
.parkNumKey {
  color: #FAEE04;
}
.parkNumTips {
  position: absolute;
  left: 21px;
  top: 121px;
}
.parkNumTip {
  display: flex;
  align-items: center;
  height: 14px;
  font-size: 12px;
  color: #fff;
}
.parkNumTip:nth-child(2) {
  margin-top: 14px;
}
.parkNumTipIcon {
  width: 7px;
  height: 7px;
  margin-right: 12px;
}
.parkNumTipIcon1 {
  background: #1BFFF2;
}
.parkNumTipIcon2 {
  background: #284695;
}
.parkDataRatoDown {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translate3d(-50%, 0, 0);
}
.parkDataRatoUp {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translate3d(-50%, 0, 0);
}
#parkOpData {
  width: 100%;
  height: 100%;
}
.h {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-left: 16px;
  margin-right: 7px;
  padding-top: 19px;
  overflow: hidden;
  line-height: 14px;
}
.row1 {
  width: 34%;
}
.row2 {
  width: 22%;
}
.row3 {
  width: 22%;
}
.row4 {
  width: 22%;
  color: #FF9000;
}
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-monitor-wrap {
  height: 130px;
  margin-top: 8px;
  margin-left: 16px;
  margin-right: 7px;
  overflow: hidden;
}
.daping-property-service-inner {
  height: 160px;
  margin-top: 12px;
  overflow: hidden;
}
.b {
  height: 26px;
  color: #18EAF2;
  font-size: 12px;
}
.video-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999999999;
}
.video-box {
  width: 998px;
  height: 560px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -499px;
  margin-top: -280px;
  background: #000;
  border: 2px solid #4CBDFF;
}
.video-instance {
  width: 100%;
  height: 100%;
}
.close-small {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 19px;
  top: 19px;
  cursor: pointer;
}
.zoom-big {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
}
.close {
  width: 29px;
  height: 29px;
  position: absolute;
  right: 19px;
  top: 19px;
  cursor: pointer;
}
.zoom-small {
  width: 28px;
  height: 28px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
}
.carouel-img {
  width: 100%;
  height: 100%;
  background: url(./static/lunbo-bg.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.el-carousel-box {
  width: 96%;
  margin-top: -80px;
}
.daping-company-service-left {
  width: 60%;
  height: 100%;
  float: left;
}
.daping-company-service-right {
  width: 40%;
  height: 100%;
  float: left;
}
.industryMergeTip {
  position: absolute;
  color: #fff;
  font-size: 12px;
  bottom: 22px;
  transform: translate3d(-50%, 0, 0);
}

.industryMergeTip1 {
  left: 9.9%;
}
.industryMergeTip2 {
  left: 29.7%;
}
.industryMergeTip3 {
  left: 49.5%;
}
.image-item {
  display: block;
  margin-left: 7%;
  width: 86%;
  height: 66%;
  transform: translate3d(0, 26%, 0);
  object-fit: cover;
}
.zy-slide img{
    width: 88%;
    height: 80%;
    display: block;
    object-fit: cover;
    margin-left: 6%;
    margin-top: 6.2%;
}
.zy-slide {
    margin: 0;
    margin-top: -60px;
}
.zy-slide li {
    background: url(./static/img-frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>
<style>
  .el-carousel__mask {
    opacity: 0;
  }
</style>