Skip to content

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

feat: add common comp

上级 d3cfa42a
显示空白字符变更
内嵌 并排
正在显示 包含 707 行增加 和 55 行删除
App.vue
浏览文件 @ c73a5a11
......@@ -11,7 +11,7 @@ import {
USER_FILE_NAME,
} from "./utils/systemCofig";
import { Base64 } from "js-base64";
import {differenceBy} from "lodash";
import { differenceBy } from "lodash";
import { readDirectoryData } from "@/utils/IoReadingAndWriting.js";
export default {
......@@ -65,15 +65,17 @@ export default {
onHide: function () {
// app关闭时将数据存储到本地缓存
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 数据
this.$store.commit("SET_DARF_DATA", {});
this.$store.commit("SET_LOG_LIST", []);
this.$store.commit("SET_ALL_DATA", []);
},
onUnload() {
},
onUnload() {},
methods: {
/**
* 第一步: 检查目录是否存在，如果没有就创建
......@@ -115,15 +117,14 @@ export default {
});
})
.then(async (res) => {
// 获取文件数据
let userData = Base64.decode(res);
const diffUserList = await this.diffUserList(userData)
if(diffUserList.length){
this.updateIpadUsetList([...USER_LiST,...diffUserList])
const diffUserList = await this.diffUserList(userData);
if (diffUserList.length) {
this.updateIpadUsetList([...USER_LiST, ...diffUserList]);
userData = JSON.stringify([...USER_LiST,...diffUserList])
userData = JSON.stringify([...USER_LiST, ...diffUserList]);
}
uni.setStorage({
......@@ -144,30 +145,27 @@ export default {
},
// 比较代码中的用户列表 和 ipad中存储用户的 差异
async diffUserList(ipadUserList = []){
const temp = eval(ipadUserList)
const diffResult = differenceBy(USER_LiST, temp, "userId")
async diffUserList(ipadUserList = []) {
const temp = eval(ipadUserList);
const diffResult = differenceBy(USER_LiST, temp, "userId");
return diffResult
return diffResult;
},
// 更新 ipad 用户信息
updateIpadUsetList(tempPersonList){
updateIpadUsetList(tempPersonList) {
const temp = JSON.stringify(tempPersonList);
const fileContent = JSON.stringify(Base64.encode(temp));
createFileWithPlusIO(
SYNCHRONIZE_DATA_PAD,
USER_FILE_NAME,
fileContent
)
}
createFileWithPlusIO(SYNCHRONIZE_DATA_PAD, USER_FILE_NAME, fileContent);
},
},
};
</script>
<style lang="less">
@import "./common/atom.less";
@import "./common/base.less";
@import "./common/global.css";
@import "~@/static/iconFont/iconfont.css";
......
api/api.vue
浏览文件 @ c73a5a11
<template>
<view>
</view>
<view> sdd </view>
</template>
<script>
export default {
export default {
data() {
return {
}
return {};
},
methods: {
}
}
methods: {},
};
</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,10 +89,15 @@
}
},
{
"path" : "api/api",
"style" :
"path": "api/api",
"style": {
"navigationBarTitleText": ""
}
},
{
"navigationBarTitleText" : ""
"path": "pages/test/index",
"style": {
"navigationBarTitleText": ""
}
}
],
......
pages/home/home.vue
浏览文件 @ c73a5a11
<template>
<!-- 首页 -->
<view class="container">
<navigator url="/pages/test/index" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<!-- 第一个模块 -->
<view class="header">
<view class="title">杭州内网监管在线-运维在线</view>
......@@ -73,21 +76,22 @@
export default {
data() {
return {
cards: [{
image: '../../static/img/jf.png',
text: '机房巡检',
url:"/pages/inspectionContent/inspectionContentList?backValue=home"
cards: [
{
image: "../../static/img/jf.png",
text: "机房巡检",
url: "/pages/inspectionContent/inspectionContentList?backValue=home",
},
{
image: '../../static/img/jd.png',
text: '井道巡检',
url:"/pages/shaftInspection/shaftInspectionList?backValue=home"
image: "../../static/img/jd.png",
text: "井道巡检",
url: "/pages/shaftInspection/shaftInspectionList?backValue=home",
},
{
image: '../../static/img/sj.png',
text: '设备上架',
url: "/pages/listingManagement/index?backValue=home"
}
image: "../../static/img/sj.png",
text: "设备上架",
url: "/pages/listingManagement/index?backValue=home",
},
],
userName: this.$store.state.now_user.user,
};
......@@ -115,11 +119,10 @@ export default {
});
},
// 三模块卡片跳转页面
toList(url){
toList(url) {
uni.navigateTo({
url: url,
});
},
// 巡检管理
toInspectionManagement() {
......@@ -152,8 +155,7 @@ export default {
},
});
},
}
},
};
</script>
......
pages/inspectionContent/components/dczt.vue
浏览文件 @ c73a5a11
......@@ -25,13 +25,13 @@
{{ item.lableArr[1] }}
</view> </view
><input
v-if="'value' in item && item.inspectionResult === 1"
v-if="'value' in item"
class="input"
v-model="item.value"
type="text"
placeholder="请输入"
maxlength="3"
/>{{ item.inspectionResult === 1 ? item.unit : "" }}
/>{{ item.unit }}
</view>
<template v-if="item.inspectionResult === 1">
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论