twin2025-mod/src/pages/components/Fac.vue

<template>
    <!--这是全厂模块的模块展示内容-->
    <div for="FAC"  id="top" class="top topfac" style="padding: 32px 0 0px 0;" @click="switchIndex">
            <div title="进入数据消费平台"
                style="cursor: pointer;height: 38px;width: 38px;text-align: center;float: right;margin: 0px 49px 0px 10px;"
                @click.stop="toAdmin"><img src="../../assets/image/toAdmin.png">
            </div>
            <div title="返回主视图"
                style="cursor: pointer;height: 38px;width: 38px;text-align: center;float: right;margin: 0 10px;"
                @click.stop="backMasterViewByFac"><img src="../../assets/image/view.png">
            </div>
            <div id="timeDisplay" title="当前时间" style="position: fixed; cursor: pointer; height: 38px; width: 300px; text-align: center; margin-top: 75px; line-height: 38px; top: 0; left: 50%; transform: translateX(-50%); z-index: 9999; color: #cccccc; font-weight: bold; font-size: 14px;"></div>
    </div>
    <div class="bg1"></div>
    <div class="abs tools" v-if="showIndexData=='dataindex'">
        <div :class="item.active?'btn active':'btn'" v-for="item in toolsBtnList" :style="{backgroundImage: item.active?`url(${btnFrontBg})`:''}" @click="loadTools(item);">
            <div>{{ item.name }}</div>
        </div>
    </div>
    <div class="abs leftPanel" v-if="showIndexData=='index'">
        <div class="title_row"><div class="title_left_line"></div><span>平均值</span><span style="color:#27e6ff">（本月）</span></div>
        <div class="data_row"><img src="../../assets/image/icon_00.png">
            <div style="margin-left: 10px;"><table cellpadding="0" cellspacing="0">
                <tbody>
                    <tr style="background-color:transparent">
                        <td style="border:0">
                            <div class="littleFont">成本<span style="color:#27e6ff">（总能耗）</span></div>
                            <div style="font-size: 32px;font-weight: bold;">
                                <NumberAnimation :value="costTotalTrans(deviceStatData.avgMonth.costTotal)" :decimal="2" />
                                <span style="font-size: 12px;">{{ deviceStatData.avgMonth.costTotal>10000?'万元/日':'元/日' }}</span>
                            </div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（单位能耗）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">
                                <NumberAnimation :value="deviceStatData.avgMonth.costJb" :decimal="2" />
                                <span style="font-size: 12px;"> 元/米</span>
                            </div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">染整<span style="color:#27e6ff">（单位能耗）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">
                                <NumberAnimation :value="deviceStatData.avgMonth.costRz" :decimal="2" />
                                <span style="font-size: 12px;"> 元/米</span>
                            </div>
                        </td>
                        <td style="border-bottom: 0;border-right: 1px solid #146c86;padding-left: 20px;">&nbsp;</td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（产出）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
                                <NumberAnimation :value="deviceStatData.avgMonth.yieldJb" :decimal="0" />
                                <span style="font-size: 12px;"> 米/日</span>
                            </div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（平均嫁动率）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
                                <NumberAnimation :value="deviceStatData.avgMonth.jdl" :decimal="2" />
                                <span style="font-size: 12px;"> %</span>
                            </div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">染整<span style="color:#27e6ff">（产出）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
                                <NumberAnimation :value="deviceStatData.avgMonth.yieldRz" :decimal="0" />
                                <span style="font-size: 12px;"> 米/日</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table></div>
        </div>
        <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>经编</span><span style="color:#27e6ff">（生产情况）</span></div>
        <div class="data_row" style="width: 300px;display: block;margin-top:0;">
            <div style="display: flex;">
                <div ref="echarts1" class="fac_pie"></div>
                <div ref="echarts2" class="fac_pie"></div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                <div class="littleFont">产量（今日）</div>
                <div style="font-size: 22px;font-weight: bold;">
                    <NumberAnimation :value="deviceStatData.currYield.jb.yield" :decimal="0" />
                    <span class="littleFont">米</span>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.jb.yield/deviceStatData.currYield.jb.yieldMax*100)+'%',backgroundColor: '#008899'}"></div>
                    <div class="abs fac_progress" style="background-color: #072e47;"></div>
                </div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
                <div style="font-size: 22px;">
                    <b>
                        <NumberAnimation :value="deviceStatData.currYield.jb.openNum" :decimal="0" />
                        <span class="littleFont">台</span>
                    </b>
                    <b style="float: right;">
                        <NumberAnimation :value="deviceStatData.currYield.jb.totalNum" :decimal="0" />
                        <span class="littleFont">台</span>
                    </b>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.jb.openRatio+'%',backgroundColor: '#008899'}"></div>
                    <div class="abs fac_progress" style="background-color: #072e47;"></div>
                </div>
            </div>
        </div>
        <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>染整</span><span style="color:#27e6ff">（生产情况）</span></div>
        <div class="data_row" style="width: 300px;display: block;margin-top:0;">
            <div style="display: flex;">
                <div ref="echarts3" class="fac_pie"></div>
                <div ref="echarts4" class="fac_pie"></div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                <div class="littleFont">印染（今日）</div>
                <div style="font-size: 22px;font-weight: bold;">
                    <NumberAnimation :value="deviceStatData.currYield.rz.yield" :decimal="0" />
                    <span class="littleFont">米</span>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.rz.yield/deviceStatData.currYield.rz.yieldMax*100)+'%'}"></div>
                    <div class="abs fac_progress"></div>
                </div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
                <div style="font-size: 22px;">
                    <b>
                        <NumberAnimation :value="deviceStatData.currYield.rz.openNum" :decimal="0" />
                        <span class="littleFont">台</span>
                    </b>
                    <b style="float: right;">
                        <NumberAnimation :value="deviceStatData.currYield.rz.totalNum" :decimal="0" />
                        <span class="littleFont">台</span>
                    </b>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.rz.openRatio+'%'}"></div>
                    <div class="abs fac_progress"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="abs rightPanel" v-if="showIndexData=='index'">
        <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
            <span>生产趋势</span><span style="color:#27e6ff">（7天）</span>
            <span style="margin-left: auto !important;">
                <span :class="buttonCode1=='Length'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Length')">米数</span>
                <span :class="buttonCode1=='Weight'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Weight')">重量</span>
            </span>
        </div>
        <div class="data_row" ref="echarts_sc_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;background: rgb(0 85 102 / 40%);"></div>
        <div class="title_row" style="line-height: 30px;margin-top: 8%;"><div class="title_left_line" style="margin-top: 7px;"></div>
            <span>能耗趋势</span><span style="color:#27e6ff">（30天）</span>
            <span style="margin-left: auto !important;">
                <span :class="buttonCode2=='price'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('price')">折算</span>
                <span :class="buttonCode2=='electricity'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('electricity')">电</span>
                <span :class="buttonCode2=='steam'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('steam')">气</span>
                <span :class="buttonCode2=='water'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('water')">水</span>
            </span>
        </div>
        <div class="data_row" ref="echarts_used_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;background: rgb(0 85 102 / 40%);"></div>
    </div>
