index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
  3. <view class="xunjian-plan-container">
  4. <!-- 日历组件 -->
  5. <oa-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" :currentDate="currentDateList" />
  6. <!-- 分段器组件 -->
  7. <view class="app-subsection">
  8. <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" :activeColor="proxy.$settingStore.themeColor.color" @change="tabPositionChange" style="width: 100%"></u-subsection>
  9. </view>
  10. <!-- 内容 -->
  11. <oa-timeLine v-if="activities.length > 0" :fontColor="proxy.$settingStore.themeColor.color" :sort="activitiesSort" @activitiesSortChange="activitiesSortChange">
  12. <oa-timeLine-item
  13. v-for="(ac, index) in activities"
  14. :key="index"
  15. :titleValue="ac.planName"
  16. :timeValue="ac.timestamp"
  17. :iconColor="proxy.$settingStore.themeColor.color"
  18. v-show="tabPosition == 0"
  19. >
  20. <view style="display: flex" v-if="ac.planStatus == 1">
  21. <view>
  22. <view style="margin-bottom: 15px">巡检任务执行中,还需完成 {{ ac.undetectedSiteCount }}个 </view>
  23. <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击巡检 </view>
  24. </view>
  25. <view style="margin: auto"></view>
  26. <view style="display: flex">
  27. <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
  28. </view>
  29. </view>
  30. <view style="display: flex" v-if="ac.planStatus == 2">
  31. <view>
  32. <view style="margin-bottom: 15px">巡检任务结束</view>
  33. <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击查看 </view>
  34. </view>
  35. <view style="margin: auto"></view>
  36. <view style="display: flex">
  37. <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
  38. </view>
  39. </view>
  40. <view style="display: flex" v-if="ac.planStatus == 3">
  41. <view>
  42. <view style="margin-bottom: 15px">巡检任务结束</view>
  43. <view>
  44. <span style="margin-right: 20px">
  45. 合格:
  46. <span style="color: #00cdac">
  47. {{ ac.patrolledSiteCount }}
  48. </span>
  49. </span>
  50. <span>
  51. 漏检:
  52. <span style="color: #f07d28">
  53. {{ ac.undetectedSiteCount }}
  54. </span>
  55. </span>
  56. </view>
  57. </view>
  58. <view style="margin: auto"></view>
  59. <view style="display: flex">
  60. <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
  61. </view>
  62. </view>
  63. </oa-timeLine-item>
  64. <oa-timeLine-item
  65. v-for="(ac, index) in activities"
  66. :key="index"
  67. :titleValue="ac.areaName"
  68. :timeValue="ac.createTime"
  69. :iconColor="proxy.$settingStore.themeColor.color"
  70. v-show="tabPosition == 1"
  71. >
  72. <view style="display: flex">
  73. <view>
  74. <view>已检查{{ ac.contentCount }}项内容</view>
  75. <br />
  76. <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击查看 </view>
  77. </view>
  78. <view style="margin: auto"></view>
  79. <view style="display: flex; font-size: 15px; color: #30bb00">
  80. <view style="margin: auto">
  81. {{ ac.siteStatus == 0 ? "未定位" : "已定位" }}
  82. </view>
  83. </view>
  84. </view>
  85. </oa-timeLine-item>
  86. </oa-timeLine>
  87. <view id="planTimeline" style="text-align: center; color: #bdbdbd; font-size: 14px" v-else> 暂无数据 </view>
  88. </view>
  89. <view class="app-scan-fixed">
  90. <u-image width="67" height="67" src="@/static/images/add.png" shape="circle" @click="scanClick()"></u-image>
  91. </view>
  92. <drawer v-if="scanArray.length > 0" :scanArray="scanArray" :scanBool="scanBool" @scanClose="scanClose"></drawer>
  93. </scroll-view>
  94. </template>
  95. <script setup>
  96. import drawer from "./components/drawer.vue";
  97. import { onLoad, onShow, onLaunch } from "@dcloudio/uni-app";
  98. import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
  99. import { publicStores, xunJianStores } from "@/store/modules/index";
  100. import { recordList, recordOption, planList, patrolInspectionPlan, appPlanStatistics } from "@/api/business/mhxf/xunJian/plan.js";
  101. const publicStore = publicStores(); //全局公共Store
  102. const xunJianStore = xunJianStores(); //全局变量值Store
  103. const { proxy } = getCurrentInstance();
  104. const info = ref({
  105. lunar: true,
  106. range: true,
  107. insert: false,
  108. selected: [],
  109. });
  110. /**
  111. * @日期change事件
  112. */
  113. function change(e) {
  114. // console.log("change 返回:", e);
  115. currentDate.value = e.fulldate;
  116. currentApi();
  117. activitiesApi();
  118. }
  119. /**
  120. * @月份切换事件
  121. */
  122. function monthSwitch(e) {
  123. // console.log("monthSwitchs 返回:", e);
  124. }
  125. /**
  126. * @点击巡检
  127. * @点击事件
  128. */
  129. function reportClick(obj) {
  130. if (tabPosition.value == 0) {
  131. xunJianStore.planSonId = obj.id;
  132. uni.navigateTo({
  133. url: "/pages/business/mhxf/xunJian/plan/components/report",
  134. });
  135. } else if (tabPosition.value == 1) {
  136. recordList({
  137. siteId: obj.id,
  138. planSonId: obj.planSonId,
  139. }).then((res) => {
  140. if (res.status == "SUCCESS") {
  141. if (res.data.length > 0) {
  142. recordOption({
  143. siteId: res.data[0].siteId,
  144. recordId: res.data[0].id,
  145. }).then((res1) => {
  146. res.data[0].inspectionStatus = 2;
  147. res.data[0].pictureUrl = obj.pictureUrl;
  148. xunJianStore.contentArray = {
  149. contentList: [res1.data.contentList],
  150. siteList: res.data[0],
  151. };
  152. xunJianStore.siteId = undefined;
  153. xunJianStore.siteNubmber = undefined;
  154. uni.navigateTo({
  155. url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
  156. });
  157. });
  158. }
  159. } else {
  160. }
  161. });
  162. }
  163. }
  164. /**
  165. * @扫一扫
  166. * @点击事件
  167. */
  168. const scanArray = ref([]);
  169. const scanBool = ref(false);
  170. function scanClick() {
  171. uni.scanCode({
  172. success: async (e) => {
  173. uni.showToast({
  174. title: "扫码成功",
  175. icon: "none",
  176. });
  177. xunJianStore.inspectionStatus = 1;
  178. planList({
  179. siteNubmber: e.result,
  180. }).then((res) => {
  181. if (res.status == "SUCCESS") {
  182. if (res.data.length > 0) {
  183. scanArray.value = res.data;
  184. scanBool.value = true;
  185. } else {
  186. uni.showToast({
  187. title: "此点位下暂无数据,请切换点位重试!",
  188. icon: "none",
  189. });
  190. }
  191. } else {
  192. }
  193. });
  194. },
  195. fail: (err) => {
  196. uni.showToast({
  197. title: "扫码失败",
  198. icon: "none",
  199. });
  200. console.log("扫码失败", err);
  201. },
  202. complete: () => {
  203. // uni.showToast({
  204. // title: "扫码结束",
  205. // icon: "none",
  206. // });
  207. console.log("扫码结束");
  208. },
  209. });
  210. }
  211. /**
  212. * @抽屉emit
  213. * @关闭事件
  214. */
  215. function scanClose(flag) {
  216. scanBool.value = flag;
  217. }
  218. /**
  219. * @巡检任务
  220. * @巡检记录
  221. * @api接口请求
  222. */
  223. const activities = ref([]);
  224. function activitiesApi() {
  225. activities.value = [];
  226. if (tabPosition.value == 0) {
  227. patrolInspectionPlan({
  228. currentDate: currentDate.value,
  229. sort: activitiesSort.value,
  230. }).then((res) => {
  231. if (res.status == "SUCCESS") {
  232. res.data.forEach((el) => {
  233. activities.value.push({
  234. id: el.id,
  235. planName: el.planName,
  236. timestamp:
  237. (el.startTime == null || el.startTime == "" ? "" : el.startTime.split(":")[0] + ":" + el.startTime.split(":")[1] + "~") +
  238. (el.endTime == null || el.endTime == "" ? "" : el.endTime.split(":")[0] + ":" + el.endTime.split(":")[1]),
  239. planStatus: el.planStatus,
  240. completion: el.completion,
  241. patrolledSiteCount: el.patrolledSiteCount,
  242. undetectedSiteCount: el.undetectedSiteCount,
  243. });
  244. });
  245. } else {
  246. }
  247. });
  248. } else if (tabPosition.value == 1) {
  249. recordList({
  250. currentDate: currentDate.value,
  251. sort: activitiesSort.value,
  252. }).then((res) => {
  253. if (res.status == "SUCCESS") {
  254. res.data.forEach((el) => {
  255. activities.value.push({
  256. areaName: el.areaName,
  257. siteName: el.siteName,
  258. contentCount: el.contentCount,
  259. createTime: el.createTime.replace("T", " "),
  260. siteStatus: el.siteStatus,
  261. });
  262. });
  263. } else {
  264. }
  265. });
  266. }
  267. }
  268. /**
  269. * @统计
  270. * @api接口请求
  271. */
  272. const currentDate = ref(publicStore.getDate().year + "-" + publicStore.getDate().month + "-" + publicStore.getDate().dates); //统计时间数据存储
  273. const currentDatevalue = ref(new Date());
  274. const currentDateList = ref({}); //统计list数据存储
  275. function currentApi() {
  276. appPlanStatistics({
  277. currentDate: currentDate.value,
  278. }).then((res) => {
  279. if (res.status == "SUCCESS") {
  280. currentDateList.value = res.data;
  281. } else {
  282. }
  283. });
  284. }
  285. /**
  286. * @排序按钮
  287. */
  288. const activitiesSort = ref("DESC");
  289. function activitiesSortChange(val) {
  290. activitiesSort.value = val;
  291. activitiesApi();
  292. }
  293. /**
  294. * @tabs切换change事件
  295. */
  296. const list = ref(["巡检任务", "巡检记录"]);
  297. const tabPosition = ref(xunJianStore.planTabs);
  298. function tabPositionChange(index) {
  299. tabPosition.value = index;
  300. activitiesApi();
  301. }
  302. onLoad((options) => {
  303. currentApi();
  304. activitiesApi();
  305. // 从详情页返回该页面的获取数据
  306. uni.$on("planSelect", () => {
  307. currentApi();
  308. activitiesApi();
  309. });
  310. });
  311. onShow(() => {
  312. //调用系统主题颜色
  313. proxy.$settingStore.systemThemeColor([1]);
  314. });
  315. onMounted(() => {});
  316. </script>
  317. <style lang="scss" scoped>
  318. .is-selected {
  319. color: #1989fa;
  320. }
  321. .xunjian-plan-container {
  322. .app-subsection {
  323. display: flex;
  324. margin: 10px;
  325. padding: 10px 5rem;
  326. }
  327. }
  328. </style>