Commit de064d7f authored by 王晓倩's avatar 王晓倩
parents 6ecedc78 d655baac
<svg width="21" height="24" viewBox="0 0 27 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame" clip-path="url(#clip0_649_1291)">
<path id="Vector" d="M13.5001 23.7578C13.8251 23.7578 20.5909 12.3435 20.5909 7.95251C20.5909 3.56149 17.4153 0 13.5001 0C9.58478 0 6.40918 3.56149 6.40918 7.95251C6.40918 12.3435 13.175 23.7578 13.5001 23.7578ZM10.148 7.95251C10.148 5.87676 11.6492 4.19314 13.5001 4.19314C15.351 4.19314 16.8521 5.87676 16.8521 7.95251C16.8521 10.0284 15.3509 11.7119 13.5001 11.7119C11.6492 11.7119 10.148 10.0284 10.148 7.95251Z" fill="#1890FF"/>
<path id="Vector_2" d="M18.6259 21.7832C20.1679 22.3649 21.1366 23.2052 21.1366 24.1397C21.1366 25.8958 17.7168 27.3199 13.5004 27.3199C9.28392 27.3199 5.8641 25.896 5.8641 24.1397C5.8641 23.2052 6.83286 22.3651 8.37483 21.7832C5.23419 22.5648 3.11523 24.042 3.11523 25.7356C3.11523 28.245 7.76625 30.2802 13.5004 30.2802C19.2345 30.2802 23.8855 28.245 23.8855 25.7355C23.8855 24.042 21.7666 22.5648 18.6259 21.7832Z" fill="#006DD1"/>
</g>
<defs>
<clipPath id="clip0_649_1291">
<rect width="27" height="30.2809" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="18" height="24" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M22 26.6602V27.5651C22 29.4384 17.6 31.0428 17.6 31.0428L15.7667 30.7827C15.7667 30.7827 12.8348 30.3736 11 30.3736C9.16793 30.3736 6.23333 30.7827 6.23333 30.7827L4.41343 31.0368C4.41343 31.0368 0 29.4316 0 27.5651V26.6602C0 24.9191 2.0342 23.1621 4.41826 21.8146C4.53374 21.7495 5.9664 30.8011 5.9664 30.8011L6.60001 30.7827C6.60001 30.7827 5.37578 21.437 5.50003 21.3735C6.15997 21.0367 6.59414 20.7211 7.2433 20.4599C7.4841 20.362 8.63532 19.6644 7.99131 17.786C6.49977 16.0896 5.48373 14.4461 5.48373 10.7398H16.5509C16.5509 14.4077 15.5089 16.0665 14.0272 17.7651H14.0357C13.4059 19.8961 14.4132 20.4015 14.5736 20.4594C15.216 20.6964 15.8555 21.0667 16.5 21.3735C16.6597 21.4494 15.4 30.7827 15.4 30.7827L16.0696 30.7627C16.0696 30.7627 17.4353 21.7406 17.5749 21.8169C19.9951 23.1389 22 24.8836 22 26.6602ZM17.3085 6.83657C17.3085 2.57742 12.11 0.448035 12.11 0.448035C11.3738 0.0780899 10.643 0.162365 9.88997 0.448035C9.88997 0.448035 4.69127 2.31773 4.69127 6.83657C4.69127 7.51215 3.59233 7.36712 3.22872 9.5041H18.7716C18.1099 7.35236 17.3085 7.51215 17.3085 6.83657Z" fill="#1890FF"/>
</svg>
......@@ -574,6 +574,7 @@
}
}
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
......@@ -614,6 +615,62 @@
// overflow-y: none !important;
}
}
// 巡检巡查table样式修改
.map-bottom-wrapper {
.el-table {
.el-table__body-wrapper {
// 滚动条样式
&::-webkit-scrollbar {
width: 10px;
// background: rgba(6, 29, 51, 0.8);
// position: absolute;
// top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #00000053;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// border-radius: 10px;
// background-color: red;
}
&::-webkit-scrollbar-button:start {
overflow: hidden;
}
&::-webkit-scrollbar-button:end {
overflow: hidden;
}
}
}
.el-table::before {
height: 0px;
}
.el-table__fixed::before {
height: 0px;
}
.el-table__header {
tr th {
background-color: rgba(24, 144, 255, 0.1);
&.gutter {
display: none;
}
}
}
.el-table__row {
td {
padding: 0 !important;
}
}
}
// map里的label
.amap-info {
position: fixed !important;
......
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import "./variables.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";
@import "./btn.scss";
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
}
label {
......@@ -104,7 +105,8 @@ aside {
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......@@ -134,7 +136,7 @@ aside {
}
.text-center {
text-align: center
text-align: center;
}
.sub-navbar {
......@@ -145,7 +147,13 @@ aside {
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
background: linear-gradient(
90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%
);
.subtitle {
font-size: 20px;
......@@ -190,6 +198,20 @@ aside {
z-index: 1000 !important;
}
.amap-sug-result{
z-index:999999;
.amap-sug-result {
z-index: 999999;
}
//终极flex布局
.all-flex,
all-flex-ar {
display: flex;
justify-content: space-around;
}
.all-flex-h {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
justify-content: space-between;
}
<!--
* @Author: your name
* @Date: 2022-04-11 17:13:13
* @LastEditTime: 2022-04-12 11:00:12
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
-->
<template>
<div class="my-chars">
<div ref="chars" class="chars"></div>
<!-- <slot> -->
<!-- 如果是默认值,就显示这个 -->
<div v-if="!options" class="text" :style="{ color: color }">
<span class="num">87</span><span class="fh">%</span>
</div>
<!-- </slot> -->
</div>
</template>
<script>
export default {
props: {
options: {
type: Object,
default: null,
},
// 默认饼图的颜色
color: {
tupe: String,
default: "#399AF4",
},
},
data() {
return {
myChats: null,
// 默认options
defaultOptions: {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
color: ["#ffffff", "#399AF4"],
// title: {
// text: "资产总数",
// left: "center",
// top: "50%",
// textStyle: {
// textAlign: "center",
// fill: "#333",
// fontSize: 14,
// fontWeight: 400,
// },
// },
graphic: {
type: "text",
left: "center",
top: "45%",
style: {
text: "",
textAlign: "center",
fill: "#399AF4",
fontSize: 18,
},
},
series: [
{
name: "完成情况",
type: "pie",
radius: ["62%", "80%"],
avoidLabelOverlap: false,
// hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
},
},
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
},
data: [
{
value: 13,
name: "未完成",
},
{
value: 87,
name: "完成",
},
],
},
],
},
};
},
mounted() {
// if (!this.options) {
this.charsInit();
// }
},
methods: {
charsInit() {
this.myChats = this.$echarts.init(this.$refs.chars);
let options;
// 如果传进来的options就用传进来的,否则就用默认的
if (this.options) {
options = this.options;
} else {
options = JSON.parse(JSON.stringify(this.defaultOptions));
options.color[1] = this.color;
}
this.myChats.setOption(options);
},
},
};
</script>
<style lang="scss" scoped>
.my-chars {
width: 100%;
height: 100%;
position: relative;
// background-color: blue;
}
.chars {
width: 100%;
height: 100%;
// background: yellow;
}
.text {
position: absolute;
width: 80px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -10px;
text-align: center;
color: #399af4;
.num {
font-size: 21px;
letter-spacing: 0px;
}
.fh {
font-size: 1px;
}
}
</style>
\ No newline at end of file
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2022-03-23 15:26:48
* @LastEditTime: 2022-04-14 15:38:29
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
......@@ -13,6 +13,8 @@ export const pipeColor = {
2: "#FFFFFF",
3: "#18FF0F",
4: "#DE67FA",
// 运行监控-巡检巡查的线条颜色
5: "#1890FF",
};
export const pipePressure = {
1: "低压",
......@@ -48,6 +50,10 @@ export const svgUrl = {
16: require("@/assets/image/yj-xj.png"),
//煤气罐罐 运行监测 气瓶回溯
17: require("@/assets/mapinages/meiqiguan.svg"),
// 巡检巡查
98: require("@/assets/image-xjxc/start.svg"),
99: require("@/assets/image-xjxc/end.svg"),
};
export const svgAlarm = {
2: require("@/assets/mapImages/tyxAlarm.svg"),
......
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-03-22 10:35:13
* @LastEditTime: 2022-04-14 15:36:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -419,7 +419,7 @@ export class EditorMap {
const color = pipeColor[pipePressure + 1];
const pipe = this.createPipeLine({
path: eval(path),
strokeWeight: 4,
strokeWeight: objData.strokeWeight||4,
strokeColor: color,
extData: objData,
cursor: "pointer",
......@@ -444,6 +444,7 @@ export class EditorMap {
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = "blue";
// options.strokeWeight =4;
target.setOptions(options);
});
......@@ -452,9 +453,12 @@ export class EditorMap {
// 根据管道压力获取颜色
const { pipePressure } = target.getExtData();
const color = pipeColor[pipePressure + 1];
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = color;
// options.strokeWeight =2;
target.setOptions(options);
});
pipe.on("click", (e) => {
......
/*
* @Author: your name
* @Date: 2022-04-13 09:42:29
* @LastEditTime: 2022-04-14 16:22:10
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/utils/mapClass/xjxjmap.js
*/
import { EditorMap } from "./map";
export class XjxcMap extends EditorMap {
iconType1 = 98;
iconType2 = 99;
iconType3 = 0;
constructor(contaienr, config = {}, vue) {
super(contaienr, (config = {}), vue);
}
create(data, componentDevice, componentPipe) {
const path = eval(data.path);
if (path.length < 1) return;
console.log(path);
// 开头
const deviceData1 = {
longitude: path[0][0],
latitude: path[0][1],
iconType: this.iconType1,
};
// 结尾
const deviceData2 = {
longitude: path[path.length - 1][0],
latitude: path[path.length - 1][1],
iconType: this.iconType2,
};
// 路线
const pipeData = {
title:data.title ||"中燃科技",
path,
iconType: this.iconType3,
pipePressure: 4,
strokeWeight: 2,
};
this.addPipeLine(pipeData, componentPipe);
this.addDevice(deviceData1, componentDevice);
this.addDevice(deviceData2, componentDevice);
// // 前取整
const num = path.length >> 1;
this.map.panTo(path[num]);
}
remove() {
if (this.allDevice[98]?.length > 0) {
this.map.remove(this.allDevice[98][0]);
this.allDevice[98] = [];
this.map.remove(this.allDevice[99][0]);
this.allDevice[99] = [];
this.map.remove(this.pipeArr[0][0]);
this.pipeArr[0] = [];
}
}
}
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 09:55:18
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">巡检巡查计划</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">巡检年度计划</span>
<span>99次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">55次</div>
<div class="right">44次</div>
</div>
<div class="first fourth">
<div class="">泄漏检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars></Chars>
</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">巡检年度计划</span>
<span>18次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">10次</div>
<div class="right">8次</div>
</div>
<div class="first fourth">
<div class="">泄漏检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars color="#00C3F1"></Chars>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 21px;
margin-bottom: 7px;
}
.two {
flex: 1;
> .left {
margin-right: 70px;
}
> .right {
}
> div {
font-size: 14px;
flex: 1;
// display: flex;
// flex-direction: column;
}
.left,
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.first {
margin-bottom: 6px;
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
.second {
width: 213px;
height: 30px;
line-height: 30px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 19px;
> div {
// flex: 1;
text-align: center;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
width: 213px;
margin-bottom: 30px;
}
.fifth {
flex: 1;
// background: red;
padding-top: 5px;
.contant {
width: 120px;
height: 120px;
margin: 0 auto;
}
}
}
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 15:17:32
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">隐患整改</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">巡检年度计划</span>
<span>99次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">55</div>
<div class="right">44</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">隐患整改率</span>
</div>
<div class="chars-box">
<Chars color="#604AFF"></Chars>
</div>
</div>
</div>
<div class="three all-flex-h">
<div class="first">隐患原因</div>
<div ref="myChartWidth" class="chars-box">
<Chars :options="bottomOptions()" />
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
data() {
return {
bottomData: [
[
{ name: "裂缝", value: 20, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 40, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
],
],
};
},
methods: {
bottomOptions() {
return {
series: this.bottomData.map((data, idx) => {
const rich = {};
data
.map((item) => ({
fontsize: 12,
color: item.color,
}))
.forEach((item, index) => {
rich[`dataIndex${index}`] = item;
});
return {
type: "pie",
radius: ["68%", "80%"],
color: data.map((item) => item.color),
itemStyle: {
borderWidth: 2,
borderRadius: 10,
borderColor: "#fff",
},
label: {
alignTo: "edge",
// formatter: "{name|{b}}\n{num|{c} 个}",
formatter: (parm) => {
return `{dataIndex${parm.dataIndex}|${parm.data.name}}\n{dataIndex${parm.dataIndex}|${parm.data.value}个}`;
},
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich,
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
labelLayout: (params) => {
const { width } = this.$refs.myChartWidth.getBoundingClientRect();
const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
data: data,
};
}),
};
},
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 21px;
margin-bottom: 7px;
}
.two {
// flex: 1;
> .left {
margin-right: 70px;
.first {
margin-bottom: 6px;
}
.second {
width: 213px;
height: 30px;
line-height: 30px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 19px;
> div {
// flex: 1;
text-align: center;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
width: 213px;
margin-bottom: 38px;
}
}
> .right {
.first {
text-align: center !important;
}
.chars-box {
width: 90px;
height: 90px;
margin: 0 auto;
}
}
> div {
font-size: 14px;
flex: 1;
// display: flex;
// flex-direction: column;
}
.left,
.right {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.first {
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
}
}
.three {
font-size: 14px;
flex: 1;
// background: red;
.chars-box {
flex: 1;
}
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-14 15:49:20
* @LastEditTime: 2022-04-14 17:52:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue
-->
<template>
<div class="pipe-wrapper">
<div class="top">
<div class="title">{{ deviceData.title }}</div>
<div class="close" @click="close">
<img src="@/assets/image-xjxc/close.png" alt="" />
</div>
</div>
<div class="bottom">
<div class="ele flex">
<div class="left zzz">任务标题</div>
<div class="right zzz">中燃翔科测试</div>
</div>
<div class="ele flex">
<div class="left zzz">任务类型</div>
<div class="right zzz">入户安检</div>
</div>
<div class="ele flex">
<div class="left zzz">任务内容</div>
<div class="right zzz">巡检巡查</div>
</div>
<div class="ele flex">
<div class="left zzz">执行单位</div>
<div class="right zzz">中燃翔科</div>
</div>
<div class="ele flex">
<div class="left zzz">执行人</div>
<div class="right zzz">林俊杰</div>
</div>
<div class="ele flex">
<div class="left">发现问题</div>
<div class="right img-wrapper">
<el-image
v-if="imgSrc"
style="width: 80px; height: 80px"
:src="imgSrc"
:preview-src-list="[imgSrc]"
:z-index="999999"
>
</el-image>
<img v-else src="@/assets/image-xjxc/nomal.jpg" alt="" />
</div>
</div>
<div class="ele flex">
<div class="left zzz">问题描述</div>
<div title="还没有找到问题原因" class="right zzz">还没有找到问题原因</div>
</div>
<div class="ele flex end">
<div class="left zzz">发现时间</div>
<div class="right">2022-01-02 12:12:12</div>
</div>
</div>
</div>
</template>
<script>
// deviceData
export default {
data() {
return {
// imgSrc:
// "http://222.223.203.154:8092/gassafety/profile/upload/2022/04/08/3f197bb6-ad51-43df-aded-e1b005008ad6.jpg",
};
},
methods: {
close() {
this.mapClass.infowindowClose();
},
},
};
</script>
<style lang="scss" scoped>
.pipe-wrapper {
width: 230px;
padding: 10px 0 12px;
background-color: #fff;
box-sizing: border-box;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
position: relative;
&::before {
content: "";
border-style: solid;
border-width: 9px 13px 9px 7px;
border-color: transparent #fff transparent transparent ;
position: absolute;
left:-20px;
top:50%;
margin-top:-9px;
}
.top {
box-sizing: border-box;
padding-bottom: 5px;
border-bottom: 1px solid #c4c4c4;
.title {
padding-left: 21px;
color: #1d8cf3;
font-size: 14px;
font-weight: 500;
}
.close {
position: absolute;
width: 13px;
height: 13px;
right: 10px;
top: 13px;
cursor: pointer;
img {
width: 100%;
}
}
}
.bottom {
padding: 10px 15px 0px 21px;
.ele {
font-size: 12px;
padding-bottom: 4px;
border-bottom: 1px dashed #ececec;
margin-bottom: 5px;
> div {
width: 80px;
color: #333333;
&.left{
font-weight: 500;
}
&.right {
text-align: left;
}
&.img-wrapper {
height: 80px;
}
}
&.end {
border-bottom: 0px;
}
}
}
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-14 18:00:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">第三方施工情况</div>
<div class="two flex">
<div class="left">已备案</div>
<div class="middle">已完成</div>
<div class="right">进行中</div>
</div>
<div class="three flex">
<div class="left zzz">15</div>
<div class="middle zzz">13</div>
<div class="right zzz">2</div>
</div>
<div class="four all-flex-h">
<div class="top flex">
<div>施工单位</div>
<div>备案时间</div>
<div>施工描述</div>
</div>
<div class="scroll-wrapper">
<Scroll :dataList="arr">
<template v-slot="{ dataList }">
<ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
</template>
</Scroll>
</div>
</div>
</div>
</template>
<script>
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
export default {
components: {
Scroll,
ScroItem
},
data() {
return {
arr: [
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
],
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
}
.title {
text-align: center;
font-size: 21px;
margin-bottom: 22px;
}
.two {
box-shadow: 0px 0px 3px 1px #dddddd;
height: 28px;
font-size: 14px;
margin-bottom: 15px;
> div {
line-height: 28px;
flex: 1;
text-align: center;
&.left {
color: #1f8df3;
}
&.middle {
flex: 1;
color: #03c4f1;
}
&.right {
color: #ffc337;
}
}
}
.three {
font-size: 14px;
margin-bottom: 16px;
> div {
flex: 1;
line-height: 28px;
text-align: center;
}
}
.four {
flex: 1;
font-size: 14px;
// 这个解决子元素overhidden失效问题
min-height: 0;
>.top {
background: rgba(24, 144, 255, 0.1);
height: 29px;
line-height: 29px;
> div {
flex: 1;
text-align: center;
}
}
.scroll-wrapper {
// font-size: 14px;
flex: 1;
// 这个解决子元素overhidden失效问题
min-height: 0;
// background: red;
// overflow: hidden;
// position:relative;
}
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-12 18:02:16
* @LastEditTime: 2022-04-13 09:24:43
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
-->
<template>
<div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
<div class="left zzz" :title="data.companyName">{{ data.companyName }}</div>
<div class="zzz" :title="data.time">{{ data.time }}</div>
<div class="zzz" :title="data.text">{{ data.text }}</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
},
index: {
type: Number,
},
},
};
</script>
<style lang="scss" scoped>
.top {
width: 100%;
height: 29px;
line-height: 29px;
&.n {
color: #333333;
}
&.n2 {
color: #1f8df3;
background: rgba(0, 0, 0, 0.1);
}
> div {
flex: 1;
text-align: center;
font-size: 12px;
box-sizing: border-box;
padding: 0 2px;
&.left{
padding: 0 5px;
}
}
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-12 16:09:32
* @LastEditTime: 2022-04-13 15:41:17
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/scrollCom/scroll.vue
-->
<template>
<div
class="scroll"
@mouseover="stopScroll"
@mouseout="startScroll"
ref="wrapper"
>
<div ref="scroll" :style="{ top: pxTop }" class="contain">
<slot :dataList="dataList" />
</div>
</div>
</template>
<script>
export default {
props: {
dataList: {
type: Array,
default: () => [],
},
},
data() {
return {
timer: null,
top: 0,
wrapperHeight: 0,
scrollHeight: 0,
};
},
computed: {
pxTop() {
return this.top + "px";
},
},
mounted() {
this.init();
},
watch: {
dataList: {
handler: function (val, oldVal) {
this.top = 0;
this.init();
},
deep: true,
},
},
methods: {
init() {
clearInterval(this.timer);
const { height: wrapperHeight } =
this.$refs.wrapper.getBoundingClientRect();
const { height: scrollHeight } =
this.$refs.scroll.getBoundingClientRect();
this.scrollHeight = scrollHeight;
const maxTop = wrapperHeight - scrollHeight;
// 如果没有超过,就不滚动了
if (maxTop > 0) return;
this.timer = setInterval(() => {
// this.top = this.top-1;
this.top = this.top - 0.5;
if (this.top <= maxTop) {
this.top = 0;
}
}, 24);
},
stopScroll() {
clearInterval(this.timer);
},
startScroll() {
this.init();
},
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style lang="scss" scoped>
.scroll {
height: 100%;
// background: red;
overflow: hidden;
position: relative;
}
.contain {
width: 100%;
position: absolute;
}
</style>
\ No newline at end of file
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
-->
<template>
<div class="app-container xjxc">
<div class="wrapper flex-h">
<div class="top flex">
<div class="left">
<Left />
</div>
<div class="middle">
<Middle />
</div>
<div class="right">
<Right />
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<MapBottom/>
</div>
</div>
</div>
</template>
<script>
import Left from "./components/Left";
import Middle from "./components/Middle";
import Right from "./components/Right";
import MapBottom from "./components/MapBottom";
export default {
components: {
Left,
Middle,
Right,
MapBottom
},
data() {
return {
};
},
mounted(){
}
};
</script>
<style lang="scss" scoped>
.app-main {
}
.xjxc {
height: calc(100vh - 50px) !important;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex-h {
display: flex;
// justify-content: space-around;
flex-direction: column;
height: 100%;
.top {
height: 38.7%;
.left {
width: 36.5%;
padding: 15px 24px 19px;
}
.middle {
width: 35.3%;
padding: 15px 80px 19px 71px;
}
.right {
width: 25.2%;
padding: 15px 29px;
}
> div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
}
>.middle {
margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
height: 2px;
}
.bottom {
flex: 1;
background-color: red;
}
> div {
// height: 50%;
}
}
</style>
\ No newline at end of file
......@@ -89,11 +89,6 @@
<el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="设备id" align="center" prop="deviceId" />-->
<el-table-column label="照片" align="center" >
<template scope="List">
<img :src="List.row.iconUrl" width="100px">
</template>
</el-table-column>
<el-table-column label="设备名称" align="center" prop="deviceName">
<span slot-scope="scope" v-if="scope.row.deviceName">{{scope.row.deviceName}}</span>
<span v-else>-</span>
......@@ -124,6 +119,11 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<img :src="List.row.iconUrl" width="100px">
</template>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<span
......@@ -837,7 +837,7 @@ export default {
handleDelete(row) {
const deviceIds = row.deviceId || this.ids;
// const deviceIds = row.relationDeviceDetailId || this.ids;
this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
this.$confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......
......@@ -75,11 +75,6 @@
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="企业id" align="center" prop="enterpriseId" />-->
<el-table-column label="营业执照" align="center" >
<template scope="List">
<img :src="List.row.doDusiness" width="100px">
</template>
</el-table-column>
<el-table-column label="企业名称" align="center" prop="enterpriseName" >
<span slot-scope="scope" v-if="scope.row.enterpriseName">{{scope.row.enterpriseName}}</span>
<span v-else>-</span>
......@@ -112,6 +107,11 @@
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="营业执照" align="center" >
<template slot-scope="List">
<img :src="List.row.doDusiness" width="100px">
</template>
</el-table-column>
<el-table-column label="营业执照" align="center" >
<template slot-scope="List">
<span
......@@ -431,7 +431,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const enterpriseIds = row.enterpriseId || this.ids;
this.$confirm('是否确认删除企业信息编号为"' + enterpriseIds + '"的数据项?', "警告", {
this.$confirm('是否确认删除企业名称为"' + row.enterpriseName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......
......@@ -451,7 +451,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const projectIds = row.projectId || this.ids;
this.$confirm('是否确认删除工程项目信息编号为"' + projectIds + '"的数据项?', "警告", {
this.$confirm('是否确认删除企业名称为"' + row.enterpriseCode + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......
......@@ -74,11 +74,6 @@
<el-table v-loading="loading" :data="stationList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<img :src="List.row.pictureAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="场站类型" align="center" prop="siteStationType" >
<span slot-scope="scope" v-if="scope.row.siteStationType">{{scope.row.siteStationType}}</span>
<span v-else>-</span>
......@@ -116,6 +111,11 @@
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<img :src="List.row.pictureAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<span
......@@ -714,7 +714,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const siteStationIds = row.siteStationId || this.ids;
this.$confirm('是否确认删除场站信息编号为"' + siteStationIds + '"的数据项?', "警告", {
this.$confirm('是否确认删除场站名称为"' + row.beyondEnterpriseName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......
......@@ -83,11 +83,6 @@
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="照片" align="center" >
<template scope="List">
<img :src="List.row.avatarAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="employedPeopleName" >
<span slot-scope="scope" v-if="scope.row.employedPeopleName">{{scope.row.employedPeopleName}}</span>
<span v-else>-</span>
......@@ -124,6 +119,11 @@
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<img :src="List.row.avatarAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<span
......@@ -471,7 +471,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const employedPeopleIds = row.employedPeopleId || this.ids;
this.$confirm('是否确认删除从业人员信息编号为"' + employedPeopleIds + '"的数据项?', "警告", {
this.$confirm('是否确认删除从业人员名称为"' + row.employedPeopleName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......
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