-
-
-
+
this.clickIt("react")} style={{background: "url("+require("./123.png")+") no-repeat center center",backgroundSize:"100% 200%"}}>添加矩形
+
this.delete()} style={{background: "url("+require("./123.png")+") no-repeat center center",backgroundSize:"100% 200%"}}>删除
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
{
- list&&list.map((item, index) => {
+ list && list.map((item, index) => {
return
{ this[item.id + item.mode] = inst }} mode={item.mode} change={(val) => this.change(val)}>
+ title={item.title ? item.title : title}
+ titleColor={item.titleColor ? item.titleColor : titleColor}
+ titleFont={item.titleFont ? item.titleFont : titleFont}
+ titleLineHeight={item.titleLineHeight ? item.titleLineHeight : titleLineHeight}
+ titleBackgroundColor={item.titleBackgroundColor ? item.titleBackgroundColor : titleBackgroundColor}
+ titlePadding={item.titlePadding ? item.titlePadding : titlePadding}
+ titleTextAlign={item.titleTextAlign ? item.titleTextAlign : titleTextAlign}
+ titleWidth={item.titleWidth ? item.titleWidth : titleWidth}
+ titleFillColor={item.titleFillColor ? item.titleFillColor : titleFillColor}
+ position={position} key={item.id} listId={item.id} serviceData={item.serviceData} ref={(inst) => { this[item.id + item.mode] = inst }} mode={item.mode}
+ wenziChange={(val)=>this.wenziChange(val,index)}
+ change={(val) => this.change(val)}>
})
}
)
diff --git a/src/index.js b/src/index.js
index 08b42eb..0b2f9a4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,80 +1,160 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
-import { FlvCom, Timer, ImgCom, AreaSelete, FunAreaSelect, FunAreaSelectPlus } from "./components/index"
-// import {FlvCom,Timer,ImgCom,AreaSelete,FunAreaSelect,FunAreaSelectPlus} from "../dist/index.js"
-class App extends Component {
- constructor() {
- super();
- this.state = {
- imgUrl: "C:/imagelib/imgalarm/2020/12/21/192.168.166.155/192.168.166.155_00_20201221181716755_ALARM_210_9891_HEL_SNAP.jpg",
- serviceData: [[431, 55], [479, 55], [481, 107], [435, 107]],
- arr: [
- {
- id: "1", title: "点位1", num: 5, serviceData: [
- ["95.16", "13.60"],
- ["126.40", "13.37"],
- ["127.37", "28.82"],
- ["95.65", "28.59"]]
- },
- {
- id: "2", title: "点位2", num: 5, serviceData: [
- ["210.34", "12.68"],
- ["233.76", "12.68"],
- ["234.74", "24.67"],
- ["212.29", "24.67"]
- ]
- },
- {
- id: "3", title: "点位3", num: 5, serviceData: [
- ["256.21", "29.51"],
- ["283.05", "29.51"],
- ["282.08", "41.50"],
- ["257.19", "41.50"]
- ]
- },
- ],
- serviceData2: [],
- list: [{ "id": 1608808157114,title:"点位1\n偏移量:10mm","mode": "polygon", "serviceData": [[323, 76], [336, 195], [617, 151], [452, 45]] }, { "id": 1608808178878,title:"点位1\n偏移量\nsdfas:10mm", "mode": "react", "serviceData": [[615, 379], [615, 254], [309, 254], [309, 379]] }]
- // lsit:[]
- }
- }
- changeSelect(val) {//保存后把最后一个放入这个list中储存,这样可以判断是否储存,点击的时候是否在点内
- this.setState({
- list:val
- })
- }
- delete(selectIndex){
- let {list} = this.state
- list = list.filter(item=>item.id!==selectIndex)
- this.setState({list:list})
+import { FunAreaSelectPlus, FlvCom } from "../dist/index.js"
+import axios from "axios"
+import './App.css';
+axios.defaults.baseURL = "http://192.168.10.144:8083"
+export default class App extends Component {
+ constructor() {
+ super();
+ this.state = {
+ list: [],//可以设置初始值
+ options: [],
+ optionsTwo: [],
+ valueOne: "",
+ valueTwo: "",
+ videoUrl: "",
+ key:new Date().getTime()
}
- err(falg,msg){
- console.log(falg,msg)
+ }
+ componentDidMount() {
+ this.getOptionOne()
+ }
+ getdian(companyId, deviceId) {
+ axios.get("/site_config/get", {
+ params: {
+ companyId: companyId,
+ deviceId: deviceId
+ }
+ }).then(res => {
+ var content = JSON.parse(res.data.resInfo.content)
+ content = content.map(item => {
+ return {
+ id: item.id,
+ mode: "react",
+ title:"点位"+item.id,
+ serviceData: this.getFenbial(JSON.parse(item.coordinate),"show")
+ }
+ })
+ if(this.state.videoUrl !== res.data.resInfo.url){
+ this.setState({ videoUrl: res.data.resInfo.url})
+ }
+ this.setState({ list: content ,key:new Date().getTime()})
+ })
+ }
+ getFenbial(data, type) {
+ var changeXPx = 1080, changeYPx = 1920;
+ var width = document.getElementById("kuangneiCon11").offsetWidth;
+ var height = document.getElementById("kuangneiCon11").offsetHeight;
+ if (type === "show") {//展示
+ return data.map(item => {
+ return [((item[0] / changeXPx) * width).toFixed(2), ((item[1] / changeYPx) * height).toFixed(2)]
+ })
+ } else {//储存的时候
+ return data.map(item => {
+ return [((item[0] / width) * changeXPx).toFixed(2), ((item[1] / height) * changeYPx).toFixed(2)]
+ })
}
- render() {
- let { imgUrl, serviceData, serviceData2, arr, list } = this.state;
- return (
-
+
+
+
+
+
+
+
+ this.wenziChange(val,index)}
+ titleTextAlign="left"
+ titleWidth="50"
+ change={(val) => { this.changeSelect(val) }} delete={(selectIndex) => { this.delete(selectIndex) }} err={(falg, msg) => { this.err(falg, msg) }}>
+
+
+ )
+ }
}
-ReactDOM.render(