手撸的一个阶段编辑的组件

element-ui + vue2

效果如下

为自己点赞

<template>
  <div class="stage-container">
    <el-popover
      v-for="(stage) in stageList" :key="stage.id"
      width="200"
      trigger="hover"
    >
      <div slot="reference" :class="stageState(stage)" class="stage">
        <div class="stage-title">{{ stage.name }}</div>
        <div :class="stageState(stage)" class="stage-side stage-left"/>
        <div :class="stageState(stage)" class="stage-side stage-right"/>
      </div>
      <div class="label-list">
        <div v-for="(label) in stage.labels" :key="label.id">
          <el-link :underline="false" :type="labelState(label)" class="label" @click="selectLabel(label)">{{ label.name }}</el-link>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { customerStages } from '@/api/admin/crm'
export default {
  props: {
    stageId: Number,
    stageLabelId: Number
  },
  data() {
    return {
      stageList: []
    }
  },
  computed: {
    stageState() {
      return stage => {
        if (!this.currentStage.order) {
          return 'not-active'
        }
        return stage.order > this.currentStage.order ? 'not-active' : ''
      }
    },
    labelState() {
      return label => {
        return this.stageLabelId == label.id ? 'primary' : 'info'
      }
    },
    currentStage() {
      for (const stage of this.stageList) {
        if (stage.id == this.stageId) {
          return stage
        }
      }
      return {}
    }
  },
  async mounted() {
    const res = await customerStages()
    this.stageList = res.data
  },
  methods: {
    selectLabel(label) {
      this.$emit('selectLabel', label)
    }
  }
}
</script>

<style lang="scss">
.stage-container {
  margin-left: 50px;
  display: flex;
}

.stage-side {
  height: 38px;
  width: 38px;
  top: 0px;
  position: absolute;
  transform: rotate(45deg) scale(0.707);
  &.stage-left {
    z-index: 5;
    left: -19px;
    background-color: white;
  }
  &.stage-right {
    z-index: 10;
    right: -18px;
    background-color: $xr-color-primary;
  }
  &.not-active {
    background-color: white;
    border-top: 2px solid $xr-color-primary;
    border-right: 2px solid $xr-color-primary;
    top: -2px;
  }
}

.stage {
  color: #fff;
  position: relative;
  padding: 10px 20px 10px 37px;
  margin: 28px 2px;
  height: 38px;
  background-color: $xr-color-primary;
  cursor: pointer;
  &.not-active {
    color: $xr-color-primary;
    background-color: white;
    border-top: 2px solid $xr-color-primary;
    border-bottom: 2px solid $xr-color-primary;
  }
}

.label {
  padding: 5px;
  font-size: 13px;
  width: 100%;
}
</style>

随记

2022-12-28

clash 本地连接错误

修改profile 设置dns false

php版本切换(ubuntu)

安装apt install php8.1 php8.1-fpm
安装apt install php7.4 php7.4-fpm
update-alternatives — config php

systemctl start php7.4-fpm

/etc/nginx/conf.d/test.conf

        location ~ \.php$ {
                fastcgi_pass unix:/run/php/php8.1-fpm.sock;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
                include fastcgi_params;
        }

宝塔运行指定版本composer

php80 /www/server/php/80/bin/composer 

git pull/push 速度慢

问题:

windows环境下,不知道为什么最近gitpush和pull速度很慢,经常连接超时;

解决方案:

搜了一下解决方案,大概记录一下

~/.ssh/config

Host github.com *.github.com *.codeup.aliyun.com
    User git
    # SSH默认端口22,git://, HTTPS默认端口443,https://
    Port 22
    Hostname %h
    # 这里放你的SSH私钥
    IdentityFile ~\.ssh\id_rsa
    # 设置代理, 127.0.0.1:10808 换成你自己代理软件监听的本地地址
    # HTTPS使用-H,SOCKS使用-S
    ProxyCommand connect -S 127.0.0.1:10808 %h %p

