{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\homePage.vue?vue&type=template&id=b847b6c2&scoped=true&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\homePage.vue","mtime":1705647213580},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<div class=\"screen-page\">\n    <threeDModel\n        ref=\"model\"\n        :activeDeviceList=\"activeDeviceList\"\n    ></threeDModel>\n    <div class=\"screen-page-mask\"></div>\n    <keep-alive>\n        <headline @changeTollStation=\"getData\"></headline>\n    </keep-alive>\n    <keep-alive>\n        <div class=\"left-sidebar blue-border\">\n            <div class=\"tollstation-infor\">\n                <div class=\"section-header\">\n                    <span>今日信息概括</span>\n                </div>\n                <div class=\"circle\"></div>\n                <div class=\"section1\">\n                    <div class=\"target target1\">\n                        <div class=\"label\">今日通行费</div>\n                        <div class=\"count\">{{ actualityMoney }} 元</div>\n                    </div>\n                    <div class=\"target target2\">\n                        <div class=\"label\">今日车流量</div>\n                        <div class=\"count\">{{ carFlow }} 辆</div>\n                    </div>\n                </div>\n                <div class=\"section-content-block lane\">\n                    <div class=\"icon-lane\"></div>\n                    <div class=\"section-content-container flex-column\">\n                        <div class=\"lane-total flex-around\">\n                            <span class=\"lane-label\">车道总数</span>\n                            <img\n                                src=\"../../assets/img/bigScreen/icon-arrow.png\"\n                                class=\"img-arrow\"\n                            />\n                            <span class=\"lane-count\">{{\n                                laneDataTotal\n                            }}</span>\n                        </div>\n                        <div class=\"lane-line\"></div>\n                        <div class=\"lane-type flex-around\">\n                            <div class=\"lane-type-item\">\n                                <div class=\"label\">ETC车道</div>\n                                <div class=\"count\">{{ laneDataETC }}</div>\n                            </div>\n                            <div class=\"lane-type-item\">\n                                <div class=\"label\">混合车道</div>\n                                <div class=\"count\">{{ laneDataMixin }}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"section-content-block\">\n                    <div class=\"icon-transaction-rate\"></div>\n                    <div class=\"section-content-container flex-column\">\n                        <div class=\"container-name\">今日交易成功率</div>\n                        <div class=\"container-content\">\n                            <template\n                                v-for=\"item in transactionRate.int.split(\n                                    ''\n                                )\"\n                            >\n                                <keep-alive :key=\"item\">\n                                    <div\n                                        class=\"number-blocks-wrapper\"\n                                        :style=\"`transform: translate(0, ${\n                                            -100 * Number(item)\n                                        }%)`\"\n                                    >\n                                        <div\n                                            v-for=\"num in 10\"\n                                            :key=\"num\"\n                                            class=\"number-block\"\n                                        >\n                                            {{ num - 1 }}\n                                        </div>\n                                    </div>\n                                </keep-alive>\n                            </template>\n                            <div\n                                class=\"container-content-unit point\"\n                                v-if=\"transactionRate.decimal\"\n                            >\n                                <span>.</span>\n                            </div>\n                            <template\n                                v-for=\"item in transactionRate.decimal.split(\n                                    ''\n                                )\"\n                            >\n                                <keep-alive :key=\"item\"\n                                    ><div\n                                        class=\"number-blocks-wrapper\"\n                                        :style=\"`transform: translate(0, ${\n                                            -100 * Number(item)\n                                        }%)`\"\n                                    >\n                                        <div\n                                            v-for=\"num in 10\"\n                                            :key=\"num\"\n                                            class=\"number-block\"\n                                        >\n                                            {{ num - 1 }}\n                                        </div>\n                                    </div>\n                                </keep-alive>\n                            </template>\n                            <div class=\"container-content-unit\">\n                                <span>%</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-bottom flex-column\">\n                    <div class=\"section-content-wrapper flex-between\">\n                        <div\n                            :class=\"`type-content type${item.dictValue}`\"\n                            v-for=\"item in pieData.slice(0, 2)\"\n                            :key=\"item.dictValue\"\n                        >\n                            <div class=\"label\">{{ item.name }}</div>\n                            <div class=\"count\">\n                                <span>{{ item.value }}</span\n                                ><span class=\"unit\">辆</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"section-content-wrapper flex-between\">\n                        <div\n                            :class=\"`type-content type${item.dictValue}`\"\n                            v-for=\"item in pieData.slice(-2).reverse()\"\n                            :key=\"item.dictValue\"\n                        >\n                            <div class=\"label\">{{ item.name }}</div>\n                            <div class=\"count\">\n                                <span>{{ item.value }}</span\n                                ><span class=\"unit\">辆</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"center-wrapper flex-center\">\n                        <div id=\"pie-chart\"></div>\n                    </div>\n                </div>\n                <div class=\"section-header\">\n                    <span>车辆记录</span>\n                </div>\n                <div class=\"section-bottom-table\">\n                    <div class=\"table-wrapper\">\n                        <div class=\"scroll-table-header\">\n                            <div\n                                class=\"header-item\"\n                                v-for=\"column in scrollheader\"\n                                :key=\"column.name\"\n                                :style=\"{width: column.width}\"\n                            >\n                                {{ column.name }}\n                            </div>\n                        </div>\n                        <div\n                            v-if=\"\n                                !scrollListData.length &&\n                                !loadObj.scrollListData\n                            \"\n                            class=\"scroll-table-body flex-center empty\"\n                        >\n                            <el-empty\n                                description=\"暂无数据\"\n                                :image-size=\"50\"\n                                :image=\"\n                                    require('@/assets/img/bigScreen/empty1.png')\n                                \"\n                            ></el-empty>\n                        </div>\n                        <vue-seamless-scroll\n                            v-else\n                            v-loading=\"loadObj.scrollListData\"\n                            :element-loading-background=\"loadingColor\"\n                            class=\"scroll-table-body\"\n                            :data=\"scrollListData\"\n                            :class-option=\"optionSingleHeightTime\"\n                        >\n                            <div\n                                class=\"scroll-table-column\"\n                                v-for=\"column in scrollListData\"\n                                :key=\"column.id\"\n                            >\n                                <div\n                                    class=\"column-item ellipsis\"\n                                    style=\"width: 34%\"\n                                    :title=\"column.startTime\"\n                                >\n                                    {{\n                                        column.startTime &&\n                                        column.startTime.slice(5)\n                                    }}\n                                </div>\n                                <div\n                                    class=\"column-item ellipsis\"\n                                    style=\"width: 20%\"\n                                    :title=\"column.laneName\"\n                                >\n                                    {{ column.laneName }}\n                                </div>\n                                <div\n                                    class=\"column-item ellipsis\"\n                                    style=\"width: 22%\"\n                                    :title=\"column.carNo\"\n                                >\n                                    {{ column.carNo }}\n                                </div>\n                                <div\n                                    class=\"column-item ellipsis\"\n                                    style=\"width: 24%\"\n                                    :title=\"column.actualityMoney\"\n                                >\n                                    {{ column.actualityMoney }} 元\n                                </div>\n                            </div>\n                        </vue-seamless-scroll>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </keep-alive>\n    <keep-alive>\n        <div class=\"right-sidebar blue-border\">\n            <div class=\"device-info\">\n                <div class=\"section-header\">\n                    <span>设备信息</span>\n                </div>\n\n                <div class=\"device-wrapper\">\n                    <div class=\"guage-wrapper flex-around\">\n                        <div class=\"guage-content\">\n                            <img\n                                class=\"pan\"\n                                :src=\"\n                                    require('@/assets/img/bigScreen/gauge2.png')\n                                \"\n                                alt=\"仪表盘\"\n                            />\n                            <div id=\"gauge\"></div>\n                            <div class=\"device-rate-label\">设备在线率</div>\n                        </div>\n                        <div class=\"device-status\">\n                            <div class=\"status-item item1 flex-column\">\n                                <div class=\"label\">在线设备</div>\n                                <div class=\"count\">{{ onlineDevice }}</div>\n                            </div>\n                            <div class=\"status-item item2 flex-column\">\n                                <div class=\"label\">离线设备</div>\n                                <div class=\"count\">{{ offlineDevice }}</div>\n                            </div>\n                            <div class=\"status-item item3 flex-column\">\n                                <div class=\"label\">故障设备</div>\n                                <div class=\"count\">{{ faultDevice }}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"section-header\">\n                    <span>车道交易情况</span>\n                </div>\n                <div\n                    class=\"lane-wrapper\"\n                    v-loading=\"loadObj.laneData\"\n                    :element-loading-background=\"loadingColor\"\n                >\n                    <div class=\"lane-content flex\">\n                        <div class=\"lane-position entry\"></div>\n                        <div\n                            :class=\"['lane-item', `${item.status}`]\"\n                            v-for=\"(item, index) in laneData.slice(4, 8)\"\n                            :key=\"index\"\n                        >\n                            <div :class=\"['lane-name', `${item.status}`]\">\n                                {{ item.laneName.slice(6) }}\n                            </div>\n                            <div :class=\"['status', `${item.status}`]\">\n                                {{\n                                    item.status == 'normal'\n                                        ? '正常'\n                                        : '异常'\n                                }}\n                            </div>\n                            <div\n                                :class=\"['status-icon', `${item.status}`]\"\n                            ></div>\n                            <div\n                                class=\"error-reason\"\n                                v-if=\"item.status == 'error'\"\n                            >\n                                <div class=\"error-reason-title\">\n                                    {{ item.laneName.slice(6) }}\n                                </div>\n                                <div class=\"error-reason-info\">\n                                    {{ item.hitchReason || '' }}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"lane-content flex\">\n                        <div class=\"lane-position exit\"></div>\n                        <div\n                            :class=\"['lane-item', `${item.status}`]\"\n                            v-for=\"(item, index) in laneData.slice(0, 4)\"\n                            :key=\"index\"\n                        >\n                            <div :class=\"['lane-name', `${item.status}`]\">\n                                {{ item.laneName.slice(6) }}\n                            </div>\n                            <div :class=\"['status', `${item.status}`]\">\n                                {{\n                                    item.status == 'normal'\n                                        ? '正常'\n                                        : '异常'\n                                }}\n                            </div>\n                            <div\n                                :class=\"['status-icon', `${item.status}`]\"\n                            ></div>\n                            <div\n                                class=\"error-reason\"\n                                v-if=\"item.status == 'error'\"\n                            >\n                                <div class=\"error-reason-title\">\n                                    {{ item.laneName.slice(6) }}\n                                </div>\n                                <div class=\"error-reason-info\">\n                                    {{ item.hitchReason || '' }}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"section-header\">\n                    <span>设备运行情况</span>\n                </div>\n                <div class=\"fault-table-wrapper\">\n                    <div\n                        v-if=\"\n                            !deviceFaultData.length &&\n                            !loadObj.scrollFaultData\n                        \"\n                        class=\"scroll-falut-wrapper flex-center empty\"\n                    >\n                        <el-empty\n                            description=\"暂无数据\"\n                            :image-size=\"50\"\n                            :image=\"\n                                require('@/assets/img/bigScreen/empty1.png')\n                            \"\n                        ></el-empty>\n                    </div>\n                    <vue-seamless-scroll\n                        v-else\n                        v-loading=\"loadObj.scrollFaultData\"\n                        :element-loading-background=\"loadingColor\"\n                        class=\"scroll-falut-wrapper\"\n                        :data=\"deviceFaultData\"\n                        :class-option=\"optionSingleHeightTime\"\n                    >\n                        <div\n                            class=\"scroll-falut-column\"\n                            v-for=\"column in deviceFaultData\"\n                            :key=\"column.id\"\n                        >\n                            <div class=\"fault-item-wrapper flex-around\">\n                                <div\n                                    class=\"fault-item ellipsis\"\n                                    style=\"width: 100%\"\n                                    :title=\"column.hitchDate\"\n                                >\n                                    <span class=\"icon\"></span>\n                                    <span class=\"date\">{{\n                                        column.hitchDate\n                                    }}</span>\n                                </div>\n                            </div>\n                            <div class=\"fault-item-wrapper flex-start\">\n                                <div\n                                    class=\"fault-item ellipsis\"\n                                    style=\"width: 100%\"\n                                    :title=\"`${column.deviceCode}-${column.deviceName}-${column.hitchReason}`\"\n                                >\n                                    <span>\n                                        {{ column.deviceCode\n                                        }}{{ column.deviceName }}：\n                                    </span>\n                                    <span class=\"reason\">{{\n                                        column.hitchReason\n                                    }}</span>\n                                </div>\n                            </div>\n                        </div>\n                    </vue-seamless-scroll>\n                </div>\n            </div>\n        </div>\n    </keep-alive>\n    <div\n        :class=\"[\n            'device-selector',\n            'flex-center',\n            {'show-device': showDevice},\n        ]\"\n    >\n        <div\n            class=\"device-hidden-btn\"\n            v-show=\"!showDevice\"\n            @click=\"showDevice = true\"\n        >\n            <img src=\"../../assets/img/bigScreen/device-layer.png\" />\n        </div>\n        <div v-show=\"showDevice\" class=\"device-layer\">\n            <div class=\"title flex-between\">\n                <span class=\"flex-between\">\n                    <img\n                        class=\"title-icon\"\n                        src=\"../../assets/img/bigScreen/title-icon-device.png\"\n                    />\n                    <span>设备信息</span>\n                </span>\n                <i\n                    class=\"el-icon-d-arrow-left\"\n                    @click=\"showDevice = false\"\n                />\n            </div>\n            <div class=\"select-options device\">\n                <!-- :max=\"3\" -->\n                <el-checkbox-group\n                    @change=\"changeDeviceList\"\n                    class=\"options-wrapper\"\n                    v-model=\"checkListDevice\"\n                >\n                    <el-checkbox\n                        v-for=\"item in btnType\"\n                        :key=\"item.value\"\n                        :label=\"item.name\"\n                    ></el-checkbox>\n                </el-checkbox-group>\n            </div>\n            <div class=\"title flex-between\">\n                <span class=\"flex-between\">\n                    <img\n                        class=\"title-icon\"\n                        src=\"../../assets/img/bigScreen/title-icon-lane.png\"\n                    />\n                    <span>车道信息</span>\n                </span>\n            </div>\n            <div class=\"select-options\">\n                <el-checkbox-group\n                    @change=\"changeDeviceList\"\n                    v-model=\"checkListLane\"\n                    class=\"options-wrapper\"\n                >\n                    <el-checkbox label=\"入口\"></el-checkbox>\n                    <el-checkbox label=\"出口\"></el-checkbox>\n                </el-checkbox-group>\n            </div>\n        </div>\n    </div>\n</div>\n",null]}