(*)首页图表解决冲突

2 years ago · bf591016b1
10 changed files with 174 additions and 60 deletions
--- a/api/app/lib/controllers/pointDeploy/index.js
+++ b/api/app/lib/controllers/pointDeploy/index.js
@ -126,7 +126,7 @@ async function getProjectPoints(ctx) {
        const projectId = ctx.params.projectId;
        const models = ctx.fs.dc.models;
        rslt = await models.Point.findAll({
-            attributes: ['id', 'name'],
+            attributes: ['id', 'name', 'equipmentNo', 'equipmentModel'],
            where: { projectId: projectId }
        })
        ctx.status = 200;
--- a/api/app/lib/models/patrol_record_issue_handle.js
+++ b/api/app/lib/models/patrol_record_issue_handle.js
@ -208,7 +208,7 @@ module.exports = dc => {
      type: DataTypes.DECIMAL(11, 2),
      allowNull: true,
      defaultValue: null,
-      comment: '成本',
+      comment: '成本（元）',
      primaryKey: false,
      field: "cost",
      autoIncrement: false
--- a/script/1.0.5/schema/3.update_patrol_record_issue_handle.sql
+++ b/script/1.0.5/schema/3.update_patrol_record_issue_handle.sql
@ -1,4 +1,4 @@
 ALTER TABLE "public"."patrol_record_issue_handle" 
  ADD COLUMN "cost" decimal(11,2);

-COMMENT ON COLUMN "public"."patrol_record_issue_handle"."cost" IS '成本';
+COMMENT ON COLUMN "public"."patrol_record_issue_handle"."cost" IS '成本（元）';
--- a/weapp/package/pointsStatus/pointsStatus.js
+++ b/weapp/package/pointsStatus/pointsStatus.js
@ -1,18 +1,66 @@
 // package/pointsStatus/pointsStatus.js
+import { getProjectGraph, getDeployPoints } from "../../utils/getApiUrl";
+import { Request } from "../../common";
+
 Page({

  /**
   * 页面的初始数据
   */
  data: {
+    imgUrl: getApp().globalData.imgUrl,
+    image: '',
+    allPoints: [],
+    setedPoints: [],
+  },
+
+  getData(projectId) {
+    const that = this;
+    wx.showLoading({ title: '加载中...' });
+    Request.get(getProjectGraph(projectId)).then(res => {
+      if (res) {
+        Request.get(getDeployPoints(res.id)).then(pointsRes => {
+          that.setData({
+            image: res.graph,
+            allPoints: pointsRes.allPoints,
+            setedPoints: pointsRes.setedPoints.map(p => ({
+              ...p,
+              position: JSON.parse(p.position),
+              pointInfo: pointsRes.allPoints.find(a => a.id === p.pointId),
+            })),
+          })
+        })
+      } else {
+        // 未布设
+      }
+      wx.hideLoading()
+    })
+  },

+  calcTooltip(e) {
+    const pointNodeId = e.currentTarget.id;
+    const pointId = e.currentTarget.dataset.id;
+    const windowWidth = wx.getSystemInfoSync().windowWidth;
+    const query = this.createSelectorQuery().in(this);
+    query.select('#' + pointNodeId).boundingClientRect(data => {
+      const sub = windowWidth - data.left < 100 ? 100 - (windowWidth - data.left) : 0;
+      const nextSetedPoints = this.data.setedPoints.map(p => {
+        if (p.id == pointId) {
+          p.sub = sub;
+          p.show = !p.show;
+        }
+        return p;
+      })
+      this.setData({ setedPoints: nextSetedPoints })
+    }).exec()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
-    console.log(options, 'options')
+    const { projectId } = options;
+    this.getData(projectId);
  },

  /**
--- a/weapp/package/pointsStatus/pointsStatus.json
+++ b/weapp/package/pointsStatus/pointsStatus.json
@ -1,3 +1,9 @@
 {
-  "usingComponents": {}
+  "navigationBarBackgroundColor": "#1979ff",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "点位状态",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "van-empty": "@vant/weapp/empty/index"
+  }
 }
--- a/weapp/package/pointsStatus/pointsStatus.wxml
+++ b/weapp/package/pointsStatus/pointsStatus.wxml
@ -1,2 +1,25 @@
-<!--package/pointsStatus/pointsStatus.wxml-->
-<text>package/pointsStatus/pointsStatus.wxml</text>
+<!-- package/pointsStatus/pointsStatus.wxml -->
+<view wx:if="{{image}}" class="image-box">
+    <image src="{{imgUrl + image}}" class="image"></image>
+    <view wx:for="{{setedPoints}}">
+        <image 
+            src="/images/circle.png" 
+            id="{{'point' + item.id}}" 
+            data-id="{{item.id}}" 
+            class="point" 
+            style="left:{{(item.position.relativeX * 100) + '%'}}; top:{{(item.position.relativeY * 100) + '%'}}"
+            bind:tap="calcTooltip"
+        ></image>
+        <view 
+            wx:if="{{item.show}}"
+            class="tooltip" 
+            style="left:calc({{(item.position.relativeX * 100) + '%'}} - {{item.sub}}px); top:calc({{(item.position.relativeY * 100) + '%'}} + 10px);"
+        >
+            <view>设备编号：{{item.pointInfo.equipmentNo || '--'}}</view>
+            <view>设备型号：{{item.pointInfo.equipmentModel || '--'}}</view>
+            <view>设备状态：正常</view>
+        </view>
+    </view>
+</view>
+<van-empty wx:else description="暂无布设图" />
+<view id="dddd" class="fixed-selector">结构物介绍</view>
--- a/weapp/package/pointsStatus/pointsStatus.wxss
+++ b/weapp/package/pointsStatus/pointsStatus.wxss
@ -1 +1,23 @@
-/* package/pointsStatus/pointsStatus.wxss */
+/* package/pointsStatus/pointsStatus.wxss */
+.image-box {
+    width: 100%;
+    position: relative;
+}
+
+.image-box .image {
+    width: 100%;
+}
+
+.image-box .point {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+}
+
+.image-box .tooltip {
+    position: absolute;
+    font-size: 12px;
+    background-color: white;
+    border: 1px solid gainsboro;
+    width: 98px;
+}
--- a/weapp/pages/index/index.js
+++ b/weapp/pages/index/index.js
@ -74,7 +74,6 @@ Page({
  },

  onMarkerTap(e) {
-    console.log(e.detail.markerId, 'e.detail.markerId')
    wx.navigateTo({url: `/package/pointsStatus/pointsStatus?projectId=${e.detail.markerId}`})
  },

--- a/weapp/utils/getApiUrl.js
+++ b/weapp/utils/getApiUrl.js
@ -13,6 +13,14 @@ exports.getProjectList = () => {
    return `/projectList`
 }

+// 获取点位布设信息
+exports.getProjectGraph = (projectId) => {
+    return `/project/${projectId}/planarGraph`
+}
+exports.getDeployPoints = (pictureId) => {
+    return `/picture/${pictureId}/deploy/points`
+}
+
 // 获取巡检计划
 exports.getPatrolPlan = () => {
    return `/patrolPlan`
--- a/web/client/src/sections/shouye/containers/shouye.js
+++ b/web/client/src/sections/shouye/containers/shouye.js
@ -5,7 +5,7 @@ import moment from "moment";
 import '../style.less';
 import { push } from 'react-router-redux';
 import { Model } from 'echarts';
-import { getPatrolPlan } from '../../patrolManage/actions/plan'
+import {getPatrolPlan} from '../../patrolManage/actions/plan'
 import XColumn from '../components/charts/xColumn'
 import StackColumn from '../components/charts/stackColumn'
 import AlarmStatistics from '../components/alarm/alarmStatistics'
@ -14,42 +14,50 @@ import Column from '../components/charts/column'
 const Information = (props) => {
   const { dispatch, actions, user, loading, clientHeight } = props
   const { patrolManage, issueHandle } = actions
-   const [planedata, setplandata] = useState([])
-   const [xunjiandata, setxunjiandata] = useState([])
-   const [shijiandata, setshijiandata] = useState([])
+   const [planedata,setplandata] = useState([])
+   const [xunjiandata,setxunjiandata] = useState([])
+   const [shijiandata,setshijiandata] = useState([])

   const [chartData1, setChartData1] = useState([])
   const [chartData2, setChartData2] = useState([])
   const [chartData3, setChartData3] = useState([])
   const [chartData4, setChartData4] = useState([])

-   const topdata = []
+   const topdata =[]
   const format = 'YYYY-MM-DD HH:mm:ss'
   const times = [moment().subtract(70, 'years').format(format), moment().format(format)]
-   useEffect(() => {
-      dispatch(getPatrolPlan()).then(async (res) => {
-         const res2 = await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/null/null`))
-         setshijiandata(res2?.payload?.data)
-         setxunjiandata(res2?.payload?.data.filter(i => parseInt(moment().format('YYYYMMDD')) === parseInt(moment(i.inspectionTime).format('YYYYMMDD'))))
-         const count = res?.payload?.data?.rows?.filter(i => {
-            if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '天') {
-               return parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD'))
-            } else if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '周') {
-               return parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD')) && res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
-                  && moment(j.inspectionTim).week() === moment().week()).length < parseInt(i?.frequency?.match(/[\d.]/g).join(''))
+   useEffect(()=>{
+      dispatch(getPatrolPlan()).then(async (res)=>{
+      const res2 =  await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/null/null`))
+      console.log(res2,'res2')
+      setshijiandata(res2?.payload?.data)
+      setxunjiandata(res2?.payload?.data.filter(i=>parseInt(moment().format('YYYYMMDD'))=== parseInt(moment(i.inspectionTime ).format('YYYYMMDD'))))
+         const count = res?.payload?.data?.rows?.filter(i=>{
+            // console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
+            if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='天'){
+               //  console.log(i?.frequency?.match(/[\d.]/g).join(''),'jjj')
+                return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))
+               // console.log('是的',i?.frequency.split('/')[i?.frequency.split('/').length-1])
+            }else if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='周'){    
+               // console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
+                return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
+                  &&moment(j.inspectionTim).week()===moment().week()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))
            }
-            else if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '月') {
-               return parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD')) && res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
-                  && moment(j.inspectionTim).month() === moment().month()).length < parseInt(i?.frequency?.match(/[\d.]/g).join(''))
+            else if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='月'){    
+               // console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
+                return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
+                  &&moment(j.inspectionTim).month()===moment().month()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))
            }
         })
