- <!-- 总体概览右侧面板 -->
- <template>
- <div class="rightSD">
- <!-- 运行监测 -->
- <div class="topBox">
- <div class="ListBoxHeader">
- <div class="ListBoxHeader_font">运行监测</div>
- </div>
- <div class="topContent">
- <!-- 结构监测 -->
- <div class="jcBox">
- <div class="jcBox_Header">
- <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
- <span class="jcBox_HeaderFont">结构监测</span>
- </div>
- <div class="jcBox_Content jgBox">
- <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
- <div class="jcInfo_title">{{ item.name }}</div>
- <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
- <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
- {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
- </div>
- <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
- </div>
- </div>
- </div>
- <!-- 通行监测 -->
- <div class="jcBox txBox">
- <div class="jcBox_Header">
- <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
- <span class="jcBox_HeaderFont">通行监测</span>
- </div>
- <div class="lineBox">
- <twoLine :echartData="lineData" :refresh="chartRefresh" />
- </div>
- </div>
- <!-- 突发事件监测 -->
- <div class="jcBox">
- <div class="jcBox_Header">
- <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
- <span class="jcBox_HeaderFont">突发事件监测</span>
- </div>
- <div class="jcBox_Content">
- <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
- <img :src="item.icon" alt="" class="tfInfo_icon" />
- <div class="tfInfo_title">{{ item.name }}</div>
- <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
- {{ tfjcData[item.code] == '1' ? '有' : '无' }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 检测评估 -->
- <div class="bottomBox">
- <div class="ListBoxHeader">
- <div class="ListBoxHeader_font">检测评估</div>
- <img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
- </div>
- <div class="bottomContent">
- <div class="contentTop">
- <div class="pgBox">
- <div class="pgInfo">
- <div>{{ assessment.update.slice(0, 4) }}年</div>
- <div>{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日</div>
- </div>
- <div class="pgTitle">最近一次检测</div>
- </div>
- <div class="pgBox">
- <div class="pgInfo">
- <div>{{ assessment.state }}</div>
- </div>
- <div class="pgTitle">整体工作性能</div>
- </div>
- <div class="pgBox">
- <div class="pgInfo">
- <div>{{ assessment.level }}</div>
- </div>
- <div class="pgTitle">技术状况等级</div>
- </div>
- </div>
- <div class="contentBottom">
- <div>检测单位</div>
- <div class="pgCompany">{{ assessment.company }}</div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="rightSD">
- import twoLine from './components/twoLine.vue';
- import { ref, reactive, toRefs, onMounted } from 'vue';
-
- import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
- import czsj from '@/assets/newImgs/czsj.png'; //处置数据
- import czl from '@/assets/newImgs/czl.png'; //处置率
-
- import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
- import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
- import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
- import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
- import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比
-
- import hz_icon from '@/assets/tunnelImg/hz_icon.png';
- import jtsg_icon from '@/assets/tunnelImg/jtsg_icon.png';
- import ydqt_icon from '@/assets/tunnelImg/ydqt_icon.png';
-
- let chartRefresh = ref(Math.random());
-
- const assessment = ref({
- update: '2023-11-20',
- state: '良好',
- level: '二类',
- company: '陕西海嵘工程试验检测股份有限公司',
- });
- const jgjcTitle = [
- { name: '沉降监测', code: 'cj' },
- { name: '滑坡监测', code: 'hp' },
- { name: '收敛监测', code: 'sl' },
- { name: '裂缝监测', code: 'lf' },
- { name: '水位监测', code: 'sw' },
- { name: '应变监测', code: 'yb' },
- ];
- const jgjcData = ref({
- cj: '1',
- hp: '1',
- sl: '0',
- lf: '1',
- sw: '1',
- yb: '1',
- });
- const tfjcTitle = [
- { name: '火灾', code: 'hz', icon: hz_icon },
- { name: '交通事故', code: 'jt', icon: jtsg_icon },
- { name: '有毒气体', code: 'dq', icon: ydqt_icon },
- ];
- const tfjcData = ref({
- hz: '0',
- jt: '0',
- dq: '0',
- });
-
- const lineData = ref({
- tabX: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
- unit: '辆',
- series: [
- {
- name: '南向北',
- tabY: ['0', '150', '150', '200', '130', '320', '300'],
- },
- {
- name: '北向南',
- tabY: ['100', '200', '200', '150', '240', '240', '180'],
- },
- ],
- });
-
- watch(
- () => lineData.value,
- (newVal, oldVal) => {
- // console.log('change', newVal);
- // eData.value = ArrayToObject(newVal.slice(0, 10));
- // eData.value.headerList = headerList.value;
- nextTick(() => {
- chartRefresh.value = Math.random();
- });
- // console.log('obj', rightData.value);
- },
- {
- immediate: true,
- deep: true,
- }
- );
-
- onMounted(() => {});
- </script>
-
- <style lang="scss" scoped>
- .rightSD {
- width: 100%;
- height: 100%;
- // box-sizing: border-box;
- padding: 10px;
- display: flex;
- flex-direction: column;
- }
-
- .topBox {
- width: 100%;
- flex: 1;
- // height: 49%;
- // background: yellowgreen;
- .topContent {
- width: 100%;
- margin: 0px 0 5px;
- height: calc(100% - 49px);
- display: flex;
- flex-direction: column;
- // border: 1px solid red;
- .jcBox {
- width: 100%;
- margin-top: 5px;
- .jcBox_Header {
- height: 24px;
- width: 100%;
- .jcBox_HeaderIcon {
- width: 24px;
- height: 24px;
- vertical-align: middle;
- }
- .jcBox_HeaderFont {
- display: inline-block;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ebfeff;
- height: 24px;
- line-height: 24px;
- position: relative;
-
- &::after {
- content: '';
- // width: 60px;
- width: 100%;
- height: 10px;
- background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
- position: absolute;
- bottom: 0;
- left: 0;
- }
- }
- }
- .jgBox {
- height: 140px;
- }
- .jcBox_Content {
- margin-top: 5px;
- // border: 1px solid red;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- align-content: space-between;
- .jcInfo {
- position: relative;
- width: 200px;
- height: 40px;
- background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
- display: flex;
- align-items: center;
- // justify-content: space-between;
- &::before {
- content: '';
- width: 4px;
- height: 40px;
- position: absolute;
- left: 0;
- top: 0;
- background: #00f2ff;
- }
- .jcInfo_title {
- font-weight: bold;
- font-size: 16px;
- color: #ebfeff;
- margin-left: 15px;
- }
- .jcInfo_state {
- display: flex;
- align-items: center;
- color: #00ff9c;
- margin-left: 16px;
- &.active {
- color: #fe667b;
- }
- .jcInfo_stateIcon {
- width: 10px;
- height: 10px;
- background: #00ff9c;
- border-radius: 50%;
- margin-right: 3px;
- &.active {
- background: #fe667b;
- }
- }
- }
- .jcInfo_btn {
- width: 38px;
- height: 21px;
- margin-left: 18px;
- background: #0ea3c3;
- border-radius: 11px;
- font-weight: 500;
- font-size: 14px;
- color: #ebfeff;
- text-align: center;
- }
- }
- .tfInfo {
- width: 136px;
- height: 130px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background: url('@/assets/tunnelImg/tfjcBg.png') no-repeat;
- background-size: 100% 100%;
- .tfInfo_icon {
- width: 60px;
- height: 60px;
- }
- .tfInfo_title {
- font-weight: bold;
- font-size: 14px;
- color: #09bdf2;
- }
- .tfInfo_state {
- font-weight: bold;
- font-size: 26px;
- color: #3effb9;
- &.active {
- color: #fe667b;
- }
- }
- }
- }
- }
- .txBox {
- flex: 1;
- // border: 1px solid red;
- display: flex;
- flex-direction: column;
- .lineBox {
- flex: 1;
- // border: 1px solid red;
- }
- }
- }
- }
- .bottomBox {
- width: 100%;
- // height: 49%;
- // background: red;
- // border: 1px solid red;
- .bottomContent {
- width: 100%;
- .contentTop {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 8px 0;
- .pgBox {
- width: 136px;
- height: 130px;
- background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat;
- background-size: 100% 100%;
- text-align: center;
- .pgInfo {
- width: 100%;
- height: 89px;
- display: flex;
- flex-direction: column;
- font-weight: bold;
- font-size: 20px;
- color: #00f2ff;
- align-items: center;
- justify-content: center;
- }
-
- .pgTitle {
- font-family: Source Han Sans CN;
- font-weight: 500;
- font-size: 14px;
- color: #ffffff;
- height: 14px;
- line-height: 14px;
- // border: 1px solid red;
- }
- }
- }
- .contentBottom {
- width: 100%;
- height: 39px;
- box-sizing: border-box;
- line-height: 39px;
- background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- padding: 0 20px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #ebfeff;
- .pgCompany {
- color: #00f2ff;
- margin-left: 20px;
- }
- }
- }
- }
- .ListBoxHeader {
- height: 44px;
- line-height: 50px;
- width: 98%;
- background: url('@/assets/newImgs/partBg.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- // margin: 7px 0px 0px 8px;
- .ListBoxHeader_font {
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 23px;
- color: #ebfeff;
- padding-left: 34px;
- }
- .ListBoxHeader_img {
- width: 23px;
- height: 27px;
- margin-right: 5px;
- }
- }
- </style>