Skip to content

I
inspection-pad-web
提交 c73a5a11 authored 作者: JaxBBLL's avatar JaxBBLL
浏览文件
操作

feat: add common comp

上级 d3cfa42a
隐藏空白字符变更
内嵌 并排
正在显示 包含 781 行增加 和 129 行删除
App.vue
浏览文件 @ c73a5a11
...@@ -11,7 +11,7 @@ import { ...@@ -11,7 +11,7 @@ import {
USER_FILE_NAME, USER_FILE_NAME,
} from "./utils/systemCofig"; } from "./utils/systemCofig";
import { Base64 } from "js-base64"; import { Base64 } from "js-base64";
import {differenceBy} from "lodash"; import { differenceBy } from "lodash";
import { readDirectoryData } from "@/utils/IoReadingAndWriting.js"; import { readDirectoryData } from "@/utils/IoReadingAndWriting.js";
export default { export default {
...@@ -65,15 +65,17 @@ export default { ...@@ -65,15 +65,17 @@ export default {
onHide: function () { onHide: function () {
// app关闭时将数据存储到本地缓存 // app关闭时将数据存储到本地缓存
uni.setStorageSync("now_user", this.$store.state.now_user); uni.setStorageSync("now_user", this.$store.state.now_user);
uni.setStorageSync("last_time", this.$store.state.now_user.LastSynchronizationTime); uni.setStorageSync(
"last_time",
this.$store.state.now_user.LastSynchronizationTime
);
// 清除store 数据 // 清除store 数据
this.$store.commit("SET_DARF_DATA", {}); this.$store.commit("SET_DARF_DATA", {});
this.$store.commit("SET_LOG_LIST", []); this.$store.commit("SET_LOG_LIST", []);
this.$store.commit("SET_ALL_DATA", []); this.$store.commit("SET_ALL_DATA", []);
}, },
onUnload() { onUnload() {},
},
methods: { methods: {
/** /**
* 第一步: 检查目录是否存在，如果没有就创建 * 第一步: 检查目录是否存在，如果没有就创建
...@@ -115,17 +117,16 @@ export default { ...@@ -115,17 +117,16 @@ export default {
}); });
}) })
.then(async (res) => { .then(async (res) => {
// 获取文件数据 // 获取文件数据
let userData = Base64.decode(res); let userData = Base64.decode(res);
const diffUserList = await this.diffUserList(userData) const diffUserList = await this.diffUserList(userData);
if(diffUserList.length){ if (diffUserList.length) {
this.updateIpadUsetList([...USER_LiST,...diffUserList]) this.updateIpadUsetList([...USER_LiST, ...diffUserList]);
userData = JSON.stringify([...USER_LiST,...diffUserList]) userData = JSON.stringify([...USER_LiST, ...diffUserList]);
} }
uni.setStorage({ uni.setStorage({
key: "user_data", key: "user_data",
data: userData, data: userData,
...@@ -143,31 +144,28 @@ export default { ...@@ -143,31 +144,28 @@ export default {
}); });
}, },
// 比较代码中的用户列表 和 ipad中存储用户的 差异 // 比较代码中的用户列表 和 ipad中存储用户的 差异
async diffUserList(ipadUserList = []){ async diffUserList(ipadUserList = []) {
const temp = eval(ipadUserList) const temp = eval(ipadUserList);
const diffResult = differenceBy(USER_LiST, temp, "userId") const diffResult = differenceBy(USER_LiST, temp, "userId");
return diffResult return diffResult;
}, },
// 更新 ipad 用户信息 // 更新 ipad 用户信息
updateIpadUsetList(tempPersonList){ updateIpadUsetList(tempPersonList) {
const temp = JSON.stringify(tempPersonList); const temp = JSON.stringify(tempPersonList);
const fileContent = JSON.stringify(Base64.encode(temp)); const fileContent = JSON.stringify(Base64.encode(temp));
createFileWithPlusIO( createFileWithPlusIO(SYNCHRONIZE_DATA_PAD, USER_FILE_NAME, fileContent);
SYNCHRONIZE_DATA_PAD, },
USER_FILE_NAME,
fileContent
)
}
}, },
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import "./common/atom.less";
@import "./common/base.less";
@import "./common/global.css"; @import "./common/global.css";
@import "~@/static/iconFont/iconfont.css"; @import "~@/static/iconFont/iconfont.css";
......
api/api.vue
浏览文件 @ c73a5a11
<template> <template>
<view> <view> sdd </view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {};
},
} methods: {},
}, };
methods: {
}
}
</script> </script>
<style> <style></style>
</style>
common/atom.less 0 → 100644
浏览文件 @ c73a5a11
// 定义基础变量
@base-spacing: 1px;
@font-sizes: "12" 12px, "14" 14px, "16" 16px, "18" 18px, "20" 20px,
"22" 22px, "24" 24px, "26" 26px, "28" 28px, "30" 30px;
@colors: "primary" #3774f6, "black" #000000, "white" #ffffff, "gray" #808080,
"blue" #007bff, "green" #28a745, "red" #dc3545;
// 生成边距类（递归mixin实现）
.margin-loop(@i) when (@i >=0) {
.m-@{i} {
margin: @base-spacing * @i;
}
.mt-@{i} {
margin-top: @base-spacing * @i;
}
.mr-@{i} {
margin-right: @base-spacing * @i;
}
.mb-@{i} {
margin-bottom: @base-spacing * @i;
}
.ml-@{i} {
margin-left: @base-spacing * @i;
}
.my-@{i} {
margin-top: @base-spacing * @i;
margin-bottom: @base-spacing * @i;
}
.mx-@{i} {
margin-left: @base-spacing * @i;
margin-right: @base-spacing * @i;
}
.margin-loop(@i - 1);
}
.margin-loop(36);
// 生成padding类
.padding-loop(@i) when (@i >=0) {
.p-@{i} {
padding: @base-spacing * @i;
}
.pt-@{i} {
padding-top: @base-spacing * @i;
}
.pr-@{i} {
padding-right: @base-spacing * @i;
}
.pb-@{i} {
padding-bottom: @base-spacing * @i;
}
.pl-@{i} {
padding-left: @base-spacing * @i;
}
.py-@{i} {
padding-top: @base-spacing * @i;
padding-bottom: @base-spacing * @i;
}
.px-@{i} {
padding-left: @base-spacing * @i;
padding-right: @base-spacing * @i;
}
.padding-loop(@i - 1);
}
.padding-loop(36);
// 生成字体尺寸类
each(@font-sizes, {
.text-@{value} {
font-size: extract(@value, 2);
}
});
// 生成颜色类
each(@colors, {
@name: extract(@value, 1);
@color: extract(@value, 2);
.text-@{name} {
color: @color;
}
.bg-@{name} {
background-color: @color;
}
});
// Flex布局类
.flex {
display: flex;
}
// 主轴对齐
.justify {
&-start {
justify-content: flex-start;
}
&-end {
justify-content: flex-end;
}
&-center {
justify-content: center;
}
&-between {
justify-content: space-between;
}
&-around {
justify-content: space-around;
}
}
// 交叉轴对齐
.items {
&-start {
align-items: flex-start;
}
&-end {
align-items: flex-end;
}
&-center {
align-items: center;
}
&-stretch {
align-items: stretch;
}
}
// 排列方向
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
// 定位类
.relative {
position: relative;
}
.absolute {
position: absolute;
}
// 宽度类
.w-full {
width: 100%;
}
\ No newline at end of file
common/base.less 0 → 100644
浏览文件 @ c73a5a11
.v-btn {
display: inline-block;
height: 36px;
line-height: 36px;
box-shadow: 0px 1px 4px 0px rgba(84, 116, 232, 0.16) !important;
/* 核心样式 */
border-radius: 2px !important;
background-color: #3774f6 !important;
color: #fff !important;
/* 伪元素处理（H5生效） */
&::after {
border: none !important;
}
/* 禁用态样式 */
&[disabled] {
background-color: #CCCCCC !important;
}
&.v-btn-default {
background-color: #fff !important;
color: #3774f6 !important;
}
&.v-btn-round {
border-radius: 20px !important;
}
&.v-btn-block {
display: block;
}
&.v-btn-large {
height: 48px;
line-height: 48px;
}
}
\ No newline at end of file
components/CommonDialog/index.vue 0 → 100644
浏览文件 @ c73a5a11
<template>
<view v-if="value" class="common-dialog">
<view class="common-dialog__content">
<slot name="header">
<view class="common-dialog__header">{{ title }}</view>
</slot>
<view class="common-dialog__body">
<slot></slot>
</view>
<view class="common-dialog__footer common-dialog__footer--with-shadow">
<slot name="footer"> </slot>
</view>
<view class="common-dialog__close">
<text
class="common-dialog__close-icon iconfont icon-shibai1"
@click="handleClose"
></text>
</view>
</view>
</view>
</template>
<script>
export default {
name: "CommonDialog",
model: {
prop: "value",
event: "input",
},
props: {
value: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
},
methods: {
handleClose() {
this.$emit("input", false);
this.$emit("close");
},
},
};
</script>
<style scoped lang="less">
/* 块级命名规范 */
.common-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 99999;
/* 元素命名规范（双下划线连接） */
&__content {
padding: 25.6px 19.2px;
width: 420px;
box-sizing: border-box;
background-image: linear-gradient(
-6deg,
#f9ffe7 0%,
#ffffff 12%,
#fcfeff 73%,
#ccf1ff 100%
);
border: 0.4px solid rgba(224, 224, 224, 1);
border-radius: 12px;
position: relative;
}
&__header {
font-size: 18px;
color: #000000;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px;
}
&__body {
font-size: 16px;
color: #000000;
text-align: center;
line-height: 24px;
font-weight: 400;
margin-bottom: 24px;
}
&__close {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
&-icon {
color: #fff;
font-size: 24px;
}
}
}
</style>
components/CommonRadio/index.vue 0 → 100644
浏览文件 @ c73a5a11
<template>
<radio-group class="radio-container" @change="handleChange">
<label
class="radio-item"
v-for="(item, index) in options"
:key="index"
:class="{ selected: value === item.value }"
>
<view class="radio-icon">
<view class="radio-inner"></view>
</view>
<text class="radio-label">{{ item.label }}</text>
<radio :value="item.value" :checked="value === item.value" hidden />
</label>
</radio-group>
</template>
<script>
export default {
name: "CommonRadio",
props: {
value: {
type: [String, Number],
default: "",
},
options: {
type: Array,
default: () => [
{ label: "正常", value: "normal" },
{ label: "异常", value: "abnormal" },
],
},
},
methods: {
handleChange(e) {
this.$emit("input", e.detail.value);
this.$emit("change", e.detail.value);
},
},
};
</script>
<style lang="less" scoped>
.radio-container {
display: flex;
gap: 16px;
padding: 16px;
}
.radio-item {
display: inline-block;
height: 36px;
line-height: 36px;
text-align: center;
min-width: 80px;
padding: 0 10px;
border-radius: 18px;
transition: all 0.3s ease;
background: #f2f2f2;
.radio-label {
font-size: 16px;
color: #000000;
font-weight: 400;
}
&.selected {
background: #3774f6;
.radio-label {
color: #ffffff;
}
}
/* 按压效果 */
&:active {
opacity: 0.9;
transform: scale(0.98);
}
}
</style>
components/CommonUpload/index.vue 0 → 100644
浏览文件 @ c73a5a11
<template>
<view class="upload-container">
<!-- 图片展示区域 -->
<view class="image-list">
<!-- 添加按钮 -->
<view
v-if="images.length < maxCount"
class="add-btn"
@click="chooseImage"
>
+
</view>
<view
v-for="(item, index) in images"
:key="index"
class="image-item"
@click="previewImage(index)"
>
<image :src="item" class="image" mode="aspectFill"></image>
<text class="delete-icon" @click.stop="deleteImage(index)">×</text>
</view>
</view>
<!-- 提示文字 -->
<view class="tip">
<slot name="tip">
请对检查项进行拍照留存（限{{
maxCount
}}张）。发现“异常、告警”时，需拍照留存。
</slot>
</view>
</view>
</template>
<script>
export default {
name: "CommonUpload",
props: {
value: {
type: Array,
default: () => [],
},
maxCount: {
type: Number,
default: 5, // 默认最多上传 5 张图片
},
sourceType: {
type: Array,
default: () => ["camera"], // 默认从相机拍摄
},
},
data() {
return {
images: this.value, // 绑定的图片数组
};
},
watch: {
value(newVal) {
this.images = newVal;
},
images(newVal) {
this.$emit("input", newVal); // 同步更新父组件绑定的数据
},
},
methods: {
// 选择图片
chooseImage() {
const count = this.maxCount - this.images.length; // 剩余可选图片数量
uni.chooseImage({
count: count,
sourceType: this.sourceType, // 使用传递的 sourceType
success: async (res) => {
const tempFilePaths = res.tempFilePaths;
for (const filePath of tempFilePaths) {
const base64 = await this.convertFileToBase64(filePath);
this.images.push(base64);
}
},
});
},
// 预览图片
previewImage(index) {
uni.previewImage({
current: index,
urls: this.images,
});
},
// 删除图片
deleteImage(index) {
this.images.splice(index, 1);
},
// 转换文件为 Base64
convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
(entry) => {
entry.file(
(file) => {
const reader = new plus.io.FileReader();
reader.onloadend = (evt) => {
resolve(evt.target.result); // 返回 Base64 数据
};
reader.readAsDataURL(file); // 读取文件并转换为 Base64
},
(error) => {
reject("获取文件对象失败：" + error.message);
}
);
},
(error) => {
reject("解析文件路径失败：" + error.message);
}
);
});
},
},
};
</script>
<style scoped>
.upload-container {
padding: 10px;
}
.image-list {
display: flex;
flex-wrap: wrap;
}
.image-item {
position: relative;
width: 80px;
height: 80px;
margin-right: 10px;
margin-bottom: 10px;
}
.image {
width: 100%;
height: 100%;
border-radius: 5px;
}
.delete-icon {
position: absolute;
top: -10px;
right: -10px;
font-size: 20px;
color: red;
background-color: white;
border-radius: 50%;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
}
.add-btn {
width: 80px;
height: 80px;
border: 1px dashed #ccc;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #ccc;
cursor: pointer;
margin-right: 10px;
}
.tip {
font-size: 12px;
color: #999;
margin-top: 5px;
}
</style>
pages.json
浏览文件 @ c73a5a11
...@@ -89,11 +89,16 @@ ...@@ -89,11 +89,16 @@
} }
}, },
{ {
"path" : "api/api", "path": "api/api",
"style" : "style": {
{ "navigationBarTitleText": ""
"navigationBarTitleText" : "" }
} },
{
"path": "pages/test/index",
"style": {
"navigationBarTitleText": ""
}
} }
], ],
"globalStyle": { "globalStyle": {
......
pages/home/home.vue
浏览文件 @ c73a5a11
<template> <template>
<!-- 首页 --> <!-- 首页 -->
<view class="container"> <view class="container">
<navigator url="/pages/test/index" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<!-- 第一个模块 --> <!-- 第一个模块 -->
<view class="header"> <view class="header">
<view class="title">杭州内网监管在线-运维在线</view> <view class="title">杭州内网监管在线-运维在线</view>
...@@ -71,89 +74,88 @@ ...@@ -71,89 +74,88 @@
<script> <script>
export default { export default {
data() { data() {
return { return {
cards: [{ cards: [
image: '../../static/img/jf.png', {
text: '机房巡检', image: "../../static/img/jf.png",
url:"/pages/inspectionContent/inspectionContentList?backValue=home" text: "机房巡检",
}, url: "/pages/inspectionContent/inspectionContentList?backValue=home",
{ },
image: '../../static/img/jd.png', {
text: '井道巡检', image: "../../static/img/jd.png",
url:"/pages/shaftInspection/shaftInspectionList?backValue=home" text: "井道巡检",
}, url: "/pages/shaftInspection/shaftInspectionList?backValue=home",
{ },
image: '../../static/img/sj.png', {
text: '设备上架', image: "../../static/img/sj.png",
url: "/pages/listingManagement/index?backValue=home" text: "设备上架",
} url: "/pages/listingManagement/index?backValue=home",
], },
userName: this.$store.state.now_user.user, ],
}; userName: this.$store.state.now_user.user,
}, };
computed: { },
isAdmin() { computed: {
return this.$store.state.now_user.isAdmin; isAdmin() {
}, return this.$store.state.now_user.isAdmin;
}, },
methods: { },
// 修改密码 methods: {
updatePassword() { // 修改密码
uni.navigateTo({ updatePassword() {
url: "/pages/index/editPd", uni.navigateTo({
}); url: "/pages/index/editPd",
}, });
//退出 },
logOut() { //退出
this.$refs.inputDialog2.open(); logOut() {
}, this.$refs.inputDialog2.open();
// 查看操作日志 },
lookLog() { // 查看操作日志
uni.navigateTo({ lookLog() {
url: "/pages/index/operLog", uni.navigateTo({
}); url: "/pages/index/operLog",
}, });
// 三模块卡片跳转页面 },
toList(url){ // 三模块卡片跳转页面
uni.navigateTo({ toList(url) {
url: url, uni.navigateTo({
}); url: url,
});
}, },
// 巡检管理 // 巡检管理
toInspectionManagement() { toInspectionManagement() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/inspectionManagement/index?backValue=home", url: "/pages/inspectionManagement/index?backValue=home",
}); });
}, },
toListingManagement() { toListingManagement() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/listingManagement/index?backValue=home", url: "/pages/listingManagement/index?backValue=home",
}); });
}, },
// 井道巡检 // 井道巡检
toShaftInspection() { toShaftInspection() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew?backValue=home", url: "/pages/shaftInspection/shaftInspectionNew?backValue=home",
}); });
}, },
//退出--弹出对话框 //退出--弹出对话框
dialogInputConfirm2() { dialogInputConfirm2() {
uni.redirectTo({ uni.redirectTo({
url: "/pages/login/login", url: "/pages/login/login",
success: () => { success: () => {
// uni.clearStorage(); //测试将所有缓存清除 // uni.clearStorage(); //测试将所有缓存清除
uni.setStorageSync("now_user", this.$store.state.now_user); uni.setStorageSync("now_user", this.$store.state.now_user);
uni.setStorageSync( uni.setStorageSync(
"last_time", "last_time",
this.$store.state.now_user.LastSynchronizationTime || "" this.$store.state.now_user.LastSynchronizationTime || ""
); );
}, },
}); });
}, },
},
}
}; };
</script> </script>
......
pages/inspectionContent/components/dczt.vue
浏览文件 @ c73a5a11
...@@ -25,13 +25,13 @@ ...@@ -25,13 +25,13 @@
{{ item.lableArr[1] }} {{ item.lableArr[1] }}
</view> </view </view> </view
><input ><input
v-if="'value' in item && item.inspectionResult === 1" v-if="'value' in item"
class="input" class="input"
v-model="item.value" v-model="item.value"
type="text" type="text"
placeholder="请输入" placeholder="请输入"
maxlength="3" maxlength="3"
/>{{ item.inspectionResult === 1 ? item.unit : "" }} />{{ item.unit }}
</view> </view>
<template v-if="item.inspectionResult === 1"> <template v-if="item.inspectionResult === 1">
<view v-if="'conclusion' in item" class="form-item"> <view v-if="'conclusion' in item" class="form-item">
......
pages/test/index.vue 0 → 100644
浏览文件 @ c73a5a11
<template>
<view>
<navigator url="/pages/home/home" hover-class="navigator-hover">
<button type="default">返回首页</button>
</navigator>
<view class="title">button样式</view>
<view>
<button class="v-btn v-btn-default">default</button>
<button class="v-btn">primary</button>
<button class="v-btn v-btn-round">round</button>
<button class="v-btn v-btn-round v-btn-block">block</button>
</view>
<view class="title">radio组件</view>
<CommonRadio
v-model="selectedValue"
:options="[
{ label: '正常', value: 'normal' },
{ label: '异常', value: 'abnormal' },
]"
@change="onRadioChange"
></CommonRadio>
<view class="title">公共弹窗</view>
<button class="v-btn" @click="dialogVisible = true">打开弹窗</button>
<CommonDialog v-model="dialogVisible" title="弹窗标题">
<div>这是公共弹窗的内容</div>
<template #footer>
<button class="v-btn v-btn-default" @click="dialogVisible = false">
返回
</button>
<button class="v-btn ml-10">确认</button>
</template>
</CommonDialog>
<view class="title">上传组件</view>
<CommonUpload v-model="imageList" :max-count="5"> </CommonUpload>
</view>
</template>
<script>
import CommonRadio from "@/components/CommonRadio/index.vue";
import CommonDialog from "@/components/CommonDialog/index.vue";
import CommonUpload from "@/components/CommonUpload/index.vue";
export default {
components: {
CommonRadio,
CommonDialog,
CommonUpload,
},
data() {
return {
selectedValue: "normal",
dialogVisible: false,
imageList: [], // 存储 base64 图片的数组
};
},
methods: {
onRadioChange(value) {
console.log("当前选中值:", value);
},
onOpenDialog() {
this.dialogVisible = true;
},
},
};
</script>
<style lang="less" scoped>
.title {
padding: 10px;
font-size: 18px;
&::before {
display: inline-block;
content: "";
width: 6px;
height: 14px;
background-color: #007bff;
margin-right: 6px;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论