</template>
<script>
import { ref,onMounted,watch,emit,onUnmounted } from 'vue';
import {useRouter} from 'vue-router';
import api from "@/api/system";
import * as echarts from 'echarts';
import NumberAnimation from './NumberAnimation.vue';
export default {
    components: {
        NumberAnimation
    },
    props:{
        facModelLoadState:{
            type:Boolean,
            required: true
        },
        userRole:{
            type:String
        }
    },
    setup(props,{emit}) {
        const router = useRouter();
        const isShowIframeWin=ref(false);
        const iframeWinData = ref({});
        const echarts1 = ref(null);
        const echarts2 = ref(null);
        const echarts3 = ref(null);
        const echarts4 = ref(null);
        const echarts_sc_qushi = ref(null);
        const echarts_used_qushi = ref(null);
        const showIndexData=ref('');
        const btnFrontBg = require('@/assets/image/nav_btn_front.png');
        const toolsBtnList=ref([
            {"code":"tools01","name":"能耗","active":true},
            {"code":"tools02","name":"成本","active":false},
            {"code":"tools03","name":"销售","active":false},
        ]);
        
        let buttonCode1 = ref('');
        let buttonCode2 = ref('');
        let deviceStatData=ref({"avgMonth":{},"currYield":{"jb":{},"rz":{}}});
         const dataTypeUnit={
            'Length':'米',
            'Weight':'吨',
            'price':'元',
            'electricity':'kwh',
            'steam':'GJ',
            'water':'m³',
        };
        let getDataTimer=null;
        let getDataTimer1 = null;
        let getDataTimer2 = null;
        let getDataTimer3 = null;
        let getDataTimer4 = null;
        let MarkerMapFac={};
        let FacStockData={};
        let markerLClickObj = null;
        let echartsEleIns_0=null;
        let echartsEleIns_1=null;
        watch(() => props.facModelLoadState, newVal=> {
            if(newVal){
                //模型加载完成
                console.log('全厂模型加载完成')
                try{
                    backMasterViewByFac();
                    if(player!=null && player.Native!=null){
                        player.on('mousemove',function(x,y){
                            if(window.CurrentTargetType!='FAC') return;
                            console.log('mousemove:',x,y)
                            isMoveInBuild(x,y);
                        });
                        (async()=>{
                            let marklst = await player.Native.GisMarker.getMarkerList();
                            if(marklst!=null){
                                for(var i=0;i<marklst.length;i++){
                                    if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(marklst[i].id)
                                }
                            }
                            loadmarkers();                           
                        })();
                    }
                    MarkerMapFac["FAC"] = {};


                }catch(e){
                    window.location.reload();
                }
            }
        },{deep:true,immediate:true})

        watch(() => props.userRole, newVal=> {
            showIndexData.value = newVal;
        },{deep:true,immediate:true})

        
        function loadTools(item) {
            toolsBtnList.value.forEach(btn => {
                btn.active = (btn.code === item.code);
            });
        }

        let DataFull={
            GetFacData:function(){
                getDataTimer = setTimeout(function () {
                    //每1分钟主动查询一次数据
                    DataFull.GetFacData()
                }, 60*1000);
                api.GetFacData().then((res)=>{
                    if(window.CurrentTargetType!='FAC') return;
                    if (res == null || player.Native==null || window.CurrentTargetType!='FAC') {
                        return
                    }
                    FacStockData = res||{};
                    updateMarkerData();
                });
            },
            GetDeviceStat:function(){
                if(showIndexData.value=='dataindex') {
                    return;
                }
                getDataTimer1 = setTimeout(function () {
                    //每1分钟主动查询一次数据
                    DataFull.GetDeviceStat()
                }, 60*1000);
                api.GetFacDeviceStat().then(res=>{
                    if(window.CurrentTargetType!='FAC') return;
                    if (res == null || player.Native==null || window.CurrentTargetType!='FAC') {
                        return
                    }
                    if(res.code!=200){
                        /*
                        let msg = ElMessage({
                            message:"正在加载数据",
                            type:"info",
                            duration:0,
                        })
                        */
                        return;
                    }
                    deviceStatData.value = res.data;
                    LoadSCLine(buttonCode1.value=='' ? 'Length':buttonCode1.value);
                    LoadUsedLine(buttonCode2.value==''?'price':buttonCode2.value);
                    LoadJBPie();
                    LoadRZPie();
                })
            }
        }
        //全局厂房最佳视图
        async function backMasterViewByFac(){
            if(window.CurrentTargetType!='FAC') return;
            // player.Native.Camera.moveTo([235.678127000173, 13.38107286701451, 74.13573809425804], [-1248.3191825020908, -262.59031050373517, -409.93944372657353], [-0.30023176822741604, -0.055832565112502126, 0.9522308596238611], 1);
            await player.Native.Camera.moveTo([132.11876502209185, -440.46670198759625, 492.25734718993556],
            [-45.87571144104003, -44.632896423339844, 43.90447044372559],
            [-0.2149817792494004, 0.7110548607426664, 0.6694653236762824], 1);
        }

        function isPointInPolygon(lat, lon, polygon) {
            let intersectCount = 0;
            const pointCount = polygon.length;

            for (let i = 0; i < pointCount; i++) {
                const vertex1 = polygon[i];
                const vertex2 = polygon[(i + 1) % pointCount];
                if (
                (lat > Math.min(vertex1.latitude, vertex2.latitude) &&
                lat <= Math.max(vertex1.latitude, vertex2.latitude)) &&
                (lon <= Math.max(vertex1.longitude, vertex2.longitude))
                ) {
                    const xIntersect =
                    ((lat - vertex1.latitude) * (vertex2.longitude - vertex1.longitude)) /
                    (vertex2.latitude - vertex1.latitude) +
                    vertex1.longitude;

                    if (lon < xIntersect) {
                        intersectCount++;
                    }
                }
            }

            return intersectCount % 2 !== 0;
        }

        function isMoveInBuild(x,y){ 
            let buildingNo = isMoveIn01thBuild(x,y);
            if(buildingNo=="") buildingNo = isMoveIn02thBuild(x,y);
            if(buildingNo=="")  buildingNo = isMoveIn03thBuild(x,y);
            if(buildingNo=="")  buildingNo = isMoveIn04thBuild(x,y);
                for (var marker in MarkerMapFac["FAC"]) {
                    var opt = MarkerMapFac["FAC"][marker];
                    var dataType = opt["building"];
                    if(dataType==null || dataType=="") continue;
                    if(dataType==buildingNo){
                        if(!opt.visible){
                            opt.visible = true;
                            player.Native.GisMarker.update(marker, opt);
                        }
                    }else if(opt.visible){
                        opt.visible = false;
                        player.Native.GisMarker.update(marker, opt);
                    }
                }
            }

        function isMoveIn01thBuild(x,y){
            if(isPointInPolygon(x,y,BuilderXY["01"])){
                return "01";
            }
            return "";
        }
        function isMoveIn02thBuild(x,y){
            if(isPointInPolygon(x,y,BuilderXY["02"])){
                return "02";
            }
            return "";
        }
        function isMoveIn03thBuild(x,y){
            if(isPointInPolygon(x,y,BuilderXY["03"])){
                return "03";
            }
            return "";
        }
        function isMoveIn04thBuild(x,y){
            if(isPointInPolygon(x,y,BuilderXY["04"])){
                return "04";
            }
            return "";
        }

        async function updateMarkerData(){
            if(MarkerMapFac==null) return;
            for (var key in MarkerMapFac) {
                        if(key=="FAC"){
                            for (var marker in MarkerMapFac[key]) {
                                var opt = MarkerMapFac[key][marker];
                                var dataType = opt["userData"];
                                if(dataType==null) continue;
                                dataType = dataType.split("|");
                                var dataMap = FacStockData[dataType[0]];//从返回结果中获取到当前数据类型对应的统计结果
                                //console.log(dataType,dataMap)
                                if(dataMap==null) continue;
                                var dataTpl = dataType[1]; //从拆分结果中获取数据模板
                                var dataText = dataTpl;
                                //将模板中的属性替换成数据值
                                for (var attr in dataMap) {
                                    /*
                                    if(attr=="fdy" || attr=="poy"){
                                        for (var yclattr in dataMap[attr]) {
                                            dataText = dataText.replace("{"+attr+"."+yclattr+"}",dataMap[attr][yclattr].toString().padEnd(6," "));
                                        }
                                        continue
                                    }
                                    */
                                    dataText = dataText.replace("{"+attr+"}",dataMap[attr].toString().padEnd(7," "));
                                }
                                //更新GIS标记内容
                                opt["text"]=dataText;
                                player.Native.GisMarker.update(marker, opt);
                            }
                            break;
                        }
                    }
        }

        async function loadBuilderInfo(){ 
            var imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip_red.png");
            var options = {
                "text": "1号厂房\r\r长133米*宽78米*高40米",
                "visible": false,
                //"maxLod": 130,
                "minLod": 0,
                "textFontSize":16,
                "textColor": parseInt("0xedededff"),
                "contentPadding":[10,10,10,10],
                "nodeOffset":[-104,-85],
                "building": ""
            };
            options.pos = [-47.242690563201904, -107.442626953125, 46.22212219238281];
            options.imgId = imgid
            options.imgSize = [200, 100];
            options.building = "01";
            var markPtr = await player.Native.GisMarker.create(options);
            if(MarkerMapFac["FAC"]==null) MarkerMapFac["FAC"]={};
            MarkerMapFac["FAC"][markPtr]=options;
            let option4= JSON.parse(JSON.stringify(options));
            option4.text = "4号厂房\r\r长37米*宽62米*高33米";
            option4.pos = [-215.53692626953125, -9.105635643005371, 38.3607177734375];
            option4.building = "04";
            var markPtr = await player.Native.GisMarker.create(option4);
            MarkerMapFac["FAC"][markPtr]=option4;
            let option2= JSON.parse(JSON.stringify(options));
            option2.text = "2号厂房\r\r长306米*宽62米*高45米";
            option2.pos = [78.97850799560547, -7.938839912414551, 31.4000244140625];
            option2.building = "02";
            var markPtr = await player.Native.GisMarker.create(option2);
            MarkerMapFac["FAC"][markPtr]=option2;
            let option3= JSON.parse(JSON.stringify(options));
            option3.text = "3号厂房\r\r长286米*宽62.8米*高23.4米";
            option3.pos = [-60.97850799560547, 77.938839912414551, 31.4000244140625];
            option3.building = "03";
            var markPtr = await player.Native.GisMarker.create(option3);
            MarkerMapFac["FAC"][markPtr]=option3;
        }
        async function loadmarkers(){
                //获取4号楼顶对象
                //var obj02 = await player.Native.ModelTree.findItemByName("Box013",0,true,1);
                var imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip3.png");
                var options = {
                            "text": "白坯布（"+StockTypeUnit['bpb']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-\r",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xedededff"),
                            "contentPadding":[10,10,10,10],
                            "nodeOffset":[-154,-130],
                            "userData":"bpb|白坯布（"+StockTypeUnit['bpb']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };

                //var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(obj02.item);
                //options.pos = [obj02Aabb.aabb[0][0]-40, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+115];
                options.pos = [-215.53692626953125, -9.105635643005371, 38.3607177734375];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [0, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                //await player.Native.GisMarker.update(markPtr, options);
                if(MarkerMapFac["FAC"]==null) MarkerMapFac["FAC"]={};
                MarkerMapFac["FAC"][markPtr]=options;
                //获取盘头仓对象
                //var pantou = await player.Native.ModelTree.findItemByName("Object023",0,true,1);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "盘头（"+StockTypeUnit['pt']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xedededff"),
                            "contentPadding":[10,10,10,10],
                            "nodeOffset":[-154,-130],
                            "userData":"pt|盘头（"+StockTypeUnit['pt']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                //var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
                options.pos =[78.97850799560547, -7.938839912414551, 31.4000244140625];// [obj02Aabb.aabb[0][0], obj02Aabb.aabb[0][1]-30, obj02Aabb.aabb[0][2]+45];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [265, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //获取原材料仓对象
                //var pantou = await player.Native.ModelTree.findItemByName("B412",0,true,1);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "原材料（"+StockTypeUnit['ycl']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-\r",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xedededff"),
                            "contentPadding":[10,10,10,10],
                            "nodeOffset":[-154,-130],
                            "userData":"ycl|原材料（"+StockTypeUnit['ycl']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                //var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
                options.pos = [-92.3292236328125, -83.65309143066406, 44];// [obj02Aabb.aabb[0][0]-50, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+60];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [0, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "成品（"+StockTypeUnit['cp']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xedededff"),
                            "contentPadding":[10,10,10,10],
                            "nodeOffset":[-154,-130],
                            "userData":"cp|成品（"+StockTypeUnit['cp']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                options.pos = [7.242690563201904, -137.442626953125, 46.22212219238281];// [obj02Aabb.aabb[0][0]+100, obj02Aabb.aabb[0][1]+10, obj02Aabb.aabb[0][2]+75];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [265, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //标记点击
                player.Native.GisMarker.EventGisMarkerLClick.connect((event) => {
                    markerLClickObj = MarkerMapFac["FAC"][event.markerId];
                    if(markerLClickObj==null || FacStockData==null){
                        emit('markerLClick',{});
                        return;
                    }
                    setTimeout(function(dataType){
                        if(dataType==null) return;
                        dataType = dataType.split("|");
                        //打开库存趋势窗口
                        showStockTrend(dataType[0]);
                    },100,markerLClickObj["userData"]);
                    emit('markerLClick',markerLClickObj);
                });
                updateMarkerData();
                loadBuilderInfo();
        }
        function LoadSCLine(dataType) {
            buttonCode1.value = dataType;
            let data = deviceStatData.value.prodTrade;
            //生产趋势
            //获取数据中weight、aweight、bweight
            var t = echarts_sc_qushi.value;
            var week_aefficiency = [];
            var week_befficiency = [];
            var times = [];
            var v_series = [];
            for (var i = 0; i < data.length; i++) {
                var tv = data[i]['date'];
                times.push([tv,data[i].tips]);
                if(dataType=='Length'){
                    week_aefficiency.push({value:data[i]['jbLength'],type:'Length'})
                    week_befficiency.push({value:data[i]['rzLength'],type:'Length'})
                }else{
                    week_aefficiency.push({value:data[i]['jbWeight'],type:'Weight'})
                    week_befficiency.push({value:data[i]['rzWeight'],type:'Weight'})
                }
            }
            if (week_aefficiency.length == 0 && week_befficiency.length==0) {
                return
            }
            v_series.push({
                name: "经编", type: 'line',  //symbol: 'none',
                data: week_aefficiency, itemStyle: {
                    normal: {
                        color: '#fbc16b', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fbc16b' // 这里同时设置线头的颜色
                        }
                    }
                }
            });
            v_series.push({
                name: "染整", type: 'line',  //symbol: 'none',
                dataType:'Weight',
                data: week_befficiency, itemStyle: {
                    normal: {
                        color: '#fc4850', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fc4850' // 这里同时设置线头的颜色
                        }
                    }
                }
            });
            var opt = {
                title: {
                    show: false, //不显示标题
                    text: '',
                    textStyle: {
                        color: "rgb(89, 151, 229)",
                        fontWeight: "bold"
                    },
                    top: "0px",
                    left: "30px"
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left: "10px",
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#5c6c7c'
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
                    formatter: function (params) {
                        let xv='';
                        let result = '';
                        params.forEach(function (item) {
                            xv=`${item.name}`;
                            xv = xv.split(',')[1]+'<br>';
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {
                        rotate: 0,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_1!=null){
                echartsEleIns_1.dispose();

            }
            echartsEleIns_1 = echarts.init(t);
            echartsEleIns_1.setOption(opt);
        }
        function LoadUsedLine(dataType){
            buttonCode2.value = dataType;
            let data = deviceStatData.value.energyTrade;
            //能耗趋势
            var t = echarts_used_qushi.value;
            var times = [];
            var v_series = [];
            var week_aefficiency = [];
            var week_befficiency = [];
            for (var i = 0; i < data.length; i++) {
                times.push([data[i]['date'],data[i].tips]);
                if(data[i]['jb'][dataType]!=null) week_aefficiency.push({value:data[i]['jb'][dataType],type:dataType});
                if(data[i]['rz'][dataType]!=null) week_befficiency.push({value:data[i]['rz'][dataType],type:dataType});
            }
            if (week_aefficiency.length> 0) {
                v_series.push({
                    name: "经编", type: 'line', //symbol: 'none',
                    data: week_aefficiency,
                    symbol: 'circle', // 使用圆作为折点标记
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            color: '#fbc16b', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#fbc16b' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
            }
            if(week_befficiency.length>0){
                v_series.push({
                    name: "染整", type: 'line', //symbol: 'none',
                    data: week_befficiency,
                    symbol: 'circle', // 使用圆作为折点标记
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            color: '#fc4850', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#fc4850' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
            }
            var opt = {
                title: {
                    show: false, //不显示标题
                    text: '',
                    textStyle: {
                        color: "rgb(89, 151, 229)",
                        fontWeight: "bold"
                    },
                    top: "0px",
                    left: "30px"
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        let xv='';
                        let result = '';
                        params.forEach(function (item) {
                            xv=`${item.name}`;
                            xv = xv.split(',')[1]+'<br>';
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left:"10px",
                    icon:"circle",
                },
                grid: {
                    left: '3%',
                    right: '1%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 45,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_0!=null){
                echartsEleIns_0.dispose();
            }
            echartsEleIns_0 = echarts.init(t);
            echartsEleIns_0.setOption(opt);
        }
        function LoadJBPie(){
            //嫁动率
            const myChart = echarts.init(echarts1.value);
            // 配置项
            const option = {
            title: {
                text: '进度仪表盘',
                left: 'center',
                top: 'top',
                show:false,
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '经编',
                type: 'gauge',
                startAngle: '90',
                endAngle: '-270',
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    itemStyle:{
                        color:"#28c4d8"
                    },
                    roundCap: true, //圆角
                    width: 8 // 进度条宽度
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                        width: 8, // 仪表盘宽度，
                        color: [[1, '#052c45']] // 底色
                    }
                },
                axisTick: {
                    show: false // 隐藏刻度
                },
                splitLine: {
                    show:false,
                    length: 15, // 分割线长度
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 14,
                    show:false,
                },

                data: [
                    {
                        value: deviceStatData.value.currYield.jb.jdl, // 初始进度值
                        name: '当前嫁动率',
                        title:{
                            offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                            color: '#27e6ff', // 文字颜色
                            fontSize: 14*BODY_H_RATE // 文字大小
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: [0, 10],
                            formatter: '{value}%',
                            color: '#27e6ff', // 文字颜色
                            fontSize: 24*BODY_H_RATE // 文字大小
                        },
                    }
                ]
                },
                {
                    type: 'pie',
                    radius: ['59%', '60.5%'],
                    hoverAnimation: false,
                    clockWise: false,
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 255, 255,.3)',
                            color: '#008596',
                        }
                    },
                    label: {
                        show: false
                    },
                    data: [100]
                },
            ]
            };
            // 使用配置项渲染图表
            myChart.setOption(option);
            //开机率
            const kjOpt = {
                title: {
                    text: '进度仪表盘',
                    left: 'center',
                    top: 'top',
                    show:false,
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                    name: '经编',
                    type: 'gauge',
                    startAngle: '90',
                    endAngle: '-270',
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        itemStyle:{
                            color:"#28c4d8"
                        },
                        roundCap: true, //圆角
                        width: 8 // 进度条宽度
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            width: 8, // 仪表盘宽度，
                            color: [[1, '#052c45']] // 底色
                        }
                    },
                    axisTick: {
                        show: false // 隐藏刻度
                    },
                    splitLine: {
                        show:false,
                        length: 15, // 分割线长度
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 14,
                        show:false,
                    },

                    data: [
                        {
                            value: deviceStatData.value.currYield.jb.openRatio, // 初始进度值
                            name: '开机率',
                            title:{
                                offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                                color: '#27e6ff', // 文字颜色
                                fontSize: 14*BODY_H_RATE // 文字大小
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [0, 10],
                                formatter: '{value}%',
                                color: '#27e6ff', // 文字颜色
                                fontSize: 24*BODY_H_RATE // 文字大小
                            },
                        }
                    ]
                    },
                    {
                        type: 'pie',
                        radius: ['59%', '60.5%'],
                        hoverAnimation: false,
                        clockWise: false,
                        tooltip:{
                            show:false,
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 255, 255,.3)',
                                color: '#008596',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ]
            };
            const kj = echarts.init(echarts2.value);
            kj.setOption(kjOpt);
        }
        function LoadRZPie(){
            //嫁动率
            const myChart = echarts.init(echarts3.value);
            // 配置项
            const option = {
            title: {
                text: '进度仪表盘',
                left: 'center',
                top: 'top',
                show:false,
            },
            tooltip: {
                formatter: function(a){
                    return a.seriesName+'<br>'+a.name+" : "+a.value/100*deviceStatData.value.currYield.rz.maxLine+'条';
                }
            },
            series: [
                {
                name: '染整',
                type: 'gauge',
                startAngle: '90',
                endAngle: '-270',
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    itemStyle:{
                        color:"#28c4d8"
                    },
                    roundCap: true, //圆角
                    width: 8 // 进度条宽度
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                        width: 8, // 仪表盘宽度，
                        color: [[1, '#052c45']] // 底色
                    }
                },
                axisTick: {
                    show: false // 隐藏刻度
                },
                splitLine: {
                    show:false,
                    length: 15, // 分割线长度
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 14,
                    show:false,
                },

                data: [
                    {
                        value: deviceStatData.value.currYield.rz.openLine/deviceStatData.value.currYield.rz.maxLine*100, // 初始进度值
                        name: '开动产线',
                        title:{
                            offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                            color: '#27e6ff', // 文字颜色
                            fontSize: 14*BODY_H_RATE // 文字大小
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: [0, 10],
                            formatter:function(v){
                                return v/100*deviceStatData.value.currYield.rz.maxLine+'条'
                            },
                            color: '#27e6ff', // 文字颜色
                            fontSize: 24*BODY_H_RATE // 文字大小
                        },
                    }
                ]
                },
                {
                    type: 'pie',
                    radius: ['59%', '60.5%'],
                    hoverAnimation: false,
                    clockWise: false,
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 255, 255,.3)',
                            color: '#008596',
                        }
                    },
                    label: {
                        show: false
                    },
                    data: [100]
                },
            ]
            };
            // 使用配置项渲染图表
            myChart.setOption(option);
            //开机率
            const kjOpt = {
                title: {
                    text: '进度仪表盘',
                    left: 'center',
                    top: 'top',
                    show:false,
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                    name: '染整',
                    type: 'gauge',
                    startAngle: '90',
                    endAngle: '-270',
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        itemStyle:{
                            color:"#28c4d8"
                        },
                        roundCap: true, //圆角
                        width: 8 // 进度条宽度
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            width: 8, // 仪表盘宽度，
                            color: [[1, '#052c45']] // 底色
                        }
                    },
                    axisTick: {
                        show: false // 隐藏刻度
                    },
                    splitLine: {
                        show:false,
                        length: 15, // 分割线长度
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 14,
                        show:false,
                    },

                    data: [
                        {
                            value: deviceStatData.value.currYield.rz.openRatio, // 初始进度值
                            name: '开机率',
                            title:{
                                offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                                color: '#27e6ff', // 文字颜色
                                fontSize: 14*BODY_H_RATE // 文字大小
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [0, 10],
                                formatter: '{value}%',
                                color: '#27e6ff', // 文字颜色
                                fontSize: 24*BODY_H_RATE // 文字大小
                            },
                        }
                    ]
                    },
                    {
                        type: 'pie',
                        radius: ['59%', '60.5%'],
                        hoverAnimation: false,
                        clockWise: false,
                        tooltip:{
                            show:false,
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 255, 255,.3)',
                                color: '#008596',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ]
            };
            const kj = echarts.init(echarts4.value);
            kj.setOption(kjOpt);
        }
        function showStockTrend(type){
            //iframeWinData.value = {class:'newwin bpbWin',src:'/stock-trend-fx#'+type,title:StockTypeName[type]+'库存趋势'};
            //isShowIframeWin.value=true;
            emit('OpenIframeWin',{class:'newwin bpbWin',src:'/stock-trend-fx#'+type,title:StockTypeName[type]+'库存趋势'});

        }
        function costTotalTrans(v){
            if(v>10000) return (v/10000).toFixed(2);
            return v;
        }
        //切换到数据消费后台
        function toAdmin(){
          window.open(process.env.VUE_APP_SSO+'?role='+(showIndexData=='index'?"producer":"manager"));
        }
        function switchIndex(){
            if(showIndexData.value=='index'){
                router.push('/datamain');
            }else{
                router.push('/main');
            }
        }
        onMounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(getDataTimer1);
            clearTimeout(getDataTimer2);
            clearTimeout(getDataTimer3);
            clearTimeout(getDataTimer4);
            DataFull.GetFacData();
            DataFull.GetDeviceStat();
        });
        onUnmounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(getDataTimer1);
            clearTimeout(getDataTimer2);
            clearTimeout(getDataTimer3);
            clearTimeout(getDataTimer4);
            if(player==null || player.Native==null) return;
            (async ()=>{
                let marklst = await player.Native.GisMarker.getMarkerList();
                console.log('fac unmouned:',marklst)
                if(marklst==null) return;
                for(var i=0;i<marklst.length;i++){
                    if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(marklst[i].id)
                }
            })();

        });
        return{
            showIndexData,
            btnFrontBg,
            toolsBtnList,
            backMasterViewByFac,
            loadmarkers,
            showStockTrend,
            loadTools,
            LoadSCLine,
            LoadUsedLine,
            isShowIframeWin,
            iframeWinData,
            markerLClickObj,
            costTotalTrans,
            getDataTimer,
            getDataTimer1,
            getDataTimer2,
            getDataTimer3,
            getDataTimer4,
            deviceStatData,
            echarts1,
            echarts2,
            echarts3,
            echarts4,
            echarts_sc_qushi,
            echarts_used_qushi,
            buttonCode1,
            buttonCode2,
            switchIndex,
            toAdmin,
        }
    }
}
        
