From 6a08de2fedd83c195d7755a13b81970fe6d2b822 Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: 星期二, 07 三月 2023 16:19:16 +0800
Subject: [PATCH] 新修改添加页面
---
src/views/specialWorkSystem/specialIndex/index.vue | 16
src/router/route.ts | 8
src/views/intellectInspect/intelligentLine/index.vue | 104 ++++
src/views/facilityManagement/facilityIndex/index.vue | 1109 ++++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/system/video/component/videoDialog.vue | 12
5 files changed, 1,230 insertions(+), 19 deletions(-)
diff --git a/src/router/route.ts b/src/router/route.ts
index 0b49e22..7cce428 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -127,5 +127,13 @@
meta: {
title: '特殊作业首页'
}
+ },
+ {
+ path: '/facilityIndex',
+ name: 'facilityIndex',
+ component: () => import('/@/views/facilityManagement/facilityIndex/index.vue'),
+ meta: {
+ title: '设备管理首页'
+ }
}
];
diff --git a/src/views/facilityManagement/facilityIndex/index.vue b/src/views/facilityManagement/facilityIndex/index.vue
new file mode 100644
index 0000000..0e011e8
--- /dev/null
+++ b/src/views/facilityManagement/facilityIndex/index.vue
@@ -0,0 +1,1109 @@
+<template>
+ <div class="home-container">
+ <div class="topChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">当前时间设备状态</span>
+ <div class="filter-part filter-part2">
+ <el-cascader v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" :id="sbzt"></div>
+ </div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">设备异常趋势</span>
+ <div class="filter-part filter-part2">
+ <el-cascader v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" :id="ycqs"></div>
+ </div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">关联作业排行</span>
+ <div class="filter-part filter-part3">
+ <el-cascader v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ <el-select v-model="chartSearch3.period" size="small">
+ <el-option label="近7天" value="week"/>
+ <el-option label="近30天" value="month"/>
+ <el-option label="近90天" value="season"/>
+ <el-option label="近1年" value="year"/>
+ </el-select>
+ <el-select v-model="chartSearch3.workType" size="small">
+ <el-option
+ v-for="item in workType1"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="chart" style="margin-top: 10px">
+ <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="name" label="姓名" align="center"/>
+ <el-table-column property="depName" label="所属部门" align="center"/>
+ <el-table-column property="applyUname" label="异常报警次数" align="center"/>
+ <el-table-column property="operators" label="角色" align="center"/>
+ <el-table-column label="是否持证" align="center">
+ <template #default="scope">
+
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-button type="text" size="small">查看所有设计特殊作业的设备>></el-button>
+ </div>
+ <!-- <div class="chart" :id="ycqs"></div>-->
+ </div>
+ </div>
+ <div class="topChart">
+ <div class="chart-item chart-item2">
+ <div class="chart-tit">
+ <span class="tit">关联作业趋势图</span>
+ <div class="filter-part filter-part2">
+ <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" style="margin-top: 10px">
+ <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column label="设备位号" align="center"/>
+ <el-table-column label="设备名称" align="center"/>
+ <el-table-column label="所属事业部" align="center"/>
+ <el-table-column label="温度敏感范围" align="center"/>
+ <el-table-column label="当前气温" align="center"/>
+ <el-table-column label="状态" align="center" width="180">
+ <template #default="scope">
+ <span :style="{color: scope.row.taskStatus == 1 ? '#999' : scope.row.taskStatus == 2 ? '#44b100' : scope.row.taskStatus == 3 ? '#409eff' : 'red'}">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-pagination v-model:currentPage="chartSearch4.pageIndex" v-model:page-size="chartSearch4.pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+ </div>
+ </div>
+ <div class="chart-item chart-item2">
+ <div class="chart-tit">
+ <span class="tit">其他数据分析</span>
+ <div class="filter-part filter-part2">
+ <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" style="margin-top: 10px;display: flex;align-items: center">
+ <div class="c-item" :id="aqxj">
+
+ </div>
+ <div class="c-item" :id="aqby">
+
+ </div>
+ <div class="c-item" :id="yhxh">
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
+import { storeToRefs } from 'pinia';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useUserInfo } from '/@/stores/userInfo';
+import { Session } from '/@/utils/storage';
+import { useRouter } from 'vue-router';
+import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue';
+import { ElTable, ElMessage } from 'element-plus';
+import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
+import type { TabsPaneContext } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus'
+import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
+import Cookies from 'js-cookie';
+import axios from 'axios';
+import * as echarts from "echarts";
+
+// 定义接口来定义对象的类型
+interface stateType {
+ applyData: Array<string>;
+ workTimeList: Array<string>;
+ multipleSelection: Array<any>;
+ casProps: {};
+ approveInfo: Object;
+ dialogDetails: boolean;
+ dialogReview: boolean;
+ pageIndex1: number;
+ pageSize1: number;
+ chosenIndex: null | number;
+ searchWord: number | null;
+ searchStatus: number | null;
+ chartSearch1: object;
+ chartSearch2: object;
+ chartSearch3: object;
+ chartSearch4: object;
+ searchDep2: number | null;
+ searchDep: number | null;
+ searchDate: Array<any>,
+ totalSize1: number;
+ details: {};
+ workType: Array<type>;
+ workType1: Array<type>;
+ dialogType: number | null;
+ departmentList: Array<any>;
+ departmentRecursionList: Array<DepartmentState>;
+ workStatus: Array<status>;
+ reviewForm: object;
+ reviewRules: object;
+}
+interface type {
+ id: number;
+ name: string;
+}
+interface status {
+ name: string
+ value: number
+}
+interface DepartmentState {
+ depId: number;
+ depName: string;
+}
+interface User {
+ name: string;
+ list: [];
+ info: string;
+}
+export default defineComponent({
+ name: 'facilityIndex',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+ const router = useRouter();
+ const reviewFormRef = ref<FormInstance>()
+ const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
+ const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
+ const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
+ const aqby = ref("eChartAqby" + Date.now() + Math.random())
+ const yhxh = ref("eChartYhxh" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ pageIndex1: 1,
+ pageSize1: 10,
+ totalSize1: 0,
+ dialogType: null,
+ dialogReview: false,
+ departmentList: [],
+ departmentRecursionList: [],
+ chosenIndex: null,
+ searchWord: null,
+ searchStatus: null,
+ chartSearch1: {
+ searchDep: null,
+ period: 'month'
+ },
+ chartSearch2: {
+ searchDep: null,
+ type: 0
+ },
+ chartSearch3: {
+ searchDep: null
+ },
+ chartSearch4: {
+ searchDep: null
+ },
+ searchDep2: null,
+ searchDep: null,
+ searchDate: [],
+ applyData: [],
+ workTimeList: [],
+ multipleSelection: [],
+ approveInfo: {
+ approvalSteps: [],
+ operators: []
+ },
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName',
+ checkStrictly: true
+ },
+ dialogDetails: false,
+ details: {},
+ workType1: [
+ { id: 0, name: '所有作业' },
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workType: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workStatus: [
+ {
+ name: '作业进行中',
+ value: 0
+ },
+ {
+ name: '作业终止',
+ value: 1
+ },
+ {
+ name: '作业结束待验收',
+ value: 2
+ },
+ {
+ name: '作业完成',
+ value: 3
+ }
+ ],
+ reviewForm: {
+ advice: ''
+ },
+ reviewRules:{
+ advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
+ }
+ });
+ // 页面载入时执行方法
+ onMounted(() => {
+ getListByPage();
+ getAllDepartment();
+ initSbzt()
+ initYcqs()
+ initAqxj()
+ initAqby()
+ initYhxh()
+ });
+
+ type EChartsOption = echarts.EChartsOption
+ const initSbzt =()=>{
+ let dom = document.getElementById(sbzt.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '50%',
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 1048, name: '在用' },
+ { value: 735, name: '维修' },
+ { value: 580, name: '停用' },
+ { value: 484, name: '报废' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYcqs =()=>{
+ let dom = document.getElementById(ycqs.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ grid: {
+ top: '8%',
+ bottom: '8%'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
+ type: 'line'
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initAqxj =()=>{
+ let dom = document.getElementById(aqxj.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期巡检率',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initAqby =()=>{
+ let dom = document.getElementById(aqby.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期保养率',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYhxh =()=>{
+ let dom = document.getElementById(yhxh.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '隐患销号率',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 刷新
+ const reLoadData = async () => {
+ getListByPage();
+ };
+
+ // 填写表单
+ const toApply = () => {
+ router.push({
+ path: 'zysq'
+ });
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ // recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 分页获取列表
+ const getListByPage = async () => {
+ const dateRange = JSON.parse(JSON.stringify(state.searchDate))
+ if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
+ const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
+ let res = await workApplyApi().getApplyList(data);
+ if (res.data.code === '200') {
+ state.applyData = JSON.parse(JSON.stringify(res.data.data));
+ state.applyData = state.applyData.map((item) => {
+ if (item.operators == null || item.operators == []) {
+ item.operators = [];
+ } else {
+ item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
+ }
+ return item;
+ });
+ state.totalSize1 = res.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 表格数据格式化
+ const toNames = (row, column, cellValue, index) => {
+ if (row.list == []) {
+ return [];
+ } else {
+ const nameList = [];
+ for (let i = 0; i < row.list.length; i++) {
+ for (let t = 0; t < state.workTimeList.length; t++) {
+ if (row.list[i] == state.workTimeList[t].id) {
+ nameList.push(state.workTimeList[t].name);
+ }
+ }
+ }
+ return nameList.join();
+ }
+ };
+
+ // 关键词查询记录
+ const searchRecord = async () => {
+ if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
+ ElMessage({
+ type: 'warning',
+ message: '请输入查询关键词'
+ });
+ } else {
+ getListByPage();
+ }
+ };
+ // 重置搜索
+ const clearSearch = async () => {
+ state.searchWord = null;
+ state.searchDep = null;
+ state.searchDate = []
+ getListByPage();
+ };
+
+ const handleSizeChange1 = (val: number) => {
+ state.pageSize1 = val;
+ getListByPage();
+ };
+ const handleCurrentChange1 = (val: number) => {
+ state.pageIndex1 = val;
+ getListByPage();
+ };
+
+ const handleReview = (row)=>{
+ state.dialogReview = true
+ }
+
+ const submitReview = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ Finished,
+ Download,
+ FolderChecked,
+ reviewFormRef,
+ sbzt,
+ ycqs,
+ aqxj,
+ aqby,
+ yhxh,
+ handleReview,
+ submitReview,
+ reLoadData,
+ toApply,
+ toNames,
+ searchRecord,
+ clearSearch,
+ getListByPage,
+ handleSizeChange1,
+ handleCurrentChange1,
+ ...toRefs(state)
+ };
+ }
+});
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+.home-container {
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .demo-tabs {
+ width: 100%;
+ height: 100%;
+
+ &::v-deep(.el-tabs__content) {
+ height: calc(100% - 60px);
+ }
+
+ .el-tab-pane {
+ height: 100%;
+ }
+ }
+ .topChart{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ height: 50%;
+
+ .chart-item{
+ width: calc((100% - 40px)/3);
+ height: 100%;
+ margin-right: 20px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 0;
+ }
+
+ .chart-tit{
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 16px;
+ font-weight: bolder;
+ white-space: nowrap;
+ }
+ .filter-part{
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ :deep(.el-cascader){
+ width: 35% !important;
+ }
+ .el-select{
+ width: 35% !important;
+ margin-left: 10px;
+ }
+ .el-switch{
+ width: 25% !important;
+
+ :deep(.el-switch__core){
+ width: 100% !important;
+ }
+ }
+ }
+ .filter-part2{
+ :deep(.el-cascader){
+ width: 100% !important;
+ }
+ }
+ .filter-part3{
+ :deep(.el-cascader){
+ width: 30% !important;
+ }
+ .el-select{
+ width: 25% !important;
+ margin-left: 10px;
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 88%;
+
+ .c-item{
+ width: calc((100% - 20px)/3);
+ height: 100%;
+ }
+ }
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
+
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
+ }
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
+
+ .chart-item2{
+ width: calc(50% - 10px);
+ height: 100%;
+ margin-right: 10px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 0;
+ }
+ }
+ }
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .main-card {
+ width: 100%;
+ height: 100%;
+ .cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn {
+ margin: 0;
+ }
+
+ .top-info {
+ display: flex;
+ font-size: 16px;
+ font-weight: bolder;
+ align-items: center;
+ padding: 6px 10px;
+ background: #ffeb87;
+ border-radius: 4px;
+ border: 1px solid #ffae00;
+ margin-right: 20px;
+
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ span {
+ font-size: 22px;
+ color: #f3001e;
+ margin: 0 2px;
+ cursor: pointer;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ .pageBtn {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ }
+ .stepItem {
+ display: flex;
+ align-items: flex-start;
+ margin-top: 30px;
+ margin-left: 30px;
+ padding-bottom: 30px;
+ padding-left: 40px;
+ border-left: 1px solid #a0cfff;
+ position: relative;
+ &:first-of-type {
+ margin-top: 30px;
+ }
+ &:first-of-type {
+ margin-bottom: 0;
+ border-left: none;
+ }
+ .stepNum {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ box-sizing: border-box;
+ font-size: 18px;
+ color: #333;
+ border: 1px solid #a0cfff;
+ line-height: 38px;
+ text-align: center;
+ left: -20px;
+ top: -30px;
+ background: #d9ecff;
+ }
+ .stepCard {
+ width: 100%;
+ margin-top: -30px;
+
+ .box-card {
+ width: 100%;
+
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ span {
+ font-weight: bold;
+ margin-left: 10px;
+ }
+ }
+
+ .text {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 10px;
+ padding-left: 10px;
+
+ span {
+ font-weight: bolder;
+ color: #409eff;
+ }
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ .approveUnit {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ border: 1px solid #fff;
+ background: #ecf8ff;
+ border-radius: 6px;
+ .item-tit {
+ width: 100%;
+ display: flex;
+ color: #409eff;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0cfff;
+
+ & > span {
+ flex: 1;
+ &:last-of-type{
+ text-align: center;
+ }
+ }
+ & > div {
+ flex: 1;
+ text-align: center;
+ }
+ }
+ .item-cont {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #c6e2ff;
+
+ & > span {
+ flex: 1;
+ &:last-of-type{
+ text-align: center;
+ }
+ }
+ & > div {
+ flex: 1;
+ text-align: center;
+
+ & > div {
+ text-align: left;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ span {
+ width: 45%;
+ &:first-of-type {
+ width: 30%;
+ }
+ }
+ }
+ }
+ &:last-of-type {
+ border-bottom: 0;
+ }
+ }
+ }
+ .approveItem {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ background: #ecf8ff;
+ border: 1px solid #fff;
+ border-radius: 6px;
+ .item-tit {
+ width: 100%;
+ display: flex;
+ color: #409eff;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0cfff;
+
+ & > span {
+ flex: 1;
+ }
+ & > div {
+ flex: 2;
+ text-align: center;
+ }
+ }
+ .item-cont {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #c6e2ff;
+
+ & > span {
+ flex: 1;
+ }
+ & > div {
+ flex: 2;
+ text-align: center;
+
+ & > div {
+ text-align: left;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ margin-bottom: 10px;
+ span {
+ width: 50%;
+ &:first-of-type {
+ width: 25%;
+ }
+ }
+ }
+ }
+ &:last-of-type {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+ &:hover .card-header {
+ color: #0098f5;
+ }
+ &:hover .stepNum {
+ border: 2px solid #0098f5;
+ color: #0098f5;
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
+}
+.el-card {
+ border: 0;
+}
+.el-input{
+ width: 100% !important;
+}
+::v-deep(.el-date-editor){
+ width: 100%;
+}
+.el-select{
+ width: 100%;
+}
+:deep(.el-cascader){
+ width: 100% !important;
+}
+</style>
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index ae41abf..d37f354 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -3,16 +3,16 @@
<div class="big-title" @click="goBack()">国泰新华智能巡检系统</div>
<div style="height: 20px;font-size: 14px;line-height: 20px; color: #00ffff; margin-top: 4px">{{ present }}</div>
<div class="btns">
-<!-- <div class="fullbtn" @click="onScreenfullClick">-->
-<!-- <div class="toFull">-->
-<!-- <i class="iconfont" :title="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>-->
+ <div class="fullbtn" @click="onScreenfullClick">
+ <div class="toFull">
+ <i class="iconfont" :title="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
<!-- <el-icon>-->
<!-- <FullScreen v-if="isScreenfull"/>-->
<!-- <Close v-else/>-->
<!-- </el-icon>-->
-<!-- </div>-->
-<!-- <div>全屏</div>-->
-<!-- </div>-->
+ </div>
+ <div>全屏</div>
+ </div>
<div class="backBtn" @click="goBack()">
<img src="../../../assets/loginPage/back-icon.png"/>
<div>退出</div>
@@ -20,6 +20,51 @@
</div>
<div class="blocks">
<div>
+ <div class="warning-part">
+ <div class="warn-tit">异常警报：</div>
+ <div class="warn-msg">
+ <div class="warn-item">
+ <div class="i-tit">
+ P-8240A 巡检异常！
+ </div>
+ <div>
+ 正常值：<span>8-10Mpa</span>
+ </div>
+ <div>
+ 巡检值：<span>12Mpa</span>
+ </div>
+ <div>
+ 已通知负责人：<span>黄公子</span>
+ </div>
+ <div>
+ 负责人电话：<span>15261806176</span>
+ </div>
+ <div>
+ 工单回执状态：<span>待响应</span>
+ </div>
+ </div>
+ <div class="warn-item">
+ <div class="i-tit">
+ P-8240A 巡检异常！
+ </div>
+ <div>
+ 正常值：<span>8-10Mpa</span>
+ </div>
+ <div>
+ 巡检值：<span>12Mpa</span>
+ </div>
+ <div>
+ 已通知负责人：<span>黄公子</span>
+ </div>
+ <div>
+ 负责人电话：<span>15261806176</span>
+ </div>
+ <div>
+ 工单回执状态：<span>待响应</span>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="star-pic">
<dv-decoration-12 scanDur="5" haloDur="4" class="scan"/>
<div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div>
@@ -136,7 +181,7 @@
let curId = route.query.id
state.id = curId.toString()
getLine(state.id)
- getUrl(state.id)
+ // getUrl(state.id)
});
onActivated(()=>{
onScreenfullClick();
@@ -158,9 +203,7 @@
// 实例化socket
let uid = userInfos.value.uid.toString()
var url = state.path + uid + '*' + id;
- console.log(url,'url',uid,'uid')
url = url.replace('https', 'ws').replace('http', 'ws');
- console.log(url, '获取地址');
state.socket = new WebSocket(url);
// 监听socket连接
state.socket.onopen = () => {
@@ -173,7 +216,6 @@
// 监听socket消息
state.socket.onmessage = (msg) => {
if (msg.data === '连接成功') return;
- console.log(msg.data,'data')
userInfos.value.dataList = JSON.parse(msg.data);
};
}
@@ -1360,6 +1402,48 @@
}
}
}
+ .warning-part{
+ position: absolute;
+ width: calc((100vw - 120px) / 7);
+ height: calc((100vw - 120px) / 7);
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid #36fcfc;
+ z-index: 99999;
+ top: 100px;
+ right: 60px;
+ padding: 10px;
+ color: rgb(0, 255, 255);
+
+ .warn-tit{
+ height: 26px;
+ padding-bottom: 5px;
+ font-weight: bolder;
+ border-bottom: 1px solid rgb(0, 255, 255);
+ }
+ .warn-msg{
+ width: 100%;
+ margin-top: 10px;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ overflow-y: scroll;
+ scrollbar-width: none; /* firefox */
+ -ms-overflow-style: none; /* IE 10+ */
+
+ &::-webkit-scrollbar {
+ display: none; /* Chrome Safari */
+ }
+ .warn-item{
+ padding: 0 0 10px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid rgb(0, 255, 255);
+
+ &:last-of-type{
+ border-bottom: none;
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
.star-pic {
position: absolute;
width: calc((100vw - 120px) / 7);
diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index e7f696e..206a13f 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -70,6 +70,7 @@
:value="item.id"
/>
</el-select>
+ <el-button type="text" size="small">所有记录>></el-button>
</div>
</div>
<div class="chart">
@@ -80,7 +81,7 @@
<el-table-column property="operators" label="角色" align="center"/>
<el-table-column label="是否持证" align="center" width="180">
<template #default="scope">
- <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag>
+
</template>
</el-table-column>
</el-table>
@@ -94,7 +95,7 @@
<el-col :span="5" style="display:flex;align-items: center">
<span style="white-space: nowrap">作业类型：</span>
<div class="grid-content topInfo">
- <el-select v-model="searchWord">
+ <el-select v-model="searchWord" size="small">
<el-option
v-for="item in workType"
:key="item.id"
@@ -107,7 +108,7 @@
<el-col :span="5" style="display:flex;align-items: center">
<span style="white-space: nowrap">作业状态：</span>
<div class="grid-content topInfo">
- <el-select v-model="searchStatus">
+ <el-select v-model="searchStatus" size="small">
<el-option
v-for="item in workStatus"
:key="item.value"
@@ -120,7 +121,7 @@
<el-col :span="5" style="display:flex;align-items: center">
<span style="white-space: nowrap">作业部门：</span>
<div class="grid-content topInfo">
- <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
+ <el-cascader size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
</div>
</el-col>
<el-col :span="6" style="display:flex;align-items: center;">
@@ -128,6 +129,7 @@
<div class="grid-content topInfo">
<el-date-picker
v-model="searchDate"
+ size="small"
type="daterange"
unlink-panels
range-separator="至"
@@ -137,8 +139,8 @@
/>
</div>
</el-col>
- <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button>
- <el-button plain @click="clearSearch">重置</el-button>
+ <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
+ <el-button plain @click="clearSearch" size="small">重置</el-button>
</el-row>
<div class="main-card">
<el-row class="cardTop" style="justify-content: space-between">
@@ -497,7 +499,7 @@
xAxis: [
{
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
axisTick: {
alignWithLabel: true
}
diff --git a/src/views/system/video/component/videoDialog.vue b/src/views/system/video/component/videoDialog.vue
index c6729c7..1f20460 100644
--- a/src/views/system/video/component/videoDialog.vue
+++ b/src/views/system/video/component/videoDialog.vue
@@ -15,7 +15,7 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="所属部门" prop="bizDepId">
- <el-cascader v-model="videoForm.bizDepId" :options="departmentData" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable class="w100"> </el-cascader>
+ <el-cascader v-model="videoForm.bizDepId" :options="departmentData" :props="addProps" placeholder="请选择部门" :show-all-levels="false" clearable class="w100"> </el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -55,7 +55,8 @@
videoFormRules:{
},
- departmentData: Array<DeptData>
+ departmentData: Array<DeptData>;
+ addProps:{}
}
export default defineComponent({
@@ -78,6 +79,13 @@
bizDepId: [{ required: true, message: '请选择部门', trigger: 'change' }]
},
departmentData: [], // 部门数据
+ addProps:{
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName',
+ checkStrictly: true
+ }
});
// 打开弹窗
const openDialog = (type: string, value: any, departmentList: [], roleList: [], dutyList:[]) => {
--
Gitblit v1.9.2