+         console.log(count,'count')
         setplandata(count)
+         console.log(res,'res')


         calcChartData(res2?.payload?.data)
      })
-   }, [])
-
+   },[])
+   console.log(xunjiandata,'xunjiandata')

   const calcChartData = (data) => {
      let arr = []
@ -67,38 +75,38 @@ const Information = (props) => {

   return (
      <>
-         <div className='shouyetop'>
-            <div className='shouyetopitem'>
-               <div className='shouyetopitem-left' >
-                  <div>今日巡检</div>
-                  <div>{planedata.length}</div>
-               </div>
-               <div className='shouyetopitem-right'>
-                  <div>完成巡检：{xunjiandata.length}个</div>
-                  <div>巡检上报：{xunjiandata.filter(i => i?.alarm === true).length}个</div>
-               </div>
+      <div className='shouyetop'>
+         <div className='shouyetopitem'>
+            <div className='shouyetopitem-left' >
+               <div>今日巡检</div>
+               <div>{planedata.length}</div>
            </div>
-            <div className='shouyetopitem'>
-               <div className='shouyetopitem-left' >
-                  <div>今日事件</div>
-                  <div>{xunjiandata.filter(i => i?.alarm === true).length}</div>
-               </div>
-               <div className='shouyetopitem-right'>
-                  <div>已处理：个</div>
-                  <div>未处理：2个</div>
-               </div>
+            <div className='shouyetopitem-right'>
+               <div>完成巡检：{xunjiandata.length}个</div>
+               <div>巡检上报：{xunjiandata.filter(i=>i?.alarm===true).length}个</div>
            </div>
-            <div className='shouyetopitem'>
-               <div className='shouyetopitem-left' >
-                  <div>今日预警</div>
-                  <div>0</div>
-               </div>
-               <div className='shouyetopitem-right'>
-                  <div>已下发：2个</div>
-               </div>
+         </div>
+         <div className='shouyetopitem'>
+            <div className='shouyetopitem-left' >
+               <div>今日事件</div>
+               <div>{xunjiandata.filter(i=>i?.alarm===true).length}</div>
+            </div>
+            <div className='shouyetopitem-right'>
+               <div>已处理：个</div>
+               <div>未处理：2个</div>
+            </div>
+         </div>
+         <div className='shouyetopitem'>
+            <div className='shouyetopitem-left' >
+               <div>今日预警</div>
+               <div>0</div>
+            </div>
+            <div className='shouyetopitem-right'>
+               <div>已下发：2个</div>
            </div>
         </div>
-         <Card className='shouye-chart-card'>
+      </div>
+      <Card className='shouye-chart-card'>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
               <div style={{ width: '45%' }}>
                  <XColumn
@ -128,7 +136,7 @@ const Information = (props) => {
   )
 }

-function mapStateToProps(state) {
+function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
@ -137,4 +145,4 @@ function mapStateToProps(state) {
   };
 }

-export default connect(mapStateToProps)(Information);
+export default connect(mapStateToProps)(Information);