</script>
<style scope="FAC">
.bg1{
    z-index: 1; pointer-events: none;position: absolute;
    top: calc(90px * var(--hRate));
    left: 0;
    width: 1877.54px;
    height: 90%;
    margin-left: 19px;
    border: 2px solid #17666e;
    border-top: 0px;
    background:url('../../assets/image/bg.png');
    -webkit-mask-image:radial-gradient(circle, transparent 40%, #ffffff 83%);
    /*
    background:url('../../assets/image//bg.png');
    -webkit-mask-image:radial-gradient(circle, transparent 26%, #95afc5 54%);

    background:
    repeating-linear-gradient(
      45deg,
      #ccc 0, #ccc 10px,
      transparent 10px, transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      #ccc 0, #ccc 10px,
      transparent 10px, transparent 20px
    );
    background-size: 20px 20px;
   */
}
.tools{
    display: flex;
    justify-content: center;
    flex-flow: row;
    top: calc(80px * var(--hRate)) !important;
    width: 98.2%;
    z-index: 11;

}
.tools .btn{
    width: 100px !important;
    height: 140px !important;
    color: #1eabb7;
    cursor: pointer;
    font-size: 16px;
}
.tools .btn.active>div{
    border: 2px solid #74b7c4 !important;
    width: 66px;
    height: 32px;
    line-height: 32px;
    box-shadow: 0px 0px 27px 2px rgb(225 208 208 / 67%);
    background-color: #eeeff140;
    border-radius: 5px;
}
.devicePanel{
    position: absolute;top: 5%;left: 2%;width: 300px;height: 306px;z-index: 2;color: rgb(255, 255, 255);font-size: 18px;padding: 10px;border: 1px solid #b4a9e6;background: #1d476c1c;border-radius: 5px;box-shadow: 0px 0px 4px #5d7a94;
}
.deviceItem{
    line-height: 35px;width:80%;display:inline-block;height: 60px;font-weight: bold;
}
.deviceDetailItem{
    line-height: 20px;width:80%;display:inline-block;font-weight: normal;font-size: 14px;margin-left: 58px;color: #e1d7e8;
}
.precentBg{
    width: 100%;height: 10px;display: inline-block;background: rgb(221 219 224);border-radius: 10px;
}
.productionPanel{
    position: absolute;
    top: 9%;
    right: 5%;
    width: 11%;
    color: #fff;
    font-size: 14px;
    z-index: 2;
    filter: blur(0px);
    backdrop-filter: blur(5px);
    /*border: 1px solid #b4a9e6;*/
    /*background: #1d476c1c;*/
    border-radius: 5px;
    box-shadow: 0px 0px 10px #c1cce587;
    /*transform: rotateZ(0deg) rotateX(20deg) rotateY(-58deg) skew(2deg);*/

}
.productionPanel .content{
    background: transparent;padding: 5px;
}
.productionPanel .title{
    text-align: center;width: 100%;font-weight: bold;line-height: 32px;font-size: 18px;color: #d6dce3;
}
.productionPanel .cyc{
    border: 10px solid #2566ad;
    border-radius: 50%;
    height: 66px;
    text-align: center;
    width: 33%;
    line-height: 66px;
    background: #258cce;
    font-size: 19px;
    margin: 10px 29%;
}
</style>