Skip to content

N
Nei_Meng_An_Jian_4
Commit f27c2165 authored by liuyuping's avatar liuyuping
Browse files
Options

'2021-12-01'

parent 3e8ed2e3
Hide whitespace changes
Inline Side-by-side
Showing with 3238 additions and 55 deletions
src/api/fengxian.js
View file @ f27c2165
......@@ -2,6 +2,7 @@ import request5 from "@/utils/request5";
// 应急仓库
export function getFXData(data) {
console.log('我被调用了 ' , 'getFxData')
return request5({
url: "api/contingencyPlan/getFXData",
method: "get",
......@@ -11,6 +12,7 @@ export function getFXData(data) {
// 一键发送
export function sendRiskSM(data) {
console.log('我被调用了', 'sendRiskSM')
return request5({
url: "api/hiddenTroubleCheck/sendRiskSM",
method: "get",
......
src/components/base/BaseLeft.vue
View file @ f27c2165
......@@ -17,6 +17,13 @@
</el-row>
</div>
<div class="corporate-portrait" @click="popPortrait">
<div>企业画像查询</div>
<div>
<svg t="1637975296097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1669" width="32" height="32"><path d="M732.089122 1019.920127c-154.87516 0-280.359239-125.596075-280.359239-280.599231 0-155.019156 125.484079-280.615231 280.359239-280.615231s280.359239 125.596075 280.359239 280.615231c0 155.003156-125.484079 280.599231-280.359239 280.599231z m143.627512-139.035655l-79.645511-79.709509a144.747477 144.747477 0 0 0 30.495047-89.117215c0-80.253492-64.989969-145.323459-145.211462-145.323458-80.189494 0-145.179463 65.069967-145.179463 145.323458 0 80.269492 64.989969 145.323459 145.179463 145.323459a144.475485 144.475485 0 0 0 89.053217-30.527046l79.645511 79.709509a18.095435 18.095435 0 0 0 25.663198 0 18.127434 18.127434 0 0 0 0-25.679198z m-194.361926-59.83813c-60.046124 0-108.876598-48.862473-108.876598-108.988594 0-60.094122 48.830474-108.988594 108.876598-108.988594 60.078123 0 108.908597 48.894472 108.908596 108.988594 0 60.126121-48.830474 108.988594-108.908596 108.988594zM732.089122 387.219899c-9.791694 0-19.391394 0.415987-28.975094 1.231962V71.485766l-415.651011 135.819756v-41.454705L745.160714 0.016l137.515702 116.204368V421.138839c-4.47986-2.047936-8.97572-4.095872-13.663573-6.143808a349.10909 349.10909 0 0 0-136.923721-27.775132z m-133.851817-128.043998v154.603168l-3.071904 1.215962a346.213181 346.213181 0 0 0-111.804506 75.373645 349.237086 349.237086 0 0 0-64.077998 87.597263V270.40755L72.589732 381.300084v642.715916H11.583638l0.207994-675.386895 463.393518-161.946939 123.052155 72.493735zM356.436861 477.905065L138.507672 536.111247v-98.028937l217.929189-71.485766v111.308521z m0 179.514391L138.507672 699.690135v-93.949064l217.929189-55.550264v107.228649z m0 182.3783L138.507672 860.213118v-91.901128l217.929189-35.534889v107.020655z m0 181.962314H138.507672v-97.212962l217.929189-15.311522v112.524484z m163.85088-1.231962h-101.004844v-119.868254a354.56492 354.56492 0 0 0 64.061998 87.613262 344.069248 344.069248 0 0 0 36.942846 32.254992z" p-id="1670" fill="#02fcfe"></path></svg>
</div>
</div>
<div class="base_left_box_line base-type">
<div class="title">监测类型</div>
......@@ -91,7 +98,12 @@
<el-col class="text_look" :span="12"><span @click="onClickthree">查看</span></el-col>
</el-row>
</div>
<div class="videoai-wrapper" @click="videoaiShow">
<div>视频AI</div>
<div>
<svg t="1637996328836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3046" width="32" height="32"><path d="M758.826667 660.096l102.549333 262.058667h-54.421333l-24.085334-63.296h-107.584l-22.784 63.296h-54.464l102.549334-262.058667h58.24z m-29.12 40.512h-1.258667c0 1.706667-0.874667 5.056-2.538667 10.133333-1.706667 6.762667-2.965333 11.392-3.797333 13.930667-0.832 1.706667-12.245333 33.770667-34.176 96.213333h84.8c-22.784-63.296-34.581333-95.765333-35.413333-97.472a175.936 175.936 0 0 1-7.616-22.805333z m160.789333 221.568V660.096h50.624v262.058667h-50.624z m-378.517333-29.482667c-207.850667 0-376.96-170.773333-376.96-380.693333 0-209.877333 169.109333-380.650667 376.96-380.650667 207.872 0 376.981333 170.752 376.981333 380.650667a34.176 34.176 0 0 0 68.309333 0c0-247.530667-199.744-448.938667-445.269333-448.938667S66.730667 264.469333 66.730667 512c0 247.552 199.722667 448.96 445.248 448.96a34.133333 34.133333 0 0 0 0-68.266667z m190.762666-461.525333l-245.269333-139.136c-15.658667-8.704-31.317333-13.909333-46.101333-13.909333-33.045333 0-67.84 24.341333-67.84 78.272v279.146666c0 54.826667 33.898667 78.293333 67.84 78.293334 14.784 0 30.442667-4.330667 46.101333-13.909334l245.269333-139.157333c27.84-15.616 44.352-39.082667 44.352-64.341333 0.021333-26.090667-16.512-49.6-44.352-65.258667" fill="#02fcfe" p-id="3047"></path></svg>
</div>
</div>
<div class="base_left_box_line">
<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span></div>
<div class="palyer2" v-loading="loading">
......@@ -204,6 +216,18 @@ export default {
}
eventBus.$emit('dialog_show_video', e)
},
// 查看企业画像
popPortrait() {
console.log('这里被调用了吗')
this.$store.commit('SET_EnterPotrait', true)
},
// 查看企业视频
videoaiShow() {
this.$store.commit('SET_VideoUrl', this.videoUrl)
this.$store.commit('SET_IsVideo', this.isVideoUrl)
this.$store.commit('SET_VideoShow', true)
}
},
computed: {
......@@ -282,7 +306,42 @@ export default {
}
.base-type{
min-height:37vh;
min-height:32vh;
}
}
}
.corporate-portrait {
display: flex;
align-items: center;
color: #02fcfe;
font-size: 1vw;
cursor: pointer;
div {
&:last-child {
width: 2.5vw;
height: 2.5vw;
display: flex;
justify-content: center;
align-content: center;
margin-left: 10px;
}
}
}
.videoai-wrapper {
display: flex;
align-items: center;
color: #02fcfe;
font-size: 1vw;
cursor: pointer;
div {
&:last-child {
margin-left: 10px;
width: 2.5vw;
height: 2.5vw;
display: flex;
justify-content: center;
align-content: center;
margin-left: 10px;
}
}
}
......
src/components/bigdata/bigdata.vue 0 → 100644
View file @ f27c2165
<template>
<div class="big-data-wrapper">
<div class="big-data-chart-row">
<div class="big-data1 big-data">
<div class="big-data-title-wrapper">
区域报警统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart1">
<div class="alarm-sum-wrapper">
<div>报警总数量</div>
<div>881770</div>
</div>
<div class="big-data-chart1-alarm1"></div>
</div>
</div>
<div class="big-data2 big-data">
<div class="big-data-title-wrapper">
报警信息卡
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart2">
<div class="big-data-chart2-alarm-sum2">
<div class="big-data-chart2-sum">
<span>报警数量</span>
<span>98次</span>
</div>
<div class="big-data-chart2-sum">
<span>解除报警数量</span>
<span>86次</span>
</div>
</div>
<div class="big-data-chart2-table-wrapper">
<div class="big-data-chart2-table-title">
<span class="big-data-chart2-table-title1">报警设备名称</span>
<span class="big-data-chart2-table-title2">报警状态</span>
<span class="big-data-chart2-table-title3">时间</span>
</div>
<div class="big-data-chart2-table-content-wrapper">
<div class="big-data-chart2-table-content-item">
<span>1111</span>
<span>2222</span>
<span>3333</span>
</div>
<div class="big-data-chart2-table-content-item">
<span>4444</span>
<span>5555</span>
<span>6666</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="big-data-chart-row">
<div class="big-data3 big-data">
<div class="big-data-title-wrapper">
矿企产量趋势图
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart3"></div>
</div>
<div class="big-data4 big-data">
<div class="big-data-title-wrapper">
重大安全隐患统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart4"></div>
</div>
</div>
<div class="big-data-chart-row">
<div class="big-data5 big-data">
<div class="big-data-title-wrapper">
重大安全隐患整改数量情况统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart5"></div>
</div>
<div class="big-data6 big-data">
<div class="big-data-title-wrapper">
生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart6"></div>
</div>
</div>
<div class="big-data-chart-row">
<div class="big-data7 big-data">
<div class="big-data-title-wrapper">
行业生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart7"></div>
</div>
<div class="big-data8 big-data">
<div class="big-data-title-wrapper">
区域生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart8"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
alarmInfo: {
// 报警数量
alarmSum: 10,
// 解除报警数量
disarmSum: 8,
alarmTable:[
{
// 报警设备名称
alarmDeviceName: 'device1',
// 报警状态
alarmState: '11',
// 报警时间
alarmTime: '2020-11-30 08-20-01'
}
]
},
}
},
mounted() {
this.init1()
this.init3()
this.init4()
this.init5()
this.init6()
this.init7()
this.init8()
},
methods: {
init1() {
const targetDom = document.querySelector('.big-data-chart1-alarm1')
const mychart = echarts.init(targetDom)
const option = {
series: [
{
name: 'alarm1',
type: 'pie',
radius: ['20%', '70%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 40,
name: '正常数量'
},
{
value: 20,
name: '报警数量'
}
]
}
]
}
mychart.setOption(option)
},
init3() {
const targetDom = document.querySelector('.big-data-chart3');
const mychart = echarts.init(targetDom)
const option = {
color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
tooltip: {
trigger: "axis"
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%'
},
xAxis: {
type: "category",
name: '时间',
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: "#FFF"
},
data: ['2021-1','2021-2','2021-3','2021-4']
},
yAxis: {
type: "value",
name: '隐患总量',
axisLine: {
show: false
},
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
color: "#fff"
}
},
series: [
{
type: 'line',
name: '非煤矿山',
smooth: true,
symbol: 'none',
data: [20, 50, 80, 10]
},
{
type: 'line',
name: '煤矿',
smooth: true,
symbol: 'none',
data: [10, 90, 20, 70]
},
{
type: 'line',
name: '危险化学品企业',
smooth: true,
symbol: 'none',
data: [80, 30, 10, 50]
},
{
type: 'line',
name: '冶金工贸',
smooth: true,
symbol: 'none',
data: [70, 100, 200, 10]
}
]
}
mychart.setOption(option)
},
init4() {
const targetDom = document.querySelector('.big-data-chart4');
const mychart = echarts.init(targetDom)
const option = {
color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
tooltip: {
trigger: "axis"
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%'
},
xAxis: {
type: "category",
name: '时间',
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: "#FFF"
},
data: ['2021-1','2021-2','2021-3','2021-4']
},
yAxis: {
type: "value",
name: '隐患总量',
axisLine: {
show: false
},
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
color: "#fff"
}
},
series: [
{
name: '一般隐患',
type: 'bar',
stack: 'total',
data: [60, 120, 220, 70]
},
{
name: '重大隐患',
type: 'bar',
stack: 'total',
data: [10, 110, 320, 80]
}
]
}
mychart.setOption(option)
},
init5() {
const targetDom = document.querySelector('.big-data-chart5')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 700,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 200,
name: "重大隐患未闭环",
itemStyle: {
color: "#E74C3C"
}
},
{
value: 500,
name: "重大隐患已闭环",
itemStyle: {
color: "#FDFA02"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init6() {
const targetDom = document.querySelector('.big-data-chart6')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init7() {
const targetDom = document.querySelector('.big-data-chart7')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init8() {
const targetDom = document.querySelector('.big-data-chart8')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.big-data-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) !important;
height: 92vh;
width: 70vw;
background: #040624;
border-radius: 7px;
z-index: 1000;
color: #05D6EC;
.big-data-chart-row {
display: flex;
height: 22vh;
margin: 0.5vh auto;
.big-data {
display: flex;
flex-direction: column;
.big-data-chart1 {
flex-grow: 1;
display: flex;
flex-direction: column;
.alarm-sum-wrapper {
display: flex;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
font-size: 18px;
}
.big-data-chart1-alarm1 {
flex-grow: 1;
}
}
.big-data-chart2 {
.big-data-chart2-alarm-sum2 {
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
.big-data-chart2-sum {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
span {
&:first-child {
color: #7BB8C2;
font-size: 14px;
}
&:last-child {
color: #00FCFF;
font-size: 18px;
margin-left: 20px;
}
}
}
}
.big-data-chart2-table-wrapper {
display: flex;
flex-direction: column;
font-size: 14px;
text-align: center;
.big-data-chart2-table-title {
display: flex;
color: #019AEF;
.big-data-chart2-table-title1 {
flex-basis: 42%;
}
.big-data-chart2-table-title2 {
flex-basis: 26%;
}
.big-data-chart2-table-title3 {
flex-basis: 32%;
}
}
.big-data-chart2-table-content-wrapper {
flex-grow: 1;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.big-data-chart2-table-content-item {
display: flex;
color: white;
background-color: rgba(32, 47, 88, .8);
padding: 2px;
margin: 2px 10px;
span {
&:nth-child(1) {
flex-basis: 42%;
}
&:nth-child(2) {
flex-basis: 26%;
}
&:nth-child(3) {
flex-basis: 32%;
}
}
}
}
}
}
.big-data-chart3 {
flex-grow: 1;
}
.big-data-chart4 {
flex-grow: 1;
}
.big-data-chart5 {
flex-grow: 1;
}
.big-data-chart6 {
flex-grow: 1;
}
.big-data-chart7 {
flex-grow: 1;
}
.big-data-chart8 {
flex-grow: 1;
}
}
.big-data1 {
flex-basis: 50%;
}
.big-data2 {
flex-basis: 50%;
}
.big-data3 {
flex-basis: 50%;
}
.big-data4 {
flex-basis: 50%;
}
.big-data5 {
flex-basis: 50%;
}
.big-data6 {
flex-basis: 50%;
}
.big-data7 {
flex-basis: 50%;
}
.big-data8 {
flex-basis: 50%;
}
}
}
.big-data-title-wrapper {
position: relative;
font-family: "SourceHanSansCN-Medium";
color: aqua;
font-size: 16px;
font-weight: bold;
/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 80px;
padding-top: 5px;
.big-data-title-dec {
position: absolute;
left: 20px;
top: 5px;
width: 53px;
height: 21px;
background-repeat: no-repeat;
background-image: url('../../assets/images/dec4.png');
transform: scale(0.75);
}
}
</style>
\ No newline at end of file
src/components/bigdata/bigdataLeft.vue 0 → 100644
View file @ f27c2165
<template>
<div class="big-data-left-wrapper">
<div class="big-data1 big-data">
<div class="big-data-title-wrapper">
区域报警统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart1">
<div class="alarm-sum-wrapper">
<div>报警总数量</div>
<div>881770</div>
</div>
<div class="big-data-chart1-alarm1"></div>
</div>
</div>
<div class="big-data3 big-data">
<div class="big-data-title-wrapper">
矿企产量趋势图
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart3"></div>
</div>
<div class="big-data5 big-data">
<div class="big-data-title-wrapper">
重大安全隐患整改数量情况统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart5"></div>
</div>
<div class="big-data7 big-data">
<div class="big-data-title-wrapper">
行业生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart7"></div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.init1()
this.init3()
this.init5()
this.init7()
},
methods: {
init1() {
const targetDom = document.querySelector('.big-data-chart1-alarm1')
const mychart = echarts.init(targetDom)
const option = {
series: [
{
name: 'alarm1',
type: 'pie',
radius: ['20%', '70%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 40,
name: '正常数量'
},
{
value: 20,
name: '报警数量'
}
]
}
]
}
mychart.setOption(option)
},
init3() {
const targetDom = document.querySelector('.big-data-chart3');
const mychart = echarts.init(targetDom)
const option = {
color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
tooltip: {
trigger: "axis"
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%'
},
xAxis: {
type: "category",
name: '时间',
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: "#FFF"
},
data: ['2021-1','2021-2','2021-3','2021-4']
},
yAxis: {
type: "value",
name: '隐患总量',
axisLine: {
show: false
},
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
color: "#fff"
}
},
series: [
{
type: 'line',
name: '非煤矿山',
smooth: true,
symbol: 'none',
data: [20, 50, 80, 10]
},
{
type: 'line',
name: '煤矿',
smooth: true,
symbol: 'none',
data: [10, 90, 20, 70]
},
{
type: 'line',
name: '危险化学品企业',
smooth: true,
symbol: 'none',
data: [80, 30, 10, 50]
},
{
type: 'line',
name: '冶金工贸',
smooth: true,
symbol: 'none',
data: [70, 100, 200, 10]
}
]
}
mychart.setOption(option)
},
init5() {
const targetDom = document.querySelector('.big-data-chart5')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 700,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 200,
name: "重大隐患未闭环",
itemStyle: {
color: "#E74C3C"
}
},
{
value: 500,
name: "重大隐患已闭环",
itemStyle: {
color: "#FDFA02"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init7() {
const targetDom = document.querySelector('.big-data-chart7')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
}
}
}
</script>
<style lang="scss">
.big-data-left-wrapper {
position: absolute;
left: 0;
top: 0;
width: 21vw;
height: 90vh;
display: flex;
flex-direction: column;
color: #05D6EC;
z-index: 1000;
background: #040624;
> div {
flex-basis: 25%;
}
}
.big-data-title-wrapper {
position: relative;
font-family: "SourceHanSansCN-Medium";
color: aqua;
font-size: 16px;
font-weight: bold;
/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 80px;
padding-top: 5px;
.big-data-title-dec {
position: absolute;
left: 5px;
top: 5px;
width: 53px;
height: 21px;
background-repeat: no-repeat;
background-image: url('../../assets/images/dec4.png');
transform: scale(0.75);
}
}
.big-data {
display: flex;
flex-direction: column;
.big-data-chart1 {
flex-grow: 1;
display: flex;
flex-direction: column;
.alarm-sum-wrapper {
display: flex;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
font-size: 18px;
}
.big-data-chart1-alarm1 {
flex-grow: 1;
}
}
.big-data-chart2 {
.big-data-chart2-alarm-sum2 {
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
.big-data-chart2-sum {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
span {
&:first-child {
color: #7BB8C2;
font-size: 14px;
}
&:last-child {
color: #00FCFF;
font-size: 18px;
margin-left: 20px;
}
}
}
}
.big-data-chart2-table-wrapper {
display: flex;
flex-direction: column;
font-size: 14px;
text-align: center;
.big-data-chart2-table-title {
display: flex;
color: #019AEF;
.big-data-chart2-table-title1 {
flex-basis: 42%;
}
.big-data-chart2-table-title2 {
flex-basis: 26%;
}
.big-data-chart2-table-title3 {
flex-basis: 32%;
}
}
.big-data-chart2-table-content-wrapper {
flex-grow: 1;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.big-data-chart2-table-content-item {
display: flex;
color: white;
background-color: rgba(32, 47, 88, .8);
padding: 2px;
margin: 2px 10px;
span {
&:nth-child(1) {
flex-basis: 42%;
}
&:nth-child(2) {
flex-basis: 26%;
}
&:nth-child(3) {
flex-basis: 32%;
}
}
}
}
}
}
.big-data-chart3 {
flex-grow: 1;
}
.big-data-chart4 {
flex-grow: 1;
}
.big-data-chart5 {
flex-grow: 1;
}
.big-data-chart6 {
flex-grow: 1;
}
.big-data-chart7 {
flex-grow: 1;
}
.big-data-chart8 {
flex-grow: 1;
}
}
</style>
\ No newline at end of file
src/components/bigdata/bigdataRight.vue 0 → 100644
View file @ f27c2165
<template>
<div class="big-data-right-wrapper">
<div class="big-data2 big-data">
<div class="big-data-title-wrapper">
报警信息卡
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart2">
<div class="big-data-chart2-alarm-sum2">
<div class="big-data-chart2-sum">
<span>报警数量</span>
<span>98次</span>
</div>
<div class="big-data-chart2-sum">
<span>解除报警数量</span>
<span>86次</span>
</div>
</div>
<div class="big-data-chart2-table-wrapper">
<div class="big-data-chart2-table-title">
<span class="big-data-chart2-table-title1">报警设备名称</span>
<span class="big-data-chart2-table-title2">报警状态</span>
<span class="big-data-chart2-table-title3">时间</span>
</div>
<div class="big-data-chart2-table-content-wrapper">
<div class="big-data-chart2-table-content-item">
<span>1111</span>
<span>2222</span>
<span>3333</span>
</div>
<div class="big-data-chart2-table-content-item">
<span>4444</span>
<span>5555</span>
<span>6666</span>
</div>
</div>
</div>
</div>
</div>
<div class="big-data4 big-data">
<div class="big-data-title-wrapper">
重大安全隐患统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart4"></div>
</div>
<div class="big-data6 big-data">
<div class="big-data-title-wrapper">
生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart6"></div>
</div>
<div class="big-data8 big-data">
<div class="big-data-title-wrapper">
区域生产风险统计
<div class="big-data-title-dec"></div>
</div>
<div class="big-data-chart8"></div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.init4()
this.init6()
this.init8()
},
methods: {
init4() {
const targetDom = document.querySelector('.big-data-chart4');
const mychart = echarts.init(targetDom)
const option = {
color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
tooltip: {
trigger: "axis"
},
grid: {
left: '10%',
top: '15%',
bottom: '10%',
right: '10%'
},
xAxis: {
type: "category",
name: '时间',
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: "#FFF"
},
data: ['2021-1','2021-2','2021-3','2021-4']
},
yAxis: {
type: "value",
name: '隐患总量',
axisLine: {
show: false
},
nameTextStyle: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
color: "#fff"
}
},
series: [
{
name: '一般隐患',
type: 'bar',
stack: 'total',
data: [60, 120, 220, 70]
},
{
name: '重大隐患',
type: 'bar',
stack: 'total',
data: [10, 110, 320, 80]
}
]
}
mychart.setOption(option)
},
init6() {
const targetDom = document.querySelector('.big-data-chart6')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init8() {
const targetDom = document.querySelector('.big-data-chart8')
const mychart = echarts.init(targetDom)
const option = {
title: {
text: "总数量",
subtext: "" + 15468,
left: "center",
top: "40%",
textStyle: {
color: "#F88F12",
fontSize: "20"
},
subtextStyle: {
color: "#F88F12",
fontSize: "20"
}
},
tooltip: {
trigger: "item"
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["40%", "78%"],
avoidLabelOverLap: true,
data: [
{
value: 100,
name: "低风险",
itemStyle: {
color: "#057AFD"
}
},
{
value: 200,
name: "一般风险",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 400,
name: "较大风险",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "重大风险",
itemStyle: {
color: "#FF414B"
}
},
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
}
}
}
</script>
<style lang="scss">
.big-data-right-wrapper {
position: absolute;
right: 0;
top: 0;
width: 21vw;;
height: 90vh;
display: flex;
flex-direction: column;
color: #05D6EC;
z-index: 1000;
background: #040624;
> div {
flex-basis: 25%;
}
}
.big-data-title-wrapper {
position: relative;
font-family: "SourceHanSansCN-Medium";
color: aqua;
font-size: 16px;
font-weight: bold;
/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 80px;
padding-top: 5px;
.big-data-title-dec {
position: absolute;
left: 5px;
top: 5px;
width: 53px;
height: 21px;
background-repeat: no-repeat;
background-image: url('../../assets/images/dec4.png');
transform: scale(0.75);
}
}
.big-data {
display: flex;
flex-direction: column;
.big-data-chart1 {
flex-grow: 1;
display: flex;
flex-direction: column;
.alarm-sum-wrapper {
display: flex;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
font-size: 18px;
}
.big-data-chart1-alarm1 {
flex-grow: 1;
}
}
.big-data-chart2 {
.big-data-chart2-alarm-sum2 {
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid #3FFFEA;
box-shadow: inset 0 8px 19px -7px #3fffea;
padding: 5px;
margin: 3px 10px;
.big-data-chart2-sum {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
span {
&:first-child {
color: #7BB8C2;
font-size: 14px;
}
&:last-child {
color: #00FCFF;
font-size: 18px;
margin-left: 20px;
}
}
}
}
.big-data-chart2-table-wrapper {
display: flex;
flex-direction: column;
font-size: 14px;
text-align: center;
.big-data-chart2-table-title {
display: flex;
color: #019AEF;
.big-data-chart2-table-title1 {
flex-basis: 42%;
}
.big-data-chart2-table-title2 {
flex-basis: 26%;
}
.big-data-chart2-table-title3 {
flex-basis: 32%;
}
}
.big-data-chart2-table-content-wrapper {
flex-grow: 1;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.big-data-chart2-table-content-item {
display: flex;
color: white;
background-color: rgba(32, 47, 88, .8);
padding: 2px;
margin: 2px 10px;
span {
&:nth-child(1) {
flex-basis: 42%;
}
&:nth-child(2) {
flex-basis: 26%;
}
&:nth-child(3) {
flex-basis: 32%;
}
}
}
}
}
}
.big-data-chart3 {
flex-grow: 1;
}
.big-data-chart4 {
flex-grow: 1;
}
.big-data-chart5 {
flex-grow: 1;
}
.big-data-chart6 {
flex-grow: 1;
}
.big-data-chart7 {
flex-grow: 1;
}
.big-data-chart8 {
flex-grow: 1;
}
}
</style>
\ No newline at end of file
src/components/comm/CommHeader.vue
View file @ f27c2165
......@@ -6,6 +6,8 @@
<span :class="{'span_active' : lineActive == 1}" @click="onActive(1)">综合数据</span>
<span :class="{'span_active' : lineActive == 2}" @click="onActive(2)">风险监测</span>
<span :class="{'span_active' : lineActive == 3}" @click="onActive(3)">隐患排查</span>
<span :class="{'span_active' : lineActive == 4}" @click="onActive(4)">销售监管</span>
<span :class="{'span_active' : lineActive == 5}" @click="onActive(5)">大数据</span>
<!-- <span :class="{'span_active' : lineActive == 4}" @click="onActive(4)">应急处置</span> -->
</div>
......@@ -15,7 +17,7 @@
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<!-- <span @click="onClickActive(4)">管理系统</span> -->
<span @click="onClickActive(4)">管理系统</span>
</div>
</div>
......@@ -96,4 +98,13 @@ export default {
},
};
</script>
\ No newline at end of file
</script>
<style scoped>
/deep/ .el-select {
width: 270px;
border: 1px solid #02defa;
}
/deep/ .el-select input {
border: none !important;
}
</style>
\ No newline at end of file
src/components/fenxian/fenxian_left.vue
View file @ f27c2165
......@@ -16,6 +16,30 @@
<div ref="myCharts2" class="charts_div"></div>
<div ref="myCharts3" class="charts_div"></div>
<div class="region-deduction">
<div class="region-deduction-title">区域风险趋势推演</div>
<div class="region-deduction-icon" @click="showDeduction = !showDeduction">
<svg t="1638175396070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="32" height="32"><path d="M832 736a128 128 0 0 0-125.28 101.824l-318.304-0.064c-8.352-5.568-13.44-43.616-16.448-69.76h92.384c14.592 19.328 37.568 32 63.648 32a80 80 0 1 0-78.4-96h-86.24c-11.616-63.136-38.336-128-122.144-128H96a32 32 0 1 0 0 64h145.248c32.32 0 47.136 19.776 56.704 64H96a32 32 0 0 0 0 64h211.552c6.72 60.064 15.584 133.824 82.24 133.824h318.176c0.8 0 1.44-0.384 2.208-0.448C726.272 953.696 774.4 992 832 992a128 128 0 0 0 0-256z m0 192a64 64 0 1 1 0.032-128.032A64 64 0 0 1 832 928zM96 512h384.512c1.344 0 2.496-0.608 3.776-0.768A127.744 127.744 0 0 0 608 608a128 128 0 0 0 0-256 127.744 127.744 0 0 0-123.712 96.768c-1.28-0.16-2.432-0.768-3.776-0.768H96a32 32 0 0 0 0 64z m512-96a64 64 0 1 1-0.032 128.032A64 64 0 0 1 608 416zM96 389.792h145.248c108.224 0 121.6-90.272 129.6-144.192 6.688-45.504 10.784-53.6 18.944-53.6h298.56c14.592 19.328 37.568 32 63.648 32a80 80 0 1 0-78.4-96h-283.808C323.52 128 313.888 193.12 307.52 236.224c-9.408 63.648-18.048 89.568-66.272 89.568H96a32 32 0 0 0 0 64z" p-id="2447" fill="#02fcfe"></path></svg>
</div>
</div>
</div>
<div v-show="showDeduction" class="deduction-wrapper">
<div contenteditable spellcheck="false" class="deduction1" @input="deducInput1" @blur="blurDeduc1"></div>
<div class="error-input">&nbsp;<span v-if="errorInput1" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
<div contenteditable spellcheck="false" class="deduction2" @input="deducInput2" @blur="blurDeduc2"></div>
<div class="error-input"><span>&nbsp;</span><span v-if="errorInput2" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
<div contenteditable spellcheck="false" class="deduction3" @input="deducInput3" @blur="blurDeduc3"></div>
<div class="error-input">&nbsp;<span v-if="errorInput3" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
<div contenteditable spellcheck="false" class="deduction4" @input="deducInput4" @blur="blurDeduc4"></div>
<div class="error-input">&nbsp;<span v-if="errorInput4" style="color: rgba(255, 0, 0, .8);">请输入0(不包含)-90(不包含)的数字</span></div>
<div contenteditable spellcheck="false" class="deduction5" @input="deducInput5" @blur="blurDeduc5"></div>
<div class="error-input">&nbsp;<span v-if="errorInput5" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
<div contenteditable spellcheck="false" class="deduction6" @input="deducInput6" @blur="blurDeduc6"></div>
<div class="error-input">&nbsp;<span v-if="errorInput6" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
<div class="deduction-bottom">
<div class="decuction-btn" @click="clicktoDeduction">推演</div>
<div class="deduction-result" ref="deducresult"></div>
</div>
</div>
</div>
</template>
......@@ -44,6 +68,19 @@ export default {
],
dataList: [],
showDeduction: false,
errorInput1: false,
errorInput2: false,
errorInput3: false,
errorInput4: false,
errorInput5: false,
errorInput6: false,
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: ''
}
},
......@@ -477,6 +514,125 @@ export default {
}
myChart.setOption(option)
},
deducInput1($event){
this.input1 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if(!isNaN(parseFloat(this.input1))) {
this.errorInput1 = false
}
},
deducInput2($event){
this.input2 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if(!isNaN(parseFloat(this.input2))) {
this.errorInput2 = false
}
},
deducInput3($event){
this.input3 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if(!isNaN(parseFloat(this.input3))) {
this.errorInput3 = false
}
},
deducInput4($event){
this.input4 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if (!isNaN(parseFloat(this.input4))) {
this.errorInput4 = false
}
},
deducInput5($event){
this.input5 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if (!isNaN(parseFloat(this.input5))) {
this.errorInput5 = false
}
},
deducInput6($event){
this.input6 = $event.target.innerText
this.$refs.deducresult.innerText = ''
if (!isNaN(parseFloat(this.input6))) {
this.errorInput6 = false
}
},
blurDeduc1() {
if (isNaN(parseFloat(this.input1))) {
this.errorInput1 = true
} else {
return true
}
return false
},
blurDeduc2() {
if (isNaN(parseFloat(this.input2))) {
this.errorInput2 = true
} else {
return true
}
return false
},
blurDeduc3() {
if (isNaN(parseFloat(this.input3))) {
this.errorInput3 = true
} else {
return true
}
return false
},
blurDeduc4() {
if (isNaN(parseFloat(this.input4))) {
this.errorInput4 = true
} else if (!((parseFloat(this.input4)>0) && (parseFloat(this.input4)< 90))) {
this.errorInput4 = true
} else {
return true
}
return false
},
blurDeduc5() {
if (isNaN(parseFloat(this.input5))) {
this.errorInput5 = true
} else {
return true
}
return false
},
blurDeduc6() {
if (isNaN(parseFloat(this.input6))) {
this.errorInput6 = true
} else {
return true
}
return false
},
clicktoDeduction($event) {
const isdeduc1 = this.blurDeduc1()
const isdeduc2 = this.blurDeduc2()
const isdeduc3 = this.blurDeduc3()
const isdeduc4 = this.blurDeduc4()
const isdeduc5 = this.blurDeduc5()
const isdeduc6 = this.blurDeduc6()
if (isdeduc1 && isdeduc2 && isdeduc3 && isdeduc4 && isdeduc5 && isdeduc6) {
const Q = parseFloat(this.input1)
const H2 = parseFloat(this.input2)
const H1 = parseFloat(this.input3)
const α = parseFloat(this.input4)
const F1 = parseFloat(this.input5)
const P = parseFloat(this.input6)
const result = Math.PI * ((H1 * H1 * H1)/(Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180)) - (H2 * H2 * H2)/(Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180))) / 3 - 1000 * Q * (F1 * 0.1 + Math.PI * H2 * H2 / (Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180))) + P
if (result > 0) {
this.$refs.deducresult.innerText = '坝体安全'
} else if (result.toFixed(0) == 0) {
this.$refs.deducresult.innerText = '坝体一小时后可能崩溃'
} else {
this.$refs.deducresult.innerText = '坝体崩溃'
}
} else {
this.$refs.deducresult.innerText = ''
return
}
}
},
}
</script>
......@@ -534,6 +690,95 @@ export default {
height: 22vh;
margin-bottom: 2vh;
}
.region-deduction {
display: flex;
align-items: center;
.region-deduction-title {
color: #03FCFE;
}
.region-deduction-icon {
width: 2vw;
height: 2vw;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin-left: 1vw;
}
}
}
.deduction-wrapper {
position: absolute;
right: 0;
top: 0;
transform: translateX(100%);
width: 220px;
color: white;
background: #040624;
padding: 8px;
.deduction1 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '请输入降雨量(mm)'
}
}
.deduction2 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '请输入库水位(m)'
}
}
.deduction3 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '请输入坝顶高程(m)';
}
}
.deduction4 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '请输入坝体坡度(α)'
}
}
.deduction5 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '请输入汇水面积内的路面面积(M^2)';
}
}
.deduction6 {
outline: none;
border: 1px solid #02fcfe;
&:empty::after {
content: '排水量(M^3)';
}
}
.error-input {
font-size: 12px;
height: 14px;
margin: 3px 0;
}
.deduction-bottom {
display: flex;
align-items: center;
.decuction-btn {
background: #C8DA18;
padding: 3px;
cursor: pointer;
&:hover {
background: rgba(200, 218, 24, .6);
}
}
.deduction-result {
color: white;
margin-left: 5px;
}
}
}
}
</style>
src/components/fenxian/fenxian_right.vue
View file @ f27c2165
......@@ -6,13 +6,19 @@
<div class="page_div" v-for="(item, index) in zaixiandongtaijiance" :key="index">
<div class="page_div_son" :style="{ backgroundImage: 'url(' + item.url_1 + ')' }" @click="getRiskListByCompanycodeList(item)">
<span class="text">
<span>{{ item.name }}风险等级</span>
<span></span>
<span>{{ item.name }}--风险等级</span>
<span v-if="!item.riskLevel">正常</span>
<span v-if="item.riskLevel == 4">四级</span>
<span v-if="item.riskLevel == 3">三级</span>
<span v-if="item.riskLevel == 2">二级</span>
<span v-if="item.riskLevel == 1">一级</span>
</span>
<span class="text">
<span>--测点报警</span>
<span>3</span>
<span>个</span>
</span>
</div>
</div>
</div>
......
src/components/ltk/ltkZongHe.vue
View file @ f27c2165
......@@ -19,6 +19,8 @@
</div>
<div class="base_left_box_line" style="height: 25vh">
<div class="title">监测类型</div>
......@@ -269,4 +271,5 @@ export default {
height: 92%;
}
}
</style>
\ No newline at end of file
src/components/potrait/potrait.vue 0 → 100644
View file @ f27c2165
<template>
<div class="potrait-wrapper">
<div class="close-wrapper" @click="closeMySelf">
<svg t="1637978362846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2517" width="32" height="32"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="2518" fill="#02fcfe"></path></svg>
</div>
<div class="basic-info">
<div class="basic-info-title">企业基础信息</div>
<div class="basic-info-item">
<div>采矿方法</div>
<div>{{ mineMethod }}</div>
</div>
<div class="basic-info-item">
<div>面积</div>
<div>{{ area }}</div>
</div>
<div class="basic-info-item">
<div>产能</div>
<div>{{ yields }}</div>
</div>
<div class="basic-info-item">
<div>矿种</div>
<div>{{ minerals }}</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">企业监测设备</div>
<div class="chart" ref="mychart1"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">监测数据信息</div>
<div class="chart monitor-data-wrapper">
<div class="monitor-data">
<div class="monitor-data-title">监测点数量</div>
<div class="monitor-data-degree">{{monitorSum}}个</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测点数据</div>
<div class="monitor-data-degree">{{monitorData}}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">报警数据</div>
<div class="monitor-data-degree">{{alarmSum}}条</div>
</div>
<div class="monitor-data">
<div class="monitor-data-title">监测时长</div>
<div class="monitor-data-degree">{{timeSum}}天</div>
</div>
</div>
</div>
<div class="basic-info1">
<div class="basic-info-title">不同等级风险数量统计</div>
<div class="chart" ref="mychart3"></div>
</div>
<div class="basic-info1">
<div class="basic-info-title">重大安全事故隐患排查</div>
<div class="chart" ref="mychart4"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mineMethod: '11',
area: '22',
yields: '33',
minerals: '44',
deviceSum: '11233',
online: '33455',
offline: '55677',
monitorSum: '77899',
monitorData: '99011',
alarmSum: '776654',
timeSum: '562512',
lowRisk: '111',
generalRisk: '222',
greaterRisk: '333',
noCloseLoop: '555',
closeLoop: '5667'
}
},
mounted() {
this.init1()
this.init3()
this.init4()
},
methods: {
closeMySelf() {
this.$store.commit('SET_EnterPotrait', false)
},
init1() {
const mychart = echarts.init(this.$refs.mychart1)
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
name: '企业监测设备',
type: 'pie',
radius: [20,80],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{
value: this.online,
name: '设备在线'
},
{
value: this.offline,
name: '设备离线'
}
]
}
]
}
mychart.setOption(option)
},
init3() {
const mychart = echarts.init(this.$refs.mychart3)
const option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: 100,
name: "风险等级一",
itemStyle: {
color: "#057AFD"
}
},
{
value: 400,
name: "风险等级二",
itemStyle: {
color: "#F88F12"
}
},
{
value: 300,
name: "风险等级三",
itemStyle: {
color: "#FF414B"
}
}
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 16
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
},
init4() {
const mychart = echarts.init(this.$refs.mychart4)
const option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
data: [
{
value: 100,
name: "重大安全隐患未闭环",
itemStyle: {
color: "#FEFA03"
}
},
{
value: 200,
name: "重大安全隐患已闭环",
itemStyle: {
color: "#FF9D13"
}
}
],
label: {
align: "left",
normal: {
formatter(v) {
return `${v.name}\n${v.value}`;
},
textStyle: {
fontSize: 12
}
}
},
labelLine: {
length: 3,
length2: 10
}
}
]
}
mychart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.potrait-wrapper {
position: absolute;
left: 50%;
top: 50%;
width: 22vw;
background: #020C39;
border-radius: 5px;
padding: 10px;
transform: translate(-50%, -50%);
.close-wrapper {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 25px;
height: 25px;
border: 2px solid #02fcfe;
}
.basic-info {
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.basic-info-item {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
line-height: 14px;
padding: 1px;
div {
&:first-child {
margin-left: 10px;
color: #00c9fd;
}
&:last-child {
margin-right: 10px;
color: white;
}
}
}
}
.basic-info1 {
height: 20vh;
display: flex;
flex-direction: column;
.basic-info-title {
font-size: 16px;
color: #02fcfe;
font-weight: 550;
margin-top: 12px;
}
.chart {
flex-grow: 1;
}
}
.monitor-data-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.monitor-data {
padding: 5px;
border: 1px solid #02fcfe;
box-shadow: 0 9px 25px -9px inset #02fcfe;
text-align: center;
flex-basis: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 8px;
.monitor-data-title {
color: white;
font-size: 14px;
}
.monitor-data-degree {
color: #02fcfe;
font-size: 18px;
}
}
}
}
</style>
\ No newline at end of file
src/components/sale/sale.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-wrapper">
<div class="title">销量监管</div>
<div class="mod mod1" @click="clickItem1">车辆识别管理</div>
<div class="mod mod2" @click="clickItem2">语音对讲指挥调度</div>
<div class="mod mod3" @click="clickItem3">视频监控</div>
<div class="mod mod4" @click="clickItem4">销量综合监管</div>
<div class="mod mod5" @click="clickItem5">数据监测</div>
<div class="mod mod6" @click="clickItem6">过磅自动称重管理</div>
<div class="mod mod7" @click="clickItem7">车辆逃逸告警</div>
</div>
</template>
<script>
export default {
methods: {
clickItem1() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM1', true)
},
clickItem2() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM2', true)
},
clickItem3() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM3', true)
},
clickItem4() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM4', true)
},
clickItem5() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM5', true)
},
clickItem6() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM6', true)
},
clickItem7() {
console.log('clickItem clickItem')
this.$store.commit('SET_SALE_ITEM7', true)
},
},
computed: {
showItem1 () {
console.log('showItem1')
return this.$store.state.showSaleItem1
},
showItem2 () {
return this.$store.state.showSaleItem2
},
showItem3 () {
return this.$store.state.showSaleItem3
},
showItem4 () {
return this.$store.state.showSaleItem4
},
showItem5 () {
return this.$store.state.showSaleItem5
},
showItem6 () {
return this.$store.state.showSaleItem6
},
showItem7 () {
return this.$store.state.showSaleItem7
}
},
components: {
}
}
</script>
<style lang="scss" scoped>
.sale-wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url('../../assets/images/bgggggg.png');
background-size: 100% 100%;
z-index: 9999;
.title {
position: absolute;
top: 38.17%;
left: 50%;
transform: translateX(-50%);
font-family: "SourceHanSansCN-Regular";
color: #2bf7f0;
font-size: 60px;
}
.mod {
width: 252px;
height: 322px;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 70px;
font-family: "SourceHanSansCN-Regular";
color: #ffffff;
font-size: 28px;
background-position-y: top;
&:hover {
cursor: pointer;
}
}
.mod1 {
position: absolute;
left: 604px;
top: 136px;
background-image: url("../../assets/images/车辆.png");
background-position: center;
background-repeat: no-repeat;
}
.mod2 {
position: absolute;
left: 172px;
top: 317px;
background-image: url("../../assets/images/语音.png");
background-position: center;
background-repeat: no-repeat;
}
.mod3 {
position: absolute;
left: 380px;
top: 568px;
background-image: url("../../assets/images/视频.png");
background-position: center;
background-repeat: no-repeat;
}
.mod4 {
position: absolute;
left: 809px;
top: 643px;
background-image: url("../../assets/images/销量综合监管.png");
background-position: center;
background-repeat: no-repeat;
}
.mod5 {
position: absolute;
left: 1243px;
top: 560px;
background-image: url("../../assets/images/数据监测.png");
background-position: center;
background-repeat: no-repeat;
}
.mod6 {
position: absolute;
left: 1505px;
top: 327px;
background-image: url("../../assets/images/过磅.png");
background-position: center;
background-repeat: no-repeat;
}
.mod7 {
position: absolute;
left: 1112px;
top: 128px;
background-image: url("../../assets/images/车辆逃逸告警.png");
background-position: center;
background-repeat: no-repeat;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem1.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM1', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem2.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM2', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem3.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM3', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem4.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM4', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem5.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM5', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem6.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM6', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/sale/saleItem7.vue 0 → 100644
View file @ f27c2165
<template>
<div class="sale-item">
<div class="close-btn" @click="closeSelf"></div>
<div class="dec-title">待接入设备</div>
</div>
</template>
<script>
export default {
methods: {
closeSelf() {
this.$store.commit('SET_SALE_ITEM7', false)
}
}
}
</script>
<style lang="scss" scoped>
.sale-item {
position: absolute;
width: 687px;
height: 399px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../../assets/images/弹框.png');
background-size: 100% 100%;
.close-btn {
position: absolute;
width: 32px;
height: 34px;
right: 3px;
top: 23px;
background: url('../../assets/images/关闭.png');
}
.dec-title {
position: absolute;
left: 50%;
top: 50%;
width: 425px;
height: 81px;
background: #0F70C7;
transform: translate(-50%, -50%);
font-size: 43px;
font-family: 'Source Han Sans CN';
font-weight: bold;
color: #DFEEF3;
line-height: 81px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/videoai/videoai.vue 0 → 100644
View file @ f27c2165
<template>
<div class="video-ai-wrapper">
<div class="close-wraper" @click="closeVideoAi">
<svg t="1638003653029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="32" height="32"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" p-id="2295" fill="#02fcfe"></path><path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" p-id="2296" fill="#02fcfe"></path><path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" p-id="2297" fill="#02fcfe"></path></svg>
</div>
<div class="video-wrapper">
<LivePlayer v-if="isvideo" :videoUrl="videourl" live aspect='fullscreen' />
</div>
<div class="table-wrapper">
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
label="采集图像"
width="200"
>
<template
slot-scope="scope"
>
<el-image
style="width: 30px; height: 30px"
:src="scope.row.imgUrl"
v-if="scope.row.imgUrl"
:preview-src-list="[scope.row.imgUrl]">
</el-image>
</template>
</el-table-column>
<el-table-column
prop="alarmType"
label="报警类型"
width="160"
></el-table-column>
<el-table-column
prop="alarmDevice"
label="报警设备"
width="180"
></el-table-column>
<el-table-column
prop="alarmTime"
label="报警时间"
width="210"
></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
data() {
return {
tableData: [
{
imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100220060CY5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640740816&t=47afb183f697e58e75e4e2810242ee75',
alarmType: '测试',
alarmDevice: '11',
alarmTime: '2021-11-25 20:20:20'
}
]
}
},
methods: {
closeVideoAi() {
// this.$store.commit('')
this.$store.commit('SET_VideoShow', false)
}
},
components: {
LivePlayer,
},
computed: {
videourl() {
return this.$store.state.curVideoUrl
},
isvideo() {
return this.$store.state.curIsVideo
}
}
}
</script>
<style lang="scss" scoped>
.video-ai-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 600px;
background: white;
border-radius: 5px;
}
.close-wraper {
position: absolute;
right: 5px;
top: 5px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
cursor: pointer;
}
.video-wrapper {
margin: 30px auto;
width: 80%;
position: relative;
height: 400px;
}
.table-wrapper {
width: 80%;
margin: 30px auto;
}
</style>
\ No newline at end of file
src/components/wkk_environment/table.vue
View file @ f27c2165
<template>
<el-dialog class="dialog_table" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
<br />
<!-- <div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>检测项</strong>
<el-input v-model="inputItem" placeholder="请输入内容" style="width: 10vw"></el-input>
<el-button type="primary" @click="core">查询</el-button>
<el-button type="primary" @click="onVisual">可视化</el-button>
</div> -->
<div class="tools-wrapper">
<div class="device-wrapper">
<span>设备标识:&nbsp;&nbsp;</span>
......
src/components/wkk_item/item.vue
View file @ f27c2165
......@@ -934,7 +934,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectJYLSensor
sensorName: this.curSelectJYLSensor
}
jiangYuLiang(params).then(res => {
......@@ -962,7 +962,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectJRXSensor
sensorName: this.curSelectJRXSensor
}
jinRunXian(params).then(res => {
......@@ -990,7 +990,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectGTSensor
sensorName: this.curSelectGTSensor
}
ganTan(params).then(res => {
this.gt_tableList = []
......@@ -1017,7 +1017,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectKSWSensor
sensorName: this.curSelectKSWSensor
}
kuShuiWei(params).then(res => {
......@@ -1045,7 +1045,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectBMWYSensor
sensorName: this.curSelectBMWYSensor
}
biaoMianWeiYi(params).then(res => {
......@@ -1075,7 +1075,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectNBWYCJSensor
sensorName: this.curSelectNBWYCJSensor
}
wkkNeiBuWeiYiChenJiang(params).then(res => {
......@@ -1102,7 +1102,7 @@ export default {
startTime: this.start_time,
endTime: this.stop_time,
companycode: this.companycode,
deviceId: this.curSelectNBWYQXSensor
sensorName: this.curSelectNBWYQXSensor
}
neiBuWeiYiQingXie(params).then(res => {
......
src/store/index.js
View file @ f27c2165
......@@ -30,10 +30,39 @@ export default new Vuex.Store({
showItemCharts: false, // 尾矿库六大项可视化
showSaleItem1: false,
showSaleItem2: false,
showSaleItem3: false,
showSaleItem4: false,
showSaleItem5: false,
showSaleItem6: false,
showSaleItem7: false,
isShowEnterPortrait: false,
curVideoUrl: '',
curIsVideo: false,
curVideoShow: false
},
mutations: {
SET_VideoUrl(state, url) {
state.curVideoUrl = url
},
SET_IsVideo(state, isVideo) {
state.curIsVideo = isVideo
},
SET_VideoShow(state, isVideoShow) {
state.curVideoShow = isVideoShow
},
// 企业类型
SET_TYPE(state, value) {
state.select_item = value
......@@ -95,7 +124,81 @@ export default new Vuex.Store({
setShowItemCharts(state, value) {
state.showItemCharts = value
}
},
SET_EnterPotrait(state, value) {
state.isShowEnterPortrait = value
},
// 显示 销售监测项1
SET_SALE_ITEM1(state, value) {
console.log("SET_SALE_ITEM1!", value, "hehe")
state.showSaleItem1 = value
state.showSaleItem2 = false
state.showSaleItem3 = false
state.showSaleItem4 = false
state.showSaleItem5 = false
state.showSaleItem6 = false
state.showSaleItem7 = false
},
// 显示 销售监测项2
SET_SALE_ITEM2(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = value
state.showSaleItem3 = false
state.showSaleItem4 = false
state.showSaleItem5 = false
state.showSaleItem6 = false
state.showSaleItem7 = false
},
// 显示 销售监测项3
SET_SALE_ITEM3(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = false
state.showSaleItem3 = value
state.showSaleItem4 = false
state.showSaleItem5 = false
state.showSaleItem6 = false
state.showSaleItem7 = false
},
// 显示 销售监测项4
SET_SALE_ITEM4(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = false
state.showSaleItem3 = false
state.showSaleItem4 = value
state.showSaleItem5 = false
state.showSaleItem6 = false
state.showSaleItem7 = false
},
// 显示 销售监测项4
SET_SALE_ITEM5(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = false
state.showSaleItem3 = false
state.showSaleItem4 = false
state.showSaleItem5 = value
state.showSaleItem6 = false
state.showSaleItem7 = false
},
SET_SALE_ITEM6(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = false
state.showSaleItem3 = false
state.showSaleItem4 = false
state.showSaleItem5 = false
state.showSaleItem6 = value
state.showSaleItem7 = false
},
SET_SALE_ITEM7(state, value) {
state.showSaleItem1 = false
state.showSaleItem2 = false
state.showSaleItem3 = false
state.showSaleItem4 = false
state.showSaleItem5 = false
state.showSaleItem6 = false
state.showSaleItem7 = value
},
},
......
src/utils/index.js
View file @ f27c2165
......@@ -93,6 +93,7 @@ export function getValueUnit() {
'表面位移':'mm',
'内部位移沉降':'mm',
'内部位移倾斜':'mm',
'风压': 'pa'
};
};
......
src/views/Home.vue
View file @ f27c2165
<template>
<div class="home">
<div :class="{home: true}">
<!-- <base-hint :class="[isRight ? 'fadeInRight' : 'fadeOutRight']"></base-hint> -->
<div :class="{innerwrap: true, hidden:isShow}">
<router-view name="homeHeader" />
<router-view name="homeHeader" />
<div class="wrap">
<router-view v-show="isLeftFalse == 1" name="homeLeft" class="home-left animated fadeInLeft"></router-view>
<div class="wrap">
<router-view v-show="isLeftFalse == 1" name="homeLeft" class="home-left animated fadeInLeft"></router-view>
<ltkZongHe v-if="isLtk == 1" class="animated fadeInLeft"></ltkZongHe>
<ltkDialog></ltkDialog>
<ltkZongHe v-if="isLtk == 1" class="animated fadeInLeft"></ltkZongHe>
<ltkDialog></ltkDialog>
<dxkqZongHe v-if="isDxkq == 1" class="home-left animated fadeInLeft"></dxkqZongHe>
<dxkqDialog></dxkqDialog>
<dxkqZongHe v-if="isDxkq == 1" class="home-left animated fadeInLeft"></dxkqZongHe>
<dxkqDialog></dxkqDialog>
<yingjiRight v-if="is_yingji" class="fadeInRight animated"></yingjiRight>
<yingjiLeft v-if="is_yingji" class="animated fadeInLeft"></yingjiLeft>
<yingjiRight v-if="is_yingji" class="fadeInRight animated"></yingjiRight>
<yingjiLeft v-if="is_yingji" class="animated fadeInLeft"></yingjiLeft>
<fenxianRight v-if="is_fengxian" class="fadeInRight animated"></fenxianRight>
<fenxianLeft v-if="is_fengxian" class="animated fadeInLeft"></fenxianLeft>
<fenxianRight v-if="is_fengxian" class="fadeInRight animated"></fenxianRight>
<fenxianLeft v-if="is_fengxian" class="animated fadeInLeft"></fenxianLeft>
<yinhuanLeft v-if="is_yinhuan" class="animated fadeInLeft"></yinhuanLeft>
<yinhuanRight v-if="is_yinhuan" class="fadeInRight animated"></yinhuanRight>
<yinhuanLeft v-if="is_yinhuan" class="animated fadeInLeft"></yinhuanLeft>
<yinhuanRight v-if="is_yinhuan" class="fadeInRight animated"></yinhuanRight>
<sale v-if="is_sale" class="animated fadeInLeft"></sale>
<home-map class="home--map" />
<router-view name="homeRight" :class="[isRight ? 'fadeInRight' : 'fadeOutRight']" class="home-right animated" />
<!-- <bigdata v-if="is_bigdata"></bigdata> -->
<bigdataleft v-if="is_bigdata"></bigdataleft>
<bigdataright v-if="is_bigdata"></bigdataright>
<home-map class="home--map" />
<router-view name="homeRight" :class="[isRight ? 'fadeInRight' : 'fadeOutRight']" class="home-right animated" />
<img class="img_position" @click="onRightImg" src="@/assets/images/left.png" alt="" />
</div>
<wkkItem></wkkItem>
<ItemCharts></ItemCharts>
<environment></environment>
<wkkEnvironmentTable></wkkEnvironmentTable>
<img class="img_position" @click="onRightImg" src="@/assets/images/left.png" alt="" />
</div>
<!-- <div class="my-filter" v-show="is_sale && (showItem1 || showItem2 || showItem3 || showItem4 || showItem5 || showItem6 || showItem7)"></div> -->
<wkkItem></wkkItem>
<ItemCharts></ItemCharts>
<environment></environment>
<wkkEnvironmentTable></wkkEnvironmentTable>
<CommVideo></CommVideo>
<CommVideo></CommVideo>
</div>
<saleitem1 v-show="showItem1"></saleitem1>
<saleitem2 v-show="showItem2"></saleitem2>
<saleitem3 v-show="showItem3"></saleitem3>
<saleitem4 v-show="showItem4"></saleitem4>
<saleitem5 v-show="showItem5"></saleitem5>
<saleitem6 v-show="showItem6"></saleitem6>
<saleitem7 v-show="showItem7"></saleitem7>
<potrait v-if="isShowPotrait"></potrait>
<videoai v-show="isShowVideo"></videoai>
</div>
</template>
......@@ -62,6 +79,23 @@ import yinhuanRight from '@/components/yinhuan/yinhuan_right'
import CommVideo from '@/components/comm/CommVideo'
import sale from '@/components/sale/sale.vue'
import saleitem1 from '../components/sale/saleItem1.vue'
import saleitem2 from '../components/sale/saleItem2.vue'
import saleitem3 from '../components/sale/saleItem3.vue'
import saleitem4 from '../components/sale/saleItem4.vue'
import saleitem5 from '../components/sale/saleItem5.vue'
import saleitem6 from '../components/sale/saleItem6.vue'
import saleitem7 from '../components/sale/saleItem7.vue'
// import bigdata from '../components/bigdata/bigdata.vue'
import bigdataleft from '../components/bigdata/bigdataLeft.vue'
import bigdataright from '../components/bigdata/bigdataRight.vue'
import potrait from '../components/potrait/potrait.vue'
import videoai from '../components/videoai/videoai.vue'
export default {
name: 'home',
......@@ -74,6 +108,8 @@ export default {
is_yingji: false, // 应急处置
is_fengxian: false, // 风险处置
is_yinhuan: false, // 隐患排查
is_sale: false, // 销售监管
is_bigdata: false
}
},
......@@ -88,6 +124,9 @@ export default {
},
computed: {
isShowVideo() {
return this.$store.state.curVideoShow
},
isLeft() {
return this.$store.state.isLeft
},
......@@ -95,6 +134,35 @@ export default {
isRight() {
return this.$store.state.isRight
},
showItem1 () {
console.log('showItem1')
return this.$store.state.showSaleItem1
},
showItem2 () {
return this.$store.state.showSaleItem2
},
showItem3 () {
return this.$store.state.showSaleItem3
},
showItem4 () {
return this.$store.state.showSaleItem4
},
showItem5 () {
return this.$store.state.showSaleItem5
},
showItem6 () {
return this.$store.state.showSaleItem6
},
showItem7 () {
return this.$store.state.showSaleItem7
},
isShow() {
return (this.is_sale && (this.showItem1 || this.showItem2 || this.showItem3 || this.showItem4 || this.showItem5 || this.showItem6 || this.showItem7)) || this.isShowPotrait || this.isShowVideo
},
isShowPotrait() {
return this.$store.state.isShowEnterPortrait
}
},
watch: {
......@@ -106,12 +174,16 @@ export default {
this.is_yingji = false
this.is_yinhuan = false
this.is_fengxian = false
this.is_sale = false
this.is_bigdata =false
if (e === false) return
const compony_info = this.$store.state.compony_info
const title_type = compony_info.typeName
console.log(compony_info, 'compony_info')
if (e.itemIndex == 2) {
this.$store.commit('SET_IS_Right', false)
this.is_fengxian = true
......@@ -127,12 +199,24 @@ export default {
if (e.itemIndex == 4) {
this.$store.commit('SET_IS_Right', false)
this.is_yingji = true
} else {
this.is_yingji = false
this.onRightImg()
this.is_sale = true
return
}
if (e.itemIndex == 5) {
this.$store.commit('SET_IS_Right', false)
this.is_bigdata = true
return
}
// if (e.itemIndex == 4) {
// this.$store.commit('SET_IS_Right', false)
// this.is_yingji = true
// } else {
// this.is_yingji = false
// this.onRightImg()
// }
if (!compony_info) return
if (title_type == '非煤矿山') {
......@@ -184,6 +268,18 @@ export default {
fenxianRight,
CommVideo,
sale,
saleitem1,
saleitem2,
saleitem3,
saleitem4,
saleitem5,
saleitem6,
saleitem7,
potrait,
videoai,
bigdataleft,
bigdataright
},
}
</script>
......@@ -196,7 +292,10 @@ export default {
height: 100%;
background: #000;
font-size: $theme_font_size;
&.hide {
filter: blur(5px);
overflow: hidden;
}
header {
position: relative;
background: url('~@/assets/images/bg_top.png') center no-repeat;
......@@ -250,7 +349,7 @@ export default {
line-height: 2.2vw;
text-align: center;
color: #fff;
width: 5.3vw;
width: 4.3vw;
font-size: 0.8vw;
cursor: pointer;
background-image: url('~@/assets/images/header.png');
......@@ -336,4 +435,15 @@ export default {
justify-content: center;
}
}
.innerwrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
&.hidden {
filter: blur(5px);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment