<template>
<div class="bigscreen">
<header class="screen-header">
<!-- <div class="top-bg"></div> -->
<div class="header-title">
<div class="header-left">
<div class="now-page headerchoice">当前主页</div>
<div class="now-date">{{ nowDate.date }}</div>
</div>
<div class="header-right">
<a href="/" class="go-index headerchoice">后台管理</a>
<div class="now-time font_digit">{{ nowDate.time }}</div>
<div class="go-index headertime"></div>
</div>
<h1>
{{ screenTitle }}
<!-- <div class="shine shine2">star</div> -->
</h1>
</div>
</header>
<section class="screen-section">
<div class="section-left">
<div class="section-content card">
<div class="card-title"><i>天气预报</i></div>
<div class="card-content">
<div id="weather1" class="weather">
<div class="rt1-info">
<p style="color: #fff">天气接口暂停服务</p>
</div>
</div>
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>累计降雨量柱状图</i>
</div>
<div class="card-content">
<div class="left-chart" ref="left1" id="left1"></div>
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>气象环境曲线图</i>
</div>
<div class="card-content">
<ChartsForLine
:ChartsForLineParant="singleLineLeft2"
v-if="singleLineLeft2"
/>
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>地下水位曲线图</i>
</div>
<div class="card-content">
<ChartsForLine
:ChartsForLineParant="singleLineLeft3"
v-if="singleLineLeft3"
/>
</div>
</div>
</div>
<div class="section-mid">
<div class="mid-top"></div>
<div class="mid-fir">
<div class="section-content card">
<div class="card-title"><i>雷达实时图</i></div>
<div class="card-content">
<div class="map"></div>
</div>
</div>
<!-- -->
</div>
<div class="mid-sec">
<div class="section-content card" style="margin-right: 4px">
<div class="card-title">
<i>爆破振动曲线图</i>
</div>
<div class="card-content">
<ChartsForLine
:ChartsForLineParant="singleLineMid1"
v-if="singleLineMid1"
/>
</div>
</div>
<div class="section-content card" style="margin-left: 4px">
<div class="card-title">
<i>地表裂缝曲线图</i>
</div>
<div class="card-content">
<div id="mid2"></div>
</div>
</div>
</div>
</div>
<div class="section-right">
<div class="section-content card">
<div class="card-title">
<i>设备在线率</i>
</div>
<div class="card-content">
<div id="pie" class="pie3d"></div>
<!-- <div class="left-chart" ref="left1" id="left1"></div> -->
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>土压力监测图</i>
</div>
<div class="card-content">
<div id="ground-pre"></div>
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>地面隆起监测图</i>
</div>
<div class="card-content">
<div id="right3"></div>
</div>
</div>
<div class="section-content card">
<div class="card-title">
<i>实时报警数据列表</i>
</div>
<div class="card-content">
<div class="yinhuan">
<div class="yinhuan-left">
<div class="yinhuan-lefttop yinhuan-left-item">
<span class="yinhuan-item-top" v-if="troubleNum[0].value1">{{
troubleNum[0].value1
}}</span>
<span class="yinhuan-item-top" v-else>{{ 1 }}</span>
<span class="yinhuan-item-bottom">隐患数量</span>
</div>
<div class="yinhuan-leftbottom yinhuan-left-item">
<span class="yinhuan-item-top" v-if="troubleNum[0].value2">{{
troubleNum[0].value2
}}</span>
<span class="yinhuan-item-top" v-else>{{ 1 }}</span>
<span class="yinhuan-item-bottom">已经处理</span>
</div>
</div>
<div class="yinhuan-right">
<div class="lcl-table">
<div class="lcl-table-header">
<span>日期</span>
<span>发现方式</span>
<span>处置方式</span>
</div>
<div class="lcl-table-body scrollingout">
<div
class="lcl-tr"
v-for="item in troubleData"
:key="item.id"
>
<span class="lcl-td" :title="item.plandisposaltime">{{
item.plandisposaltime
}}</span>
<span class="lcl-td" :title="item.troublename">{{
item.troublename
}}</span>
<span class="lcl-td">
{{ item.status | yinhuanFilter }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
//npm install echarts@4.9.0 --save
import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);
import * as echarts from "echarts";
// import cuAmap from "@/components/AMap";
import lineCharts from "@/components/lclEcharts/lineCharts";
import nLineCharts from "@/components/lclEcharts/nLineCharts";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { getSevenTime, getAfterSevenTime } from "@/components/lclEcharts/time";
import { getWeather } from "@/api/lclApi/lclapi";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
(function (H) {
Highcharts.wrap(
Highcharts.seriesTypes.pie.prototype,
"translate",
function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
if (!this.chart.is3d()) {
return;
}
this.data.forEach((d) => {
// 修改 3
if (d.options.depth && typeof d.options.depth === "number") {
d.shapeArgs.depth = d.shapeArgs.depth * 0.75 + d.options.depth;
}
});
}
);
var cos = Math.cos,
sin = Math.sin,
PI = Math.PI,
dFactor = (4 * (Math.sqrt(2) - 1)) / 3 / (PI / 2);
function curveTo(cx, cy, rx, ry, start, end, dx, dy) {
var result = [],
arcAngle = end - start;
if (end > start && end - start > Math.PI / 2 + 0.0001) {
result = result.concat(
curveTo(cx, cy, rx, ry, start, start + Math.PI / 2, dx, dy)
);
result = result.concat(
curveTo(cx, cy, rx, ry, start + Math.PI / 2, end, dx, dy)
);
return result;
}
if (end < start && start - end > Math.PI / 2 + 0.0001) {
result = result.concat(
curveTo(cx, cy, rx, ry, start, start - Math.PI / 2, dx, dy)
);
result = result.concat(
curveTo(cx, cy, rx, ry, start - Math.PI / 2, end, dx, dy)
);
return result;
}
return [
[
"C",
cx +
rx * Math.cos(start) -
rx * dFactor * arcAngle * Math.sin(start) +
dx,
cy +
ry * Math.sin(start) +
ry * dFactor * arcAngle * Math.cos(start) +
dy,
cx + rx * Math.cos(end) + rx * dFactor * arcAngle * Math.sin(end) + dx,
cy + ry * Math.sin(end) - ry * dFactor * arcAngle * Math.cos(end) + dy,
cx + rx * Math.cos(end) + dx,
cy + ry * Math.sin(end) + dy,
],
];
}
Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
let cx = shapeArgs.x || 0, // x coordinate of the center
cy = shapeArgs.y || 0, // y coordinate of the center
start = shapeArgs.start || 0, // start angle
end = (shapeArgs.end || 0) - 0.00001, // end angle
r = shapeArgs.r || 0, // radius
ir = shapeArgs.innerR || 0, // inner radius
d = shapeArgs.depth || 0, // depth
alpha = shapeArgs.alpha || 0, // alpha rotation of the chart
beta = shapeArgs.beta || 0; // beta rotation of the chart
// Derived Variables
const cs = Math.cos(start), // cosinus of the start angle
ss = Math.sin(start), // sinus of the start angle
ce = Math.cos(end), // cosinus of the end angle
se = Math.sin(end), // sinus of the end angle
rx = r * Math.cos(beta), // x-radius
ry = r * Math.cos(alpha), // y-radius
irx = ir * Math.cos(beta), // x-radius (inner)
iry = ir * Math.cos(alpha), // y-radius (inner)
dx = d * Math.sin(beta), // distance between top and bottom in x
dy = d * Math.sin(alpha); // distance between top and bottom in y
// 修改 1
cy -= dy;
// TOP
let top = [["M", cx + rx * cs, cy + ry * ss]];
top = top.concat(curveTo(cx, cy, rx, ry, start, end, 0, 0));
top.push(["L", cx + irx * ce, cy + iry * se]);
top = top.concat(curveTo(cx, cy, irx, iry, end, start, 0, 0));
top.push(["Z"]);
// OUTSIDE
const b = beta > 0 ? Math.PI / 2 : 0,
a = alpha > 0 ? 0 : Math.PI / 2;
const start2 = start > -b ? start : end > -b ? -b : start,
end2 = end < PI - a ? end : start < PI - a ? PI - a : end,
midEnd = 2 * PI - a;
// When slice goes over bottom middle, need to add both, left and right
// outer side. Additionally, when we cross right hand edge, create sharp
// edge. Outer shape/wall:
//
// -------
// / ^ \
// 4) / / \ \ 1)
// / / \ \
// / / \ \
// (c)=> ==== ==== <=(d)
// \ \ / /
// \ \<=(a)/ /
// \ \ / / <=(b)
// 3) \ v / 2)
// -------
//
// (a) - inner side
// (b) - outer side
// (c) - left edge (sharp)
// (d) - right edge (sharp)
// 1..n - rendering order for startAngle = 0, when set to e.g 90, order
// changes clockwise (1->2, 2->3, n->1) and counterclockwise for
// negative startAngle
let out = [["M", cx + rx * cos(start2), cy + ry * sin(start2)]];
out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
// When shape is wide, it can cross both, (c) and (d) edges, when using
// startAngle
if (end > midEnd && start < midEnd) {
// Go to outer side
out.push(["L", cx + rx * cos(end2) + dx, cy + ry * sin(end2) + dy]);
// Curve to the right edge of the slice (d)
out = out.concat(curveTo(cx, cy, rx, ry, end2, midEnd, dx, dy));
// Go to the inner side
out.push(["L", cx + rx * cos(midEnd), cy + ry * sin(midEnd)]);
// Curve to the true end of the slice
out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end, 0, 0));
// Go to the outer side
out.push(["L", cx + rx * cos(end) + dx, cy + ry * sin(end) + dy]);
// Go back to middle (d)
out = out.concat(curveTo(cx, cy, rx, ry, end, midEnd, dx, dy));
out.push(["L", cx + rx * cos(midEnd), cy + ry * sin(midEnd)]);
// Go back to the left edge
out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end2, 0, 0));
// But shape can cross also only (c) edge:
} else if (end > PI - a && start < PI - a) {
// Go to outer side
out.push([
"L",
cx + rx * Math.cos(end2) + dx,
cy + ry * Math.sin(end2) + dy,
]);
// Curve to the true end of the slice
out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy));
// Go to the inner side
out.push(["L", cx + rx * Math.cos(end), cy + ry * Math.sin(end)]);
// Go back to the artifical end2
out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
}
out.push([
"L",
cx + rx * Math.cos(end2) + dx,
cy + ry * Math.sin(end2) + dy,
]);
out = out.concat(curveTo(cx, cy, rx, ry, end2, start2, dx, dy));
out.push(["Z"]);
// INSIDE
let inn = [["M", cx + irx * cs, cy + iry * ss]];
inn = inn.concat(curveTo(cx, cy, irx, iry, start, end, 0, 0));
inn.push([
"L",
cx + irx * Math.cos(end) + dx,
cy + iry * Math.sin(end) + dy,
]);
inn = inn.concat(curveTo(cx, cy, irx, iry, end, start, dx, dy));
inn.push(["Z"]);
// SIDES
const side1 = [
["M", cx + rx * cs, cy + ry * ss],
["L", cx + rx * cs + dx, cy + ry * ss + dy],
["L", cx + irx * cs + dx, cy + iry * ss + dy],
["L", cx + irx * cs, cy + iry * ss],
["Z"],
];
const side2 = [
["M", cx + rx * ce, cy + ry * se],
["L", cx + rx * ce + dx, cy + ry * se + dy],
["L", cx + irx * ce + dx, cy + iry * se + dy],
["L", cx + irx * ce, cy + iry * se],
["Z"],
];
// correction for changed position of vanishing point caused by alpha
// and beta rotations
let angleCorr = Math.atan2(dy, -dx),
angleEnd = Math.abs(end + angleCorr),
angleStart = Math.abs(start + angleCorr),
angleMid = Math.abs((start + end) / 2 + angleCorr);
/**
* set to 0-PI range
* @private
*/
function toZeroPIRange(angle) {
angle = angle % (2 * Math.PI);
if (angle > Math.PI) {
angle = 2 * Math.PI - angle;
}
return angle;
}
angleEnd = toZeroPIRange(angleEnd);
angleStart = toZeroPIRange(angleStart);
angleMid = toZeroPIRange(angleMid);
// *1e5 is to compensate pInt in zIndexSetter
const incPrecision = 1e5,
a1 = angleMid * incPrecision,
a2 = angleStart * incPrecision,
a3 = angleEnd * incPrecision;
let result = {
top: top,
// max angle is PI, so this is always higher
zTop: Math.PI * incPrecision + 1,
out: out,
zOut: Math.max(a1, a2, a3),
inn: inn,
zInn: Math.max(a1, a2, a3),
side1: side1,
// to keep below zOut and zInn in case of same values
zSide1: a3 * 0.99,
side2: side2,
zSide2: a2 * 0.99,
};
// 修改 2
result.zTop = (result.zOut + 0.5) / 100;
return result;
};
})(Highcharts);
export default {
data() {
return {
screenTitle: "隧道结构稳定性监测系统",
nowDate: "2023-01-01",
nowTime: "23:59:59",
jxlEquipno: 19,
swEquipno: 2,
fsdEquipno: 18,
jrxDevList: [{ equipname: "双山水库渗压1-1", equipno: "ss0511" }],
jrxDevValue: "ss0511",
wyDevList: [{ equipname: "双山水库渗压1-1", equipno: "ss0511" }],
wyDevValue: "ss0511",
troubleNum: [{ value1: "1", value2: "1" }],
troubleData: [
{
plandisposaltime: "2023-03-20",
troublename: "人工巡检",
status: "1",
},
],
cgxObj: {
num: 4,
arr: [{ id: 1, cgq: [] }],
},
left1Data: [2, 4, 5, 2, 2, 1, 2],
singleLineLeft2: {
chartId: "chartid2",
},
singleLineLeft3: {
chartId: "chartid3",
},
singleLineLeft4: {
chartId: "chartid4",
},
singleLineRight1: {
chartId: "chartid4",
},
singleLineJrx: {
chartId: "chartid4",
},
nLineChartsWy: {
chartId: "chartidwy",
},
singleLineMid1: {
chartId: "chartid5",
},
satellite: false,
//视频
videoList: [
{ id: "1", url: "", name: "视频1" },
{ id: "2", url: "", name: "视频2" },
{ id: "3", url: "", name: "视频3" },
{ id: "4", url: "", name: "视频4" },
],
mapBtn: 0,
mapOptions: {
zooms: [4, 20],
center: [120.08, 36.95],
zoom: 10,
mapStyle: "amap://styles/blue",
layers: null,
},
mapBaseInfor: [{ longitude: "122.05", latitude: "37.49", name: "水库1" }],
beforeSevenDay: ["03-25"],
d3nterval: null,
d3data: [
{ name: "离线", y: 1, sliced: true, selected: true, depth: 5 },
{ name: "在线", y: 3, sliced: true, selected: true, depth: 8 },
],
};
},
components: {
lineCharts,
nLineCharts,
ChartsForLine,
},
created() {
var that = this;
this.$nextTick(() => {
// this.amapInfor();
// var satellite = new AMap.TileLayer.Satellite();
// var roadNet = new AMap.TileLayer.RoadNet();
// new AMap.Map("A_Map", that.mapOptions);
});
},
mounted() {
let that = this;
this.$nextTick(() => {
this.beforeSevenDay = getSevenTime(7);
console.log(this.beforeSevenDay, "this.beforeSevenDay");
setInterval(this.getNowTime, 1000);
this.weather();
this.left1Year();
// this.pieFun();
that.highchart3d();
this.d3nterval = setInterval(function () {
if (that.d3data[1].depth == 5) {
that.d3data = [
{ name: "离线", y: 1, sliced: true, selected: true, depth: 5 },
{ name: "在线", y: 3, sliced: true, selected: true, depth: 8 },
];
} else {
that.d3data = [
{ name: "离线", y: 1, sliced: true, selected: true, depth: 8 },
{ name: "在线", y: 3, sliced: true, selected: true, depth: 5 },
];
}
that.highchart3d();
}, 5000);
this.groundFun();
this.mid2Fun();
this.right3Fun();
this.loading();
});
},
beforeDestroy() {
clearInterval(this.d3nterval);
},
filters: {
yinhuanFilter(v) {
let value = Number(v);
if (value === 1) {
return "已处理";
} else {
return "未处理";
}
},
},
methods: {
loading() {
this.singleLineLeft2 = {
chartId: "left2",
color: ["#00FFDE"],
chartType: "line",
unit: "",
axisLabel: "#BAE7FF",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: false,
legendItem: ["气象"],
xAxisData: this.beforeSevenDay,
yData: [[0.2, 0.4, 0.5, 0.2, 0.2, 0.1, 0.2]],
};
this.singleLineLeft3 = {
chartId: "left3",
color: ["#18AAF6"],
chartType: "line",
unit: "mm",
axisLabel: "#BAE7FF",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: false,
legendItem: ["地下水"],
xAxisData: this.beforeSevenDay,
yData: [[0.5, 0.2, 0.3, 0.1, 0.2, 0.1, 0.3]],
};
this.singleLineMid1 = {
chartId: "mid1",
color: ["#F9EB0C"],
chartType: "line",
unit: "mm",
axisLabel: "#BAE7FF",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: false,
legendItem: ["爆破振动"],
xDataShow: "1",
xAxisData: "",
yData: [
[
200, 444, 300, 10, 200, 123, 200, 200, 444, 300, 10, 200, 123, 200,
200, 444, 300, 200, 200, 123, 200, 200, 444, 300, 200, 200, 123,
200, 200, 444, 300, 200, 200, 123, 200, 200, 444, 1000, 200, 200,
123, 200, 200, 600, 1000, 200, 200, 123, 200, 200, 600, 1000, 10,
200, 123, 200, 200, 600, 1000, 10, 200, 123, 200, 200, 600, 500, 10,
200, 123, 200, 200, 444, 500, -500, 200, 123, 200, 200, 444, 500,
-500, 200, 123, 200,
],
],
};
},
left1Year() {
let that = this;
let myChart = echarts.init(document.getElementById("left1"));
let option = {
// backgroundColor: "#0a142f",
color: ["#0EECE4"],
tooltip: {
// trigger: 'axis',
confine: true,
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'line', // 默认为直线，可选为：'line' | 'shadow'
// lineStyle: {
// color: 'transparent',
// },
// },
},
grid: {
left: "12%",
right: "5%",
bottom: "15%",
top: "10%",
z: 22,
},
xAxis: [
{
type: "category",
// gridIndex: 0,
data: that.beforeSevenDay,
axisLine: {
lineStyle: {
color: "#BAE7FF",
},
},
axisLabel: {
show: true,
color: "#BAE7FF",
fontSize: 11,
// formatter: (value) => {
// let labelArr = value.split("");
// labelArr.splice(4, 0, "\n\n");
// return labelArr.join("");
// },
},
},
],
yAxis: [
{
type: "value",
name: "",
nameTextStyle: {
fontSize: 11,
color: "#68B4DD",
align: "left",
},
splitArea: { show: false },
gridIndex: 0,
splitLine: {
show: true,
lineStyle: {
color: "rgba(186,231,255,.3)",
type: "dashed ",
},
},
axisTick: {
show: false,
},
min: 0,
axisLine: {
show: true,
// inside: true,
lineStyle: {
color: "#BAE7FF",
},
},
axisLabel: {
show: true,
},
max: Math.max.apply(null, that.left1Data) * 1.5,
},
{
type: "value",
splitArea: { show: false },
gridIndex: 0,
min: 0,
splitNumber: 12,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
max: Math.max.apply(null, that.left1Data) * 1.5,
},
],
series: [
{
data: that.left1Data,
name: "",
type: "bar",
barWidth: "30%",
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: "top",
distance: 15,
color: "#fff",
fontSize: 11,
formatter: "{c}",
},
itemStyle: {
normal: {
//圆角
barBorderRadius: [30, 30, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0EECE4",
},
{
offset: 1,
color: "#058FE7",
},
]),
},
},
zlevel: 11,
},
{
name: "",
type: "bar",
barWidth: "50%",
xAxisIndex: 0,
yAxisIndex: 1,
barGap: "-135%",
data: that.left1Data.map(
() => Math.max.apply(null, that.left1Data) * 1.5
),
tooltip: {
backgroundColor: "transparent",
formatter: " ",
},
itemStyle: {
normal: {
color: "rgba(255,255,255,0.1)",
},
},
zlevel: 9,
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
// 水位趋势图
weather() {
getWeather({
c: "code",
a: "getcode",
id: 48,
icon: 1,
py: "weihai",
}).then((res) => {
var body = document.createElement("div");
var weather = this.$el.querySelector("#weather1");
setTimeout(function () {
body.innerHTML = res;
var styles = body.querySelectorAll("link");
for (var style of styles) {
body.removeChild(style);
}
var scripts = body.querySelectorAll("script");
for (var script of scripts) {
script.parentNode.removeChild(script);
}
// 查看图片
var img = body.querySelector("#day_1 .img").firstElementChild;
img.src =
"http://plugin.tianqistatic.com/static/" +
img.src.split("static/")[1];
// 修剪dom
var mobile05 = body.querySelector("#mobile05");
mobile05.removeChild(mobile05.firstElementChild);
mobile05.removeChild(mobile05.lastElementChild);
var childs = mobile05.children;
for (var child of childs) {
child.innerHTML = child.firstElementChild.innerHTML;
}
weather.innerHTML = body.innerHTML;
}, 300);
});
},
//设备在线率
pieFun() {
let that = this;
var isSet = true;
var charPie3currentIndex = 0;
let myChart = echarts.init(document.getElementById("pie"));
var colorList = ["#22D7BB", "#24AAFF", "#5EDDF8", "#FCB840", "#F9D660"];
let color1 = [
["rgba(34,215,187,0.5)", "rgba(34,215,187,1)"],
["rgba(36,170,255,0.5)", "rgba(36,170,255,1)"],
];
var scale = 1;
var echartData = [
{ name: "离线", value: 1 },
{ name: "在线", value: 3 },
];
let unit = "个";
let option = {
color: colorList,
grid: {
bottom: 150,
left: 0,
right: "10%",
},
legend: {
show: false,
orient: "vertical",
top: "middle",
right: "5%",
textStyle: {
color: "#f2f2f2",
fontSize: 25,
},
icon: "roundRect",
},
series: [
// 主要展示层的
{
radius: "82%",
center: ["50%", "50%"],
name: "",
type: "pie",
hoverAnimation: true,
color: [
"#c487ee",
"#deb140",
"#49dff0",
"#034079",
"#6f81da",
"#00ffb4",
],
label: {
normal: {
formatter: function (params, ticket, callback) {
var total = 0; //考生总数量
var percent = 0; //考生占比
echartData.forEach(function (value, index, array) {
total += value.value;
});
percent = ((params.value / total) * 100).toFixed(1);
return (
"{normal|" +
params.name +
" " +
percent +
"%}\n{value|" +
params.value +
"}{unit|" +
unit +
"}"
);
},
padding: [0, -0],
rich: {
normal: {
fontSize: 12 * scale,
padding: [15, 4],
align: "center",
},
value: {
align: "center",
fontSize: 26 * scale,
},
unit: {
padding: [0, 0, 5 * scale, 0],
},
},
},
},
labelLine: {
length: 20 * scale,
length2: 30,
},
itemStyle: {
borderColor: "#03213E",
borderWidth: 7,
},
data: echartData,
},
],
};
myChart.setOption(option);
setTimeout(() => {
// myChart.clear();
// window.onresize = function () {
myChart.resize();
// };
}, 900);
},
//highchart3d
highchart3d() {
var echartData = this.d3data;
var chart = Highcharts.chart("pie", {
chart: {
type: "pie",
backgroundColor: "rgba(0,0,0,0)",
options3d: {
enabled: true,
alpha: 60,
beta: 0,
},
animation: false,
},
colors: [
//扇形颜色
"#00A8FF",
"#00D7E9",
"#5f75e5",
"#67acfe",
"#5f75e5",
"#7ca2ff",
"#4bcdec",
"#6648ff",
"#5f75e5",
"#5a9be7",
],
title: {
text: "",
},
credits: {
enabled: false, // 禁用版权信息
},
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
depth: 5, //高度
dataLabels: {
enabled: true,
// format: "{point.name}: <b>{point.percentage:.1f}%</b>",
formatter: function () {
return `<p style="color:${this.point.color};font-size:14px;">${this.point.options.name}：<span style="font-family: diget year;font-size:26px;font-wight:blod;">${this.point.options.y}</span>个</p>`;
},
},
},
},
series: [
{
type: "pie",
name: "在线率",
data: echartData,
animation: false,
},
],
});
},
//土压力
groundFun() {
let myChart = echarts.init(document.getElementById("ground-pre"));
let yLabel = ["W1", "W2", "W3", "W4", "W5", "W6", "W7"];
let yData = [10, 2, 3, 5, 6, 8, 1, 2, 6, 1];
let bgData = [];
for (let i in yData) {
bgData.push(20);
}
let option = {
grid: {
left: "5%",
right: "5%",
bottom: "5%",
top: "10%",
containLabel: true,
},
dataZoom: [
{
start: 0, //默认为0
end: 50, //默认为100
type: "slider",
maxValueSpan: 9, //显示数据的条数(默认显示10个)
show: true,
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: "80%", //组件高度
left: 600, //左边的距离
right: 8, //右边的距离
top: 20, //上边边的距离
borderColor: "rgba(43,48,67,0.8)",
fillerColor: "#33384b", //滑动块的颜色
backgroundColor: "rgba(13,33,117,0.5)", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: "filter",
yAxisIndex: [0], //控制的y轴
},
//滑块的属性
{
type: "inside",
show: true,
yAxisIndex: [0, 1],
start: 0, //默认为1
end: 50, //默认为100
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return (
params[0].name +
"<br/>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
params[0].seriesName +
" : " +
params[0].value +
" <br/>"
);
},
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
margin: 15,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: yLabel,
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
// axisLabel: {
// textStyle: {
// color: "#FFF",
// fontSize: "12",
// },
// },
data: yData,
},
],
series: [
{
name: "土压力值",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: [0, 30, 30, 0],
color: "#2a82fd",
shadowBlur: 0,
shadowColor: "rgba(87,220,222,0.7)",
},
},
barWidth: 10,
data: yData,
label: {
normal: {
show: true,
position: "right",
color: "#fff",
formatter: (params) => {
var value = params.value;
var suffix = params.data.suffix || "KPa"; //标签显示单位
return value + suffix;
},
},
},
},
{
name: "背景",
type: "bar",
barWidth: 10,
barGap: "-100%",
data: bgData,
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: [0, 30, 30, 0],
},
},
},
],
};
myChart.setOption(option);
setTimeout(() => {
// myChart.clear();
// window.onresize = function () {
myChart.resize();
// };
}, 900);
},
//mid2 地表
mid2Fun() {
let myChart = echarts.init(document.getElementById("mid2"));
// mock数据
const dataArr = {
xdata: [
"12:05",
"12:06",
"12:07",
"12:08",
"12:09",
"12:10",
"12:11",
"12:12",
"12:13",
"12:14",
"12:15",
"12:16",
"12:17",
"12:18",
"12:19",
"12:20",
],
// xdata: ['12:05', '12:06', '12:07', '12:08', '12:09'],
vaccination: [
0.2, 0.3, 0.02, 0.1, 0.05, 0.1, 0.09, 0.2, 0.3, 0.02, 0.1, 0.05, 0.1,
0.09, 0.2, 0.3,
],
};
// tooltip
const tooltip = {
trigger: "axis",
textStyle: { fontSize: "100%" },
formatter: (params) => {
let rander = params
.map(
(item) =>
// item.seriesType !== 'pictorialBar'
// ? `<div>${item.seriesName}: ${item.seriesType !== 'line' ? item.value : item.value + '%'}</div>`
// : ''
`<div>${item.seriesName}: ${item.value}</div>`
)
.join("");
return `
<div>${params[0].axisValue}</div>
${rander}
`;
},
};
const legend = {
data: ["地表裂隙"],
textStyle: { fontSize: 14, color: "#000" },
itemWidth: 25,
itemHeight: 15,
itemGap: 15,
bottom: "5%",
show: false,
};
const grid = {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
};
// xAxis
const xAxis = {
// boundaryGap: false,
type: "category",
gridIndex: 0,
axisTick: { show: true },
axisLine: {
lineStyle: {
color: "#BAE7FF",
},
onZero: false,
},
// splitLine: { lineStyle: { color: "#0562AF" } },
axisLabel: { textStyle: { fontSize: 10, color: "#BAE7FF" } },
data: dataArr.xdata,
};
// yAxis
const yAxis = [
{
show: true,
splitLine: {
show: true,
lineStyle: {
color: "rgba(186,231,255,.3)",
type: "dashed ",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#BAE7FF",
},
},
axisLabel: { textStyle: { fontSize: 10, color: "#BAE7FF" } },
},
];
// series
const series = [
{
name: "地表裂隙",
type: "line",
smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: "circle",
symbolSize: 5,
lineStyle: {
normal: {
color: "#00FFFC",
// shadowColor: "rgba(0, 0, 0, .3)",
// shadowBlur: 0,
// shadowOffsetY: 3,
// shadowOffsetX: 3,
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#F9EB0C",
},
},
itemStyle: {
color: "#F9EB0C",
// borderColor: "#fff",
// borderWidth: 1,
// shadowColor: "rgba(0, 0, 0, .3)",
// shadowBlur: 0,
// shadowOffsetY: 2,
// shadowOffsetX: 2,
},
data: dataArr.vaccination,
},
];
let option = {
tooltip,
xAxis,
yAxis,
series,
grid,
};
myChart.setOption(option);
setTimeout(() => {
// myChart.clear();
// window.onresize = function () {
myChart.resize();
// };
}, 900);
},
//right3
right3Fun() {
let myChart = echarts.init(document.getElementById("right3"));
var ageArea = this.beforeSevenDay;
var FbarData = [3100, 2142, 1218, 581, 431, 581, 431]; //男
var MbarData = [-3010, -2742, -218, -381, -521, -381, -521]; //女
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
console.log(params);
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
params[i].seriesName +
" : " +
Math.abs(params[i].value);
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 10);
return "loading...";
},
},
legend: {
center: true,
top: 5,
data: ["监测值1", "监测值2"],
textStyle: {
color: "#BAE7FF",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
xAxis: [
{
type: "value",
axisLabel: {
show: true,
color: "#BAE7FF",
fontSize: 10,
formatter: function (value) {
return Math.abs(value); //显示的数值都取绝对值
},
},
nameTextStyle: {
fontSize: 10,
color: "#BAE7FF",
align: "left",
padding: [5, -5, 0, 0], // 上右下左与原位置距离
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(186,231,255,.3)",
type: "dashed ",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#BAE7FF",
},
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: "category",
axisTick: { show: false },
nameTextStyle: {
fontSize: 10,
color: "#BAE7FF",
align: "left",
padding: [5, -5, 0, 0], // 上右下左与原位置距离
},
axisLine: {
show: true,
lineStyle: {
color: "#BAE7FF",
},
},
axisTick: {
show: false,
},
data: ageArea,
},
],
series: [
{
name: "监测值1",
type: "bar",
stack: "总量",
label: {
normal: {
show: true,
position: "right",
color: "#fff",
},
},
data: FbarData,
},
{
name: "监测值2",
type: "bar",
stack: "总量",
label: {
normal: {
show: true,
position: "left",
color: "#fff",
formatter: function (v) {
return Math.abs(v.data);
},
},
},
// data:[-120, -132, -101, -134, -190, -230, -210]
data: MbarData,
},
],
};
myChart.setOption(option);
setTimeout(() => {
// myChart.clear();
// window.onresize = function () {
myChart.resize();
// };
}, 900);
},
//时间
getNowTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let mins = date.getMinutes();
let second = date.getSeconds();
this.nowDate = {
date: `${year}-${this.addZero(month)}-${this.addZero(day)}`,
time: `${this.addZero(hour)}:${this.addZero(mins)}:${this.addZero(
second
)}`,
};
},
addZero(s) {
return s < 10 ? "0" + s : s;
},
},
};
window.onload = function () {
let testsk = document.querySelector("#testsk");
testsk.onclick = function (e) {
console.log(e);
};
};
</script>
<style lang="scss" scoped>
@keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@font-face {
font-family: "diget year";
src: url("~@/assets/fonts/DS-Digital.ttf");
}
.font_digit {
font-family: diget year;
}
.bigscreen {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
box-sizing: border-box;
background-color: #0d1d34;
background-image: radial-gradient(#082b3f 7.4%, transparent 0);
background-size: 0.2rem 0.2rem;
color: #fff;
::v-deep .el-dialog {
background: url("~@/assets/images/bigscreen/videoBg.png") no-repeat center;
background-size: 100%;
}
::v-deep .el-dialog__header {
border-bottom: none;
}
::v-deep .el-dialog__body {
padding: 10px 20px;
width: 100%;
height: 40vh;
.video-infor {
width: 100%;
height: 37vh;
display: block;
border: 1px solid red;
}
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
::v-deep .el-dialog__title {
color: #fff;
}
.lcl-table {
width: 100%;
height: 100%;
.lcl-table-header {
width: 100%;
height: 0.3rem;
background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
background-position: 0 -600%;
background-size: 100%;
font-size: 0.12rem;
font-weight: 400;
color: #00f0ff;
display: flex;
justify-content: space-around;
}
.lcl-table-body {
width: 100%;
max-height: 1.3rem;
.lcl-tr {
width: 100%;
height: 0.36rem;
line-height: 0.36rem;
display: flex;
justify-content: space-between;
.lcl-td {
display: inline-block;
width: 33%;
overflow: hidden;
text-overflow: ellipsis;
}
.lcl-td:nth-child(3) {
text-align: center;
}
}
.lcl-tr:nth-child(2n) {
background: rgba(29, 100, 221, 0.22);
}
}
// @media only screen and (min-width: 1440px) {
// .lcl-table-header {
// background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
// background-position: 0 -600%;
// background-size: 100%;
// }
// }
// @media only screen and (max-width: 1440px) {
// .lcl-table-header {
// background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
// background-position: 0 200%;
// background-size: 100%;
// }
// }
}
.card {
width: 100%;
height: 100%;
.card-title {
position: relative;
width: 100%;
height: 0.32rem;
color: #fff;
background: url("~@/assets/images/bigscreen/title.png") no-repeat center;
background-size: cover;
padding-left: 0.38rem;
i {
font-size: 0.18rem;
font-style: italic;
line-height: 0.32rem;
font-weight: bold;
text-shadow: 0px 0px 9px rgba(32, 22, 0, 0.45);
}
&:before {
content: "";
position: absolute;
left: 0.08rem;
top: 0.03rem;
display: block;
height: 0.22rem;
width: 0.21rem;
background: no-repeat url("~@/assets/images/bigscreen/title-before.png");
background-size: cover;
}
.card-select {
width: 1.2rem;
height: 0.24rem;
position: absolute;
right: 0.08rem;
top: 0.03rem;
display: inline-block;
// 修改input默认值颜色 兼容其它主流浏览器
::v-deep input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::v-deep input::-moz-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::v-deep input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
// input框
::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
height: 0.24rem;
background-color: rgba(8, 148, 255, 0.3);
border: 1px solid #1d80da;
// background-color: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 1);
border: none; // 去掉边框
// border-color: #XXXXXX // 默认边框的颜色
text-align: left;
border-radius: 4px;
line-height: 0.24rem;
}
// 选中时边框颜色
// ::v-deep .el-input__inner:focus{
// border-color: #XXXXXX;
// }
// 鼠标悬浮时 input框颜色
::v-deep .el-input__inner:hover {
background-color: rgba(255, 255, 255, 0.12);
}
::v-deep .el-input__suffix-inner {
display: inline-block;
}
// input框 右侧的箭头
::v-deep .el-select .el-input .el-select__caret {
transform: rotate(180deg);
color: rgba(255, 255, 255, 1);
}
::v-deep .el-select .el-input .el-select__caret.is-reverse {
transform: rotate(0deg);
}
::v-deep .el-input__icon {
position: relative;
line-height: 0.24rem;
width: 0.12rem;
}
::v-deep .el-select .el-input .el-select__caret:before {
position: absolute;
content: "\E6E1";
text-align: center;
line-height: 3px;
display: inline-block;
top: 0.11rem;
left: -0.01rem;
}
// option选项 上面的箭头
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: rgba(43, 45, 55, 0.8);
z-index: 9999;
}
::v-deep .popper__arrow {
border: none;
}
// option选项 最外层
::v-deep .el-select-dropdown {
border: none !important;
background: rgba(43, 45, 55, 0.8) !important;
z-index: 9999;
}
// option选项 文字样式
::v-deep .el-select-dropdown__item {
color: rgba(255, 255, 255, 1) !important;
z-index: 9999;
}
::v-deep .el-select-dropdown__item.selected span {
color: rgba(255, 255, 255, 0.8) !important;
z-index: 9999;
}
// 移入option选项 样式调整
::v-deep .el-select-dropdown__item.hover {
background-color: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8) !important;
z-index: 9999;
}
// 下拉框垂直滚动条宽度
::v-deep .el-scrollbar__bar.is-vertical {
width: 10px;
top: 2px;
}
// 下拉框最大高度
::v-deep .el-select-dropdown__wrap {
max-height: 2rem;
}
}
.card-select-dev {
right: 1.3rem;
}
}
}
.screen-header {
// left: 0;
// top: 0;
// right: 0;
width: 100%;
height: 1.52rem;
// border: 1px solid red;
// background-color: #00164e;
.header-title {
position: relative;
// width: 18.6rem;
width: 100%;
height: 1.52rem;
margin: 0 auto;
background: url("~@/assets/images/bigscreen/header.png") no-repeat center;
background-size: 100%;
.headerchoice {
color: #fff;
width: 1.74rem;
height: 0.8rem;
background: url("~@/assets/images/bigscreen/headerchoice.png") no-repeat
center;
background-size: 100%;
font-size: 0.2rem;
line-height: 0.4rem;
text-align: center;
cursor: pointer;
font-weight: bold;
-webkit-text-stroke: 1px #0085c0;
text-stroke: 1px #0085c0;
font-style: italic;
}
.header-left {
position: absolute;
width: 30%;
height: 0.48rem;
left: 0.07rem;
.now-page {
float: left;
}
.now-date {
float: left;
width: 1.5rem;
font-weight: normal;
font-style: italic;
font-size: 0.2rem;
color: #c3e1ff;
line-height: 0.6rem;
}
}
.header-right {
position: absolute;
width: 30%;
height: 0.48rem;
right: 0.07rem;
a {
text-decoration: none;
display: block;
}
.go-index {
float: right;
}
.now-time {
float: right;
width: 1.1rem;
font-weight: normal;
font-style: italic;
font-size: 0.3rem;
color: #25eef0;
line-height: 0.6rem;
}
}
h1 {
font-size: 0.44rem;
font-family: Source Han Sans CN;
text-align: center;
font-weight: bold;
color: #ffffff;
line-height: 0.7rem;
text-shadow: 0px 2px 14px rgba(0, 121, 177, 0.88);
margin: 0;
}
}
// .title {
// .shine {
// background-image: url("https://static.oschina.net/uploads/space/2018/0521/211357_VOTl_3549294.png");
// background-repeat: no-repeat;
// background-position: center;
// width: 155px;
// height: 155px;
// position: absolute;
// animation: opacity-change 1s ease-in-out infinite;
// -webkit-animation: opacity-change 1s ease-in-out infinite;
// -moz-animation: opacity-change 1s ease-in-out infinite;
// -o-animation: opacity-change 1s ease-in-out infinite;
// }
// .shine2 {
// animation: opacity-change 1.75s ease-in-out infinite;
// -webkit-animation: opacity-change 1.75s ease-in-out infinite;
// -moz-animation: opacity-change 1.75s ease-in-out infinite;
// -o-animation: opacity-change 1.75s ease-in-out infinite;
// }
// }
}
.screen-section {
position: absolute;
left: 0;
top: 0.7rem;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
width: 100%;
height: calc(100% - 0.7rem);
flex-direction: row;
flex: 1;
padding: 0 0.08rem;
overflow: hidden;
.section-left {
width: 100%;
height: 100%;
display: flex;
// margin-left: 0.08rem;
// margin-right: 0.08rem;
flex-direction: column;
flex: 1;
.section-content {
width: 100%;
height: 100%;
flex: 1;
border: 1px solid #127baa;
box-sizing: border-box;
margin-bottom: 0.08rem;
.card-title {
.card-choice {
position: absolute;
right: 1.3rem;
top: 0.03rem;
width: 0.56rem;
height: 0.24rem;
display: flex;
flex-direction: row;
justify-content: space-between;
.card-year-month {
width: 0.26rem;
height: 0.24rem;
text-align: center;
line-height: 0.24rem;
display: inline-block;
cursor: pointer;
}
.choice-normal {
background: url("~@/assets/images/bigscreen/normal.png") no-repeat
center;
background-size: 100%;
}
.choice-active {
background: url("~@/assets/images/bigscreen/active.png") no-repeat
center;
background-size: 100%;
}
}
}
.card-content {
width: 100%;
height: calc(100% - 0.32rem);
flex: 1;
.left-chart {
width: 100%;
height: 100%;
}
}
}
}
.section-mid {
display: flex;
flex-shrink: 0;
height: 100%;
flex-direction: column;
flex: 1;
> div {
width: 10rem;
flex: 1;
border: 1px solid #127baa;
box-sizing: border-box;
margin: 0 0.08rem 0.08rem;
}
.mid-top {
flex: 0.12;
border: none;
width: 100%;
}
.mid-fir {
flex: 2.94;
margin-top: 0;
width: 100%;
.nothing {
height: 0.32rem;
width: 100%;
}
.card-content {
width: 100%;
height: calc(100% - 0.32rem);
position: relative;
.map {
width: 100%;
height: 100%;
padding: 0.08rem;
background: url("~@/assets/images/index.png") no-repeat center;
background-size: cover;
}
}
}
.mid-sec {
flex: 1;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
border: none;
width: 100%;
.section-content {
border: 1px solid #0085c0;
.card-content {
height: calc(100% - 0.32rem);
#mid2 {
width: 100%;
height: 100%;
}
}
}
}
}
.section-right {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
// margin-right: 0.08rem;
flex: 1;
> div {
width: 100%;
height: 100%;
flex: 1;
border: 1px solid #127baa;
box-sizing: border-box;
margin-bottom: 0.08rem;
margin-right: 0.08rem;
}
.card-content {
width: 100%;
height: calc(100% - 0.32rem);
flex: 1;
overflow: hidden;
.left-chart,
#pie,
#ground-pre,
#mid2,
#right3 {
width: 100%;
height: 100%;
}
.yinhuan {
width: 100%;
height: 100%;
display: flex;
.yinhuan-left {
width: 1.12rem;
height: 100%;
margin-right: 0.08rem;
margin-left: 0.08rem;
.yinhuan-left-item {
position: relative;
width: 1.12rem;
height: 0.64rem;
background: url("~@/assets/images/bigscreen/yinhuanleft.png")
no-repeat;
background-size: 100%;
margin-top: 0.2rem;
.yinhuan-item-top {
text-align: center;
font-family: diget year;
font-weight: 400;
color: #22f2ff;
font-size: 0.2rem;
display: block;
padding-top: -0.2rem;
}
.yinhuan-item-bottom {
text-align: center;
font-family: diget year;
font-size: 0.18rem;
font-weight: bold;
display: block;
}
}
}
.yinhuan-right {
width: calc(100% - 1.28rem);
height: 100%;
padding: 0.08rem;
}
}
}
}
}
}
/* 滚动条 */
.scrollingout {
// max-height: 250px;
width: 100%;
overflow-y: scroll;
}
.scrollingout {
scrollbar-width: thin;
scrollbar-color: #1674ee rgba(255, 255, 255, 0);
}
.scrollingout::-webkit-scrollbar {
width: 3px;
height: 5px;
cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #1674ee;
margin-right: 10px;
cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb:hover {
background-color: #1854e8;
}
.scrollingout::-webkit-scrollbar-track {
border-radius: 10px;
// background: rgba(255, 255, 255, 0.1);
margin-right: 10px;
}
/* 滚动条-火狐 */
.scrollingout {
scrollbar-width: thin;
scrollbar-color: #1674ee rgba(255, 254, 254, 0.993);
}
.scrollingout::-webkit-scrollbar {
width: 3px;
height: 5px;
cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #1674ee;
margin-right: 10px;
cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb:hover {
background-color: #1854e8;
}
.scrollingout::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(255, 255, 255, 0);
margin-right: 10px;
}
/* 滚动条-火狐 */
.scrollingout {
scrollbar-width: thin;
scrollbar-color: #1674ee rgba(255, 255, 255, 0);
}
</style>
<style lang="scss" >
.bigscreen {
.screen-section {
.section-left {
.card-content {
.weather {
font-size: 11px;
// margin: 15px;
padding: 0.08rem;
.mleft {
display: none;
}
.wtpath {
display: none;
}
.mright {
flex: 1;
text-align: center;
}
img {
display: block;
width: 2vw !important;
height: auto !important;
margin: 0 auto;
}
ul {
margin: 5px 0;
color: #d0d2ff;
width: 100%;
padding: 0;
li {
width: 100%;
list-style: none;
text-align: center;
overflow: hidden;
span {
width: 100%;
display: inline-block;
float: left;
}
}
}
#mobile05 {
display: flex;
position: relative;
padding-top: 7vh !important;
}
#mobile05 > div:last-child {
display: none;
}
#mright_1 {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
ul {
margin: 0;
color: #03d3fe;
li {
list-style: none;
}
}
.wt {
display: flex;
align-items: center;
margin-left: 140px;
}
.day {
display: none;
}
span:last-child {
display: block;
position: absolute;
top: -5px;
left: 8px;
height: auto;
font-size: 26px;
}
#day_1 {
margin-left: 30px;
span:last-child {
position: relative;
}
}
}
}
}
}
}
}
</style>