需要用到connect客户端
connect
解压exe文件后放到C:\Windows\System32目录下面

RFID卡号格式的常见样式

北京友我科技RFID读写器 转载请注明出处,本篇地址
http://www.youwokeji.com.cn/ywdn/NoteDetails.asp?id=11

由于各个厂家的读卡器译码格式不尽相同,在读卡输出时,读出的二进制或十六进制(Hex)结果应该是唯一的,但是又可以通过以下几种主要换算办法,输出不同结果的十进制卡号(Dec),因此,请您一定在购买卡片或卡片喷号时,注意卡号格式的一致性:

1、格式0:10位十六进制的ASCII字符串,即10 Hex格式。
如:某样卡读出十六进制卡号为:“01026f6c3a”。

2、格式1:将格式0中的后8位,转换为10位十进制卡号,即8H—10D。
即将“ 026f6c3a”转换为:“0040856634”。

此格式喷码喷码较为常见。

3、格式2:将格式0中的后6位,转换为8位十进制卡号,即6H—8D。
即将“ 6f6c3a”转换为:“07302202”。

4、格式3:将格式0中的倒数第5、第6位,转换为3位十进制卡号,再将后4位,转换为5位十进制卡号,中间用“,”分开,即“2H + 4H”。
即将2H“ 6f”转换为:“111”,4H “6c3a”转为“27706”。 最终将2段号连在一起输出为“111,27706”。

此格式为标准的韦根26(V26)格式,只使用最后6位编码,也有许多卡采用此格式喷码。

5、格式4:将格式0中后8位的前4位,转换为5位十进制卡号,再将后4位,转换为5位十进制卡号,中间用“,”分开,即“4Hex + 4Hec”。
照此推算结果为:00623,27706 (4H+4H)

UUID理解

简单说明

V2、V5可以理解为V1、V3的升级版本

版本 说明
V1/V2 基于timestamp+MAC生成,V2加上域名
V3/V5 基于输入的namespace和值生成,v3(md5)v5(sha1)可重复生成; 如用户根据用户信息生成用户唯一id
V4 根据伪随机数生成

UUID V3/4/5的PHP实现

<?php
class UUID {
  public static function v3($namespace, $name) {
    if(!self::is_valid($namespace)) return false;

    // Get hexadecimal components of namespace
    $nhex = str_replace(array('-','{','}'), '', $namespace);

    // Binary Value
    $nstr = '';

    // Convert Namespace UUID to bits
    for($i = 0; $i < strlen($nhex); $i+=2) {
      $nstr .= chr(hexdec($nhex[$i].$nhex[$i+1]));
    }

    // Calculate hash value
    $hash = md5($nstr . $name);

    return sprintf('%08s-%04s-%04x-%04x-%12s',

      // 32 bits for "time_low"
      substr($hash, 0, 8),

      // 16 bits for "time_mid"
      substr($hash, 8, 4),

      // 16 bits for "time_hi_and_version",
      // four most significant bits holds version number 3
      (hexdec(substr($hash, 12, 4)) & 0x0fff) | 0x3000,

      // 16 bits, 8 bits for "clk_seq_hi_res",
      // 8 bits for "clk_seq_low",
      // two most significant bits holds zero and one for variant DCE1.1
      (hexdec(substr($hash, 16, 4)) & 0x3fff) | 0x8000,

      // 48 bits for "node"
      substr($hash, 20, 12)
    );
  }

  public static function v4() {
    return sprintf('%04x%04x-%04x-%04x-%04x-%04x%04x%04x',

      // 32 bits for "time_low"
      mt_rand(0, 0xffff), mt_rand(0, 0xffff),

      // 16 bits for "time_mid"
      mt_rand(0, 0xffff),

      // 16 bits for "time_hi_and_version",
      // four most significant bits holds version number 4
      mt_rand(0, 0x0fff) | 0x4000,

      // 16 bits, 8 bits for "clk_seq_hi_res",
      // 8 bits for "clk_seq_low",
      // two most significant bits holds zero and one for variant DCE1.1
      mt_rand(0, 0x3fff) | 0x8000,

      // 48 bits for "node"
      mt_rand(0, 0xffff), mt_rand(0, 0xffff), mt_rand(0, 0xffff)
    );
  }

