Skip to content

C
CivManage
Commit 47da8748 authored by 田翔's avatar 田翔
Browse files
Options

fix: 工作台预览修改为方案名称

parent d4c169fb
Pipeline #88952 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 156 additions and 103 deletions
          src/assets/images/bsmanager/patrolMaintenance/maintenance/下载图标.png 0 → 100644
          View file @ 47da8748
          This diff was suppressed by a .gitattributes entry.
          src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.js
          View file @ 47da8748
          import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react' import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react'
          import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message } from 'antd' import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag } from 'antd'
          import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons' import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons'
          import styles from './index.less' import styles from './index.less'
          import QRCode from 'qrcode.react' import QRCode from 'qrcode.react'
          ...@@ -24,6 +24,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -24,6 +24,7 @@ const QRCodeDesign = (props, ref) => {
          const [showList, setShowList] = useState([]) const [showList, setShowList] = useState([])
          const [values, setValues] = useState({}) const [values, setValues] = useState({})
          const [currentRow, setCurrentRow] = useState({}) const [currentRow, setCurrentRow] = useState({})
          const [minVisible, setMinVisible] = useState(false)
          const [form] = Form.useForm() const [form] = Form.useForm()
          const columns = useMemo(() => { const columns = useMemo(() => {
          ...@@ -47,6 +48,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -47,6 +48,7 @@ const QRCodeDesign = (props, ref) => {
          dataIndex: 'DeviceCodeAlias', dataIndex: 'DeviceCodeAlias',
          key: 'DeviceCodeAlias', key: 'DeviceCodeAlias',
          align: 'center', align: 'center',
          render: (value) => <Tag color="processing">{value}</Tag>
          }, },
          { {
          title: '设备类型', title: '设备类型',
          ...@@ -61,21 +63,29 @@ const QRCodeDesign = (props, ref) => { ...@@ -61,21 +63,29 @@ const QRCodeDesign = (props, ref) => {
          align: 'center', align: 'center',
          render: (_, row) => { render: (_, row) => {
          return ( return (
          <QRCodeView <div
          id={row.DeviceCode} className={styles.qrCodeCell}
          values={{ onClick={() => {
          CorporateName: row.CorporateName || '熊猫水务', setMinVisible(true)
          Title: row.Title || '设备二维码', setCurrentRow(row)
          IsSystemLogo: Boolean(row.IsSystemLogo) ? '自动使用系统LOGO' : '自定义LOGO',
          IsPandaLogo: Boolean(row.IsPandaLogo),
          LabelLogoUrl: row.LabelLogoUrl,
          DeviceName: row.DeviceName,
          DeviceCode: row.DeviceCode,
          AccountName: row.AccountName,
          }} }}
          isBatch={false} >
          style={{ width: '310px', height: '490px', zoom: 0.2, margin: '0 auto' }} <QRCodeView
          /> id={row.DeviceCode}
          values={{
          CorporateName: row.CorporateName || '熊猫水务',
          Title: row.Title || '设备二维码',
          IsSystemLogo: Boolean(row.IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
          IsPandaLogo: Boolean(row.IsPandaLogo),
          LabelLogoUrl: row.LabelLogoUrl,
          DeviceName: row.DeviceName,
          DeviceCode: row.DeviceCode,
          AccountName: row.AccountName,
          }}
          isBatch={false}
          style={{ width: '310px', height: '490px', zoom: 0.15, margin: '0 auto' }}
          />
          </div>
          ) )
          } }
          }, },
          ...@@ -88,7 +98,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -88,7 +98,7 @@ const QRCodeDesign = (props, ref) => {
          render: (_, row) => { render: (_, row) => {
          return ( return (
          <div> <div>
          <Button type='link' onClick={() => downFile(row)}>下载</Button> <Button type='link' icon={<span className={styles.downIcon}></span>} onClick={() => downFile(row)}>下载</Button>
          {/* <Button type='link' onClick={() => editStyle(row)}>样式编辑</Button> */} {/* <Button type='link' onClick={() => editStyle(row)}>样式编辑</Button> */}
          </div> </div>
          ) )
          ...@@ -148,8 +158,8 @@ const QRCodeDesign = (props, ref) => { ...@@ -148,8 +158,8 @@ const QRCodeDesign = (props, ref) => {
          setShowList([]) setShowList([])
          } }
          if (file.status === 'done') { if (file.status === 'done') {
          console.log('fileList', fileList)
          setValues({ ...values, LabelLogoUrl: fileList.map(v => v.sourcePath).join(',') }) setValues({ ...values, LabelLogoUrl: fileList.map(v => v.sourcePath).join(',') })
          form.setFieldsValue({ LabelLogoUrl: fileList.map(v => v.sourcePath).join(',') })
          } }
          }, },
          // onPreview: async (file) => { // onPreview: async (file) => {
          ...@@ -181,7 +191,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -181,7 +191,7 @@ const QRCodeDesign = (props, ref) => {
          let values = { let values = {
          CorporateName: row.CorporateName || '熊猫水务', CorporateName: row.CorporateName || '熊猫水务',
          Title: row.Title || '设备二维码', Title: row.Title || '设备二维码',
          IsSystemLogo: Boolean(row.IsSystemLogo) ? '自动使用系统LOGO' : '自定义LOGO', IsSystemLogo: Boolean(row.IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
          IsPandaLogo: Boolean(row.IsPandaLogo), IsPandaLogo: Boolean(row.IsPandaLogo),
          LabelLogoUrl: row.LabelLogoUrl, LabelLogoUrl: row.LabelLogoUrl,
          DeviceName: row.DeviceName, DeviceName: row.DeviceName,
          ...@@ -230,7 +240,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -230,7 +240,7 @@ const QRCodeDesign = (props, ref) => {
          let values = { let values = {
          CorporateName: CorporateName || '熊猫水务', CorporateName: CorporateName || '熊猫水务',
          Title: Title || '设备二维码', Title: Title || '设备二维码',
          IsSystemLogo: Boolean(IsSystemLogo) ? '自动使用系统LOGO' : '自定义LOGO', IsSystemLogo: Boolean(IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
          IsPandaLogo: Boolean(IsPandaLogo), IsPandaLogo: Boolean(IsPandaLogo),
          LabelLogoUrl: LabelLogoUrl LabelLogoUrl: LabelLogoUrl
          } }
          ...@@ -274,7 +284,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -274,7 +284,7 @@ const QRCodeDesign = (props, ref) => {
          corporateName: values.CorporateName, corporateName: values.CorporateName,
          title: values.Title, title: values.Title,
          labelLogoUrl: values.LabelLogoUrl, labelLogoUrl: values.LabelLogoUrl,
          isSystemLogo: values.IsSystemLogo === '自动使用系统LOGO' ? 1 : 0, isSystemLogo: values.IsSystemLogo === '系统LOGO' ? 1 : 0,
          isPandaLogo: values.IsPandaLogo ? 1 : 0, isPandaLogo: values.IsPandaLogo ? 1 : 0,
          } }
          const { code, data } = await EditOrAddDeviceQRCodeConfig(params) const { code, data } = await EditOrAddDeviceQRCodeConfig(params)
          ...@@ -308,7 +318,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -308,7 +318,7 @@ const QRCodeDesign = (props, ref) => {
          /> />
          <div className={styles.QRLogo}> <div className={styles.QRLogo}>
          { {
          values.IsSystemLogo === '自动使用系统LOGO' ? ( values.IsSystemLogo === '系统LOGO' ? (
          // <div className={styles.systemLogo}></div> // <div className={styles.systemLogo}></div>
          <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png`} /> <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png`} />
          ) : ( ) : (
          ...@@ -353,7 +363,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -353,7 +363,7 @@ const QRCodeDesign = (props, ref) => {
          wrapClassName={styles.QRCodeModal} wrapClassName={styles.QRCodeModal}
          visible={visible} visible={visible}
          onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
          title={<div className={styles.QRCodeTitle}>{isBatch ? '设备列表' : '设备清单-样式编辑器'}</div>} title={<div className={styles.QRCodeTitle}>{!show ? '设备列表' : '样式编辑器'}</div>}
          width={'65%'} width={'65%'}
          bodyStyle={{ width: '100%', height: '650px', padding: '10px', background: show ? '#F6F9FC' : 'white' }} bodyStyle={{ width: '100%', height: '650px', padding: '10px', background: show ? '#F6F9FC' : 'white' }}
          footer={footer} footer={footer}
          ...@@ -405,7 +415,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -405,7 +415,7 @@ const QRCodeDesign = (props, ref) => {
          <Form.Item label="LOGO" name="IsSystemLogo"> <Form.Item label="LOGO" name="IsSystemLogo">
          <Radio.Group> <Radio.Group>
          <Radio value="自定义LOGO">自定义LOGO</Radio> <Radio value="自定义LOGO">自定义LOGO</Radio>
          <Radio value="自动使用系统LOGO">自动使用系统LOGO</Radio> <Radio value="系统LOGO">系统LOGO</Radio>
          </Radio.Group> </Radio.Group>
          </Form.Item> </Form.Item>
          <Upload.Dragger <Upload.Dragger
          ...@@ -413,7 +423,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -413,7 +423,7 @@ const QRCodeDesign = (props, ref) => {
          className="upload-list-inline" className="upload-list-inline"
          fileList={showList} fileList={showList}
          accept={['.bmp', '.gif', '.jpeg', '.tiff', '.png', '.svg', '.jpg', '.webp']} accept={['.bmp', '.gif', '.jpeg', '.tiff', '.png', '.svg', '.jpg', '.webp']}
          disabled={values.IsSystemLogo === '自动使用系统LOGO'} disabled={values.IsSystemLogo === '系统LOGO'}
          > >
          <div> <div>
          <div className={styles.uploadIcon}></div> <div className={styles.uploadIcon}></div>
          ...@@ -427,7 +437,7 @@ const QRCodeDesign = (props, ref) => { ...@@ -427,7 +437,7 @@ const QRCodeDesign = (props, ref) => {
          } }
          </div> </div>
          </Upload.Dragger> </Upload.Dragger>
          <Form.Item label="熊猫LOGO" name="IsPandaLogo" valuePropName="checked"> <Form.Item label="熊猫LOGO" name="IsPandaLogo" valuePropName="checked" style={{ marginTop: '10px' }}>
          <Switch checkedChildren="启用" unCheckedChildren="禁用" /> <Switch checkedChildren="启用" unCheckedChildren="禁用" />
          </Form.Item> </Form.Item>
          </div> </div>
          ...@@ -440,6 +450,28 @@ const QRCodeDesign = (props, ref) => { ...@@ -440,6 +450,28 @@ const QRCodeDesign = (props, ref) => {
          </div> </div>
          </div> </div>
          </div> </div>
          <Modal
          onCancel={() => setMinVisible(false)}
          visible={minVisible}
          footer={null}
          width={310}
          bodyStyle={{ width: '100%', height: '491px', padding: '10px' }}
          >
          <QRCodeView
          id={currentRow.DeviceCode}
          values={{
          CorporateName: currentRow.CorporateName || '熊猫水务',
          Title: currentRow.Title || '设备二维码',
          IsSystemLogo: Boolean(currentRow.IsSystemLogo) ? '系统LOGO' : '自定义LOGO',
          IsPandaLogo: Boolean(currentRow.IsPandaLogo),
          LabelLogoUrl: currentRow.LabelLogoUrl,
          DeviceName: currentRow.DeviceName,
          DeviceCode: currentRow.DeviceCode,
          AccountName: currentRow.AccountName,
          }}
          isBatch={false}
          />
          </Modal>
          </Modal> </Modal>
          ) )
          } }
          ......
          src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.less
          View file @ 47da8748
          ...@@ -11,6 +11,11 @@ ...@@ -11,6 +11,11 @@
          width: 50px; width: 50px;
          height: 50px; height: 50px;
          } }
          .qrCodeCell {
          &:hover {
          cursor: pointer;
          }
          }
          .QRCodeTitle { .QRCodeTitle {
          width: 100%; width: 100%;
          height: 57px; height: 57px;
          ...@@ -19,7 +24,8 @@ ...@@ -19,7 +24,8 @@
          font-weight: bold; font-weight: bold;
          background: url('@{imgSrc}/标题.png'); background: url('@{imgSrc}/标题.png');
          background-size: 100% 100%; background-size: 100% 100%;
          padding-left: 15px; padding-left: 20px;
          font-size: 20px;
          } }
          .QRCodeList { .QRCodeList {
          width: 100%; width: 100%;
          ...@@ -74,6 +80,7 @@ ...@@ -74,6 +80,7 @@
          border: 1px solid #BCDEFF; border: 1px solid #BCDEFF;
          overflow: hidden; overflow: hidden;
          .header { .header {
          position: relative;
          width: 100%; width: 100%;
          height: 42px; height: 42px;
          display: flex; display: flex;
          ...@@ -98,6 +105,8 @@ ...@@ -98,6 +105,8 @@
          background-size: 100% 100%; background-size: 100% 100%;
          } }
          .h-bgArrow { .h-bgArrow {
          position: absolute;
          right: 5%;
          width: 53px; width: 53px;
          height: 18px; height: 18px;
          background: url('@{imgSrc}/右键图标.png'); background: url('@{imgSrc}/右键图标.png');
          ...@@ -155,89 +164,100 @@ ...@@ -155,89 +164,100 @@
          } }
          } }
          } }
          .QRCode { .downIcon {
          width: 100%; width: 15px;
          height: 100%; height: 15px;
          background: url('@{imgSrc}/二维码背景.png'); margin-right: 2px;
          display: inline-block;
          background: url('@{imgSrc}/下载图标.png');
          background-size: 100% 100%; background-size: 100% 100%;
          position: relative; position: relative;
          .company { top: 2px;
          color: white; }
          padding: 3%; }
          text-align: center;
          font-size: 20px; .QRCode {
          } width: 100%;
          .title { height: 100%;
          text-align: center; background: url('@{imgSrc}/二维码背景.png');
          font-size: 26px; background-size: 100% 100%;
          color: white; position: relative;
          font-weight: 700; .company {
          font-style: italic; color: white;
          } padding: 3%;
          .QR { text-align: center;
          position: absolute; font-size: 20px;
          top: 36.1%; }
          left: 24.6%; .title {
          width: 51.1%; text-align: center;
          height: 32%; font-size: 26px;
          border-radius: 5%; color: white;
          overflow: hidden; font-weight: 700;
          .QRLogo { font-style: italic;
          z-index: 99; }
          position: absolute; .QR {
          left: 50%; position: absolute;
          top: 50%; top: 36.1%;
          transform: translate(-50%, -50%); left: 24.6%;
          width: 30%; width: 51.1%;
          height: 30%; height: 32%;
          .systemLogo{ border-radius: 5%;
          width: 100%; overflow: hidden;
          height: 100%; .QRLogo {
          background: url('@{imgSrc}/熊猫-蓝色.png'); z-index: 99;
          background-size: 100% 100%;
          }
          }
          }
          .pandaLogo {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 22%;
          width: 47%;
          height: 5%;
          background: url('@{imgSrc}/熊猫logo.png');
          background-size: 100% 100%;
          }
          .info {
          position: absolute; position: absolute;
          left: 50%; left: 50%;
          bottom: 6%; top: 50%;
          transform: translateX(-50%); transform: translate(-50%, -50%);
          width: 84%; width: 30%;
          height: 10%; height: 30%;
          .tag { .systemLogo {
          margin-left: 29%; width: 100%;
          padding: 2px 10px; height: 100%;
          border-radius: 1px; background: url('@{imgSrc}/熊猫-蓝色.png');
          &[type='设备名称'] { background-size: 100% 100%;
          background: rgb(205 235 221);
          color: rgb(42 91 68);
          }
          &[type='设备编号'] {
          color: rgb(224, 95, 66);
          background: rgb(224 201 196);
          }
          } }
          .DeviceName { }
          text-align: center; }
          font-size: 15px; .pandaLogo {
          font-weight: bold; position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 22%;
          width: 47%;
          height: 5%;
          background: url('@{imgSrc}/熊猫logo.png');
          background-size: 100% 100%;
          }
          .info {
          position: absolute;
          left: 50%;
          bottom: 6%;
          transform: translateX(-50%);
          width: 84%;
          height: 10%;
          .tag {
          margin-left: 29%;
          padding: 2px 10px;
          border-radius: 1px;
          &[type='设备名称'] {
          background: rgb(205 235 221);
          color: rgb(42 91 68);
          } }
          .DeviceCode { &[type='设备编号'] {
          text-align: center; color: rgb(224, 95, 66);
          font-size: 15px; background: rgb(224 201 196);
          font-weight: bold;
          } }
          } }
          .DeviceName {
          text-align: center;
          font-size: 15px;
          font-weight: bold;
          }
          .DeviceCode {
          text-align: center;
          font-size: 15px;
          font-weight: bold;
          }
          } }
          } }
          \ No newline at end of file
          src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/index.js
          View file @ 47da8748
          ...@@ -115,7 +115,7 @@ const Designer = (props) => { ...@@ -115,7 +115,7 @@ const Designer = (props) => {
          trigger="click" trigger="click"
          content={ content={
          <div> <div>
          <QRcode value={`${window.origin}/civ_mobile/product/water/monitor/workbench?env=dev&id=${currentCard.ID}&station=${currentSite}`} /> <QRcode value={`${window.origin}/civ_mobile/product/water/monitor/workbench?env=dev&schemeName=${currentCard['名称']}&station=${currentSite}`} />
          </div> </div>
          } }
          > >
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment