updata
1 parent 2459f6a commit c6dd5660531601b32b22effbbc4a4c3294250991
@jimengfei jimengfei authored on 18 Oct
Showing 1 changed file
View
308
src/views/oneMap/OverallOverview/LeftBox.vue
<span class="tableHeaderList tableList3">监测指标</span>
<span class="tableHeaderList tableList4">监测时间</span>
<span class="tableHeaderList tableList5">状态</span>
</div>
<Vue3SeamlessScroll
:list="FXJCData"
:singleHeight="60"
:singleWaitTime="1500"
:hover="true"
class="tableBody"
>
<Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
<div class="tableBodyList" v-for="item in FXJCData">
<span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
<span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
<span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
</div>
</template>
 
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import publicEch from "@/views/oneMap/Echarts/publicEch.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import ranqi_icon from "@/assets/newImgs/rq.png"; //燃气
import qiaoliang from "@/assets/newImgs/ql.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd.png"; //隧道
import ps_icon from "@/assets/newImgs/ps.png"; //排水
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import publicEch from '@/views/oneMap/Echarts/publicEch.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd.png'; //隧道
import ps_icon from '@/assets/newImgs/ps.png'; //排水
 
const chartData2 = ref({ xAxis: [], yAxis: [], yAxis2: [] });
const refresh = ref("");
const refresh = ref('');
const categoryList = ref([
{ name: "燃气", value: 1 },
{ name: "排水", value: 2 },
{ name: "桥梁", value: 3 },
{ name: "隧道", value: 4 },
{ name: '燃气', value: 1 },
{ name: '排水', value: 2 },
{ name: '桥梁', value: 3 },
{ name: '隧道', value: 4 },
]);
const yearList = ref([
{ name: "7天", value: 1 },
{ name: "15天", value: 2 },
{ name: "30天", value: 3 },
{ name: '7天', value: 1 },
{ name: '15天', value: 2 },
{ name: '30天', value: 3 },
]);
const FXJCData = ref([
{
name: "延安中学",
jcdx: "燃气管网",
jczb: "甲烷浓度4.4%VOL",
jcsj: "2024/10/23 11:54",
zk: "正常",
},
{
name: "延安大学附属医院",
jcdx: "燃气管网",
jczb: "甲烷浓度4%VOL",
jcsj: "2024/10/23 12:14",
zk: "正常",
},
{
name: "王家坪大桥",
jcdx: "桥梁结构",
jczb: "倾角+1°",
jcsj: "2024/10/23 12:24",
zk: "正常",
},
{
name: "王家坪大桥",
jcdx: "桥梁结构",
jczb: "位移12mm",
jcsj: "2024/10/23 13:13",
zk: "正常",
},
{
name: "王家坪大桥",
jcdx: "桥梁外部荷载",
jczb: "均布荷载6.4kn/m",
jcsj: "2024/10/23 13:43",
zk: "正常",
},
{
name: "王家坪大桥",
jcdx: "桥梁气象环境",
jczb: "风速3.2m/s",
jcsj: "2024/10/23 14:03",
zk: "正常",
},
{
name: "杨家岭隧道",
jcdx: "隧道结构",
jczb: "裂缝宽度0.12mm",
jcsj: "2024/10/23 14:05",
zk: "正常",
},
{
name: "杨家岭隧道",
jcdx: "隧道结构",
jczb: "静应变+10με",
jcsj: "2024/10/23 14:25",
zk: "正常",
},
 
{
name: "王家坪旧址门口",
jcdx: "积水液位",
jczb: "水深0m",
jcsj: "2024/10/23 15:21",
zk: "正常",
},
{
name: "大砭沟与北大街交叉口",
jcdx: "积水液位",
jczb: "水深0m",
jcsj: "2024/10/23 15:25",
zk: "正常",
name: '延安中学',
jcdx: '燃气管网',
jczb: '甲烷浓度4.4%VOL',
jcsj: '11:54',
zk: '正常',
},
{
name: '延安大学附属医院',
jcdx: '燃气管网',
jczb: '甲烷浓度4%VOL',
jcsj: '12:14',
zk: '正常',
},
{
name: '王家坪大桥',
jcdx: '桥梁结构',
jczb: '倾角+1°',
jcsj: '12:24',
zk: '正常',
},
{
name: '王家坪大桥',
jcdx: '桥梁结构',
jczb: '位移12mm',
jcsj: '13:13',
zk: '正常',
},
{
name: '王家坪大桥',
jcdx: '桥梁外部荷载',
jczb: '均布荷载6.4kn/m',
jcsj: '13:43',
zk: '正常',
},
{
name: '王家坪大桥',
jcdx: '桥梁气象环境',
jczb: '风速3.2m/s',
jcsj: '14:03',
zk: '正常',
},
{
name: '杨家岭隧道',
jcdx: '隧道结构',
jczb: '裂缝宽度0.12mm',
jcsj: '14:05',
zk: '正常',
},
{
name: '杨家岭隧道',
jcdx: '隧道结构',
jczb: '静应变+10με',
jcsj: '14:25',
zk: '正常',
},
 
{
name: '王家坪旧址门口',
jcdx: '积水液位',
jczb: '水深0m',
jcsj: '15:21',
zk: '正常',
},
{
name: '大砭沟与北大街交叉口',
jcdx: '积水液位',
jczb: '水深0m',
jcsj: '15:25',
zk: '正常',
},
]);
const yxjcname = ref("7天");
const yxjcname = ref('7天');
function yearclick(val) {
yxjcname.value = val.name;
}
const riskData = ref([
{
name1: "管网",
name2: "传感器",
name3: "窨井",
num1: "234",
num2: "12",
num3: "12",
name1: '管网',
name2: '传感器',
name3: '窨井',
num1: '234',
num2: '12',
num3: '12',
Imgurl: ranqi_icon,
dw1: "公里",
dw2: "套",
dw3: "口",
dw1: '公里',
dw2: '套',
dw3: '口',
},
]);
 