  public static function v5($namespace, $name) {
    if(!self::is_valid($namespace)) return false;

    // Get hexadecimal components of namespace
    $nhex = str_replace(array('-','{','}'), '', $namespace);

    // Binary Value
    $nstr = '';

    // Convert Namespace UUID to bits
    for($i = 0; $i < strlen($nhex); $i+=2) {
      $nstr .= chr(hexdec($nhex[$i].$nhex[$i+1]));
    }

    // Calculate hash value
    $hash = sha1($nstr . $name);

    return sprintf('%08s-%04s-%04x-%04x-%12s',

      // 32 bits for "time_low"
      substr($hash, 0, 8),

      // 16 bits for "time_mid"
      substr($hash, 8, 4),

      // 16 bits for "time_hi_and_version",
      // four most significant bits holds version number 5
      (hexdec(substr($hash, 12, 4)) & 0x0fff) | 0x5000,

      // 16 bits, 8 bits for "clk_seq_hi_res",
      // 8 bits for "clk_seq_low",
      // two most significant bits holds zero and one for variant DCE1.1
      (hexdec(substr($hash, 16, 4)) & 0x3fff) | 0x8000,

      // 48 bits for "node"
      substr($hash, 20, 12)
    );
  }

  public static function is_valid($uuid) {
    return preg_match('/^\{?[0-9a-f]{8}\-?[0-9a-f]{4}\-?[0-9a-f]{4}\-?'.
                      '[0-9a-f]{4}\-?[0-9a-f]{12}\}?$/i', $uuid) === 1;
  }
}

centos7 yum 安装 rabbitMQ

引用自https://www.rabbitmq.com/install-rpm.html

Install on Older Distributions (CentOS 7, RHEL 7) Using PackageCloud Yum Repository

添加sign

## primary RabbitMQ signing key
rpm --import https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.asc
## modern Erlang repository
rpm --import https://packagecloud.io/rabbitmq/erlang/gpgkey
## RabbitMQ server repository
rpm --import https://packagecloud.io/rabbitmq/rabbitmq-server/gpgkey

添加repo

创建文件/etc/yum.repos.d/rabbitmq.repo

##
## Zero dependency Erlang
##

[rabbitmq_erlang]
name=rabbitmq_erlang
baseurl=https://packagecloud.io/rabbitmq/erlang/el/7/$basearch
repo_gpgcheck=1
gpgcheck=1
enabled=1
# PackageCloud's repository key and RabbitMQ package signing key
gpgkey=https://packagecloud.io/rabbitmq/erlang/gpgkey
       https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.asc
sslverify=1
sslcacert=/etc/pki/tls/certs/ca-bundle.crt
metadata_expire=300

[rabbitmq_erlang-source]
name=rabbitmq_erlang-source
baseurl=https://packagecloud.io/rabbitmq/erlang/el/7/SRPMS
repo_gpgcheck=1
gpgcheck=0
enabled=1
gpgkey=https://packagecloud.io/rabbitmq/erlang/gpgkey
sslverify=1
sslcacert=/etc/pki/tls/certs/ca-bundle.crt
metadata_expire=300

##
## RabbitMQ server
##

[rabbitmq_server]
name=rabbitmq_server
baseurl=https://packagecloud.io/rabbitmq/rabbitmq-server/el/7/$basearch
repo_gpgcheck=1
gpgcheck=1
enabled=1
# PackageCloud's repository key and RabbitMQ package signing key
gpgkey=https://packagecloud.io/rabbitmq/rabbitmq-server/gpgkey
       https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.asc
sslverify=1
sslcacert=/etc/pki/tls/certs/ca-bundle.crt
metadata_expire=300

