wenlele 3 years ago
parent
commit
e9342e7796
  1. 34
      web/client/src/sections/problem/components/inspection.jsx
  2. 33
      web/client/src/sections/problem/components/statistics.jsx
  3. 7
      web/client/src/sections/problem/containers/dataAlarm.jsx
  4. 20
      web/config.js
  5. 23
      web/middlewares/attachment.js
  6. 3
      web/package.json
  7. 20
      web/routes/attachment/index.js

34
web/client/src/sections/problem/components/inspection.jsx

@ -0,0 +1,34 @@
import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { DatePicker } from "@douyinfe/semi-ui";
const Inspection = ({ dispatch, actions, route }) => {
console.log(route);
return (
<div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ width: 190, fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}><span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 10px" }}></span>数据异常统计</div>
<div style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#BDDBFC' }}><img src="/assets/images/problem/keyboard.png" style={{ width: 30, height: 17, marginRight: 10 }} />开发中敬请期待</div>
</div>
<img src="project/da09f988-4c62-46fc-a532-b4cf053a4b6d/accurate_invest.png" alt="" />
</div >
)
}
function mapStateToProps (state) {
const { auth, global, members } = state;
return {
// user: auth.user,
// actions: global.actions,
// global: global,
// members: members.data,
};
}
export default connect(mapStateToProps)(Inspection);

33
web/client/src/sections/problem/components/statistics.jsx

@ -1,15 +1,18 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { DatePicker } from "@douyinfe/semi-ui"; import { DatePicker } from "@douyinfe/semi-ui";
import Inspection from "./inspection";
const Statistics = ({ dispatch, actions, close, modalName, visible, appData }) => { const Statistics = ({ dispatch, actions, route }) => {
console.log(route);
return ( return (
<div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}> <>{route == 'useAbnormal' ?
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <Inspection /> :
<div style={{ width: 190, fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}><span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 10px" }}></span>数据异常统计</div> <div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}>
{/* <DatePicker <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ width: 190, fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}><span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 10px" }}></span>数据异常统计</div>
{/* <DatePicker
type="dateTimeRange" type="dateTimeRange"
style={{ width: 405 }} style={{ width: 405 }}
// defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]} // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
@ -17,23 +20,25 @@ const Statistics = ({ dispatch, actions, close, modalName, visible, appData }) =
prefix='统计时段:' prefix='统计时段:'
onChange={console.log} onChange={console.log}
/> */} /> */}
<div style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#BDDBFC' }}><img src="/assets/images/problem/keyboard.png" style={{ width: 30, height: 17, marginRight: 10 }} />开发中敬请期待</div> <div style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#BDDBFC' }}><img src="/assets/images/problem/keyboard.png" style={{ width: 30, height: 17, marginRight: 10 }} />开发中敬请期待</div>
</div> </div>
{/* <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}> */} {/* <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}> */}
{/* <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}></div> {/* <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}></div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div> <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div> <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div> */} <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div> */}
{/* </div> */} {/* </div> */}
{/* <div style={{ fontSize: 32, fontFamily: 'YouSheBiaoTiHei', fontWeight: 500, color: '#005ABD', textIndent:60, lineHeight: '156px', background: 'url(/assets/images/problem/await.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 'calc(100% - 40px)', height: 156, margin: '0 0 0 10px' }}> {/* <div style={{ fontSize: 32, fontFamily: 'YouSheBiaoTiHei', fontWeight: 500, color: '#005ABD', textIndent:60, lineHeight: '156px', background: 'url(/assets/images/problem/await.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 'calc(100% - 40px)', height: 156, margin: '0 0 0 10px' }}>
暂未开放 敬请期待 暂未开放 敬请期待
</div> */} </div> */}
<img src="/assets/images/problem/bitmap.png" style={{ width: 'calc(100% - 20px)', height: 156, margin: '0 0 0 10px' }} /> <img src="/assets/images/problem/bitmap.png" style={{ width: 'calc(100% - 20px)', height: 156, margin: '0 0 0 10px' }} />
</div >
}</>
</div >
) )
} }

7
web/client/src/sections/problem/containers/dataAlarm.jsx