const activedname = ref("燃气");
const activedname = ref('燃气');
// 点击事件
function categoryclick(val) {
console.log(val.name, "1");
console.log(val.name, '1');
activedname.value = val.name;
if (activedname.value == "燃气") {
if (activedname.value == '燃气') {
riskData.value = [
{
name1: "管网",
name2: "传感器",
name3: "窨井",
num1: "234",
num2: "12",
num3: "12",
name1: '管网',
name2: '传感器',
name3: '窨井',
num1: '234',
num2: '12',
num3: '12',
Imgurl: ranqi_icon,
dw1: "公里",
dw2: "套",
dw3: "口",
dw1: '公里',
dw2: '套',
dw3: '口',
},
];
} else if (activedname.value == "排水") {
} else if (activedname.value == '排水') {
riskData.value = [
{
name1: "管网",
name2: "检查口",
name3: "感知设备",
num1: "234",
num2: "234",
num3: "18",
name1: '管网',
name2: '检查口',
name3: '感知设备',
num1: '234',
num2: '234',
num3: '18',
Imgurl: ps_icon,
dw1: "公里",
dw2: "处",
dw3: "套",
dw1: '公里',
dw2: '处',
dw3: '套',
},
];
} else if (activedname.value == "桥梁") {
} else if (activedname.value == '桥梁') {
riskData.value = [
{
name1: "数量",
name2: "长度",
name3: "感知设备",
num1: "1",
num2: "204",
num3: "92",
name1: '数量',
name2: '长度',
name3: '感知设备',
num1: '1',
num2: '204',
num3: '92',
Imgurl: qiaoliang,
dw1: "座",
dw2: "米",
dw3: "套",
dw1: '座',
dw2: '米',
dw3: '套',
},
];
} else {
riskData.value = [
{
name1: "数量",
name2: "长度",
name3: "感知设备",
num1: "1",
num2: "750",
num3: "111",
name1: '数量',
name2: '长度',
name3: '感知设备',
num1: '1',
num2: '750',
num3: '111',
Imgurl: sd_icon,
dw1: "座",
dw2: "米",
dw3: "套",
dw1: '座',
dw2: '米',
dw3: '套',
},
];
}
}
 
function GetgetFacilities() {
let obj = {
x: ["燃气", "排水", "桥梁", "隧道", "其他"],
y: ["870", "568", "700", "600", "276"],
x: ['燃气', '排水', '桥梁', '隧道', '其他'],
y: ['870', '568', '700', '600', '276'],
};
chartData2.value.xAxis = obj.x;
chartData2.value.yAxis = obj.y;
refresh.value = Math.random();
// background: yellow;
.icon {
width: 25px;
height: 25px;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
}
.gw {
font-family: Source Han Sans CN;
font-weight: bold;
position: relative;
left: 10px;
width: 25px;
height: 25px;
background: url("@/assets/newImgs/xtb_img.png") no-repeat;
background: url('@/assets/newImgs/xtb_img.png') no-repeat;
}
.text {
font-family: Source Han Sans CN;
font-weight: bold;
left: 12px;
top: 10px;
 
// box-shadow: inset 0px -7px 10px -5px #47eef38a;
background: linear-gradient(
0deg,
rgba(0, 242, 255, 0.5) 0%,
rgba(0, 242, 255, 0) 100%
);
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
height: 10px;
line-height: 0px;
}
.yxjcList {
color: #ffffff;
height: 60px;
line-height: 60px;
text-align: center;
width: 20%;
width: 22%;
overflow: hidden;
white-space: nowrap; /* 防止文字换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
color: #ffffff;
height: 60px;
line-height: 60px;
text-align: center;
width: 25%;
width: 23%;
overflow: hidden;
white-space: nowrap; /* 防止文字换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;