[rabbitmq_server-source]
name=rabbitmq_server-source
baseurl=https://packagecloud.io/rabbitmq/rabbitmq-server/el/7/SRPMS
repo_gpgcheck=1
gpgcheck=0
enabled=1
gpgkey=https://packagecloud.io/rabbitmq/rabbitmq-server/gpgkey
sslverify=1
sslcacert=/etc/pki/tls/certs/ca-bundle.crt
metadata_expire=300

更新yum

yum update -y

报错

Delta RPMs disabled because /usr/bin/applydeltarpm not installed

再安装deltarpm

yum install deltarpm
yum clean all
yum update -y

执行安装

yum install socat logrotate -y
yum install erlang rabbitmq-server -y

关联单次查询 vs 单表多次查询

问题

最近开发时,看到别人代码里一大段的join语句,这样做相比在应用层对主表查询后再根据关联条件查询分表有什么优缺点呢?

讨论

  • 代码复用
    如果用join的话大部分代码都无法重复使用,每次都要对每个表的查询条件重新编辑,分表查胜出。

  • 消耗资源不同
    用联表查询把任务都交给数据库处理,数据库处理的压力会变大,而且使用事务的话可能会锁表锁行,影响并发性能。
    而使用分表查询,由于需要与数据库多次切换,会增加与数据库IO操作的开销。

  • 筛选分页
    这种情况下单表查询就很吃力了,感觉只能把分表的筛选条件作为主表的冗余字段来查询。
    不然还是用联表查询比较好了。

  • 分库分表
    这种感觉就只能选择分表查询了吧?

制作一个通过wifi联网,可以远程控制的小车(二)

毁了,烧毁了

是的,本来想通过L298P上的引脚驱动舵机,把ESP32的GPIO5接到L298P的ANALOG0, 然后就烧掉了,烧不进去程序了,毁了!!!

淘宝下单了两片新的ESP32,肉痛———-

总结一下:就是尽量单独给芯片供电,别用其他芯片给单片机供电。

新的开始

终于到了,加油干吧!!!

先搞一下舵机控制

这里需要通过PWM来控制舵机的角度,用的舵机是MG996R
这里参考这个页面的说明

https://components101.com/motors/mg996r-servo-motor-datasheet

参考这个图片
周期20ms, 有效占空比是1ms-2ms,1ms时0°,2ms时120°
PWM的位数设置为10,精度2^10=1024,那么有效占空比就是51-102,51时0°,102时120°

话说这里研究了好久

看看连接

然后是效果

然后是代码
初始化PWM输出参数

const int freq = 50;
const int ledChannel = 0;
const int resolution = 10;//精度1024

setup里面设置

ledcSetup(ledChannel, freq, resolution);
ledcAttachPin(ledPin, ledChannel);

loop里面控制舵机来回摇

  for(int i=0; i<120; i+=5){
    ledcWrite(ledChannel, map(i, 0, 180, 51, 102));
    get_pwm_info();
    delay(500);
  }

  for(int i=120; i>0; i-=5){
    ledcWrite(ledChannel, map(i, 0, 180, 51, 102));
    get_pwm_info();
    delay(500);
  }

完整的,之前连MQTT的先注释了,下次再加上MQTT的控制

#include <WiFi.h>
#include <Ethernet.h>
#include <PubSubClient.h>

const char* ssid     = "***";
const char* password = "***";
int currentDirection = 90;

const int freq = 50;
const int ledChannel = 0;
const int resolution = 10;//精度1024

const int ledPin = 5;

WiFiClient wifiClient;
PubSubClient client(wifiClient);

