diff --git a/src/assets/fonts/AlimamaDongFangDaKai-Regular.ttf b/src/assets/fonts/AlimamaDongFangDaKai-Regular.ttf new file mode 100644 index 0000000..3374d9b Binary files /dev/null and b/src/assets/fonts/AlimamaDongFangDaKai-Regular.ttf differ diff --git a/src/assets/fonts/pangmenzhengdao.ttf b/src/assets/fonts/pangmenzhengdao.ttf new file mode 100644 index 0000000..61d491d Binary files /dev/null and b/src/assets/fonts/pangmenzhengdao.ttf differ diff --git a/src/assets/fonts/站酷庆科黄油体.ttf b/src/assets/fonts/站酷庆科黄油体.ttf new file mode 100644 index 0000000..f8f46ee Binary files /dev/null and b/src/assets/fonts/站酷庆科黄油体.ttf differ diff --git a/src/assets/layout/20.png b/src/assets/layout/20.png new file mode 100644 index 0000000..7be3632 Binary files /dev/null and b/src/assets/layout/20.png differ diff --git a/src/assets/layout/full-header.png b/src/assets/layout/full-header.png new file mode 100644 index 0000000..15abb42 Binary files /dev/null and b/src/assets/layout/full-header.png differ diff --git a/src/assets/layout/header-logo-b.png b/src/assets/layout/header-logo-b.png new file mode 100644 index 0000000..886346f Binary files /dev/null and b/src/assets/layout/header-logo-b.png differ diff --git a/src/assets/layout/header-logo-bb.png b/src/assets/layout/header-logo-bb.png new file mode 100644 index 0000000..417967e Binary files /dev/null and b/src/assets/layout/header-logo-bb.png differ diff --git a/src/assets/layout/header-logo.psd b/src/assets/layout/header-logo.psd new file mode 100644 index 0000000..e09db1d Binary files /dev/null and b/src/assets/layout/header-logo.psd differ diff --git a/src/assets/layout/ks.png b/src/assets/layout/ks.png new file mode 100644 index 0000000..9d25c2a Binary files /dev/null and b/src/assets/layout/ks.png differ diff --git a/src/assets/layout/mofang.png b/src/assets/layout/mofang.png new file mode 100644 index 0000000..fab6e12 Binary files /dev/null and b/src/assets/layout/mofang.png differ diff --git a/src/assets/layout/score-box.png b/src/assets/layout/score-box.png new file mode 100644 index 0000000..a919752 Binary files /dev/null and b/src/assets/layout/score-box.png differ diff --git a/src/assets/layout/score.png b/src/assets/layout/score.png new file mode 100644 index 0000000..3caf769 Binary files /dev/null and b/src/assets/layout/score.png differ diff --git a/src/assets/layout/title.png b/src/assets/layout/title.png new file mode 100644 index 0000000..bfd7c94 Binary files /dev/null and b/src/assets/layout/title.png differ diff --git a/src/assets/layout/wk.png b/src/assets/layout/wk.png new file mode 100644 index 0000000..f5eee84 Binary files /dev/null and b/src/assets/layout/wk.png differ diff --git a/src/assets/layout/xk.png b/src/assets/layout/xk.png new file mode 100644 index 0000000..e11b7ff Binary files /dev/null and b/src/assets/layout/xk.png differ diff --git a/src/layout/FullScreen.js b/src/layout/FullScreen.js new file mode 100644 index 0000000..e48e392 --- /dev/null +++ b/src/layout/FullScreen.js @@ -0,0 +1,1483 @@ +import React, { useState, useEffect, useMemo, useRef } from "react"; +import { connect } from "dva"; +import { withRouter, matchPath } from "dva/router"; +import { Scrollbars } from "react-custom-scrollbars"; +import { Icon, Row, Col, Progress } from "antd"; +import EnergyIcon from "../utils/energyIcon"; +import { $consts } from "../plugins"; +import styles from "./full.less"; +import echarts from "echarts"; +import realGif from "../assets/layout/mofang.png"; +import logo from "../assets/layout/header-logo.png"; +import { + FullScreenContainer, + BorderBox8, + BorderBox10, + ScrollBoard, + CapsuleChart, + WaterLevelPond, +} from "@jiaminghi/data-view-react"; +import { text } from "@jiaminghi/data-view-react/lib/index-cd27b7f6"; + +const stud = (eve) => { + return ( +
+
+
90
+
+ ); +}; + +class FullScreen extends React.Component { + constructor(props) { + super(props); + this.state = { + screenWidh: window.screen.width > 2000 ? true : false, + nowDate: "", + checkData: [ + { name: "公司检查", value: 103 }, + { name: "部门检查", value: 79 }, + { name: "车间检查", value: 86 }, + { name: "班组检查", value: 94 }, + ], + widthp: "70%", + scrollConfig: { + header: ["检查类型", "检查次数", "完成率"], + data: [ + ["巡回检查", "322", "99%"], + ["例行检查", "255", "99%"], + ["日常检查", "253", "99%"], + ["专业检查", "123", "99%"], + ["巡回检查", "322", "99%"], + ["例行检查", "255", "99%"], + ["日常检查", "253", "99%"], + ["专业检查", "123", "99%"], + ], + waitTime: 200000, + }, + safescrollConfig: { + header: ["部门", "车间", "活动", "进度"], + data: [ + ["矿山部", "穿爆车间", "班前会议", "98%"], + ["矿山部", "金宇宁化分公司", "班前会议", "98%"], + ["选矿部", "破碎车间", "班前会议", "95%"], + ["矿山部", "磨重车间", "班前会议", "92%"], + ["矿山部", "机电设备管理科", "班前会议", "83%"], + ["矿山部", "钨细泥回收车间", "班前会议", "93%"], + ["矿山部", "穿爆车间", "班前会议", "90%"], + ["矿山部", "穿爆车间", "班前会议", "90%"], + ["矿山部", "穿爆车间", "班前会议", "90%"], + ], + index: true, + columnWidth: [80, 200, 300, 200, 200], + align: ["center"], + waitTime: 2000, + }, + chartConfig: { + data: [ + { + name: "电工日常班", + value: 97, + }, + { + name: "电工三班", + value: 95, + }, + { + name: "破碎一班", + value: 91, + }, + { + name: "磨重二班", + value: 86, + }, + { + name: "磨重三班", + value: 83, + }, + ], + showValue: true, + }, + WaterLevelPondconfig1: { + data: [75], + shape: "round", + }, + WaterLevelPondconfig2: { + data: [85], + shape: "round", + }, + WaterLevelPondconfig3: { + data: [95], + shape: "round", + }, + completeData: [ + { + name: "班组会议完成率", + value: 75, + }, + { + name: "岗位交接班完成率", + value: 85, + }, + { + name: "岗位当班记录完成率", + value: 95, + }, + ], + // completeDatatwo: { + // name: "岗位交接班完成率", + // value: 85, + // id: "completetwo", + // }, + // completeDatathree: { + // name: "岗位当班记录完成率", + // value: 95, + // id: "completethree", + // }, + meetingData: [ + { + name: "班前会议", + value: 32, + }, + { + name: "班组活动", + value: 132, + }, + { + name: "岗位交接班", + value: 32, + }, + { + name: "岗位当班", + value: 132, + }, + { + name: "班前会议", + value: 32, + }, + { + name: "班组活动", + value: 132, + }, + { + name: "岗位交接班", + value: 32, + }, + { + name: "岗位当班", + value: 132, + }, + ], + roaData: [ + { + name: "总任务数", + value: 1456, + }, + { + name: "超时待办数", + value: 132, + }, + { + name: "安全检查数", + value: 1456, + }, + { + name: "检查完成率", + value: 32, + }, + { + name: "职业危害", + value: 132, + }, + { + name: "管控措施", + value: 1456, + }, + { + name: "安全检查库", + value: 132, + }, + { + name: "危险源库", + value: 32, + }, + { + name: "培训计划完成率", + value: 132, + }, + { + name: "用户活跃度", + value: 1456, + }, + { + name: "系统用户数", + value: 132, + }, + { + name: "正常已办数", + value: 32, + }, + { + name: "未完成数", + value: 132, + }, + ], + }; + // this.scrollConfig = { + // header: ["检查类型", "检查次数", "完成率"], + // data: [ + // ["巡回检查", "322", "行1列3"], + // ["例行检查", "255", "行2列3"], + // ["日常检查", "253", "行3列3"], + // ["专业检查", "123", "行4列3"], + // ["巡回检查", "322", "行1列3"], + // ["例行检查", "255", "行2列3"], + // ["日常检查", "253", "行3列3"], + // ["专业检查", "123", "行4列3"], + // ], + // waitTime: 200000, + // }; + } + + componentDidMount() { + this.riskLevel(); + this.safedanger(); + const eve = () => { + return
11111
; + }; + // setInterval(this.getDate(), 1000); + this.timer = setInterval(() => { + this.setState({ + nowDate: this.getDate(), + }); + }, 1000); + // setTimeout(()=>{ + // this.setState({ + // nowDate:this.getDate() + // }) + // },1000) + + this.completeChart(this.state.completeData); + // this.completeChart(this.state.completeDatatwo); + // this.completeChart(this.state.completeDatathree); + // this.setState({ + // scrollConfig: { + // header: ["检查类型", "检查次数", "完成率"], + // data: [ + // [ + // "巡回检查", + // "322", + // "
", + // ], + // ["例行检查", "255", eve], + // ["日常检查", "253", "99%"], + // ["专业检查", "123", "99%"], + // ["巡回检查", "322", "99%"], + // ["例行检查", "255", "99%"], + // ["日常检查", "253", "99%"], + // ["专业检查", "123", "99%"], + // ], + // waitTime: 2000, + // }, + // }); + } + componentWillUnmount() { + clearInterval(this.timer); + } + getDate = () => { + var myDate = new Date(); + var year = myDate.getFullYear(); //获取当前年 + var mon = myDate.getMonth() + 1; //获取当前月 + var date = myDate.getDate(); //获取当前日 + // var hours = myDate.getHours(); //获取当前小时 + // var minutes = myDate.getMinutes(); //获取当前分钟 + + if (myDate.getHours() < 10) { + var hours = "0" + myDate.getHours(); + } else { + hours = myDate.getHours(); //获取当前小时 + } + if (myDate.getMinutes() < 10) { + var minutes = "0" + myDate.getMinutes(); + } else { + minutes = myDate.getMinutes(); //获取当前分钟 + } + if (myDate.getSeconds() < 10) { + var seconds = "0" + myDate.getSeconds(); + } else { + seconds = myDate.getSeconds(); //获取当前秒 + } + + var now = + year + + " 年 " + + mon + + " 月 " + + date + + " 日 " + + "\t\t\t" + + hours + + " : " + + minutes + + " : " + + seconds; + return now; + }; + completeChart = (evt) => { + let seriesArr = []; + let centerArr = [ + ["17%", "50%"], + ["50%", "50%"], + ["83%", "50%"], + ]; + evt.forEach((item, index) => { + seriesArr.push( + { + name: "统计", + type: "gauge", + radius: "75%", //图表尺寸 + center: centerArr[index], + axisLine: { + show: true, + lineStyle: { + width: 0, + shadowBlur: 0, + color: [ + [0.05, "#a62efb"], + [0.1, "#af23fa"], + [0.15, "#b31ffa"], + [0.2, "#b71afa"], + [0.25, "#b51dfa"], + [0.3, "#b220fa"], + [0.35, "#a42ffb"], + [0.4, "#993dfb"], + [0.45, "#8f47fb"], + [0.5, "#7b5efc"], + [0.55, "#6476fc"], + [0.6, "#4c91fd"], + [0.65, "#35abfe"], + [0.7, "#24befe"], + [0.75, "#12d1ff"], + [0.8, "#06defe"], + [0.85, "#05e0ff"], + [0.9, "#06deff"], + [0.95, "#06deff"], + [1, "#06deff"], + ], + }, + }, + axisTick: { + show: true, + lineStyle: { + color: "auto", + width: 2, + }, + length: -5, + splitNumber: 5, + }, + splitLine: { + show: true, + length: -10, + lineStyle: { + color: "auto", + width: 2, + }, + }, + axisLabel: { + show: false, + }, + pointer: { + //仪表盘指针 + show: false, + }, + detail: { + show: false, + }, + title: { + show: true, + offsetCenter: [0, "100%"], // x, y,单位px + textStyle: { + color: "#fff", + fontSize: 14, + }, + }, + data: [ + { + name: item.name, + }, + ], + }, + { + type: "gauge", + radius: "70%", + center: centerArr[index], + splitNumber: 0, //刻度数量 + startAngle: 225, + endAngle: -45, + axisLine: { + show: true, + lineStyle: { + width: 10, + color: [ + [ + 1, + new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#A52EFA", + }, + { + offset: 1, + color: "#07DDFD", + }, + ]), + ], + ], + }, + }, + //分隔线样式。 + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + pointer: { + show: false, + }, + title: { + show: false, + offsetCenter: [0, "-20%"], // x, y,单位px + textStyle: { + color: "#fff", + fontSize: 12, + }, + }, + //仪表盘详情,用于显示数据。 + detail: { + show: true, + offsetCenter: [0, 0], + color: "#fff", + formatter: function (params) { + return params + "%"; + }, + textStyle: { + fontSize: 22, + }, + }, + data: [ + { + // name: evt.name, + value: item.value, + }, + ], + } + ); + }); + let completeCharts = document.getElementById("completeone"); + if (completeCharts) { + let myChart = echarts.init(completeCharts); + myChart.setOption({ + // backgroundColor:'#000', + series: seriesArr, + }); + } + }; + safedanger = () => { + let bgColor = "#000"; + let color = [ + "#0090FF", + "#36CE9E", + "#e690d1", + // "#FF515A", + // "#8B5CFF", + // "#00CA69", + ]; + let echartData = [ + { + name: "1", + value1: 99, + value2: 93, + value3: 90, + }, + { + name: "2", + value1: 95, + value2: 98, + value3: 60, + }, + { + name: "3", + value1: 92, + value2: 99, + value3: 90, + }, + { + name: "4", + value1: 99, + value2: 96, + value3: 96, + }, + { + name: "5", + value1: 80, + value2: 85, + value3: 91, + }, + { + name: "6", + value1: 99, + value2: 65, + value3: 80, + }, + { + name: "7", + value1: 92, + value2: 97, + value3: 70, + }, + { + name: "8", + value1: 75, + value2: 96, + value3: 90, + }, + { + name: "9", + value1: 93, + value2: 95, + value3: 90, + }, + { + name: "10", + value1: 100, + value2: 97, + value3: 90, + }, + { + name: "11", + value1: 99, + value2: 93, + value3: 90, + }, + { + name: "12", + value1: 93, + value2: 87, + value3: 90, + }, + ]; + + let xAxisData = echartData.map((v) => v.name); + //  ["1", "2", "3", "4", "5", "6", "7", "8"] + let yAxisData1 = echartData.map((v) => v.value1); + // [100, 138, 350, 173, 180, 150, 180, 230] + let yAxisData2 = echartData.map((v) => v.value2); + let yAxisData3 = echartData.map((v) => v.value3); + // [233, 233, 200, 180, 199, 233, 210, 180] + const hexToRgba = (hex, opacity) => { + let rgbaColor = ""; + let reg = /^#[\da-f]{6}$/i; + if (reg.test(hex)) { + rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( + "0x" + hex.slice(3, 5) + )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; + } + return rgbaColor; + }; + let opretionTrends = document.getElementById("opretionTrend"); + if (opretionTrends) { + let myChart = echarts.init(opretionTrends); + myChart.setOption({ + backgroundColor: "", + color: color, + legend: { + right: 10, + top: 10, + textStyle: { + color: "#fff", + }, + }, + tooltip: { + trigger: "axis", + formatter: function (params) { + let html = ""; + params.forEach((v) => { + html += `
+ + ${v.seriesName} + ${v.value} + %`; + }); + + return html; + }, + extraCssText: + "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", + axisPointer: { + type: "shadow", + shadowStyle: { + // color: "#ffffff", + shadowColor: "rgba(225,225,225,1)", + shadowBlur: 5, + }, + }, + }, + grid: { + // top: 100, + top: "25%", + bottom: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLabel: { + formatter: "{value}月", + textStyle: { + color: "#fff", + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + data: xAxisData, + }, + ], + yAxis: [ + { + type: "value", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + nameTextStyle: { + color: "#fff", + fontSize: 12, + lineHeight: 40, + }, + splitLine: { + lineStyle: { + type: "dashed", + color: "#fff", + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "选矿", + type: "line", + smooth: true, + // showSymbol: false,/ + symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[0], + shadowBlur: 3, + // shadowColor: hexToRgba(color[0], 0.5), + shadowOffsetY: 8, + }, + }, + // areaStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient( + // 0, + // 0, + // 0, + // 1, + // [ + // { + // offset: 0, + // color: hexToRgba(color[0], 0.3), + // }, + // { + // offset: 1, + // color: hexToRgba(color[0], 0.1), + // }, + // ], + // false + // ), + // shadowColor: hexToRgba(color[0], 0.1), + // shadowBlur: 10, + // }, + // }, + data: yAxisData1, + }, + { + name: "矿山", + type: "line", + smooth: true, + // showSymbol: false, + symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[1], + shadowBlur: 3, + // shadowColor: hexToRgba(color[1], 0.5), + shadowOffsetY: 8, + }, + }, + // areaStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient( + // 0, + // 0, + // 0, + // 1, + // [ + // { + // offset: 0, + // color: hexToRgba(color[1], 0.3), + // }, + // { + // offset: 1, + // color: hexToRgba(color[1], 0.1), + // }, + // ], + // false + // ), + // shadowColor: hexToRgba(color[1], 0.1), + // shadowBlur: 10, + // }, + // }, + data: yAxisData2, + }, + { + name: "尾矿", + type: "line", + smooth: true, + // showSymbol: false, + symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[2], + shadowBlur: 3, + // shadowColor: hexToRgba(color[1], 0.5), + shadowOffsetY: 8, + }, + }, + // areaStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient( + // 0, + // 0, + // 0, + // 1, + // [ + // { + // offset: 0, + // color: hexToRgba(color[1], 0.3), + // }, + // { + // offset: 1, + // color: hexToRgba(color[1], 0.1), + // }, + // ], + // false + // ), + // shadowColor: hexToRgba(color[1], 0.1), + // shadowBlur: 10, + // }, + // }, + data: yAxisData3, + }, + ], + }); + } + }; + riskLevel = () => { + let riskLevel = []; + let showData = [ + { value: 2, name: "一级" }, + { value: 5, name: "二级" }, + { value: 15, name: "三级" }, + { value: 30, name: "四级" }, + ]; + + let riskLevels = document.getElementById("riskLevelFull"); + if (riskLevels) { + let myChart = echarts.init(riskLevels); + myChart.setOption({ + color: ["#c92a2a", "#FF6710", "#FFDD1E", "#0091FF", "#fa8a89"], + title: [ + { + text: "52", + x: "center", + y: "40%", + textStyle: { + fontSize: 26, + fontWeight: "normal", + color: ["#fff"], + }, + }, + { + text: "风险总数", + x: "center", + y: "55%", + textStyle: { + color: "#fff", + fontSize: 12, + }, + }, + ], + tooltip: { + trigger: "item", + formatter: "{b}:({d}%)", + }, + series: [ + { + name: "访问来源", + type: "pie", + minAngle: 20, + radius: ["45%", "70%"], + center: ["50%", "50%"], + clockwise: true, + avoidLabelOverlap: true, + hoverOffset: 15, + label: { + show: true, + position: "outside", + // formatter: '{a|{b}:{d}%}\n{hr|}', + formatter: "{a|{b}:}{e|{d}%}\n", + rich: { + hr: { + backgroundColor: "t", + borderRadius: 3, + width: 3, + height: 3, + padding: [3, 3, 0, -12], + }, + a: { + padding: [-15, 0, 0, 0], + fontSize: 15, + // fontWeight: "bold", + color: "#fff", + // fontFamily:'站酷庆科黄油体', + // letterSpacing: 3, + }, + e: { + fontSize: 14, + color: "#fff", + padding: [-15, 0, 0, 5], + }, + }, + }, + labelLine: { + normal: { + length: 20, + length2: 30, + lineStyle: { + width: 1, + type: "dashed", + }, + }, + }, + // itemStyle: { + // //图形样式 + // normal: { + // borderColor: "#fff", + // borderWidth: 2, + // padding: "0 20px", + // borderRadius: 50, + // }, + // }, + // color: color, + data: showData, + }, + ], + }); + } + }; + + render() { + return ( + + +
+
+
+ + +
+ logo +
+

+ 安全方针:安全第一、综合治理、控制风险、科学发展 +                    + 安全理念:一切风险皆可控,一切事故皆可防! +

+
+
+ + +
+ 宁化行洛坑安全生产标准化运营平台 +
+ + +
+ {this.state.nowDate} +
+ +
+
+
+ + +
+ {/* */} +
+
+
风险等级基本信息
+
+ +
+ {/*
*/} +
+ +
+
+ {/* */} +
+
+
隐患检查基本信息
+
+
+
+ {this.state.checkData.map((item, index) => { + return ( +
+ +
+
+
+ {item.name} +
+ +
+ /次 +
+
+
+ {item.value} +
+
+
+
+ ); + })} +
+
+ +
+
+ {/*
*/} +
+ + +
+ {this.state.screenWidh ? ( +
+
+ {/*
矿山
*/} +
+
标准化得分
+
83
+
+
+
+
+
标准化得分
+
88
+
+
+
+
+
标准化得分
+
93
+
+
+
+ ) : ( +
+
+
矿山
+
标准化得分
+
83
+
+
+
选矿
+
标准化得分
+
88
+
+
+
尾矿
+
标准化得分
+
93
+
+
+ )} +
+
+
+ 1 +
+
+ {this.state.roaData.map((item, index) => { + return ( +
  • +
    +
    + {item.name}:{item.value} +
    +
    +
  • + ); + })} +
    +
    +
    +
    + + +
    + {/* */} +
    +
    +
    基本会议完成情况
    +
    +
    +
    +
    + {/*
    +
    */} + {/* + + */} +
    +
    + + {this.state.meetingData.map((item, index) => ( + +
    +
    +
    +
    + {item.value} +
    +
    + {item.name} +
    +
    +
    +
    + + ))} +
    +
    +
    +
    + +
    +
    + {/* */} +
    +
    +
    安全任务完成情况
    +
    +
    +
    + +
    +
    + {/*
    */} +
    + +
    +
    +
    + + +
    + {/* */} +
    +
    +
    隐患整改数据
    +
    +
    +
    +
    +
    +
    +
    83
    +
    + 隐患数 +
    +
    +
    +
    +
    +
    +
    +
    23
    +
    + 延期整改数 +
    +
    +
    +
    +
    +
    +
    +
    56
    +
    + 按期整改数 +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 83% +
    +
    + 整改率 +
    +
    +
    +
    +
    +
    + {/*
    */} +
    + + + {/* */} +
    +
    +
    +
    + 安全生产标准化运行走势图 +
    +
    +
    +
    + {/*
    */} + + +
    +
    +
    +
    +
    班组完成率TOP5
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    +
    +
    + ); + } +} + +export default withRouter(connect(({ login }) => ({ login }))(FullScreen)); diff --git a/src/layout/Header.js b/src/layout/Header.js index c810016..c44cbf2 100644 --- a/src/layout/Header.js +++ b/src/layout/Header.js @@ -13,6 +13,7 @@ import config from "../config"; import "./header.less"; import Option from "./Option"; import RiskFourPage from "./RiskFour"; +import FullScreenPage from "./FullScreen"; // 投屏 const DataV = (props) => { @@ -370,6 +371,7 @@ const RiskFourColorOpton = (props) => { setshowModal(true); requestFullScreenMethod(document.body); // 进入全屏 }} + style={{ margin: "0px 36px", display: "flex", alignItems: "center" }} > {/* { const RiskFourColor = withRouter( connect(({ login }) => ({ login }))(RiskFourColorOpton) ); + +const FullScreenOpton = (props) => { + const [showModal, setshowModal] = useState(false); + const getChildCount = (val) => { + setshowModal(val); + }; + const [fullScreen, setFullScreen] = useState(false); + const [originResizeFunc, setOriginResizeFunc] = useState(); + const escFunction = () => { + let isFull = !!( + document.fullscreen || + document.mozFullScreen || + document.webkitIsFullScreen || + document.webkitFullScreen || + document.msFullScreen + ); + if (isFull) { + // / + }else{ + // requestFullScreenMethod(document.body); + setshowModal(false); + } + }; + useEffect(() => { + // 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件 + document.addEventListener( + "webkitfullscreenchange", + escFunction + ); /* Chrome, Safari and Opera */ + document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */ + document.addEventListener( + "fullscreenchange", + escFunction + ); /* Standard syntax */ + document.addEventListener( + "msfullscreenchange", + escFunction + ); /* IE / Edge */ + return () => { + //销毁时清除监听 + document.removeEventListener("webkitfullscreenchange", escFunction); + document.removeEventListener("mozfullscreenchange", escFunction); + document.removeEventListener("fullscreenchange", escFunction); + document.removeEventListener("MSFullscreenChange", escFunction); + }; + }, []); + + if (window.navigator.userAgent.indexOf("Windows") < 1) { + return
    ; + } else { + return ( +
    +
    { + setshowModal(true); + requestFullScreenMethod(document.body); // 进入全屏 + }} + > + + {/* */} +
    + { + setshowModal(false); + }} + onCancel={() => { + setshowModal(false); + }} + className="fullScreen" + > + + +
    + ); + } +}; + +const FullScreen = withRouter( + connect(({ login }) => ({ login }))(FullScreenOpton) +); const NavOpton = (props) => { const [showModal, setshowModal] = useState(false); const getChildCount = (val) => { @@ -483,6 +573,7 @@ function Header(props) { {!props.matchLogin ? (
    + diff --git a/src/layout/full.less b/src/layout/full.less new file mode 100644 index 0000000..7ea687c --- /dev/null +++ b/src/layout/full.less @@ -0,0 +1,452 @@ +@font-face { + font-family: pangmenzhengdao; + src: url("../assets/fonts/pangmenzhengdao.ttf"); +} + +@font-face { + font-family: "阿里妈妈东方大楷 Regular"; + font-weight: normal; + src: url("../assets/fonts/AlimamaDongFangDaKai-Regular.ttf") + format("truetype"); + font-display: swap; +} +@font-face { + font-family: "站酷庆科黄油体"; + font-weight: normal; + src: url("../assets/fonts/站酷庆科黄油体.ttf") format("truetype"); + font-display: swap; +} + +.blackBack { + background-image: url("../assets/login/bg.png"); + width: 100%; + // height: calc(100% - 10px); // 进入全屏 + height: 100%; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.backImage { + background-color: #021428; //021428 + width: 100%; + height: 100%; + opacity: 0.9; + display: flex; + flex-direction: column; +} +.header { + background-image: url("../assets/layout/full-header.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 100px; + width: 100%; + display: flex; + // align-items: center; + justify-content: space-between; + flex-direction: row; +} +.headerText { + color: #fff; + font-size: 32px; + // font-weight: bold; + margin-top: 10px; + font-family: "pangmenzhengdao"; +} +.row { + // height: calc(65% - 200px); + flex: 1; + width: 100%; +} +.rowTwo { + height: 30%; + width: 100%; +} +.boxleft { + height: 100%; + // width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.risklevel { + height: 60%; + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.risklevelOne { + height: 40%; + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.risklevelTwo { + height: 100%; + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.riskChange { + width: 40%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 20px 5px; +} +.riskChangeTwo { + width: 60%; + height: 100%; + padding: 20px 5px; + display: flex; + align-items: center; + justify-content: flex-start; +} +.gradient { + background-image: linear-gradient( + 250deg, + rgba(47, 109, 255, 1) 0%, + rgba(255, 255, 255, 54) 50%, + rgba(47, 109, 255, 1) 100% + ); + width: 60%; + height: 30%; + display: flex; + align-items: center; + justify-content: center; + padding: 2px; + // margin: 10px; +} +.gradientTwo { + background-image: linear-gradient( + 250deg, + rgba(47, 109, 255, 1) 0%, + rgba(255, 255, 255, 54) 50%, + rgba(47, 109, 255, 1) 100% + ); + width: 80%; + height: 90%; + display: flex; + align-items: center; + justify-content: space-around; + padding: 2px; +} +.gradientThree { + background-image: linear-gradient( + 275deg, + rgba(47, 109, 255, 1) 0%, + rgba(255, 255, 255, 54) 50%, + rgba(47, 109, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: space-around; + padding: 2px; +} +.gradientNext { + width: 100%; + height: 100%; + background-color: #021428; + // z-index: 999; +} +.gradientNextTwo { + width: 100%; + height: 100%; + background-color: rgba(47, 109, 255, 0.1); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 5px; + color: #fff; +} +.gradientText { + font-size: 26px; + font-weight: bold; +} +.gradientName { + font-size: 12px; +} +.gradientTextTwo { + font-size: 86px; + font-weight: bold; + color: #ef595a; +} +.gradientNameTwo { + font-size: 18px; +} +.title { + background-image: url("../assets/layout/title.png"); + background-size: cover; + background-position: bottom; + background-repeat: no-repeat; + width: 90%; + height: 25px; + padding-bottom: 10px; + display: flex; + flex-direction: row; + align-items: center; + // justify-content: center; +} +.circle { + width: 12px; + height: 12px; + background: #021428; + border-radius: 50%; + border: 3px solid #fff; + margin-right: 5px; +} +.titlename { + color: #fff; + font-size: 16px; + font-family: "站酷庆科黄油体"; + letter-spacing: 3px; +} +.risklevelOne { + height: 60%; + width: 90%; +} +.boxTwo { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + // width: 100%; +} +.capsuleChart { + width: 80%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 20px 0px; +} +.scrollboard { + width: 90%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0px 20px 20px 20px; + flex: 1; +} +.scrollboard :global(.header) { + height: auto; + padding: 0; +} +.scrollboard :global(.dv-scroll-board .rows .ceil) { + text-align: center; +} +.scrollboard :global(.dv-scroll-board .header .header-item) { + text-align: center; +} + +.scoreBox { + // background-image: url("../assets/layout/score-box.png"); + // background-size: cover; + // background-position: center; + // background-repeat: no-repeat; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; +} +.scoreBox1 { + background-image: url("../assets/layout/score-box.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 100%; + // height: 140px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + margin-bottom: 20px; + padding: 5px; +} +.score { + display: flex; + flex-direction: row; + // align-items: center; + // justify-content: space-between; + background-image: url("../assets/layout/ks.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + object-fit: cover; + // width: 230px; + width: 33%; + height: auto; + margin: 10px; +} +.score2 { + display: flex; + flex-direction: row; + // align-items: center; + // justify-content: space-between; + background-image: url("../assets/layout/xk.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + object-fit: cover; + width: 33%; + height: auto; + margin: 10px; +} +.score3 { + display: flex; + flex-direction: row; + // align-items: center; + // justify-content: space-between; + background-image: url("../assets/layout/wk.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + object-fit: cover; + width: 33%; + height: auto; + margin: 10px; +} +.score4 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-image: url("../assets/layout/score.png"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 30%; + padding: 0px 15px; + // height: 100%; + // margin: 10px; +} +.scoreRight { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 40%; + margin-left: 50%; +} +.scoreLeft { + font-size: 12px; + font-weight: bold; + color: #6cc8d9; + margin-top: 5px; +} +.scoreText { + font-size: 13px; + font-weight: bold; + color: #6cc8d9; +} +.scoreText2 { + font-size: 33px; + color: #7fffff; + font-weight: bold; + // font-style: oblique; +} +.scoreText3 { + font-size: 12px; + color: #6cc8d9; + font-weight: bold; +} +.ulData { + li { + // transform: rotate(45deg); + position: absolute; + left: 50%; + top: 50%; + // margin-left: -20px; + // margin-right: -20px; + transform: translate(-50%, -50%); + } + li:nth-of-type(1) { + // transform: rotate(45deg); + transform: translate(-50%, -50%) rotate(12deg) translate(-280px) + rotate(-12deg); + // transform-origin: 20px 220px; + } + li:nth-of-type(2) { + transform: translate(-50%, -50%) rotate(38deg) translate(-280px) + rotate(-38deg); + } + li:nth-of-type(3) { + transform: translate(-50%, -50%) rotate(64deg) translate(-280px) + rotate(-64deg); + } + li:nth-of-type(4) { + transform: translate(-50%, -50%) rotate(90deg) translate(-280px) + rotate(-90deg); + } + li:nth-of-type(5) { + transform: translate(-50%, -50%) rotate(116deg) translate(-280px) + rotate(-116deg); + } + li:nth-of-type(6) { + transform: translate(-50%, -50%) rotate(142deg) translate(-280px) + rotate(-142deg); + } + li:nth-of-type(7) { + transform: translate(-50%, -50%) rotate(168deg) translate(-280px) + rotate(-168deg); + } + li:nth-of-type(8) { + transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) + rotate(12deg); + } + li:nth-of-type(9) { + transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) + rotate(38deg); + } + li:nth-of-type(10) { + transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) + rotate(64deg); + } + li:nth-of-type(11) { + transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) + rotate(116deg); + } + + li:nth-of-type(12) { + transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) + rotate(142deg); + } + li:nth-of-type(13) { + transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) + rotate(168deg); + } +} + +.roateData { + background-image: linear-gradient( + 275deg, + rgba(47, 109, 255, 1) 0%, + rgba(255, 255, 255, 54) 50%, + rgba(47, 109, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: space-around; + padding: 2px; + // background-color: rgba(47, 109, 255, 0.1); +} +.roatBack { + background-color: #021428; + width: 100%; + height: 100%; + padding: 5px; +} diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css index dff70f9..bb840f6 100644 --- a/src/routes/dashboard.css +++ b/src/routes/dashboard.css @@ -411,5 +411,31 @@ background-color: #3c9cff; color: #fff; } -:global() { +:global(.slide-style){ + /* margin-bottom: 10px; */ + font-size: 24px; + font-weight: bold; + color:#de4e58; + /* -webkit-text-stroke: #E38C7A 1px; */ + /* padding-left:30px; */ + flex: 1; + overflow: hidden; + display: flex; + align-items: center; + } +:global(.slide-text-style){ + position:relative; + display:inline-block; + white-space:nowrap; + animation: slide-text-style 20s linear 1s infinite ; + width:'auto'; + align-items: center; + margin-top: 1em; +} + +@keyframes slide-text-style{ + 0%{margin-left:100%;} +100%{margin-left:-1200px;} +} +