@ -256,12 +256,15 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
} }
} }
return ( return (
<div style={{minWidth:1000}}> <div style={{ minWidth: 1000 }}>
{/* 滞留提醒 */} {/* 滞留提醒 */}
<div> <div>
{abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时请尽快处理</div></div> : ""} {abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时请尽快处理</div></div> : ""}
</div> </div>
<Statistics /> <Statistics
route={route}
tableType={tableType}
/>
<TableData <TableData
route={route} route={route}
collectData={collectData} collectData={collectData}

20
web/config.js

@ -23,8 +23,14 @@ const API_POMS_URL = process.env.API_POMS_URL || flags.apiPomsUrl;
const API_EMIS_URL = process.env.API_EMIS_URL || flags.apiEmisUrl; const API_EMIS_URL = process.env.API_EMIS_URL || flags.apiEmisUrl;
const API_ANXINYUN_URL = process.env.API_ANXINYUN_URL || flags.apiAnxinyunUrl; const API_ANXINYUN_URL = process.env.API_ANXINYUN_URL || flags.apiAnxinyunUrl;
const ANXINCLOUD_QINIU_AK = process.env.ANXINCLOUD_QINIU_AK || flags.qnak;
const ANXINCLOUD_QINIU_SK = process.env.ANXINCLOUD_QINIU_SK || flags.qnsk;
const ANXINCLOUD_QINIU_BUCKET_RESOURCE = process.env.ANXINCLOUD_QINIU_BUCKET_RESOURCE || flags.qnbkt;
const ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE = process.env.ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE || flags.qndmn;
if (!API_URL || !API_ANXINYUN_URL) {
if (!API_URL || !API_ANXINYUN_URL || !ANXINCLOUD_QINIU_AK || !ANXINCLOUD_QINIU_SK || !ANXINCLOUD_QINIU_BUCKET_RESOURCE
|| !ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE) {
console.log('缺少启动参数,异常退出'); console.log('缺少启动参数,异常退出');
args.showHelp(); args.showHelp();
process.exit(-1); process.exit(-1);
@ -45,6 +51,18 @@ const product = {
host: API_ANXINYUN_URL, host: API_ANXINYUN_URL,
match: /^\/_axy\//, match: /^\/_axy\//,
} }
}, {
entry: require('./middlewares/attachment').entry,
opts: {
qiniu: {
accessKey: ANXINCLOUD_QINIU_AK,
secretKey: ANXINCLOUD_QINIU_SK,
bucket: ANXINCLOUD_QINIU_BUCKET_RESOURCE,
domain: ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE
},
maxSize: 20971520, // 20M
uploadPath: 'other'
}
}, { }, {
entry: require('./middlewares/proxy').entry, entry: require('./middlewares/proxy').entry,
opts: { opts: {

23
web/middlewares/attachment.js

@ -0,0 +1,23 @@
/**
* Created by PengLing on 2018/1/2.
*/
'use strict';
const Attachment = require('fs-attachment');
module.exports = {
entry: function (app, router, opts) {
const attachment = new Attachment(opts);
app.fs = app.fs || {};
app.fs.attachment = attachment;
app.fs.logger.log('debug', 'init fs.attachment and inject it into app(app.fs.attachment) and runtime ctx(ctx.fs.attachment)');
return async (ctx, next) => {
ctx.fs = ctx.fs || {};
ctx.fs.attachment = attachment;
await next();
};
}
};

3
web/package.json

@ -60,6 +60,7 @@
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"ezuikit-js": "^0.6.1", "ezuikit-js": "^0.6.1",
"fs-attachment": "^1.0.0",
"fs-web-server-scaffold": "^1.0.6", "fs-web-server-scaffold": "^1.0.6",
"koa-better-http-proxy": "^0.2.5", "koa-better-http-proxy": "^0.2.5",
"koa-proxy": "^1.0.0-alpha.3", "koa-proxy": "^1.0.0-alpha.3",
@ -79,4 +80,4 @@
"webpack-dev-server": "^3.11.2", "webpack-dev-server": "^3.11.2",
"webpack-hot-middleware": "^2.25.0" "webpack-hot-middleware": "^2.25.0"
} }
} }

20
web/routes/attachment/index.js

@ -29,6 +29,26 @@ module.exports = {
}; };
}; };
let download = async function (ctx, next) {
const { fetchUrl } = opts.qiniu;
if (ctx.path && ctx.path.includes(fetchUrl)) {
try {
const { filename } = ctx.request.query;
const fkey = decodeURI(ctx.path.slice(fetchUrl.length + 1)).replace(/\.json$/, '.js');
const publicDownloadUrl = await app.fs.attachment.download(fkey);
ctx.status = 200;
if (filename) ctx.attachment(filename);
ctx.body = request.get(publicDownloadUrl);
} catch (err) {
ctx.fs.logger.error(err);
ctx.status = 404;
ctx.body = { error: 'file not found.' }
}
} else {
await next();
}
}
let upload = async function (ctx, next) { let upload = async function (ctx, next) {
try { try {
const { files } = await parse(ctx.req); const { files } = await parse(ctx.req);

Loading…
Cancel
Save