void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  int signal;
  for (int i=0;i<length;i++) {
    if((char)payload[i] == 'b'){

      digitalWrite(4, HIGH);
    }

    if((char)payload[i] == 'a'){
      digitalWrite(4, LOW);
    }

    if((char)payload[i] == 'r'){

    }

    if((char)payload[i] == 'l'){

    }
    Serial.print((char)payload[i]);
  }
  Serial.println();
}

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    // Attempt to connect
    if (client.connect("arduinoClient")) {
      Serial.println("connected");
      // Once connected, publish an announcement...
      client.publish("outTopic","hello world");
      // ... and resubscribe
      client.subscribe("inTopic");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

void setup()
{
    Serial.begin(115200);
    delay(10);

    // We start by connecting to a WiFi network

    Serial.println(ssid);
    Serial.println(password);
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());

    client.setServer("*.*.*.*", 1883);
    client.setCallback(callback);

    pinMode(4, OUTPUT);

    ledcSetup(ledChannel, freq, resolution);
    ledcAttachPin(ledPin, ledChannel);
}

void loop()
{
//  if (!client.connected()) {
//    reconnect();
//  }
//
//  client.loop();

  //周期20ms, 有效占空比是1ms-2ms,1ms时0°,2ms时120°
  //精度2^10=1024,那么有效占空比就是51-102,51时0°,102时120°
  //90°时就是(51+102)/2 = 76
//  ledcWrite(ledChannel, 76);

  for(int i=0; i<120; i+=5){
    ledcWrite(ledChannel, map(i, 0, 120, 51, 102));
    get_pwm_info();
    delay(500);
  }

  for(int i=120; i>0; i-=5){
    ledcWrite(ledChannel, map(i, 0, 120, 51, 102));
    get_pwm_info();
    delay(500);
  }
}

制作一个通过wifi联网,可以远程控制的小车(一)

小车

车身就直接购买了,后轮俩直流电机带动,前轮由一个舵机控制。

硬件

ESP32 连接wifi,提供网络通信能力
L298P 电机驱动,可以同时驱动两路直流电机,11V供电,然后将5V供电再提供给ESP32。



这个L298P原本是搭配UNO版的esp8266的,可以直接叠在上面的,结果装好插上电源8266就毁了,我也不知道咋回事,只能又买了个EPS32了。

软件方面

云端用mosquitto建立mqtt BROKER
ESP32上 建立mqtt客户端,通过云端broker和控制端利用发布订阅方式通信。

arduinoIDE用到的库:
WIFI — 连接wifi
SubPubClient — mqtt发布订阅客户端

实际操作

这个是接收到订阅的消息时的回调函数,这里用4引脚作为输出,当收到消息第一个字符是b时高,a时低,
然后把IO4接到驱动的蜂鸣器引脚上,就可以控制发声了(蜂鸣器的控制在D4引脚)

这里测试的话可以用一个mqtt客户端工具mqttx来进行测试

完成这一步,和小车的通信就打通了,下一步就是怎么通过消息来实现小车的控制了

void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  char m = (char)payload[0];
  if(m == 'b'){
  digitalWrite(4, HIGH);
  }

  if(m == 'a'){
    digitalWrite(4, LOW);
  }
  Serial.println(m);
  Serial.println();
}

这段代码呢,就是先连wifi,然后客户端连mqtt broker

完整代码

#include <WiFi.h>
#include <Ethernet.h>
#include <PubSubClient.h>

const char* ssid     = "***";
const char* password = "***";

WiFiClient wifiClient;
PubSubClient client(wifiClient);

void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  char m = (char)payload[0];
  if(m == 'b'){
  digitalWrite(4, HIGH);
  }

  if(m == 'a'){
    digitalWrite(4, LOW);
  }
  Serial.println(m);
  Serial.println();
}

void reconnect() {
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    if (client.connect("arduinoClient")) {
      Serial.println("connected");
      client.publish("outTopic","hello world");
      client.subscribe("inTopic");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      delay(5000);
    }
  }
}

void setup()
{
    Serial.begin(115200);
    delay(10);

    // We start by connecting to a WiFi network

    Serial.println(ssid);
    Serial.println(password);
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());

    client.setServer("81.*.*.*", 1883);
    client.setCallback(callback);

    pinMode(4, OUTPUT);
}

void loop()
{
  if (!client.connected()) {
    reconnect();
  }
  client.loop();
}